From b3f2f93f3cdaddf9e5aaeffeca75b8861fcd6acf Mon Sep 17 00:00:00 2001 From: farhan Date: Thu, 24 Oct 2024 15:40:09 +0500 Subject: [PATCH 1/2] feat!: Dropping Sass support from builtin annotatable block, replacing with vanilla CSS --- xmodule/annotatable_block.py | 6 +- xmodule/assets/AnnotatableBlockDisplay.scss | 3 - xmodule/assets/AnnotatableBlockEditor.scss | 3 - xmodule/assets/annotatable/_display.scss | 197 -------------- .../AnnotatableBlockDisplay.css | 243 ++++++++++++++++++ .../AnnotatableBlockEditor.css | 5 + 6 files changed, 251 insertions(+), 206 deletions(-) delete mode 100644 xmodule/assets/AnnotatableBlockDisplay.scss delete mode 100644 xmodule/assets/AnnotatableBlockEditor.scss delete mode 100644 xmodule/assets/annotatable/_display.scss create mode 100644 xmodule/static/css-builtin-blocks/AnnotatableBlockDisplay.css create mode 100644 xmodule/static/css-builtin-blocks/AnnotatableBlockEditor.css diff --git a/xmodule/annotatable_block.py b/xmodule/annotatable_block.py index e41e2b17a52f..73344a92651e 100644 --- a/xmodule/annotatable_block.py +++ b/xmodule/annotatable_block.py @@ -11,7 +11,7 @@ from openedx.core.djangolib.markup import HTML, Text from xmodule.editing_block import EditingMixin from xmodule.raw_block import RawMixin -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.xml_block import XmlMixin from xmodule.x_module import ( ResourceTemplates, @@ -180,7 +180,7 @@ def student_view(self, context): # lint-amnesty, pylint: disable=unused-argumen """ fragment = Fragment() fragment.add_content(self.get_html()) - add_sass_to_fragment(fragment, 'AnnotatableBlockDisplay.scss') + add_css_to_fragment(fragment, 'AnnotatableBlockDisplay.scss') add_webpack_js_to_fragment(fragment, 'AnnotatableBlockDisplay') shim_xmodule_js(fragment, 'Annotatable') @@ -193,7 +193,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'AnnotatableBlockEditor.scss') + add_css_to_fragment(fragment, 'AnnotatableBlockEditor.scss') add_webpack_js_to_fragment(fragment, 'AnnotatableBlockEditor') shim_xmodule_js(fragment, self.studio_js_module_name) return fragment diff --git a/xmodule/assets/AnnotatableBlockDisplay.scss b/xmodule/assets/AnnotatableBlockDisplay.scss deleted file mode 100644 index 66e1e756f3da..000000000000 --- a/xmodule/assets/AnnotatableBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_AnnotatableBlock { - @import "annotatable/display.scss"; -} diff --git a/xmodule/assets/AnnotatableBlockEditor.scss b/xmodule/assets/AnnotatableBlockEditor.scss deleted file mode 100644 index 8f2852422d7d..000000000000 --- a/xmodule/assets/AnnotatableBlockEditor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_edit.xmodule_AnnotatableBlock { - @import "codemirror/codemirror.scss"; -} diff --git a/xmodule/assets/annotatable/_display.scss b/xmodule/assets/annotatable/_display.scss deleted file mode 100644 index 9aaa8649c6c5..000000000000 --- a/xmodule/assets/annotatable/_display.scss +++ /dev/null @@ -1,197 +0,0 @@ -/* TODO: move top-level variables to a common _variables.scss. - * NOTE: These variables were only added here because when this was integrated with the CMS, - * SASS compilation errors were triggered because the CMS didn't have the same variables defined - * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. - * -Abarrett and Vshnayder - */ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - -$annotatable--border-color: var(--gray-l3); -$annotatable--body-font-size: em(14); - -.annotatable-wrapper { - position: relative; -} - -.annotatable-header { - margin-bottom: 0.5em; -} - -.annotatable-section { - position: relative; - padding: 0.5em 1em; - border: 1px solid $annotatable--border-color; - border-radius: 0.5em; - margin-bottom: 0.5em; - - &.shaded { background-color: #ededed; } - - .annotatable-section-title { - font-weight: bold; - a { font-weight: normal; } - } - - .annotatable-section-body { - border-top: 1px solid $annotatable--border-color; - margin-top: 0.5em; - padding-top: 0.5em; - - @include clearfix(); - } - - ul.instructions-template { - list-style: disc; - margin-left: 4em; - b { font-weight: bold; } - i { font-style: italic; } - - code { - display: inline; - white-space: pre; - font-family: Courier New, monospace; - } - } -} - -.annotatable-toggle { - position: absolute; - right: 0; - margin: 2px 1em 2px 0; - &.expanded::after { content: " \2191"; } - &.collapsed::after { content: " \2193"; } -} - -.annotatable-span { - @extend %ui-fake-link; - - display: inline; - - $highlight_index: 0; - - @each $highlight in ( - (yellow rgba(255, 255,10, 0.3) rgba(255, 255,10, 0.9)), - (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)), - (orange rgba(255,165,0, 0.3) rgba(255,165,0, 0.9)), - (green rgba(25,255,132,0.3) rgba(25,255,132,0.9)), - (blue rgba(35,163,255,0.3) rgba(35,163,255,0.9)), - (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) { - - $highlight_index: $highlight_index + 1; - $marker: nth($highlight, 1); - $color: nth($highlight, 2); - $selected_color: nth($highlight, 3); - - @if $highlight_index == 1 { - &.highlight { - background-color: $color; - &.selected { background-color: $selected_color; } - } - } - - &.highlight-#{$marker} { - background-color: $color; - &.selected { background-color: $selected_color; } - } - } - - &.hide { - cursor: none; - background-color: inherit; - - .annotatable-icon { - display: none; - } - } - - .annotatable-comment { - display: none; - } -} - -.ui-tooltip.qtip.ui-tooltip { - font-size: $annotatable--body-font-size; - border: 1px solid #333; - border-radius: 1em; - background-color: rgba(0, 0, 0, 0.85); - color: var(--white); - -webkit-font-smoothing: antialiased; - - .ui-tooltip-titlebar { - font-size: em(16); - color: inherit; - background-color: transparent; - padding: calc((var(--baseline)/4)) calc((var(--baseline)/2)); - border: none; - - .ui-tooltip-title { - padding: calc((var(--baseline)/4)) 0; - border-bottom: 2px solid #333; - font-weight: bold; - } - - .ui-tooltip-icon { - right: 10px; - background: #333; - } - - .ui-state-hover { - color: inherit; - border: 1px solid var(--gray-l3); - } - } - - .ui-tooltip-content { - color: inherit; - font-size: em(14); - text-align: left; - font-weight: 400; - padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)); - background-color: transparent; - border-color: transparent; - } - - p { - color: inherit; - line-height: normal; - } -} - -.ui-tooltip.qtip.ui-tooltip-annotatable { - max-width: 375px; - - .ui-tooltip-content { - padding: 0 calc((var(--baseline)/2)); - - .annotatable-comment { - display: block; - margin: 0 0 calc((var(--baseline)/2)) 0; - max-height: 225px; - overflow: auto; - line-height: normal; - } - - .annotatable-reply { - display: block; - border-top: 2px solid #333; - padding: calc((var(--baseline)/4)) 0; - margin: 0; - text-align: center; - } - } - - &::after { - content: ''; - display: inline-block; - position: absolute; - bottom: -20px; - left: 50%; - height: 0; - width: 0; - margin-left: calc(-1 * (var(--baseline) / 4)); - border: 10px solid transparent; - border-top-color: rgba(0, 0, 0, 0.85); - } -} diff --git a/xmodule/static/css-builtin-blocks/AnnotatableBlockDisplay.css b/xmodule/static/css-builtin-blocks/AnnotatableBlockDisplay.css new file mode 100644 index 000000000000..45b395ec66ab --- /dev/null +++ b/xmodule/static/css-builtin-blocks/AnnotatableBlockDisplay.css @@ -0,0 +1,243 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); + +.xmodule_display.xmodule_AnnotatableBlock { + /* TODO: move top-level variables to a common _variables.scss. + * NOTE: These variables were only added here because when this was integrated with the CMS, + * SASS compilation errors were triggered because the CMS didn't have the same variables defined + * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. + * -Abarrett and Vshnayder + */ + /* stylelint-disable-line */ + /* stylelint-disable-line */ +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-wrapper { + position: relative; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-header { + margin-bottom: 0.5em; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section { + position: relative; + padding: 0.5em 1em; + border: 1px solid var(--gray-l3); + border-radius: 0.5em; + margin-bottom: 0.5em; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section.shaded { + background-color: #ededed; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title { + font-weight: bold; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title a { + font-weight: normal; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body { + border-top: 1px solid var(--gray-l3); + margin-top: 0.5em; + padding-top: 0.5em; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template { + list-style: disc; + margin-left: 4em; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template b { + font-weight: bold; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template i { + font-style: italic; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template code { + display: inline; + white-space: pre; + font-family: Courier New, monospace; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle { + position: absolute; + right: 0; + margin: 2px 1em 2px 0; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.expanded::after { + content: " \2191"; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.collapsed::after { + content: " \2193"; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span { + display: inline; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight { + background-color: rgba(255, 255, 10, 0.3); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight.selected { + background-color: rgba(255, 255, 10, 0.9); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow { + background-color: rgba(255, 255, 10, 0.3); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow.selected { + background-color: rgba(255, 255, 10, 0.9); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red { + background-color: rgba(178, 19, 16, 0.3); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red.selected { + background-color: rgba(178, 19, 16, 0.9); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange { + background-color: rgba(255, 165, 0, 0.3); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange.selected { + background-color: rgba(255, 165, 0, 0.9); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green { + background-color: rgba(25, 255, 132, 0.3); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green.selected { + background-color: rgba(25, 255, 132, 0.9); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue { + background-color: rgba(35, 163, 255, 0.3); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue.selected { + background-color: rgba(35, 163, 255, 0.9); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple { + background-color: rgba(115, 9, 178, 0.3); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple.selected { + background-color: rgba(115, 9, 178, 0.9); +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide { + cursor: none; + background-color: inherit; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide .annotatable-icon { + display: none; +} + +.xmodule_display.xmodule_AnnotatableBlock .annotatable-span .annotatable-comment { + display: none; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip { + font-size: 0.875em; + border: 1px solid #333; + border-radius: 1em; + background-color: rgba(0, 0, 0, 0.85); + color: var(--white); + -webkit-font-smoothing: antialiased; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar { + font-size: 1em; + color: inherit; + background-color: transparent; + padding: calc((var(--baseline) / 4)) calc((var(--baseline) / 2)); + border: none; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-title { + padding: calc((var(--baseline) / 4)) 0; + border-bottom: 2px solid #333; + font-weight: bold; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-icon { + right: 10px; + background: #333; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-state-hover { + color: inherit; + border: 1px solid var(--gray-l3); +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-content { + color: inherit; + font-size: 0.875em; + text-align: left; + font-weight: 400; + padding: 0 calc((var(--baseline) / 2)) calc((var(--baseline) / 2)) calc((var(--baseline) / 2)); + background-color: transparent; + border-color: transparent; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip p { + color: inherit; + line-height: normal; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable { + max-width: 375px; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content { + padding: 0 calc((var(--baseline) / 2)); +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-comment { + display: block; + margin: 0 0 calc((var(--baseline) / 2)) 0; + max-height: 225px; + overflow: auto; + line-height: normal; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-reply { + display: block; + border-top: 2px solid #333; + padding: calc((var(--baseline) / 4)) 0; + margin: 0; + text-align: center; +} + +.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable::after { + content: ''; + display: inline-block; + position: absolute; + bottom: -20px; + left: 50%; + height: 0; + width: 0; + margin-left: calc(-1 * (var(--baseline) / 4)); + border: 10px solid transparent; + border-top-color: rgba(0, 0, 0, 0.85); +} diff --git a/xmodule/static/css-builtin-blocks/AnnotatableBlockEditor.css b/xmodule/static/css-builtin-blocks/AnnotatableBlockEditor.css new file mode 100644 index 000000000000..498cbda9ffc4 --- /dev/null +++ b/xmodule/static/css-builtin-blocks/AnnotatableBlockEditor.css @@ -0,0 +1,5 @@ +.xmodule_edit.xmodule_AnnotatableBlock .CodeMirror { + background: #fff; + font-size: 13px; + color: #3c3c3c; +} From b34437b287e25e6a7eea9c464673bc0336df9859 Mon Sep 17 00:00:00 2001 From: farhan Date: Thu, 24 Oct 2024 19:07:06 +0500 Subject: [PATCH 2/2] chore: chore --- xmodule/annotatable_block.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/xmodule/annotatable_block.py b/xmodule/annotatable_block.py index 73344a92651e..cec677f6c5d5 100644 --- a/xmodule/annotatable_block.py +++ b/xmodule/annotatable_block.py @@ -180,7 +180,7 @@ def student_view(self, context): # lint-amnesty, pylint: disable=unused-argumen """ fragment = Fragment() fragment.add_content(self.get_html()) - add_css_to_fragment(fragment, 'AnnotatableBlockDisplay.scss') + add_css_to_fragment(fragment, 'AnnotatableBlockDisplay.css') add_webpack_js_to_fragment(fragment, 'AnnotatableBlockDisplay') shim_xmodule_js(fragment, 'Annotatable') @@ -193,7 +193,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_css_to_fragment(fragment, 'AnnotatableBlockEditor.scss') + add_css_to_fragment(fragment, 'AnnotatableBlockEditor.css') add_webpack_js_to_fragment(fragment, 'AnnotatableBlockEditor') shim_xmodule_js(fragment, self.studio_js_module_name) return fragment