From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 12 Jan 2016 22:57:29 +0000 (+0100)
Subject: Improved visuals for editor + messageTabMenu
X-Git-Tag: 3.0.0_Beta_1~2030^2~157^2~3
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=bf5372fc08337a1aa69aeb03b435eb674e205154;p=GitHub%2FWoltLab%2FWCF.git

Improved visuals for editor + messageTabMenu
---

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<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 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;
 		}
 	}
 }