From: Marcel Werk <burntime@woltlab.com>
Date: Sat, 9 Jan 2016 18:44:09 +0000 (+0100)
Subject: Style overhaul
X-Git-Tag: 3.0.0_Beta_1~2030^2~166
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=4eb2df9a4b4ad286eaae34a0f54dce98298f80d4;p=GitHub%2FWoltLab%2FWCF.git

Style overhaul

* Redesigned pagination
* Optimized message group list (thread list)
* Some minor tweaks
---

diff --git a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
index e725d63c65..5832e40d10 100644
--- a/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
+++ b/wcfsetup/install/files/lib/system/template/plugin/PagesFunctionTemplatePlugin.class.php
@@ -76,10 +76,10 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 	 */
 	protected function makePreviousLink($link, $pageNo) {
 		if ($pageNo > 1) {
-			return '<li class="skip"><a href="'.$this->insertPageNumber($link, $pageNo - 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.previous').'" class="icon icon16 fa-angle-double-left jsTooltip"></a></li>'."\n";
+			return '<li class="skip"><a href="'.$this->insertPageNumber($link, $pageNo - 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.previous').'" class="icon icon16 fa-chevron-left jsTooltip"></a></li>'."\n";
 		}
 		else {
-			return '<li class="skip disabled"><span class="icon icon16 fa-angle-double-left"></span></li>'."\n";
+			return '<li class="skip disabled"><span class="icon icon16 fa-chevron-left"></span></li>'."\n";
 		}
 	}
 	
@@ -92,10 +92,10 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
 	 */
 	protected function makeNextLink($link, $pageNo, $pages) {
 		if ($pageNo && $pageNo < $pages) {
-			return '<li class="skip"><a href="'.$this->insertPageNumber($link, $pageNo + 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.next').'" class="icon icon16 fa-angle-double-right jsTooltip"></a></li>'."\n";
+			return '<li class="skip"><a href="'.$this->insertPageNumber($link, $pageNo + 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.next').'" class="icon icon16 fa-chevron-right jsTooltip"></a></li>'."\n";
 		}
 		else {
-			return '<li class="skip disabled"><span class="icon icon16 fa-angle-double-right"></span></li>'."\n";
+			return '<li class="skip disabled"><span class="icon icon16 fa-chevron-right"></span></li>'."\n";
 		}
 	}
 	
diff --git a/wcfsetup/install/files/lib/system/template/plugin/ShortUnitModifierTemplatePlugin.class.php b/wcfsetup/install/files/lib/system/template/plugin/ShortUnitModifierTemplatePlugin.class.php
new file mode 100644
index 0000000000..3bc751da82
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/template/plugin/ShortUnitModifierTemplatePlugin.class.php
@@ -0,0 +1,50 @@
+<?php
+namespace wcf\system\template\plugin;
+use wcf\system\template\TemplateEngine;
+use wcf\util\StringUtil;
+
+/**
+ * Shortens numbers larger than 1000 by using unit prefixes.
+ *
+ * Usage:
+ * 	{12345|shortUnit}
+ *
+ * @author	Marcel Werk
+ * @copyright	2001-2016 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package	com.woltlab.wcf
+ * @subpackage	system.template.plugin
+ * @category	Community Framework
+ */
+class ShortUnitModifierTemplatePlugin implements IModifierTemplatePlugin {
+	/**
+	 * @see	\wcf\system\template\IModifierTemplatePlugin::execute()
+	 */
+	public function execute($tagArgs, TemplateEngine $tplObj) {
+		$number = $tagArgs[0];
+		$unitPrefix = '';
+		
+		if ($number >= 1000000) {
+			$number /= 1000000;
+			if ($number > 10) {
+				$number = floor($number);
+			}
+			else {
+				$number = round($number, 1);
+			}
+			$unitPrefix = 'M';
+		}
+		else if ($number >= 1000) {
+			$number /= 1000;
+			if ($number > 10) {
+				$number = floor($number);
+			}
+			else {
+				$number = round($number, 1);
+			}
+			$unitPrefix = 'k';
+		}
+		
+		return StringUtil::formatNumeric($number) . $unitPrefix;
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/navigation.scss b/wcfsetup/install/files/style/layout/navigation.scss
index 4bad3c933b..ebacf9f368 100644
--- a/wcfsetup/install/files/style/layout/navigation.scss
+++ b/wcfsetup/install/files/style/layout/navigation.scss
@@ -95,35 +95,36 @@
 		
 		> a,
 		> span {
-			background-color: $wcfButtonBackground;
-			border: 1px solid $wcfButtonBorder;
-			color: $wcfButtonText;
-			padding: 3px 5px;
+			color: $wcfContentText;
+			padding: 1px 8px;
+		}
+		
+		&.disabled > span {
+			color: $wcfContentDimmedText;
 		}
 		
 		&.active > a,
 		&.active > span,
 		> a:hover {
 			background-color: $wcfButtonBackgroundActive;
-			border-color: $wcfButtonBorderActive;
 			color: $wcfButtonTextActive;
 		}
 		
-		&:not(:last-child) {
-			margin-right: -1px;
-		}
-		
 		> .icon {
 			height: auto;
 			line-height: inherit;
 			width: auto;
 		}
+		
+		&:not(:last-child) {
+			margin-right: 1px;
+		}
 	}
 }
-
+/*@todo
 .pageNavigation.small > ul > li {
 	> a,
 	> span:not(.invisible) {
 		padding: 1px 5px;
 	}
-}
+}*/
diff --git a/wcfsetup/install/files/style/ui/badge.scss b/wcfsetup/install/files/style/ui/badge.scss
index 40d75057da..486aa5ae9e 100644
--- a/wcfsetup/install/files/style/ui/badge.scss
+++ b/wcfsetup/install/files/style/ui/badge.scss
@@ -14,8 +14,8 @@ a.badge {
 	
 	/* colors */
 	&.badgeUpdate {
-		//background-color: @wcfTabularBoxBackgroundColor;
-		//color: @wcfTabularBoxColor;
+		background-color: rgba(224, 48, 48, 1);
+		color: rgba(255, 238, 238, 1);
 	}
 	
 	&.badgeInverse {
@@ -71,7 +71,7 @@ a.badge {
 }
 
 a.badge:hover {
-	//color: @wcfContentBackgroundColor;
+	color: $wcfContentBackground;
 	text-decoration: none;
 	
 	&.black {
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index cd3483d0f9..fdf29c0c81 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -209,13 +209,71 @@
 
 /* ### message groups ### */
 .messageGroupList {
-	.columnSubject {
-		> .labelList {
-			float: right;
-			padding-left: 7px;
+	.tabularList {
+		.tabularListColumns {
+			> .columnSubject {
+				flex: 1 1 auto;
+			}
+			
+			> .columnStats {
+				flex: 0 0 120px;
+				text-align: center;
+			}
+			
+			> .columnLastPost {
+				flex: 0 0 200px;
+			}
 		}
 		
+		.tabularListRow:not(.tabularListRowHead) {
+			.columnStats {
+				position: relative;
+				
+				> dl {
+					visibility: hidden;
+				}
+			}
+			
+			&:hover .columnStats {
+				> dl {
+					visibility: visible;
+				}
+				
+				.messageGroupListStatsSimple {
+					display: none;
+				}
+			}
+		}
+	}
+	
+	.columnAvatar {
+		div {
+			position: relative;
+			width: 48px;
+			height: 48px;
+			
+			> p > img {
+				opacity: .6;
+			}
+		}
+		
+		.myAvatar {
+			position: absolute;
+			width: 24px;
+			height: 24px;
+			bottom: -8px;
+			right: -8px;
+		}
+	}
+	
+	.columnSubject {
+		overflow: hidden;
+		
 		> h3 {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			
 			> .messageGroupLink {
 				@extend .wcfFontHeadline;
 			}
@@ -229,65 +287,84 @@
 			display: block;
 		}
 		
-		> nav {
-			@extend .wcfFontSmall;
+		> .statusDisplay {
+			display: flex;
+			float: right;
+			opacity: .6;
 			
-			> ul > li {
-				display: inline;
+			> .statusIcons {
+				align-items: center;
+				flex: 0 0 auto;
+				
+				> li {
+					align-items: center;
+					display: flex;
+				}
 			}
 		}
+		
+		> .labelList {
+			float: right;
+			padding-left: 7px;
+		}
 	}
 	
-	tr {
-		&.new .columnSubject > h3 > .messageGroupLink {
-			font-weight: bold;
+	.columnLastPost {
+		time {
+			color: $wcfContentDimmedText;
 		}
 		
-		&.new .columnAvatar div > p > img,
-		&:hover .columnAvatar div > p > img {
-			opacity: 1;
+		a {
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
+	}
+	
+	.messageGroupInfo {
+		@extend .inlineList;
+		@extend .wcfFontSmall;
 		
-		/*
-		TODO
-		&.messageDisabled {
-			color: $wcfDisabledColor;
-			
-			> td {
-				background-color: $wcfDisabledBackgroundColor !important;
-			}
+		> li:not(:last-child) {
+			margin-right: 5px;
 			
-			a:not(.badge) {
-				color: $wcfDisabledColor;
+			&:after {
+				content: "\00b7";
+				margin-left: 5px;
 			}
 		}
-		*/
-		
-		/*
-		TODO
-		&.messageDeleted {
-			color: $wcfDeletedColor;
-			
-			> td {
-				background-color: $wcfDeletedBackgroundColor !important;
-			}
+	}
+	
+	// hover
+	.tabularListRow:hover,
+	tr:hover { // deprecated
+		.columnSubject > .statusDisplay {
+			opacity: 1;
 			
-			a:not(.badge) {
-				color: $wcfDeletedColor;
+			> .pageNavigation {
+				opacity: 1;
 			}
 		}
-		*/
 		
-		.columnSubject .statusDisplay .pageNavigation {
-			opacity: 0;
-			transition: opacity .2s linear;
+		.columnAvatar div > p > img {
+			opacity: 1;
+		}
+	}
+	
+	// new status
+	.tabularListRow.new,
+	tr.new { // deprecated
+		.columnSubject > h3 > .messageGroupLink {
+			font-weight: bold;
 		}
 		
-		&:hover .columnSubject .statusDisplay .pageNavigation {
+		.columnAvatar div > p > img {
 			opacity: 1;
 		}
 		
-		&.new .columnAvatar > div {
+		// new message icon
+		.columnAvatar > div {
 			&::after {
 				color: $wcfContentLink;
 				content: "\f069";
@@ -305,51 +382,68 @@
 		}
 	}
 	
-	.columnAvatar {
-		div {
-			position: relative;
-			width: 40px;
-			height: 38px;
-			
-			> p > img {
-				opacity: .6;
-				transition: opacity .2s linear;
-			}
-		}
+	.pageNavigation {
+		flex: 0 0 auto;
+		opacity: 0;
 		
-		.myAvatar {
-			position: absolute;
-			width: 16px;
-			height: 16px;
-			bottom: -2px;
-			left: 24px;
-			opacity: 1;
-			
-			> img {
-				@include boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
-			}
+		@extend .wcfFontSmall;
+		
+		&:not(:last-child) {
+			margin-right: 5px;
 		}
 	}
+
 	
-	.columnLastPost {
-		white-space: nowrap;
-		word-wrap: normal;
+}
+
+.messageGroupListStatsSimple {
+	color: $wcfContentDimmedText;
+	font-size: 1rem;
+	left: 50%;
+	position: absolute;
+	top: 50%;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+/*
+.messageGroupList {
+	.columnSubject {
+		
+		
 		
-		> div > div > small {
-			// TODO: color: $wcfDimmedColor;
-		}
 	}
 	
-	.messageGroupInfo {
-		@extend .inlineList;
-		@extend .wcfFontSmall;
+	tr {
+		/*
+		TODO
+		&.messageDisabled {
+			color: $wcfDisabledColor;
+			
+			> td {
+				background-color: $wcfDisabledBackgroundColor !important;
+			}
+			
+			a:not(.badge) {
+				color: $wcfDisabledColor;
+			}
+		}
+		*/
 		
-		> li:not(:last-child) {
-			margin-right: 5px;
+		/*
+		TODO
+		&.messageDeleted {
+			color: $wcfDeletedColor;
 			
-			&:after {
-				content: " - ";
+			> td {
+				background-color: $wcfDeletedBackgroundColor !important;
+			}
+			
+			a:not(.badge) {
+				color: $wcfDeletedColor;
 			}
 		}
+		*/
+		/*
 	}
 }
+*/
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss
index d4eabe3dd3..114a479427 100644
--- a/wcfsetup/install/files/style/ui/tabularBox.scss
+++ b/wcfsetup/install/files/style/ui/tabularBox.scss
@@ -13,7 +13,11 @@
 	padding: 5px 0;
 	
 	&.divider + li:not(.divider) {
-		border-top-color: $wcfContentBorderInner;
+		border-top-color: $wcfTabularBoxHeadline;
+	}
+	
+	&:not(.tabularListRowHead):hover {
+		background-color: $wcfTabularBoxBackgroundActive;
 	}
 }