From e358489b9a797b9b6b3f1ec69b7e32ae91330d0c 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 | 25 ++++- .../sass/course-unit-mfe-iframe-bundle.scss | 100 ++++++++++++++---- .../partials/cms/theme/_variables-v1.scss | 5 + cms/templates/studio_xblock_wrapper.html | 2 +- 4 files changed, 108 insertions(+), 24 deletions(-) diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js index fb8fd2482d4e..b0c34c099a58 100644 --- a/cms/static/js/views/pages/container.js +++ b/cms/static/js/views/pages/container.js @@ -39,6 +39,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: { @@ -717,10 +718,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 @@ -814,6 +811,26 @@ function($, _, Backbone, gettext, BasePage, } }, + viewXBlockContent: function(event) { + try { + if (this.options.isIframeEmbed) { + event.preventDefault(); + var usageId = event.currentTarget.href.split('/').pop() || ''; + window.parent.postMessage( + { + type: 'handleViewXBlockContent', + payload: { + usageId: usageId, + }, + }, 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 a71882f1c355..0e1eb3089b38 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,54 @@ } } + .xblock-header-secondary { + border-radius: 0 0 4px 4px; + + .actions-list .action-item .action-button { + border-radius: 4px; + + &:hover { + background-color: $primary; + color: $white; + } + } + } + + &.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; + } + } + + a { + color: $primary; + } + } + + .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, .15), 0 1px 4px rgba(0, 0, 0, .15); + margin-bottom: ($baseline * 1.4); + } + &.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,27 +96,33 @@ border-bottom-right-radius: 6px; } - .wrapper-xblock .header-actions .actions-list .action-item .action-button { - @extend %button-styles; - - color: $primary; - - .fa-ellipsis-v { - font-size: $base-font-size; + .wrapper-xblock .header-actions .actions-list { + .action-actions-menu:last-of-type .nav-sub { + right: 120px; } - &:hover { - background-color: $primary; - color: $white; - border-color: $transparent; - } + .action-item .action-button { + @extend %button-styles; - &:focus { - outline: 2px $transparent; - background-color: $transparent; - box-shadow: inset 0 0 0 2px $primary; color: $primary; - border-color: $transparent; + + .fa-ellipsis-v { + font-size: $base-font-size; + } + + &:hover { + background-color: $primary; + color: $white; + border-color: $transparent; + } + + &:focus { + outline: 2px $transparent; + background-color: $transparent; + box-shadow: inset 0 0 0 2px $primary; + color: $primary; + border-color: $transparent; + } } } @@ -629,7 +691,7 @@ select { } } -.xblock-header-primary { +.xblock-header:not(.xblock-header-library_content, .xblock-header-split_test) .xblock-header-primary { position: relative; &::before { diff --git a/cms/static/sass/partials/cms/theme/_variables-v1.scss b/cms/static/sass/partials/cms/theme/_variables-v1.scss index a008210b25b2..8e63cce6f7d7 100644 --- a/cms/static/sass/partials/cms/theme/_variables-v1.scss +++ b/cms/static/sass/partials/cms/theme/_variables-v1.scss @@ -313,3 +313,8 @@ $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; +$xblock-message-warning-bg: #fffdf0; +$xblock-message-warning-border-color: #fff6bf; diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html index 41555410236a..8f4090588613 100644 --- a/cms/templates/studio_xblock_wrapper.html +++ b/cms/templates/studio_xblock_wrapper.html @@ -229,7 +229,7 @@
${_('This block contains multiple components.')}