[Rt-commit] rt branch, 5.0/fix-rich-text-styles-dark-theme, repushed
Blaine Motsinger
blaine at bestpractical.com
Wed Jun 10 18:36:35 EDT 2020
The branch 5.0/fix-rich-text-styles-dark-theme was deleted and repushed:
was bee22d1eec965ad33f0824a1667aba539d32a538
now 55fa7286a6abf64acac8085072c90200e91d0ca4
1: c43ec97189 ! 1: 56b50fc059 Add darkmode and Content classes to ckeditor
@@ -1,9 +1,11 @@
Author: Blaine Motsinger <blaine at bestpractical.com>
- Add darkmode class to ckeditor iframe if darkmode
+ Add darkmode and Content classes to ckeditor
- CSS targets can't traverse iframe boundaries. Add a class to style
- the CKEditor iframe body content if the parent is in darkmode.
+ This commit adds darkmode and Content classes to the ckeditor
+ iframe body if the parent is in darkmode. The text color can then
+ be targetted correctly within the RichText/contents.css applied to
+ the editor's message body.
diff --git a/share/static/js/util.js b/share/static/js/util.js
--- a/share/static/js/util.js
@@ -13,17 +15,18 @@
}
});
+
-+// Add the darkmode class to the ckeditor iframe document body.
++// Add the darkmode and content type classes to the ckeditor iframe document body.
+// CSS targets can't traverse iframe boundaries so we need to do this to
+// style the CKEditor iframe body content if the parent is in darkmode.
+jQuery(function() {
+ if (document.body.classList.contains('darkmode')) {
+ var messageBoxId = document.querySelector('.messagebox').getAttribute('id');
++ var richTextEditor = CKEDITOR.instances[messageBoxId];
+
-+ if (CKEDITOR.instances && CKEDITOR.instances[messageBoxId]) {
-+ var richTextEditor = CKEDITOR.instances[messageBoxId];
++ if (richTextEditor) {
+ richTextEditor.on('instanceReady', function() {
-+ richTextEditor.document.getBody().addClass('darkmode');
++ this.document.getBody().addClass('darkmode');
++ this.document.getBody().addClass(messageBoxId);
+ });
+ }
+ }
2: bee22d1eec ! 2: 3d68797ba0 Fix darkmode styles for ckeditor
@@ -1,6 +1,9 @@
Author: Blaine Motsinger <blaine at bestpractical.com>
Fix darkmode styles for ckeditor
+
+ This commit contains general fixes to make the ckeditor styles
+ match the darkmode theme for RT.
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
--- a/share/static/css/elevator-dark/main.css
@@ -37,14 +40,10 @@
+ line-height: 2em;
+}
+
-+/* this target is added through util.js to the ckeditor iframe body if in darkmode */
-+body.cke_editable.darkmode:not(.placeholder) {
-+ color: #ededed !important;
-+}
-+
+.darkmode #cke_UpdateContent, .darkmode #cke_Content,
+.darkmode .cke_contents,
+.darkmode .cke_toolbar .cke_combo_button,
+.darkmode .cke_toolbar .cke_toolgroup {
+ border-color: #717171 !important;
+}
+
-: ------- > 3: 55fa7286a6 Fix text color for ckeditor in darkmode
More information about the rt-commit
mailing list