[Rt-commit] rt branch, 5.0/fix-rich-text-styles-dark-theme, created. rt-5.0.0beta1-6-g0ec6a30092
Blaine Motsinger
blaine at bestpractical.com
Fri Jun 12 16:46:11 EDT 2020
The branch, 5.0/fix-rich-text-styles-dark-theme has been created
at 0ec6a30092444441c3f86544a6ec4e9c0a191f24 (commit)
- Log -----------------------------------------------------------------
commit 0c97bfcd001845bb98b907e01416664cb13999ad
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Tue Jun 9 21:08:45 2020 -0500
Add darkmode and Content classes to ckeditor
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
index 1cbd739e53..bb4aa1bf1b 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -1016,3 +1016,17 @@ jQuery(function() {
}
}
});
+
+// 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') && RT.Config.MessageBoxRichText && document.querySelector('.messagebox')) {
+ var messageBoxId = document.querySelector('.messagebox').getAttribute('id');
+
+ CKEDITOR.instances[messageBoxId].on('instanceReady', function() {
+ this.document.getBody().addClass('darkmode');
+ this.document.getBody().addClass(messageBoxId);
+ });
+ }
+});
commit e736082d5ade907366971424d4eac1070106dcdd
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Jun 10 17:21:39 2020 -0500
Fix text color for ckeditor in darkmode
The CSS rule here only applies to the ckeditor iframe body text
when in darkmode, and only for the body text when not adding an
update to the ticket. The text color needs to remain for comment
and reply on yellow and red background-color.
diff --git a/share/static/RichText/contents.css b/share/static/RichText/contents.css
index 84f04583af..3f44416590 100644
--- a/share/static/RichText/contents.css
+++ b/share/static/RichText/contents.css
@@ -28,6 +28,13 @@ body
word-wrap: break-word;
}
+/* The darkmode and Content classes are added to the ckeditor iframe document body by util.js if elevator-dark theme is running
+ and the ticket is not being updated (comment/reply vs new ticket). */
+.cke_editable.darkmode.Content:not(.placeholder)
+{
+ color: #ededed !important;
+}
+
blockquote
{
font-style: italic;
commit b4670b4b575cf25abb2c7f6eceb0a62f0d3157d6
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Thu Jun 11 15:47:40 2020 -0500
Fix background colors for ckeditor darkmode
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 3874c165ab..c8b8a2127f 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -321,3 +321,28 @@
.darkmode ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='i-chevron-right' viewBox='0 0 7 12' height='100%' width='100%' fill='none' stroke='rgb(237,237,237)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M1 1 l5 5 -5 5' /></svg>") no-repeat center center;
}
+
+/* CKEditor darkmode fixes */
+
+.darkmode .cke_toolbar .cke_combo_button,
+.darkmode .cke_toolbox .cke_toolbar .cke_combo .cke_combo_text,
+.darkmode .cke_toolbox .cke_toolbar .cke_combo .cke_combo_open,
+.darkmode .cke_toolbox .cke_toolbar .cke_toolgroup,
+.darkmode .cke_toolbox .cke_toolbar .cke_toolgroup a,
+.darkmode #cke_Content .cke_contents .cke_wysiwyg_frame {
+ background-color: #333d42 !important;
+}
+
+.darkmode #cke_Content .cke_inner,
+.darkmode .cke_toolbox .cke_toolbar,
+.darkmode #cke_UpdateContent,
+.darkmode #cke_Content,
+.darkmode #cke_UpdateContent .cke_top,
+.darkmode #cke_Content .cke_top,
+.darkmode .cke_toolbox .cke_toolbar .cke_combo,
+.darkmode #cke_UpdateContent .cke_bottom,
+.darkmode #cke_Content .cke_bottom,
+.darkmode #cke_UpdateContent .cke_bottom .cke_resizer,
+.darkmode #cke_Content .cke_bottom .cke_resizer {
+ background-color: #2c3539 !important;
+}
commit 1deff4bfb63d931bbd37be7e9a3f8414dd9f8534
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Thu Jun 11 15:49:15 2020 -0500
Fix borders for ckeditor darkmode
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index c8b8a2127f..2f10659de5 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -346,3 +346,14 @@
.darkmode #cke_Content .cke_bottom .cke_resizer {
background-color: #2c3539 !important;
}
+
+.darkmode .cke_combo_arrow, .darkmode .cke_button_arrow {
+ border-top: 3px solid #aeb0b1 !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;
+}
commit f150f467b9e0a33e68aa4fa152e85df1ed24c0a2
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Thu Jun 11 15:50:12 2020 -0500
Fix toolbar text color for ckeditor darkmode
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 2f10659de5..e1ff70721d 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -357,3 +357,7 @@
.darkmode .cke_toolbar .cke_toolgroup {
border-color: #717171 !important;
}
+
+.darkmode .cke_toolbox .cke_toolbar .cke_combo .cke_combo_text {
+ color: #c9ccce !important;
+}
commit 0ec6a30092444441c3f86544a6ec4e9c0a191f24
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Thu Jun 11 15:51:00 2020 -0500
Fix toolbar icon color for ckeditor darkmode
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index e1ff70721d..5c5d34e98b 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -361,3 +361,12 @@
.darkmode .cke_toolbox .cke_toolbar .cke_combo .cke_combo_text {
color: #c9ccce !important;
}
+
+/* invert color for toolbar pngs */
+.darkmode a.cke_button .cke_button_icon {
+ -webkit-filter: invert(100%) brightness(110%);
+ -moz-filter: invert(100%) brightness(110%);
+ -ms-filter: invert(100%) brightness(110%);
+ -o-filter: invert(100%) brightness(110%);
+ filter: invert(100%) brightness(110%);
+}
-----------------------------------------------------------------------
More information about the rt-commit
mailing list