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

[Blaine Motsinger]

The branch, 5.0/fix-rich-text-styles-dark-theme has been created
        at  cb10d4e1381bf065f8da5a916f5e92128a463ed5 (commit)

- Log -----------------------------------------------------------------
commit 56b50fc05908ea58cc03d1faada1fdbd12b1be25
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..ec9a8f4eb0 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -1016,3 +1016,20 @@ 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')) {
+        var messageBoxId = document.querySelector('.messagebox').getAttribute('id');
+        var richTextEditor = CKEDITOR.instances[messageBoxId];
+
+        if (richTextEditor) {
+            richTextEditor.on('instanceReady', function() {
+                this.document.getBody().addClass('darkmode');
+                this.document.getBody().addClass(messageBoxId);
+            });
+        }
+    }
+});

commit 85bad44d864451937bd52bf6604e5836e6da2093
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Tue Jun 9 21:11:02 2020 -0500

    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
index 3874c165ab..33c12c2df4 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -321,3 +321,49 @@
 .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 */
+
+/* Reset all to a common color.
+   This is much easier than specifying each small button. */
+.darkmode [class^='cke_'] {
+    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;
+}
+
+.darkmode .cke_combo_arrow, .darkmode .cke_button_arrow {
+    border-top: 3px solid #aeb0b1 !important;
+}
+
+.darkmode .cke_toolbox .cke_toolbar .cke_combo .cke_combo_text {
+    color: #c9ccce !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;
+}
+
+/* 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%);
+}

commit cb10d4e1381bf065f8da5a916f5e92128a463ed5
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;

-----------------------------------------------------------------------