From ba2871b1030310ce55c438335af6d880328047e0 Mon Sep 17 00:00:00 2001 From: ihor-romaniuk Date: Wed, 6 Nov 2024 12:43:53 +0100 Subject: [PATCH] feat: [FC-0070] add message events and styles to the library content page --- cms/static/js/views/pages/container.js | 24 +++++-- .../sass/course-unit-mfe-iframe-bundle.scss | 63 ++++++++++++++----- .../partials/cms/theme/_variables-v1.scss | 3 + cms/templates/studio_xblock_wrapper.html | 2 +- 4 files changed, 70 insertions(+), 22 deletions(-) diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js index 5a5972fb1161..4b16370aec30 100644 --- a/cms/static/js/views/pages/container.js +++ b/cms/static/js/views/pages/container.js @@ -35,6 +35,7 @@ function($, _, Backbone, gettext, BasePage, 'click .manage-tags-button': 'openManageTags', 'change .header-library-checkbox': 'toggleLibraryComponent', 'click .collapse-button': 'collapseXBlock', + 'click .xblock-view-action-button': 'viewXBlockContent', }, options: { @@ -618,10 +619,6 @@ function($, _, Backbone, gettext, BasePage, this.deleteComponent(this.findXBlockElement(event.target)); }, - createPlaceholderElement: function() { - return $('
', {class: 'studio-xblock-wrapper'}); - }, - createComponent: function(template, target) { // A placeholder element is created in the correct location for the new xblock // and then onNewXBlock will replace it with a rendering of the xblock. Note that @@ -715,6 +712,25 @@ function($, _, Backbone, gettext, BasePage, } }, + viewXBlockContent: function(event) { + try { + if (this.options.isIframeEmbed) { + event.preventDefault(); + window.parent.postMessage( + { + type: 'handleViewXBlockContent', + payload: { + destination: event.currentTarget.href || '', + }, + }, document.referrer + ); + return true; + } + } catch (e) { + console.error(e); + } + }, + toggleSaveButton: function() { var $saveButton = $('.nav-actions .save-button'); if (JSON.stringify(this.selectedLibraryComponents.sort()) === JSON.stringify(this.storedSelectedLibraryComponents.sort())) { diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss index 95774ea74058..df973ea1d11a 100644 --- a/cms/static/sass/course-unit-mfe-iframe-bundle.scss +++ b/cms/static/sass/course-unit-mfe-iframe-bundle.scss @@ -1,14 +1,22 @@ @import 'cms/theme/variables-v1'; @import 'elements/course-unit-mfe-iframe'; +body { + min-width: 800px; +} + .wrapper { + .inner-wrapper { + max-width: 100%; + } + .wrapper-xblock { background-color: $transparent; border-radius: 6px; border: none; &:hover { - border-color: none; + border-color: transparent; } .xblock-header-primary { @@ -23,6 +31,21 @@ } } + &.level-page .xblock-message { + font-size: 16px; + line-height: 22px; + color: $text-color; + border-radius: 4px; + padding: ($baseline * 1.2); + margin-bottom: ($baseline * 1.4); + box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .15); + + &.information { + background-color: $xblock-message-info-bg; + border-color: $xblock-message-info-border-color; + } + } + &.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; @@ -40,26 +63,32 @@ border-bottom-right-radius: 6px; } - .wrapper-xblock .header-actions .actions-list .action-item .action-button { - @extend %button-styles; + .wrapper-xblock .header-actions .actions-list { + .action-actions-menu:last-of-type .nav-sub { + right: 120px; + } - color: $black; + .action-item .action-button { + @extend %button-styles; - .fa-ellipsis-v { - font-size: $base-font-size; - } + color: $black; - &:hover { - background-color: $primary; - border-color: $transparent; - } + .fa-ellipsis-v { + font-size: $base-font-size; + } - &:focus { - outline: 2px $transparent; - background-color: $transparent; - box-shadow: inset 0 0 0 2px $primary; - color: $primary; - border-color: $transparent; + &:hover { + background-color: $primary; + border-color: $transparent; + } + + &:focus { + outline: 2px $transparent; + background-color: $transparent; + box-shadow: inset 0 0 0 2px $primary; + color: $primary; + border-color: $transparent; + } } } diff --git a/cms/static/sass/partials/cms/theme/_variables-v1.scss b/cms/static/sass/partials/cms/theme/_variables-v1.scss index a008210b25b2..c5399083cc27 100644 --- a/cms/static/sass/partials/cms/theme/_variables-v1.scss +++ b/cms/static/sass/partials/cms/theme/_variables-v1.scss @@ -313,3 +313,6 @@ $light-background-color: #e1dddb !default; $border-color: #707070 !default; $base-font-size: 18px !default; $dark: #212529; + +$xblock-message-info-bg: #eff8fa; +$xblock-message-info-border-color: #9cd2e6; diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html index 282629456633..67e245210346 100644 --- a/cms/templates/studio_xblock_wrapper.html +++ b/cms/templates/studio_xblock_wrapper.html @@ -197,7 +197,7 @@
${_('This block contains multiple components.')}