From 4eb2df9a4b4ad286eaae34a0f54dce98298f80d4 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Sat, 9 Jan 2016 19:44:09 +0100 Subject: [PATCH] Style overhaul * Redesigned pagination * Optimized message group list (thread list) * Some minor tweaks --- .../PagesFunctionTemplatePlugin.class.php | 8 +- .../ShortUnitModifierTemplatePlugin.class.php | 50 ++++ .../files/style/layout/navigation.scss | 23 +- wcfsetup/install/files/style/ui/badge.scss | 6 +- wcfsetup/install/files/style/ui/message.scss | 248 ++++++++++++------ .../install/files/style/ui/tabularBox.scss | 6 +- 6 files changed, 245 insertions(+), 96 deletions(-) create mode 100644 wcfsetup/install/files/lib/system/template/plugin/ShortUnitModifierTemplatePlugin.class.php 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 ''."\n"; + return ''."\n"; } else { - return ''."\n"; + return ''."\n"; } } @@ -92,10 +92,10 @@ class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin { */ protected function makeNextLink($link, $pageNo, $pages) { if ($pageNo && $pageNo < $pages) { - return ''."\n"; + return ''."\n"; } else { - return ''."\n"; + return ''."\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 @@ + + * @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; } } -- 2.20.1