From bf5372fc08337a1aa69aeb03b435eb674e205154 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 12 Jan 2016 23:57:29 +0100 Subject: [PATCH] Improved visuals for editor + messageTabMenu --- wcfsetup/install/files/js/WCF.Message.js | 17 ++- .../files/js/WoltLab/WCF/Ui/TabMenu/Simple.js | 4 +- wcfsetup/install/files/style/ui/redactor.scss | 46 ++++---- .../files/style/ui/tabMenuMessage.scss | 108 ++++++------------ 4 files changed, 71 insertions(+), 104 deletions(-) diff --git a/wcfsetup/install/files/js/WCF.Message.js b/wcfsetup/install/files/js/WCF.Message.js index 4682d1bd5c..0ed109243d 100644 --- 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 @@ -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 = $('').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 fbd32d77d0..c06d17cb2d 100644 --- 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 bc9d95de27..8909f16101 100644 --- 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 f8220a4178..4b3c77dfd1 100644 --- 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; } } } -- 2.20.1