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

? sunnavy sunnavy at bestpractical.com
Mon Jun 15 20:30:55 EDT 2020


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

- Log -----------------------------------------------------------------
commit 0b96decd17ad3a6a3d5b7a3fdaef331fe0c46e46
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 5f35a5e6de..f1ff80e670 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -325,3 +325,14 @@
 .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;
+}

commit 09712d90a5bbf5413c2db50c8ac82b7a7f6d12c5
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 f1ff80e670..c4de23598c 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -336,3 +336,14 @@
 .darkmode #cke_Content .cke_contents .cke_wysiwyg_frame {
     background-color: #333d42 !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 4e84b0f2b0d4781db3f140e2a9956d4bb2f6b09c
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 c4de23598c..68ef9a48c5 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -347,3 +347,7 @@
 .darkmode .cke_toolbar .cke_toolgroup {
     border-color: #717171 !important;
 }
+
+.darkmode .cke_toolbox .cke_toolbar .cke_combo .cke_combo_text {
+    color: #c9ccce !important;
+}

commit fc99f872f2c6a351926cb9416e7643858b2c7c56
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 68ef9a48c5..3a9c5cc1af 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -351,3 +351,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%);
+}

commit 8347e64ca76078da148064c8e728cd54943f6f50
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Tue Jun 16 05:16:22 2020 +0800

    Fix borders of styles/formats for ckeditor darkmode

diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 3a9c5cc1af..9bbdfacc0d 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -360,3 +360,10 @@
     -o-filter: invert(100%) brightness(110%);
     filter: invert(100%) brightness(110%);
 }
+
+/* fix combo height to show borders correctly */
+.darkmode .cke_combo_text {
+    margin-top: 1px;
+    margin-bottom: 1px;
+    line-height: 24px;
+}

commit 5bf216ba746275c42da87eb92328a6a14240c2ff
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Tue Jun 16 05:18:58 2020 +0800

    Fix toolbar dropdown color for ckeditor darkmode
    
    The dropdowns insert iframes, which we need to inject css file into.

diff --git a/share/html/Elements/JavascriptConfig b/share/html/Elements/JavascriptConfig
index a4eca5e6ac..2566873126 100644
--- a/share/html/Elements/JavascriptConfig
+++ b/share/html/Elements/JavascriptConfig
@@ -49,7 +49,7 @@
 my $Config = {};
 $Config->{$_} = RT->Config->Get( $_, $session{CurrentUser} )
   for qw(rtname WebPath MessageBoxRichText MessageBoxRichTextHeight
-         MaxAttachmentSize);
+         MaxAttachmentSize WebDefaultStylesheet);
 
 my $CurrentUser = {};
 if ($session{CurrentUser} and $session{CurrentUser}->id) {
diff --git a/share/static/RichText/config.js b/share/static/RichText/config.js
index 758aef1e68..5c3d146bf3 100644
--- a/share/static/RichText/config.js
+++ b/share/static/RichText/config.js
@@ -35,4 +35,7 @@ CKEDITOR.editorConfig = function( config ) {
 
 	// Simplify the dialog windows.
 	config.removeDialogTabs = 'image:advanced;link:advanced';
+    if ( RT.Config.WebDefaultStylesheet.match(/dark/) ) {
+        config.contentsCss = [ RT.Config.WebPath + '/static/RichText/contents.css', RT.Config.WebPath + '/static/RichText/contents-dark.css' ];
+    }
 };
diff --git a/share/static/RichText/contents-dark.css b/share/static/RichText/contents-dark.css
new file mode 100644
index 0000000000..fe89b6c2e8
--- /dev/null
+++ b/share/static/RichText/contents-dark.css
@@ -0,0 +1,37 @@
+/* general toolbar */
+.cke_panel_list * {
+    background: #2C3539 !important;
+}
+
+.cke_panel_block * {
+    background: #2C3539;
+    color: #ededed !important;
+}
+
+.cke_panel_listItem a {
+    border: none;
+}
+
+/* color toolbar */
+.cke_colorauto,
+.cke_colormore:hover {
+    background: #2C3539 !important;
+}
+
+a.cke_colorbox {
+    border: 1px solid #2C3539;
+}
+
+/* emoji toolbar */
+.cke_emoji-navigation_item svg,
+.cke_emoji-search svg {
+    -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%);
+}
+
+.cke_emoji-inner_panel * {
+    background: transparent !important;
+}
diff --git a/share/static/js/util.js b/share/static/js/util.js
index 382e336903..41afc87512 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -723,6 +723,16 @@ jQuery(function() {
             }
         });
     }
+
+    if ( RT.Config.WebDefaultStylesheet.match(/dark/) ) {
+        // Toolbar dropdowns insert iframes, we can apply css files there.
+        jQuery('body').on('DOMNodeInserted', '.cke_panel', function(e) {
+            setTimeout( function(){
+                var content = jQuery(e.target).find('iframe').contents();
+                content.find('head').append('<link rel="stylesheet" type="text/css" href="' + RT.Config.WebPath + '/static/RichText/contents-dark.css" media="screen">');
+            }, 0);
+        });
+    }
 });
 
 /* inline edit */

commit 7c4ef30ee66fba3b406ed34676289328374e7827
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Tue Jun 16 07:48:57 2020 +0800

    Drop jquery.event.hover-1.0.js
    
    It was used to delay hover action a tiny bit so menus wouldn't expand
    when mouse hovers over quickly(usually not on purpose). This doesn't
    work since RT 4.2 and it also breaks jQuery's hover function.
    
    As it's not super useful anyway, here we simply drop it.
    
    See also bf12c250dc and 87bd8a635e

diff --git a/lib/RT/Interface/Web.pm b/lib/RT/Interface/Web.pm
index c8d7c62efe..ce7c78f679 100644
--- a/lib/RT/Interface/Web.pm
+++ b/lib/RT/Interface/Web.pm
@@ -124,7 +124,6 @@ sub JSFiles {
         i18n.js
         util.js
         autocomplete.js
-        jquery.event.hover-1.0.js
         superfish.min.js
         jquery.supposition.js
         chosen.jquery.min.js
diff --git a/share/static/js/jquery.event.hover-1.0.js b/share/static/js/jquery.event.hover-1.0.js
deleted file mode 100644
index 6883ad21de..0000000000
--- a/share/static/js/jquery.event.hover-1.0.js
+++ /dev/null
@@ -1,85 +0,0 @@
-;(function($){ // secure $ jQuery alias
-/*******************************************************************************************/	
-// jquery.event.hover.js - rev 5 
-// Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
-// Liscensed under the MIT License (MIT-LICENSE.txt)
-// http://www.opensource.org/licenses/mit-license.php
-// Created: 2008-06-02 | Updated: 2008-07-30
-/*******************************************************************************************/
-
-//	USE THESE PROPERTIES TO CUSTOMIZE SETTINGS...
-
-//	$.event.special.hover.delay = 100; 
-//	Defines the delay (msec) while mouse is inside the element before checking the speed
-
-//	$.event.special.hover.speed = 100; 
-//	Defines the maximum speed (px/sec) the mouse may be moving to trigger the hover event
-
-// save the old jquery "hover" method
-$.fn._hover = $.fn.hover;
-
-// jquery method 
-$.fn.hover = function( fn1, fn2, fn3 ) {
-	if ( fn3 ) this.bind('hoverstart', fn1 ); // 3 args
-	if ( fn2 ) this.bind('hoverend', fn3 ? fn3 : fn2 ); // 2+ args
-	return !fn1 ? this.trigger('hover') // 0 args 
-		: this.bind('hover', fn3 ? fn2 : fn1 ); // 1+ args
-	};	
-
-// special event configuration
-var hover = $.event.special.hover = {
-	delay: 100, // milliseconds
-	speed: 100, // pixels per second
-	setup: function( data ){
-		data = $.extend({ speed: hover.speed, delay: hover.delay, hovered:0 }, data||{} );
-		$.event.add( this, "mouseenter mouseleave", hoverHandler, data );
-		},
-	teardown: function(){
-		$.event.remove( this, "mouseenter mouseleave", hoverHandler );
-		}
-	};
-
-// shared event handler
-function hoverHandler( event ){
-	var data = event.data || event;
-	switch ( event.type ){
-		case 'mouseenter': // mouseover
-			data.dist2 = 0; // init mouse distance²
-			data.event = event; // store the event
-			event.type = "hoverstart"; // hijack event
-			if ( $.event.handle.call( this, event ) !== false ){ // handle "hoverstart"
-				data.elem = this; // ref to the current element
-				$.event.add( this, "mousemove", hoverHandler, data ); // track the mouse
-				data.timer = setTimeout( compare, data.delay ); // start async compare
-				}
-			break;
-		case 'mousemove': // track the event, mouse distance² = x² + y²
-			data.dist2 += Math.pow( event.pageX-data.event.pageX, 2 ) 
-				+ Math.pow( event.pageY-data.event.pageY, 2 ); 
-			data.event = event; // store current event
-			break;
-		case 'mouseleave': // mouseout
-			clearTimeout( data.timer ); // uncompare
-			if ( data.hovered ){ 
-				event.type = "hoverend"; // hijack event
-				$.event.handle.call( this, event ); // handle "hoverend"
-				data.hovered--; // reset flag
-				}
-			else $.event.remove( data.elem, "mousemove", hoverHandler ); // untrack
-			break;
-		default: // timeout compare // distance² = x² + y²  = ( speed * time )²
-			if ( data.dist2 <= Math.pow( data.speed*( data.delay/1e3 ), 2 ) ){ // speed acceptable
-				$.event.remove( data.elem, "mousemove", hoverHandler ); // untrack
-				data.event.type = "hover"; // hijack event
-				if ( $.event.handle.call( data.elem, data.event ) !== false ) // handle "hover"
-					data.hovered++; // flag for "hoverend"
-				}
-			else data.timer = setTimeout( compare, data.delay ); // async recurse
-			data.dist2 = 0; // reset distance² for next compare
-			break;
-		}
-	function compare(){ hoverHandler( data ); }; // timeout/recursive function
-	};
-	
-/*******************************************************************************************/
-})(jQuery); // confine scope
\ No newline at end of file
diff --git a/share/static/js/late.js b/share/static/js/late.js
index 92a8279069..6a83ce0592 100644
--- a/share/static/js/late.js
+++ b/share/static/js/late.js
@@ -1,6 +1,3 @@
-// Lower the speed limit for hover intent event
-jQuery.event.special.hover.speed = 80; // pixels per second
-
 jQuery(function() { sync_grouped_custom_fields() } );
 function sync_grouped_custom_fields() {
     var all_inputs = jQuery("input,textarea,select");

commit b4bcfa18fc8e54729487d5897b5b98e70e1d6419
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Tue Jun 16 05:20:37 2020 +0800

    Fix colors in "More colors" modal for ckeditor darkmode

diff --git a/share/static/js/util.js b/share/static/js/util.js
index 41afc87512..4e87830221 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -732,6 +732,32 @@ jQuery(function() {
                 content.find('head').append('<link rel="stylesheet" type="text/css" href="' + RT.Config.WebPath + '/static/RichText/contents-dark.css" media="screen">');
             }, 0);
         });
+
+        // "More colors" in color toolbars insert content directly into main DOM.
+        // This is to rescue colored elements from global dark bg color.
+        jQuery('body').on('DOMNodeInserted', '.cke_dialog_container', function(e) {
+            if ( !jQuery(e.target).find('.ColorCell:visible').length ) return;
+
+            jQuery(e.target).find('.ColorCell:visible').each(function() {
+                var style = jQuery(this).attr('style').replace(/background-color:([^;]+);/, 'background-color: $1 !important');
+                jQuery(this).attr('style', style);
+            });
+
+            // Sync active color
+            jQuery('.ColorCell:visible').hover(function() {
+                var bg = jQuery(this).css('background-color');
+                setTimeout(function() {
+                    var style = jQuery('[id^=cke_][id$=_hicolor]:visible').attr('style').replace(/background-color:[^;]+;/, 'background-color: ' + bg + ' !important');
+                    jQuery('[id^=cke_][id$=_hicolor]:visible').attr('style', style);
+                }, 0);
+            });
+
+            // Sync selected color
+            jQuery(e.target).find('.ColorCell:visible').click(function() {
+                var style = jQuery('[id^=cke_][id$=_selhicolor]:visible').attr('style').replace(/background-color:([^;]+);/, 'background-color: $1 !important');
+                jQuery('[id^=cke_][id$=_selhicolor]:visible').attr('style', style);
+            });
+        });
     }
 });
 

commit 013d0c6c3cd81d4f63533458f25cb7456ee78dd3
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Tue Jun 16 06:14:44 2020 +0800

    Fix main body font color for ckeditor darkmode

diff --git a/share/static/RichText/contents-dark.css b/share/static/RichText/contents-dark.css
index fe89b6c2e8..e6dbb4f7be 100644
--- a/share/static/RichText/contents-dark.css
+++ b/share/static/RichText/contents-dark.css
@@ -1,3 +1,13 @@
+/* main input color */
+.cke_editable {
+    color: #ededed !important;
+}
+
+.cke_editable.action-response,
+.cke_editable.action-comment {
+    color: #333 !important;
+}
+
 /* general toolbar */
 .cke_panel_list * {
     background: #2C3539 !important;
diff --git a/share/static/js/util.js b/share/static/js/util.js
index 4e87830221..58da44358e 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -725,6 +725,16 @@ jQuery(function() {
     }
 
     if ( RT.Config.WebDefaultStylesheet.match(/dark/) ) {
+
+        // Add action type into iframe to customize default font color
+        jQuery(['action-response', 'action-comment']).each(function(index, class_name) {
+            jQuery('.' + class_name).on('DOMNodeInserted', 'iframe', function(e) {
+                setTimeout(function() {
+                    jQuery(e.target).contents().find('.cke_editable').addClass(class_name);
+                }, 100);
+            });
+        });
+
         // Toolbar dropdowns insert iframes, we can apply css files there.
         jQuery('body').on('DOMNodeInserted', '.cke_panel', function(e) {
             setTimeout( function(){

commit d616f40ec2e6954e3755c7291d2f1809e908218b
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Tue Jun 16 08:20:54 2020 +0800

    Tweak marker bg color to make marked text readable for ckeditor darkmode

diff --git a/share/static/RichText/contents-dark.css b/share/static/RichText/contents-dark.css
index e6dbb4f7be..00e5cce596 100644
--- a/share/static/RichText/contents-dark.css
+++ b/share/static/RichText/contents-dark.css
@@ -8,6 +8,10 @@
     color: #333 !important;
 }
 
+.marker {
+    background-color: #9b870c;
+}
+
 /* general toolbar */
 .cke_panel_list * {
     background: #2C3539 !important;

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


More information about the rt-commit mailing list