Skip to content

Commit

Permalink
feat: [FC-0070] add events and style for rendering Split xblock in ch…
Browse files Browse the repository at this point in the history 
…romeless template
  • Loading branch information
@ihor-romaniuk
ihor-romaniuk committed Nov 12, 2024
1 parent ea6c563 commit c054eb1
Show file tree
Hide file tree
Showing 11 changed files with 219 additions and 44 deletions.
6 changes: 6 additions & 0 deletions cms/static/images/advanced-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions cms/static/images/drag-and-drop-v2-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions cms/static/images/library-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions cms/static/images/openassessment-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions cms/static/images/problem-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions cms/static/images/text-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions cms/static/images/video-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 29 additions & 1 deletion cms/static/js/views/components/add_xblock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,37 @@ function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, Htm
},

showComponentTemplates: function(event) {
var type;
var type, parentLocator, model;
event.preventDefault();
event.stopPropagation();

type = $(event.currentTarget).data('type');
parentLocator = $(event.currentTarget).closest('.xblock[data-usage-id]').data('usage-id');
model = this.collection.models.find(function(item) { return item.type === type; }) || {};

try {
if (this.options.isIframeEmbed) {
window.parent.postMessage(
{
type: 'showComponentTemplates',
payload: {
type: type,
parentLocator: parentLocator,
model: {
type: model.type,
display_name: model.display_name,
templates: model.templates,
support_legend: model.support_legend,
},
}
}, document.referrer
);
}
return true;
} catch (e) {
console.error(e);
}

this.$('.new-component').slideUp(250);
this.$('.new-component-' + type).slideDown(250);
this.$('.new-component-' + type + ' div').focus();
Expand All @@ -67,6 +94,7 @@ function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, Htm
oldOffset = ViewUtils.getScrollOffset(this.$el);
event.preventDefault();
this.closeNewComponent(event);

ViewUtils.runOperationShowingMessage(
gettext('Adding'),
_.bind(this.options.createComponent, this, saveData, $element)
Expand Down
6 changes: 4 additions & 2 deletions cms/static/js/views/pages/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,12 +214,14 @@ function($, _, Backbone, gettext, BasePage,

renderAddXBlockComponents: function() {
var self = this;
if (self.options.canEdit && !self.options.isIframeEmbed) {
var isSplitTest = self.model.attributes.category == 'split_test';
if (self.options.canEdit && (!self.options.isIframeEmbed || isSplitTest)) {
this.$('.add-xblock-component').each(function(index, element) {
var component = new AddXBlockComponent({
el: element,
createComponent: _.bind(self.createComponent, self),
collection: self.options.templates
collection: self.options.templates,
isIframeEmbed: self.options.isIframeEmbed,
});
component.render();
});
Expand Down
172 changes: 133 additions & 39 deletions cms/static/sass/course-unit-mfe-iframe-bundle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ body {
min-width: 800px;
}

body,
#main {
background-color: transparent;
}

.wrapper {
.inner-wrapper {
max-width: 100%;
Expand Down Expand Up @@ -44,59 +49,89 @@ body {
}
}

&.level-page .xblock-message {
padding: ($baseline * .75) ($baseline * 1.2);
border-radius: 0 0 4px 4px;

&.information {
color: $text-color;
background-color: $xblock-message-info-bg;
border-color: $xblock-message-info-border-color;
}

&.validation.has-warnings {
color: $black;
background-color: $xblock-message-warning-bg;
border-color: $xblock-message-warning-border-color;
border-top-width: 1px;

.icon {
color: $xblock-message-warning-border-color;
&.level-page {
.xblock-message {
padding: ($baseline * .75) ($baseline * 1.2);
border-radius: 0 0 4px 4px;

.xblock-message-list {
color: $black;
}

&.information,
&.validation.has-warnings,
&.validation.has-errors {
color: $black;
border-width: 0;
font-size: 16px;
line-height: 22px;
padding: ($baseline * 1.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
}

&.information {
background-color: $xblock-message-info-bg;

.icon {
color: $xblock-message-info-icon-color;
}
}

&.validation.has-warnings {
background-color: $xblock-message-warning-bg;

.icon {
color: $xblock-message-warning-icon-color;
}
}

&.validation.has-errors {
background-color: $xblock-message-error-bg;

.icon {
color: $xblock-message-error-icon-color;
}
}

a {
color: $primary;
}
}
}

a {
color: $primary;
}
&.studio-xblock-wrapper > .wrapper-xblock-message .xblock-message,
.xblock > .wrapper-xblock-message .xblock-message {
border-radius: 4px;
margin-bottom: ($baseline * 1.4);
}
}

.xblock-author_view-library_content > .wrapper-xblock-message .xblock-message {
font-size: 16px;
line-height: 22px;
border-radius: 4px;
padding: ($baseline * 1.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.15);
margin-bottom: ($baseline * 1.4);
.xblock-author_view-split_test .wrapper-xblock {
background: $white;
box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .15);
}

&.level-element {
box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .15);
margin: 0 0 ($baseline * 1.4) 0;
}

&.level-element .xblock-header-primary {
background-color: $white;
}
.xblock-header-primary {
background-color: $white;
}

&.level-element .xblock-render {
background: $white;
margin: 0;
padding: $baseline;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
.xblock-render {
background: $white;
margin: 0;
padding: $baseline;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
}

.wrapper-xblock .header-actions .actions-list {
.wrapper-nav-sub {
z-index: 11;
}

.action-actions-menu:last-of-type .nav-sub {
right: 120px;
}
Expand Down Expand Up @@ -711,3 +746,62 @@ select {
.wrapper-comp-setting.metadata-list-enum .action.setting-clear.active {
margin-top: 0;
}

.xblock-render .add-xblock-component {
background: transparent;
padding: $baseline;

.new-component {
h5 {
margin-bottom: ($baseline * 1.2);
font-size: 22px;
font-weight: 700;
color: $black;
}

.new-component-type {
display: flex;
flex-wrap: wrap;
gap: ($baseline * .6);
align-items: center;
justify-content: center;

.add-xblock-component-button {
box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
width: 186px;
height: 110px;
color: $primary;
border-color: $primary;
background: transparent;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: ($baseline * .4);

&:hover {
color: #082644; // TODO: replace with variable
background-color: #f0f3f5; // TODO: replace with variable
border-color: #07223c; // TODO: replace with variable
}

.large-template-icon {
width: 24px;
height: 24px;
background-color: $primary;

@each $name, $file in $template-icon-map {
&.large-#{$name}-icon {
mask: url("#{$static-path}/images/#{$file}.svg") center no-repeat;
}
}
}

.name {
color: inherit;
}
}
}
}
}
19 changes: 17 additions & 2 deletions cms/static/sass/partials/cms/theme/_variables-v1.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,21 @@ $base-font-size: 18px !default;
$dark: #212529;

$xblock-message-info-bg: #eff8fa;
$xblock-message-info-border-color: #9cd2e6;
$xblock-message-info-icon-color: #9cd2e6;

$xblock-message-warning-bg: #fffdf0;
$xblock-message-warning-border-color: #fff6bf;
$xblock-message-warning-icon-color: #ffd900;

$xblock-message-error-bg: #fbf2f3;
$xblock-message-error-icon-color: #c32d3a;

$template-icon-map: (
"library": "library-icon",
"advanced": "advanced-icon",
"html": "html-icon",
"openassessment": "openassessment-icon",
"problem": "problem-icon",
"video": "video-icon",
"drag-and-drop-v2": "drag-and-drop-v2-icon",
"text": "text-icon"
);

0 comments on commit c054eb1

Please sign in to comment.