Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat!: Dropping Sass support from builtin annotatable block #35520

Draft
wants to merge 6 commits into
base: farhan/sass-to-css-video-block
Choose a base branch
from
Draft

feat!: Dropping Sass support from builtin annotatable block #35520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e119c4
feat!: Dropping Sass support from builtin video block, replacing with…
farhan Sep 19, 2024
d06142e
chore: Remove css comments and format the files
farhan Sep 20, 2024
c993f0e
chore: Delete converted scss files
farhan Sep 20, 2024
a509763
fix: fixes
farhan Sep 21, 2024
74218aa
feat!: Dropping Sass support from builtin annotatable block
farhan Sep 23, 2024
ff2262d
chore: chore
farhan Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion common/static/sass/_builtin-block-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@

:root {
--action-primary-active-bg: $action-primary-active-bg;
--all-text-inputs: $all-text-inputs;
--base-font-size: $base-font-size;
--base-line-height: $base-line-height;
--baseline: $baseline;
Expand All @@ -26,6 +25,7 @@
--blue-d1: $blue-d1;
--blue-d2: $blue-d2;
--blue-d4: $blue-d4;
--blue-s1: $blue-s1;
--body-color: $body-color;
--border-color: $border-color;
--bp-screen-lg: $bp-screen-lg;
Expand All @@ -34,6 +34,8 @@
--danger: $danger;
--darkGrey: $darkGrey;
--error-color: $error-color;
--error-color-dark: darken($error-color, 11%);
--error-color-light: lighten($error-color, 25%);
--font-bold: $font-bold;
--font-family-sans-serif: $font-family-sans-serif;
--general-color-accent: $general-color-accent;
Expand All @@ -44,6 +46,12 @@
--gray-l3: $gray-l3;
--gray-l4: $gray-l4;
--gray-l6: $gray-l6;
--icon-correct: url($static-path + '/images/correct-icon.png');
--icon-incorrect: url($static-path + '/images/incorrect-icon.png');
--icon-info: url($static-path + '/images/info-icon.png');
--icon-partially-correct: url($static-path + '/images/partially-correct-icon.png');
--icon-spinner: url($static-path + '/images/spinner.gif');
--icon-unanswered: url($static-path + '/images/unanswered-icon.png');
--incorrect: $incorrect;
--lightGrey: $lightGrey;
--lighter-base-font-color: $lighter-base-font-color;
Expand Down
6 changes: 3 additions & 3 deletions xmodule/annotatable_block.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.css')
add_webpack_js_to_fragment(fragment, 'AnnotatableBlockDisplay')
shim_xmodule_js(fragment, 'Annotatable')

Expand All @@ -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.css')
add_webpack_js_to_fragment(fragment, 'AnnotatableBlockEditor')
shim_xmodule_js(fragment, self.studio_js_module_name)
return fragment
151 changes: 151 additions & 0 deletions xmodule/assets/AnnotatableBlockDisplay.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
@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); }
3 changes: 0 additions & 3 deletions xmodule/assets/AnnotatableBlockDisplay.scss
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions xmodule/assets/AnnotatableBlockEditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.xmodule_edit.xmodule_AnnotatableBlock .CodeMirror {
background: #fff;
font-size: 13px;
color: #3c3c3c; }
3 changes: 0 additions & 3 deletions xmodule/assets/AnnotatableBlockEditor.scss
View file
Open in desktop

This file was deleted.

Loading
Loading