[Rt-commit] rt branch, 5.0/fix-rich-text-styles-dark-theme, created. rt-5.0.0beta1-6-g27249f93fa

Blaine Motsinger blaine at bestpractical.com
Thu Jun 11 17:01:07 EDT 2020


The branch, 5.0/fix-rich-text-styles-dark-theme has been created
        at  27249f93fa5b8b05c3e202efddcd2920cf58ba1e (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 27249f93fa5b8b05c3e202efddcd2920cf58ba1e
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..933b07abf5 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