Improved visuals for editor + messageTabMenu

diff --git a/wcfsetup/install/files/js/WCF.Message.js b/wcfsetup/install/files/js/WCF.Message.js
index 4682d1bd5c92ddd343b1f147428fec8d93dbd119..0ed109243d5060eb3af7c39f6a69d4c13f95c0d2 100644 (file)
--- a/wcfsetup/install/files/js/WCF.Message.js
+++ b/wcfsetup/install/files/js/WCF.Message.js
@@ -3483,6 +3483,12 @@ WCF.Message.UserMention = Class.extend({
  * Provides a specialized tab menu used for message options, integrates better into the editor.
  */
 $.widget('wcf.messageTabMenu', {
+       /**
+        * pointer span
+        * @var jQuery
+        */
+       _span: null,
+       
        /**
         * list of existing tabs and their containers
         * @var array<object>
@@ -3507,7 +3513,8 @@ $.widget('wcf.messageTabMenu', {
         * Creates the message tab menu.
         */
        _create: function() {
-               var $tabs = this.element.find('> nav > ul > li:not(.jsFlexibleMenuDropdown)');
+               var $nav = this.element.find('> nav');
+               var $tabs = $nav.find('> ul > li:not(.jsFlexibleMenuDropdown)');
                var $tabContainers = this.element.find('> div, > fieldset');
                
                if ($tabs.length != $tabContainers.length) {
@@ -3515,6 +3522,9 @@ $.widget('wcf.messageTabMenu', {
                        return;
                }
                
+               // pointer span
+               this._span = $('<span />').appendTo($nav);
+               
                var $preselect = this.element.data('preselect');
                this._tabs = [ ];
                this._tabsByName = { };
@@ -3613,6 +3623,11 @@ $.widget('wcf.messageTabMenu', {
                        });
                }
                
+               this._span.css({
+                       transform: 'translateX(' + $target.tab[0].offsetLeft + 'px)', 
+                       width: $target.tab[0].clientWidth + 'px'
+               });
+               
                $(window).trigger('resize');
        },
        

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
index fbd32d77d07460ec0e9f1583f9eba064b53bcc9f..c06d17cb2de49cc3c885e18d9e2d9f3c45085a63 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js
@@ -18,7 +18,7 @@ define(['Dictionary', 'Dom/Traverse', 'Dom/Util', 'EventHandler'], function(Dict
                this._containers = new Dictionary();
                this._isLegacy = null;
                this._tabs = new Dictionary();
-       };
+       }
        
        TabMenuSimple.prototype = {
                /**
@@ -49,7 +49,7 @@ define(['Dictionary', 'Dom/Traverse', 'Dom/Util', 'EventHandler'], function(Dict
                        
                        // get children
                        var tabs = elByTag('li', nav);
-                       if (tabs.length === null) {
+                       if (tabs.length === 0) {
                                return false;
                        }
                        

diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index bc9d95de27d6866732ffeb239bfb9c48c8d2e775..8909f161011d0167a56f32701b8e366c53ec5ec3 100644 (file)
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -1,6 +1,4 @@
 .redactor-box {
-       border: 1px solid $wcfContentBorder;
-       font-size: 0;
        position: relative;
        
        & + .messageTabMenu {
@@ -24,7 +22,6 @@
                border: 1px solid $wcfContentBorderInner;
                border-width: 1px 0 0 1px;
                bottom: 0;
-               font-size: 1rem;
                opacity: 0;
                padding: $wcfGapSmall;
                position: absolute;
@@ -49,8 +46,9 @@
 }
 
 .redactor-editor {
+       border: 1px solid $wcfContentBorderInner;
+       border-top-width: 0;
        max-height: 500px;
-       min-height: 200px;
        padding: 10px;
        position: relative;
        outline: none;
@@ -59,7 +57,6 @@
        & + textarea {
                border-width: 0;
                box-shadow: none;
-               font-size: 1rem;
                outline: none;
                padding: 10px;
                resize: vertical;
@@ -89,7 +86,7 @@
        
        table {
                border-collapse: collapse;
-               font-size: 14px;
+               //font-size: 14px; TODO
                line-height: 1.6em;
                
                td {
@@ -115,7 +112,7 @@
                &::after {
                        content: $fa-var-pencil;
                        font-family: FontAwesome;
-                       font-size: $wcfFontSizeHeadline;
+                       font-size: $wcfFontSizeHeadline; // TODO
                        position: absolute;
                        right: 10px;
                        top: 10px;
@@ -140,7 +137,6 @@
                        
                        > div {
                                cursor: pointer;
-                               font-size: 1.4rem;
                                left: 50%;
                                padding: 1em 3em;
                                position: absolute;
@@ -189,12 +185,6 @@
        }
 }
 
-@media all and (min-width: 801px) {
-       .redactor-editor {
-               font-size: 1rem;
-       }
-}
-
 /* disable auto zoom in mobile safari */
 @media only screen and (max-width: 800px) {
        .redactor-editor + textarea {
@@ -204,30 +194,30 @@
 }
 
 .redactor-toolbar {
-       background: repeating-linear-gradient(0deg, $wcfContentBorderInner 0px, $wcfContentBorderInner 3%, $wcfContentBackground 3%, $wcfContentBackground 100%);
-       background-size: 100% 31px;
+       background-color: $wcfHeaderBackground;
        display: flex;
        flex-wrap: wrap;
+       padding: 7px 10px;
        
        > li {
                flex: 0 0 auto;
                margin-bottom: 1px;
                
-               &:last-of-type,
-               &.separator {
-                       border-right: 1px solid $wcfContentBorderInner;
+               &:not(:last-child) {
+                       margin-right: 10px;
                }
                
                > a {
-                       color: $wcfButtonText;
+                       background-color: $wcfHeaderMenuBackground;
+                       color: $wcfHeaderMenuLink;
                        display: block;
-                       font-size: 14px;
-                       height: 30px;
                        outline: none;
                        padding: 5px 8px;
                        text-align: center;
                        text-decoration: none;
                        
+                       @extend .wcfFontSmall;
+                       
                        &.redactor-button-disabled,
                        &.redactor-button-disabled:before,
                        &.redactor-button-disabled > i:before {
@@ -237,8 +227,8 @@
                        &:hover,
                        &.redactor-act,
                        &.dropact {
-                               background-color: $wcfButtonBackgroundActive;
-                               color: $wcfButtonTextActive;
+                               background-color: $wcfHeaderMenuBackgroundActive;
+                               color: $wcfHeaderMenuLinkActive;
                        }
                }
        }
@@ -339,7 +329,7 @@
                        border: 2px solid rgba(255, 255, 255, 1);
                        border-bottom-width: 0;
                        display: inline-block;
-                       font-size: 0;
+                       font-size: 0; // TODO
                        height: 20px;
                        padding: 0;
                        margin: 0;
@@ -352,7 +342,7 @@
        background-color: rgba(255, 255, 204, 1);
        border: 5px dashed rgba(255, 204, 0);
        box-sizing: border-box;
-       font-size: 1.4rem;
+       font-size: 1.4rem; // TODO
        position: absolute;
        text-align: center;
        vertical-align: middle;
@@ -379,3 +369,7 @@
                // TODO: color: $wcfTooltipColor;
        }
 }
+
+.redactor-voice-label {
+       display: none;
+}

diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.scss b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
index f8220a41782b5fdfb6098992106401becef43083..4b3c77dfd1d471a1fbd1bf64778e9e066d5e7876 100644 (file)
--- a/wcfsetup/install/files/style/ui/tabMenuMessage.scss
+++ b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
@@ -1,17 +1,8 @@
 .messageTabMenu {
-       // TODO: border: 1px solid $wcfContentBorder;
-       border-top-width: 0;
-       border-radius: 0 0 3px 3px;
-       
        > div,
-       > fieldset{
-               background-color: $wcfContentBackground;
-               border-width: 0;
-               border-radius: 0;
-               // TODO: border-top: 1px solid $wcfContentBorder;
+       > fieldset,
+       > section {
                display: none;
-               padding: 15px 10px;
-               position: static;
                
                &.active {
                        display: block;
@@ -20,110 +11,77 @@
        
        > div {
                > nav {
-                       background-color: $wcfContentBackground;
-                       // TODO: border-bottom: 1px solid $wcfContentBorder;
-                       margin: -14px -21px 14px -21px;
-                       padding: $wcfGapTiny $wcfGapSmall;
-                       
                        ul {
-                               display: inline-block;
-                               font-size: 0;
                                white-space: nowrap;
                                
                                li {
-                                       display: inline-block;
                                        outline: 0;
-                                       vertical-align: baseline;
                                        
                                        &.active a,
                                        &.active a:hover {
-                                               color: $wcfButtonTextActive;
-                                               cursor: default;
+                                               color: $wcfContentLinkActive;
                                        }
                                        
                                        a {
-                                               color: $wcfButtonText;
+                                               color: $wcfContentLinkActive;
                                                display: block;
                                                outline: 0;
-                                               padding: 0 $wcfGapSmall;
                                                
                                                @extend .userSelectNone;
                                                @extend .wcfFontSmall;
                                                
                                                &:hover {
-                                                       color: $wcfButtonTextActive;
-                                                       text-decoration: none;
+                                                       color: $wcfContentLinkActive;
                                                }
                                        }
-                                       
-                                       &:not(:last-child) {
-                                               padding-right: $wcfGapTiny;
-                                       }
-                                       
-                                       &.dropdown > a {
-                                               font-size: 1.0rem;
-                                               padding: 4px 7px 2px;
-                                       }
                                }
                        }
                }
-               
-               > div,
-               > fieldset {
-                       border-top-width: 0;
-               }
        }
 }
 
 .messageTabMenu + .innerError {
-       box-sizing: border-box;
-       margin-top: -1px;
+       margin-top: -1px; // TODO
        width: 100%;
 }
 
-.messageTabMenuNavigation > ul {
-       background-color: $wcfContentBackground;
-       font-size: 0;
-       white-space: nowrap;
+.messageTabMenuNavigation {
+       position: relative;
        
-       > li {
-               display: inline-block;
+       > ul {
+               border-bottom: 1px solid $wcfContentBorderInner;
+               margin-bottom: 10px;
+               padding: 10px 0;
                
-               > a {
-                       // TODO: border-right: 1px solid $wcfContentBorder;
-                       border-bottom: 1px solid transparent;
-                       color: $wcfButtonText;
-                       display: block;
-                       font-size: 1rem;
-                       margin-bottom: -1px;
-                       padding: 7px 14px 8px 14px;
-                       text-decoration: none;
-                       
-                       @extend .userSelectNone;
-                       
-                       &:hover {
-                               color: $wcfContentLink;
+               @extend .inlineList;
+               
+               > li {
+                       &:not(:last-child) {
+                               margin-right: 20px;
                        }
                        
-                       > span.icon {
-                               display: none;
-                       }
-               }
-               
-               &.active {
                        > a {
-                               background-color: $wcfContentBackground;
-                               color: $wcfContentLink;
+                               display: block;
+                               
+                               @extend .userSelectNone;
+                               
+                               > span.icon {
+                                       display: none;
+                               }
                        }
                }
        }
+       
+       > span {
+               border-top: 1px solid $wcfContentLink;
+               bottom: 0;
+               content: "";
+               position: absolute;
+               transition: transform .2s linear, width .2s linear;
+       }
 }
 
 @media only screen and (max-width: 800px) {
-       .redactor-toolbar > li > a:hover {
-               background-color: transparent !important;
-       }
-       
        .messageTabMenu {
                > nav > ul > li:not(.active) > a {
                        > span.icon {
@@ -136,7 +94,7 @@
                }
                
                > div > nav {
-                       margin: ($wcfGapTiny - $wcfGapSmall) -$wcfGapSmall $wcfGapSmall -$wcfGapSmall;
+                       // TODO: margin: ($wcfGapTiny - $wcfGapSmall) -$wcfGapSmall $wcfGapSmall -$wcfGapSmall;
                }
        }
 }