BP-1293: Add theming support to new rich-text editor for basic redactor configuration #240
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| @use 'sass:map'; | ||
| @use 'necessary-mix/tables-generator' as tables; | ||
| @use 'necessary-mix/buttons-generator' as buttons; | ||
| @use 'necessary-mix/typography-generator' as typography; | ||
| @use 'necessary-mix/checkboxes-generator' as checkboxes; | ||
| @use 'necessary-mix/layout-generator' as layout; | ||
|
|
||
| @mixin generate-from($theme) { | ||
| @include typography.generate-from($theme); | ||
| @include tables.generate-from($theme); | ||
| @include buttons.generate-from($theme); | ||
| @include checkboxes.generate-from($theme); | ||
| @include layout.generate-from($theme); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| @use 'sass:map'; | ||
| @use '@angular/material' as mat; | ||
|
|
||
| $default-material-button: map.get(mat.define-typography-config(), 'button'); | ||
|
|
||
| @mixin generate-from($theme) { | ||
| $theming-buttons: map.get($theme, 'general', 'fonts', 'buttons'); | ||
|
|
||
| .enigmatry-redactor-content { | ||
| button, .rx-content button { | ||
|
|
||
| @if (theming-buttons, 'colors', 'primary') { | ||
| background-color: map.get($theme, 'general', 'colors', 'primary'); | ||
| } | ||
| @else { | ||
| background-color: mat.get-color-from-palette(mat.$primary-palette, 500); | ||
| } | ||
|
|
||
| @if (theming-buttons, 'family') and map.get($theming-buttons, 'family') != '' { | ||
| font-family: map.get($theming-buttons, 'family'); | ||
| } | ||
| @else { | ||
| font-family: map.get($default-material-button, 'font-family'); | ||
| font-weight: map.get($default-material-button, 'font-weight'); | ||
| } | ||
|
|
||
| @if (theming-buttons, 'size') { | ||
| font-size: map.get($theming-buttons, 'size'); | ||
| } | ||
| @else { | ||
| font-size: map.get($default-material-button, 'font-size'); | ||
| } | ||
| } | ||
|
|
||
| .rx-toolbar-buttons .rx-button { | ||
| &.active, &:hover { | ||
| @if map.get($theme, 'general', 'inputs', 'background') { | ||
|
There was a problem hiding this comment. This is duplicated extraction. We can just do it once and make null comparison if unset. |
||
| background: map.get($theme, 'general', 'inputs', 'background'); | ||
| } | ||
| @else { | ||
| background: transparent; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| @use 'sass:map'; | ||
| @use '@angular/material' as mat; | ||
|
|
||
| $redactor-checkboxes-selector: '[data-rx-type = 'todoitem'] '; | ||
| $default-material-checkbox: mat.get-color-from-palette(mat.define-palette(mat.$pink-palette), 500); | ||
jovana-marceta marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| @mixin generate-from($theme) { | ||
|
|
||
| $theming-checkboxes: map.get($theme, 'general', 'checkboxes'); | ||
|
|
||
| .enigmatry-redactor-content { | ||
|
|
||
| @if map.get($theme, 'general', 'colors', 'accent') { | ||
jovana-marceta marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| .rx-editor #{$redactor-checkboxes-selector} input:checked::before { | ||
| border-color: map.get($theme, 'general', 'colors', 'accent'); | ||
| background-color: map.get($theme, 'general', 'colors', 'accent'); | ||
| } | ||
| } | ||
| @else { | ||
| .rx-editor #{$redactor-checkboxes-selector} input:checked::before { | ||
| border-color: $default-material-checkbox; | ||
| background-color: $default-material-checkbox; | ||
| } | ||
| } | ||
|
|
||
| @if $theming-checkboxes { | ||
| .rx-editor #{$redactor-checkboxes-selector} input::before { | ||
| background-color: map.get($theming-checkboxes, 'background'); | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| @use 'sass:map'; | ||
|
|
||
| @mixin generate-from($theme) { | ||
| .enigmatry-redactor-content { | ||
| .rx-main-container, .rx-toolbox-container { | ||
| @if map.get($theme, 'general', 'inputs', 'background') { | ||
| background: map.get($theme, 'general', 'inputs', 'background'); | ||
| } | ||
| @else { | ||
| background: transparent; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| @use 'sass:map'; | ||
| @use '@angular/material' as mat; | ||
| @use 'scss-foundation/src/modules/lists/row-coloring' as list; | ||
|
|
||
| $redactor-th-selector: 'thead th'; | ||
| $body-typography: map.get(mat.define-typography-config(), 'body-1'); | ||
| $caption-typography: map.get(mat.define-typography-config(), 'caption'); | ||
|
|
||
| @mixin generate-from($theme) { | ||
| $theming-table: map.get($theme, 'tables', 'rows', 'odd-even-background'); | ||
| $theming-fonts: map.get($theme, 'general', 'fonts'); | ||
|
|
||
| .enigmatry-redactor-content { | ||
| table { | ||
| @if $theming-table { | ||
| tr { | ||
| @include list.odd-row-coloring(map.get($theming-table, 'odd')); | ||
| @include list.even-row-coloring(map.get($theming-table, 'even')); | ||
| } | ||
| } | ||
| @else { | ||
| tr { | ||
| @include list.even-row-coloring(mat.get-color-from-palette(mat.$grey-palette, 100)); | ||
typhoon41 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| @include list.odd-row-coloring(mat.get-color-from-palette(mat.$grey-palette, 50)); | ||
| } | ||
| } | ||
|
|
||
| @if (map.get($theme, 'tables', 'header', 'font-size')) { | ||
|
|
||
| th { | ||
| font-size: map.get($theme, 'tables', 'header', 'font-size'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| table, table td, table th { | ||
| /* stylelint-disable-next-line scss/at-if-no-null */ | ||
| @if $theming-fonts and map.has-key($theming-fonts, 'body') and map.get($theming-fonts, 'body', 'size') != null { | ||
|
There was a problem hiding this comment. Will it fail compiling if we just check directly size from body (without has key and previous check)? |
||
| font-size: map.get($theming-fonts, 'body', 'size'); | ||
| } | ||
| @else { | ||
| font-size: map.get($body-typography, 'font-size'); | ||
| } | ||
|
|
||
| #{$redactor-th-selector} { | ||
| /* stylelint-disable-next-line scss/at-if-no-null */ | ||
| @if map.has-key($theme, 'tables') and map.has-key(map.get($theme, 'tables', 'header'), 'font-size') | ||
|
There was a problem hiding this comment. The same applies for this one. |
||
| and map.get($theme, 'tables', 'header', 'font-size') != null { | ||
| font-size: map.get($theme, 'tables', 'header', 'font-size'); | ||
| } | ||
| @else { | ||
| font-size: map.get($caption-typography, 'font-size'); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /* stylelint-disable selector-max-compound-selectors, scss/at-if-no-null */ | ||
| @use 'sass:map'; | ||
| @use '@angular/material' as mat; | ||
|
|
||
| $body-typography: map.get(mat.define-typography-config(), 'body-1'); | ||
| $hero-typography: map.get(mat.define-typography-config(), 'headline-1'); | ||
| $title-typography: map.get(mat.define-typography-config(), 'subtitle-1'); | ||
| $caption-typography: map.get(mat.define-typography-config(), 'caption'); | ||
|
|
||
| @mixin generate-from($theme) { | ||
| $theming-fonts: map.get($theme, 'general', 'fonts'); | ||
|
|
||
| .enigmatry-redactor-content { | ||
| .rx-editor, .rx-content, .rx-content p { | ||
| @if $theming-fonts and map.has-key($theming-fonts, 'body') and map.get($theming-fonts, 'body', 'color') != null { | ||
|
There was a problem hiding this comment. I attempted various approaches to avoid the null value and bypass the stylelint rule, but unfortunately, none of them were successful. There was a problem hiding this comment. map.get($theming-fonts, 'body', 'color') != null fails to compile without previous checks if i.e. $theming-font is unset or there is no body defined in it? |
||
| color: map.get($theming-fonts, 'body', 'color'); | ||
| } | ||
| @else { | ||
| color: map.get($body-typography, 'color'); | ||
| } | ||
|
|
||
| @if $theming-fonts and map.has-key($theming-fonts, 'body') and map.get($theming-fonts, 'body', 'family') != '' { | ||
| font-family: map.get($theming-fonts, 'body', 'family'); | ||
| } | ||
| @else { | ||
| font-family: map.get($body-typography, 'font-family'); | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. This is too much duplication and hard to follow. Maybe an option to change this is to replace with the following:
|
||
| @if $theming-fonts and map.has-key($theming-fonts, 'body') and map.get($theming-fonts, 'body', 'size') != null { | ||
| font-size: map.get($theming-fonts, 'body', 'size'); | ||
| } | ||
| @else { | ||
| font-size: map.get($body-typography, 'font-size'); | ||
| } | ||
|
|
||
| @if $theming-fonts and map.has-key($theming-fonts, 'body') and map.get($theming-fonts, 'body', 'letter-spacing') != null { | ||
| letter-spacing: map.get($theming-fonts, 'body', 'letter-spacing'); | ||
| } | ||
| @else { | ||
| letter-spacing: map.get($body-typography, 'letter-spacing'); | ||
| } | ||
|
|
||
| /* stylelint-disable-next-line selector-max-combinators */ | ||
| h1, h2, h3, h4 { | ||
| @if $theming-fonts and map.has-key($theming-fonts, 'hero-titles') and map.get($theming-fonts, 'hero-titles', 'family') != '' { | ||
| font-family: map.get($theming-fonts, 'hero-titles', 'family'); | ||
| } | ||
| @else { | ||
| font-family: map.get($hero-typography, 'font-family'); | ||
| } | ||
|
|
||
| @if $theming-fonts and map.has-key($theming-fonts, 'hero-titles') and map.get($theming-fonts, 'hero-titles', 'letter-spacing') != null { | ||
| letter-spacing: map.get($theming-fonts, 'hero-titles', 'letter-spacing'); | ||
| } | ||
| @else { | ||
| letter-spacing: map.get($hero-typography, 'letter-spacing'); | ||
| } | ||
| } | ||
|
|
||
| /* stylelint-disable-next-line selector-max-combinators */ | ||
| h5, h6 { | ||
| @if $theming-fonts and map.has-key($theming-fonts, 'titles') and map.get($theming-fonts, 'titles', 'family') != '' { | ||
| font-family: map.get($theming-fonts, 'titles', 'family'); | ||
| } | ||
| @else { | ||
| font-family: map.get($title-typography, 'font-family'); | ||
| } | ||
|
|
||
| @if $theming-fonts and map.has-key($theming-fonts, 'titles') and map.get($theming-fonts, 'titles', 'letter-spacing') != null { | ||
| letter-spacing: map.get($theming-fonts, 'titles', 'letter-spacing'); | ||
| } | ||
| @else { | ||
| letter-spacing: map.get($title-typography, 'letter-spacing'); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| @use 'core/components'; | ||
| @use 'vendors/overrides'; | ||
jovana-marceta marked this conversation as resolved.
Show resolved
Hide resolved
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @use 'overrides/rich-text'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @use 'rich-text'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| @use 'scss-foundation/src/modules/display/items'; | ||
| @use '@angular/material' as mat; | ||
|
|
||
| $redactor-link-selectors: 'a, a:visited, a:focus, a:hover'; | ||
|
|
||
| .enigmatry-redactor-content .rx-content { | ||
| #{$redactor-link-selectors} { | ||
| @include items.fully-align(center, center); | ||
| display: inline-flex; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| button, #{$redactor-link-selectors} { | ||
| @include items.fully-align(center, flex-start); | ||
| height: 36px; | ||
| margin: 8px 8px 8px 0; | ||
| padding: 0 16px; | ||
| border: none; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| a:hover { | ||
| background-color: mat.get-color-from-palette(mat.$grey-palette, 100); | ||
| } | ||
|
|
||
| button { | ||
| @include mat.elevation(4); | ||
jovana-marceta marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| height: 36px; | ||
| border-radius: 4px; | ||
| color: #FFF; | ||
|
|
||
| &:hover { | ||
| @include mat.elevation(8); | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| @use '@angular/material' as mat; | ||
|
|
||
| $checkbox-width: 18px; | ||
jovana-marceta marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| $checkbox-height: 18px; | ||
| $border-radius: 2px; | ||
| $redactor-todoitem-selector: '.rx-editor [data-rx-type = 'todoitem']'; | ||
|
|
||
| .enigmatry-redactor-content #{$redactor-todoitem-selector} { | ||
| input { | ||
| width: $checkbox-width; | ||
| height: $checkbox-height; | ||
| } | ||
|
|
||
| input::before, input:checked::before { | ||
| width: $checkbox-width; | ||
| height: $checkbox-height; | ||
| border-radius: $border-radius; | ||
| border-color: rgb(0 0 0 / .54); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| @use 'sass:map'; | ||
| @use '@angular/material' as mat; | ||
|
|
||
| .enigmatry-redactor-content { | ||
| .rx-button-icon svg { | ||
| fill: rgb(0 0 0 / .54); | ||
| } | ||
|
|
||
| .rx-main-container { | ||
| border-color: rgb(0 0 0 / .38); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| @use 'general'; | ||
| @use 'tables'; | ||
| @use 'buttons'; | ||
| @use 'forms'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| /* stylelint-disable selector-max-compound-selectors, selector-max-type, selector-max-combinators */ | ||
| .enigmatry-redactor-content table { | ||
| th { | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| p { | ||
| margin: 0; | ||
| } | ||
|
|
||
| td { | ||
| border: 1px solid rgb(0 0 0 / .12); | ||
| } | ||
|
|
||
| tr:first-child { | ||
| th, td { | ||
| border-top: none; | ||
| } | ||
| } | ||
|
|
||
| tr:last-child td { | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| th, td { | ||
| border: { | ||
| right: none; | ||
| left: none; | ||
| } | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not aware of this comparison. Can you give us as some example of docs from which you learned this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made a mistake and forgot to add the $ sign to the theming-buttons variable. Condition should look like this:
@if (map.get($theme, 'general', 'fonts', 'buttons'), 'colors', 'primary')
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's fine. Short and sweat, but where did you find it? Nothing about that in official docs AFAIK?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The ability to pass multiple keys to map.get is a feature supported in Dart Sass, as described in the official Sass documentation. This functionality allows for concise access to deeply nested values in maps without chaining multiple map.get calls manually. It simplifies the process of working with complex nested data structures like our $theme map
This feature is documented in the official Sass sass:map module
Additionally, here are GitHub issuse tracking the feature:
sass/sass#1739
sass/dart-sass#1884
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not about map.get keys. We're using that on various places. The question was about if condition joined with such map syntax?
IDK how this would even compile: @if ($theming-buttons, 'colors', 'primary')
Is the intention to map.get primary color and then compare it with unset (null) value?