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.')}