diff --git a/cms/static/images/advanced-icon.svg b/cms/static/images/advanced-icon.svg new file mode 100644 index 000000000000..86096aefd236 --- /dev/null +++ b/cms/static/images/advanced-icon.svg @@ -0,0 +1,6 @@ + diff --git a/cms/static/images/drag-and-drop-v2-icon.svg b/cms/static/images/drag-and-drop-v2-icon.svg new file mode 100644 index 000000000000..733fb744d7b3 --- /dev/null +++ b/cms/static/images/drag-and-drop-v2-icon.svg @@ -0,0 +1,6 @@ + diff --git a/cms/static/images/library-icon.svg b/cms/static/images/library-icon.svg new file mode 100644 index 000000000000..86096aefd236 --- /dev/null +++ b/cms/static/images/library-icon.svg @@ -0,0 +1,6 @@ + diff --git a/cms/static/images/openassessment-icon.svg b/cms/static/images/openassessment-icon.svg new file mode 100644 index 000000000000..4841b6b43dae --- /dev/null +++ b/cms/static/images/openassessment-icon.svg @@ -0,0 +1,6 @@ + diff --git a/cms/static/images/problem-icon.svg b/cms/static/images/problem-icon.svg new file mode 100644 index 000000000000..7d51f436f7ee --- /dev/null +++ b/cms/static/images/problem-icon.svg @@ -0,0 +1,6 @@ + diff --git a/cms/static/images/text-icon.svg b/cms/static/images/text-icon.svg new file mode 100644 index 000000000000..8588a471c954 --- /dev/null +++ b/cms/static/images/text-icon.svg @@ -0,0 +1,3 @@ + diff --git a/cms/static/images/video-icon.svg b/cms/static/images/video-icon.svg new file mode 100644 index 000000000000..08f7444b621f --- /dev/null +++ b/cms/static/images/video-icon.svg @@ -0,0 +1,3 @@ + diff --git a/cms/static/js/views/components/add_xblock.js b/cms/static/js/views/components/add_xblock.js index 5f4911166937..4bdf0c7cb071 100644 --- a/cms/static/js/views/components/add_xblock.js +++ b/cms/static/js/views/components/add_xblock.js @@ -44,6 +44,20 @@ function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, Htm var type; event.preventDefault(); event.stopPropagation(); + + try { + if (this.options.isIframeEmbed) { + window.parent.postMessage( + { + type: 'showComponentTemplates', + payload: {} + }, document.referrer + ); + } + } catch (e) { + console.error(e); + } + type = $(event.currentTarget).data('type'); this.$('.new-component').slideUp(250); this.$('.new-component-' + type).slideDown(250); @@ -67,6 +81,20 @@ function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, Htm oldOffset = ViewUtils.getScrollOffset(this.$el); event.preventDefault(); this.closeNewComponent(event); + + try { + if (this.options.isIframeEmbed) { + window.parent.postMessage( + { + type: 'createNewComponent', + payload: {} + }, document.referrer + ); + } + } catch (e) { + console.error(e); + } + ViewUtils.runOperationShowingMessage( gettext('Adding'), _.bind(this.options.createComponent, this, saveData, $element) diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js index 4b16370aec30..ba33e3082f20 100644 --- a/cms/static/js/views/pages/container.js +++ b/cms/static/js/views/pages/container.js @@ -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(); }); diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss index 54d40ff7c55d..a5fb0b8c4187 100644 --- a/cms/static/sass/course-unit-mfe-iframe-bundle.scss +++ b/cms/static/sass/course-unit-mfe-iframe-bundle.scss @@ -5,6 +5,11 @@ body { min-width: 800px; } +body, +#main { + background-color: transparent; +} + .wrapper { .inner-wrapper { max-width: 100%; @@ -70,13 +75,21 @@ body { } } - .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-library_content, + .xblock-author_view-split_test { + & > .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, .15), 0 1px 4px rgba(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 { @@ -97,6 +110,10 @@ body { } .wrapper-xblock .header-actions .actions-list { + .wrapper-nav-sub { + z-index: 11; + } + .action-actions-menu:last-of-type .nav-sub { right: 120px; } @@ -711,3 +728,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; + } + } + } + } +} diff --git a/cms/static/sass/partials/cms/theme/_variables-v1.scss b/cms/static/sass/partials/cms/theme/_variables-v1.scss index 8e63cce6f7d7..e7be52fb8675 100644 --- a/cms/static/sass/partials/cms/theme/_variables-v1.scss +++ b/cms/static/sass/partials/cms/theme/_variables-v1.scss @@ -318,3 +318,14 @@ $xblock-message-info-bg: #eff8fa; $xblock-message-info-border-color: #9cd2e6; $xblock-message-warning-bg: #fffdf0; $xblock-message-warning-border-color: #fff6bf; + +$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" +);