Overhauled message templates/styling
authorMarcel Werk <burntime@woltlab.com>
Tue, 8 Mar 2016 17:57:31 +0000 (18:57 +0100)
committerMarcel Werk <burntime@woltlab.com>
Tue, 8 Mar 2016 17:58:13 +0000 (18:58 +0100)
com.woltlab.wcf/templates/messageQuoteList.tpl
com.woltlab.wcf/templates/messageSidebar.tpl
com.woltlab.wcf/templates/moderationComment.tpl
wcfsetup/install/files/style/ui/message.scss
wcfsetup/install/files/style/ui/messageGroup.scss [new file with mode: 0644]
wcfsetup/setup/db/install.sql

index c1be9f9b0168fcad27515f628204e549945ed669..a97cd898b7678a5d00c5a2bb5fd0f52dc196ef16 100644 (file)
@@ -1,56 +1,63 @@
 {if !$supportPaste|isset}{assign var=supportPaste value=false}{/if}
 {foreach from=$messages item=message}
-       <article class="message messageReduced jsInvalidQuoteTarget" data-link="{@$message->getLink()}" data-username="{$message->getUsername()}">
-               <div>
-                       <section class="messageContent">
-                               <div>
-                                       <header class="messageHeader">
-                                               <div class="box32">
-                                                       {if $userProfiles[$message->getUserID()]|isset}
-                                                               <a href="{link controller='User' object=$userProfiles[$message->getUserID()]}{/link}">{@$userProfiles[$message->getUserID()]->getAvatar()->getImageTag(32)}</a>
-                                                       {/if}
-                                                       
-                                                       <div class="messageHeadline">
-                                                               <h1><a href="{@$message->getLink()}">{$message->getTitle()}</a></h1>
-                                                               <p>
-                                                                       <span class="username">{if $userProfiles[$message->getUserID()]|isset}<a href="{link controller='User' object=$userProfiles[$message->getUserID()]}{/link}">{$message->getUsername()}</a>{else}{$message->getUsername()}{/if}</span>
-                                                                       {@$message->getTime()|time}
-                                                               </p>
-                                                       </div>
-                                               </div>
-                                       </header>
+       <article class="message jsInvalidQuoteTarget" data-link="{@$message->getLink()}" data-username="{$message->getUsername()}">
+               <div class="messageContent">
+                       <header class="messageHeader">
+                               <div class="box32 messageHeaderWrapper">
+                                       {if $userProfiles[$message->getUserID()]|isset}
+                                               <a href="{link controller='User' object=$userProfiles[$message->getUserID()]}{/link}">{@$userProfiles[$message->getUserID()]->getAvatar()->getImageTag(32)}</a>
+                                       {else}
+                                               <span>{*todo: insert default avatar*}</span>
+                                       {/if}
                                        
-                                       <div class="messageBody">
-                                               <div>
-                                                       <div class="messageText">
-                                                               <ul>
-                                                                       {foreach from=$message key=quoteID item=quote}
-                                                                               <li data-quote-id="{@$quoteID}">
-                                                                                       <span>
-                                                                                               <input type="checkbox" value="1" id="quote_{@$quoteID}" class="jsCheckbox" />
-                                                                                               {if $supportPaste}<span class="icon icon16 fa-plus jsTooltip jsInsertQuote" title="{lang}wcf.message.quote.insertQuote{/lang}"></span>{/if}
-                                                                                       </span>
-                                                                                       
-                                                                                       <div class="jsQuote">
-                                                                                               <label for="quote_{@$quoteID}">
-                                                                                                       {if $message->isFullQuote($quoteID)}
-                                                                                                               {@$quote}
-                                                                                                       {else}
-                                                                                                               {$quote}
-                                                                                                       {/if}
-                                                                                               </label>
-                                                                                       </div>
-                                                                                       <div class="jsFullQuote">
-                                                                                               {$message->getFullQuote($quoteID)}
-                                                                                       </div>
-                                                                               </li>
-                                                                       {/foreach}
-                                                               </ul>
-                                                       </div>
-                                               </div>
+                                       <div class="messageHeaderBox">
+                                               <h2 class="messageTitle">
+                                                       <a href="{@$message->getLink()}">{$message->getTitle()}</a>
+                                               </h2>
+                                               
+                                               <ul class="messageHeaderMetaData">
+                                                       <li>{if $userProfiles[$message->getUserID()]|isset}<a href="{link controller='User' object=$userProfiles[$message->getUserID()]}{/link}">{$message->getUsername()}</a>{else}<span class="username">{$message->getUsername()}</span>{/if}</li>
+                                                       <li><span class="messagePublicationTime">{@$message->getTime()|time}</span></li>
+                                                       
+                                                       {event name='messageHeaderMetaData'}
+                                               </ul>
                                        </div>
                                </div>
-                       </section>
+                               
+                               {event name='messageHeader'}
+                       </header>
+                       
+                       <div class="messageBody">
+                               {event name='beforeMessageText'}
+                               
+                               <div class="messageText">
+                                       <ul>
+                                               {foreach from=$message key=quoteID item=quote}
+                                                       <li data-quote-id="{@$quoteID}">
+                                                               <span>
+                                                                       <input type="checkbox" value="1" id="quote_{@$quoteID}" class="jsCheckbox" />
+                                                                       {if $supportPaste}<span class="icon icon16 fa-plus jsTooltip jsInsertQuote" title="{lang}wcf.message.quote.insertQuote{/lang}"></span>{/if}
+                                                               </span>
+                                                               
+                                                               <div class="jsQuote">
+                                                                       <label for="quote_{@$quoteID}">
+                                                                               {if $message->isFullQuote($quoteID)}
+                                                                                       {@$quote}
+                                                                               {else}
+                                                                                       {$quote}
+                                                                               {/if}
+                                                                       </label>
+                                                               </div>
+                                                               <div class="jsFullQuote">
+                                                                       {$message->getFullQuote($quoteID)}
+                                                               </div>
+                                                       </li>
+                                               {/foreach}
+                                       </ul>
+                               </div>
+                               
+                               {event name='afterMessageText'}
+                       </div>
                </div>
        </article>
 {/foreach}
\ No newline at end of file
index 82bfe271a32061ae261c03baccbafef7428faa94..f607b15e703c3cadb654c25fcf1f618b58074bc3 100644 (file)
@@ -4,6 +4,8 @@
 
 <aside class="messageSidebar{if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()} userOnline{/if} {if $userProfile->userID}member{else}guest{/if}"{if $userProfile->userID} itemscope itemtype="http://data-vocabulary.org/Person"{/if}>
        <div class="messageAuthor">
+               {event name='messageAuthor'}
+               
                {if $userProfile->userID}
                        {assign var='username' value=$userProfile->username}
                        
                                {/if}
                        {/if}
                        
-                       <p class="messageAuthorContainer">
+                       <div class="messageAuthorContainer">
                                <a href="{link controller='User' object=$userProfile->getDecoratedObject()}{/link}" class="username userLink" data-user-id="{@$userProfile->userID}" rel="author">
                                        <span itemprop="name">{if MESSAGE_SIDEBAR_ENABLE_USER_ONLINE_MARKING}{@$userProfile->getFormattedUsername()}{else}{$username}{/if}</span>
                                </a>
                                {if $userProfile->banned}<span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang user=$userProfile}wcf.user.banned{/lang}"></span>{/if}
                                
-                               {event name='header'}
-                       </p>
+                               {event name='messageAuthorContainer'}
+                       </div>
                        
                        {if MODULE_USER_RANK && MESSAGE_SIDEBAR_ENABLE_RANK}
                                {if $userProfile->getUserTitle()}
                                        <div class="userTitle">
-                                               <p class="badge userTitleBadge{if $userProfile->getRank() && $userProfile->getRank()->cssClassName} {@$userProfile->getRank()->cssClassName}{/if}" itemprop="title">{$userProfile->getUserTitle()}</p>
+                                               <span class="badge userTitleBadge{if $userProfile->getRank() && $userProfile->getRank()->cssClassName} {@$userProfile->getRank()->cssClassName}{/if}" itemprop="title">{$userProfile->getUserTitle()}</span>
                                        </div>
                                {/if}
                                {if $userProfile->getRank() && $userProfile->getRank()->rankImage}
                                {/if}
                        {/if}
                {else}
-                       <p class="messageAuthor">
+                       <div class="messageAuthorContainer">
                                <span class="username">{$userProfile->username}</span>
                                
-                               <div class="userTitle">
-                                       <p class="badge">{lang}wcf.user.guest{/lang}</p>
-                               </div>
-                               
-                               {event name='header'}
-                       </p>
+                               {event name='messageAuthorContainer'}
+                       </div>
+                       
+                       <div class="userTitle">
+                               <span class="badge">{lang}wcf.user.guest{/lang}</span>
+                       </div>
                {/if}
        </div>
        
@@ -66,7 +68,9 @@
                                                        <dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang user=$userProfile}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$userProfile->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
                                                        <dd>{#$userProfile->activityPoints}</dd>
                                                {/if}
+                                               
                                                {event name='userCredits'}
+                                               
                                                {if MESSAGE_SIDEBAR_USER_OPTIONS && $userProfile->isAccessible('canViewProfile')}
                                                        {assign var='__sidebarUserOptions' value=','|explode:MESSAGE_SIDEBAR_USER_OPTIONS}
                                                        {foreach from=$__sidebarUserOptions item='__sidebarUserOption'}
index bfe0f6de67a38b45ba0b6ef1329629e921f5fcc0..855b17aae3c56cd287e1302d8147ba77c59a426f 100644 (file)
@@ -1,29 +1,34 @@
-<article class="message messageReduced">
-       <div>
-               <section class="messageContent">
-                       <div>
-                               <header class="messageHeader">
-                                       <div class="box32">
-                                               <a href="{link controller='User' object=$message->getUserProfile()->getDecoratedObject()}{/link}">{@$message->getUserProfile()->getAvatar()->getImageTag(32)}</a>
-                                               
-                                               <div class="messageHeadline">
-                                                       <h1><a href="{@$message->getLink()}">{$message->getTitle()}</a></h1>
-                                                       <p>
-                                                               <span class="username"><a href="{link controller='User' object=$message->getUserProfile()->getDecoratedObject()}{/link}">{$message->getUsername()}</a></span>
-                                                               {@$message->getTime()|time}
-                                                       </p>
-                                               </div>
-                                       </div>
-                               </header>
+<article class="message">
+       <section class="messageContent">
+               <header class="messageHeader">
+                       <div class="box32 messageHeaderWrapper">
+                               <a href="{link controller='User' object=$message->getUserProfile()->getDecoratedObject()}{/link}">{@$message->getUserProfile()->getAvatar()->getImageTag(32)}</a>
                                
-                               <div class="messageBody">
-                                       <div>
-                                               <div class="messageText">
-                                                       {@$message->getFormattedMessage()}
-                                               </div>
-                                       </div>
+                               <div class="messageHeaderBox">
+                                       <h2 class="messageTitle">
+                                               <a href="{@$message->getLink()}">{$message->getTitle()}</a>
+                                       </h2>
+                                       
+                                       <ul class="messageHeaderMetaData">
+                                               <li><a href="{link controller='User' object=$message->getUserProfile()->getDecoratedObject()}{/link}" class="username">{$message->getUsername()}</a></li>
+                                               <li><span class="messagePublicationTime">{@$message->getTime()|time}</span></li>
+                                               
+                                               {event name='messageHeaderMetaData'}
+                                       </ul>
                                </div>
                        </div>
-               </section>
-       </div>
-</article>
\ No newline at end of file
+                       
+                       {event name='messageHeader'}
+               </header>
+               
+               <div class="messageBody">
+                       {event name='beforeMessageText'}
+                       
+                       <div class="messageText">
+                               {@$message->getFormattedMessage()}
+                       </div>
+                       
+                       {event name='afterMessageText'}
+               </div>
+       </section>
+</article>
index a1851989cae01d04f0d1d47a87b7e2be217a8ec7..672020495ef8fcbc8709ebe5bb22f71d80c45658 100644 (file)
@@ -4,7 +4,7 @@
        margin: 30px 0;
        
        > li {
-               padding: 40px 0;
+               padding: 30px 0;
                
                &:not(:first-child) {
                        border-top: 1px solid $wcfContentBorder;
@@ -87,6 +87,7 @@
        .userAvatar {
                display: inline-block;
                position: relative;
+               margin-bottom: 10px;
                
                > a {
                        display: inline-block;
@@ -94,8 +95,7 @@
        }
        
        .username {
-               display: block;
-               margin: 5px 0;
+               display: inline-block;
                
                @extend .wcfFontHeadline;
        }
 }
 
 .messageAuthor + * {
-       margin-top: 25px;
+       margin-top: 20px;
        
        &:before {
                content: "";
        margin-bottom: 5px;
 }
 
+.messageSidebar + .messageContent {
+       margin-left: 30px;
+}
+
+// sidebar right
+.messageSidebarOrientationRight {
+       .messageContent {
+               order: 1;
+       }
+       
+       .messageSidebar {
+               order: 2;
+       }
+       
+       .messageSidebar + .messageContent {
+               margin-left: 20px;
+               margin-right: 30px;
+       }
+}
+
 /* content */
 .messageContent {
        display: flex;
        flex: auto;
        flex-direction: column;
-       margin-left: 30px;
+       margin: 0 20px;
        
        &.loading {
                position: relative;
 .messageHeader {
        display: flex;
        flex: 0 0 auto;
+       justify-content: flex-end;
        margin-bottom: 20px;
+       
+       > .messageQuickOptions {
+               flex: 0 0 auto;
+       }
+       
+       > .messageHeaderWrapper {
+               align-items: center;
+               flex: 1 1 auto;
+       }
 }
 
-.messageStatus {
+.messageHeaderBox {
+       display: flex;
        flex: 1 1 auto;
+       flex-wrap: wrap;
        
-       @extend .inlineList;
+       > .messageTitle {
+               flex: 0 0 100%;
+       }
        
-       .messagePublicationTime,
-       .wcfLikeCounter {
-               color: $wcfContentDimmedText;
+       > .messageHeaderMetaData,
+       > .messageStatus {
+               flex: 0 0 auto;
+       }
+}
+
+.messageTitle {
+       @extend .wcfFontHeadline;
+       
+       color: $wcfContentHeadlineText;
                
-               @extend .wcfFontSmall;
+       a {
+               color: $wcfContentHeadlineLink;
+                       
+               &:hover {
+                       color: $wcfContentHeadlineLinkActive;
+               }
        }
 }
 
-.messageQuickOptions {
-       flex: 0 0 auto;
+.messageHeaderMetaData {
+       @extend .inlineList;
+       @extend .dotSeparated;
+       @extend .wcfFontSmall;
        
+       .messagePublicationTime {
+               color: $wcfContentDimmedText;
+       }
+}
+
+.messageStatus {
        @extend .inlineList;
+       @extend .wcfFontSmall;
        
-       .badge {
-               color: rgb(255, 255, 255);
-               
-               @extend .wcfFontSmall;
+       .wcfLikeCounter {
+               color: $wcfContentDimmedText;
        }
 }
 
+.messageQuickOptions {
+       @extend .inlineList;
+}
+
 /* content - body */
 .messageBody {
        flex: auto;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
-       margin-top: 10px;
+       
+       &:not(:first-child) {   
+               margin-top: 20px;
+       }
        
        > .likesSummary {
                color: $wcfContentDimmedText;
        @extend .buttonGroup;
        
        justify-content: flex-end;
-       margin-top: 10px;
        //opacity: .3;
        transition: opacity .2s linear;
        
                }
        }
 }
-
-%messageStatusIconDeleted {
-       
-}
-
-/* ### message groups ### */
-.messageGroupList {
-       .tabularList {
-               .tabularListColumns {
-                       > .columnSubject {
-                               flex: 1 1 auto;
-                       }
-                       
-                       > .columnStats {
-                               flex: 0 0 140px;
-                               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;
-                               }
-                       }
-               }
-       }
-       
-       .columnMark > label {
-               cursor: pointer;
-               display: block;
-               height: 24px;
-               width: 24px;
-               
-               @extend .messageCheckboxLabel;
-               
-               &::before {
-                       font-size: 24px;
-                       top: -6px;
-               }
-       }
-       
-       .jsMarked .columnMark > label::after {
-               display: block;
-               font-size: 13px;
-               left: 3px;
-               top: 1px;
-       }
-       
-       .tabularListRowHead .columnMark > label::before {
-               top: -3px;
-       }
-       
-       
-       .messageDeleted .columnAvatar,
-       .messageDisabled .columnAvatar {
-               position: relative;
-               
-               &::before {
-                       display: block;
-                       font-family: FontAwesome;
-                       font-size: 42px;
-                       position: absolute;
-               }
-               
-               > div {
-                       visibility: hidden;
-               }
-       }
-       
-       .messageDeleted .columnAvatar::before {
-               color: rgb(180, 0, 0);
-               content: $fa-var-trash-o;
-               left: 17px;
-               top: -2px;
-       }
-       
-       .messageDisabled .columnAvatar::before {
-               color: rgb(0, 140, 0);
-               content: $fa-var-eye-slash;
-               left: 13px;
-               top: -2px;
-       }
-       
-       .columnAvatar {
-               div {
-                       position: relative;
-                       width: 48px;
-                       height: 48px;
-                       
-                       > p > img {
-                               opacity: .6;
-                               transition: opacity .2s;
-                       }
-               }
-               
-               .myAvatar {
-                       position: absolute;
-                       width: 24px;
-                       height: 24px;
-                       bottom: -2px;
-                       right: -6px;
-                       
-                       > img {
-                               border: 1px solid $wcfContentBackground;
-                               box-sizing: content-box;
-                       }
-               }
-       }
-       
-       .columnSubject {
-               overflow: hidden;
-               
-               > h3 {
-                       overflow: hidden;
-                       text-overflow: ellipsis;
-                       white-space: nowrap;
-                       
-                       > .messageGroupLink {
-                               @extend .wcfFontHeadline;
-                       }
-                       
-                       > .badge.label {
-                               top: -2px;
-                       }
-               }
-               
-               > small {
-                       display: block;
-               }
-               
-               > .statusDisplay {
-                       display: flex;
-                       float: right;
-                       opacity: .6;
-                       transition: opacity .2s;
-                       
-                       > .statusIcons {
-                               align-items: center;
-                               flex: 0 0 auto;
-                               
-                               > li {
-                                       align-items: center;
-                                       display: flex;
-                               }
-                       }
-               }
-               
-               > .labelList {
-                       float: right;
-                       padding-left: 7px;
-               }
-       }
-       
-       .columnLastPost {
-               > .box32 {
-                       align-items: center;
-               }
-               
-               
-               time {
-                       color: $wcfContentDimmedText;
-               }
-               
-               a {
-                       display: block;
-                       overflow: hidden;
-                       text-overflow: ellipsis;
-                       white-space: nowrap;
-               }
-       }
-       /*todo
-       .messageGroupInfo {
-               @extend .inlineList;
-               @extend .wcfFontSmall;
-               
-               > li:not(:last-child) {
-                       margin-right: 5px;
-                       
-                       &:after {
-                               content: "\00b7";
-                               margin-left: 5px;
-                       }
-               }
-       }*/
-       
-       // hover
-       .tabularListRow:hover,
-       tr:hover { // deprecated
-               .columnSubject > .statusDisplay {
-                       opacity: 1;
-                       
-                       > .pagination {
-                               opacity: 1;
-                       }
-               }
-               
-               .columnAvatar div > p > img {
-                       opacity: 1;
-               }
-       }
-       
-       // new status
-       .tabularListRow.new,
-       tr.new { // deprecated
-               .columnSubject > h3 > .messageGroupLink {
-                       font-weight: bold;
-               }
-               
-               .columnAvatar div > p > img {
-                       opacity: 1;
-               }
-               
-               // new message icon
-               .columnAvatar > div {
-                       &::after {
-                               color: $wcfContentLink;
-                               content: "\f069";
-                               font-family: FontAwesome;
-                               font-weight: normal !important;
-                               font-style: normal !important;
-                               font-size: 14px;
-                               position: absolute;
-                               text-decoration: none !important;
-                               top: -4px;
-                               right: -2px;
-                               
-                               @include textShadow($wcfContentLink);
-                       }
-               }
-       }
-       
-       .pagination {
-               flex: 0 0 auto;
-               opacity: 0;
-               transition: opacity .2s;
-               
-               @extend .wcfFontSmall;
-               
-               &:not(:last-child) {
-                       margin-right: 5px;
-               }
-       }
-
-       
-}
-
-.messageGroupListStatsSimple {
-       color: $wcfContentDimmedText;
-       font-size: 1rem;
-       left: 50%;
-       position: absolute;
-       top: 50%;
-       transform: translateX(-50%) translateY(-50%);
-}
-
-/*
-.messageGroupList {
-       .columnSubject {
-               
-               
-               
-       }
-       
-       tr {
-               /*
-               TODO
-               &.messageDisabled {
-                       color: $wcfDisabledColor;
-                       
-                       > td {
-                               background-color: $wcfDisabledBackgroundColor !important;
-                       }
-                       
-                       a:not(.badge) {
-                               color: $wcfDisabledColor;
-                       }
-               }
-               */
-               
-               /*
-               TODO
-               &.messageDeleted {
-                       color: $wcfDeletedColor;
-                       
-                       > td {
-                               background-color: $wcfDeletedBackgroundColor !important;
-                       }
-                       
-                       a:not(.badge) {
-                               color: $wcfDeletedColor;
-                       }
-               }
-               */
-               /*
-       }
-}
-*/
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/messageGroup.scss b/wcfsetup/install/files/style/ui/messageGroup.scss
new file mode 100644 (file)
index 0000000..bc55f54
--- /dev/null
@@ -0,0 +1,308 @@
+.messageGroupList {
+       .tabularList {
+               .tabularListColumns {
+                       > .columnSubject {
+                               flex: 1 1 auto;
+                       }
+                       
+                       > .columnStats {
+                               flex: 0 0 140px;
+                               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;
+                               }
+                       }
+               }
+       }
+       
+       .columnMark > label {
+               cursor: pointer;
+               display: block;
+               height: 24px;
+               width: 24px;
+               
+               @extend .messageCheckboxLabel;
+               
+               &::before {
+                       font-size: 24px;
+                       top: -6px;
+               }
+       }
+       
+       .jsMarked .columnMark > label::after {
+               display: block;
+               font-size: 13px;
+               left: 3px;
+               top: 1px;
+       }
+       
+       .tabularListRowHead .columnMark > label::before {
+               top: -3px;
+       }
+       
+       
+       .messageDeleted .columnAvatar,
+       .messageDisabled .columnAvatar {
+               position: relative;
+               
+               &::before {
+                       display: block;
+                       font-family: FontAwesome;
+                       font-size: 42px;
+                       position: absolute;
+               }
+               
+               > div {
+                       visibility: hidden;
+               }
+       }
+       
+       .messageDeleted .columnAvatar::before {
+               color: rgb(180, 0, 0);
+               content: $fa-var-trash-o;
+               left: 17px;
+               top: -2px;
+       }
+       
+       .messageDisabled .columnAvatar::before {
+               color: rgb(0, 140, 0);
+               content: $fa-var-eye-slash;
+               left: 13px;
+               top: -2px;
+       }
+       
+       .columnAvatar {
+               div {
+                       position: relative;
+                       width: 48px;
+                       height: 48px;
+                       
+                       > p > img {
+                               opacity: .6;
+                               transition: opacity .2s;
+                       }
+               }
+               
+               .myAvatar {
+                       position: absolute;
+                       width: 24px;
+                       height: 24px;
+                       bottom: -2px;
+                       right: -6px;
+                       
+                       > img {
+                               border: 1px solid $wcfContentBackground;
+                               box-sizing: content-box;
+                       }
+               }
+       }
+       
+       .columnSubject {
+               overflow: hidden;
+               
+               > h3 {
+                       overflow: hidden;
+                       text-overflow: ellipsis;
+                       white-space: nowrap;
+                       
+                       > .messageGroupLink {
+                               @extend .wcfFontHeadline;
+                       }
+                       
+                       > .badge.label {
+                               top: -2px;
+                       }
+               }
+               
+               > small {
+                       display: block;
+               }
+               
+               > .statusDisplay {
+                       display: flex;
+                       float: right;
+                       opacity: .6;
+                       transition: opacity .2s;
+                       
+                       > .statusIcons {
+                               align-items: center;
+                               flex: 0 0 auto;
+                               
+                               > li {
+                                       align-items: center;
+                                       display: flex;
+                               }
+                       }
+               }
+               
+               > .labelList {
+                       float: right;
+                       padding-left: 7px;
+               }
+       }
+       
+       .columnLastPost {
+               > .box32 {
+                       align-items: center;
+               }
+               
+               
+               time {
+                       color: $wcfContentDimmedText;
+               }
+               
+               a {
+                       display: block;
+                       overflow: hidden;
+                       text-overflow: ellipsis;
+                       white-space: nowrap;
+               }
+       }
+       /*todo
+       .messageGroupInfo {
+               @extend .inlineList;
+               @extend .wcfFontSmall;
+               
+               > li:not(:last-child) {
+                       margin-right: 5px;
+                       
+                       &:after {
+                               content: "\00b7";
+                               margin-left: 5px;
+                       }
+               }
+       }*/
+       
+       // hover
+       .tabularListRow:hover,
+       tr:hover { // deprecated
+               .columnSubject > .statusDisplay {
+                       opacity: 1;
+                       
+                       > .pagination {
+                               opacity: 1;
+                       }
+               }
+               
+               .columnAvatar div > p > img {
+                       opacity: 1;
+               }
+       }
+       
+       // new status
+       .tabularListRow.new,
+       tr.new { // deprecated
+               .columnSubject > h3 > .messageGroupLink {
+                       font-weight: bold;
+               }
+               
+               .columnAvatar div > p > img {
+                       opacity: 1;
+               }
+               
+               // new message icon
+               .columnAvatar > div {
+                       &::after {
+                               color: $wcfContentLink;
+                               content: "\f069";
+                               font-family: FontAwesome;
+                               font-weight: normal !important;
+                               font-style: normal !important;
+                               font-size: 14px;
+                               position: absolute;
+                               text-decoration: none !important;
+                               top: -4px;
+                               right: -2px;
+                               
+                               @include textShadow($wcfContentLink);
+                       }
+               }
+       }
+       
+       .pagination {
+               flex: 0 0 auto;
+               opacity: 0;
+               transition: opacity .2s;
+               
+               @extend .wcfFontSmall;
+               
+               &:not(:last-child) {
+                       margin-right: 5px;
+               }
+       }
+
+       
+}
+
+.messageGroupListStatsSimple {
+       color: $wcfContentDimmedText;
+       font-size: 1rem;
+       left: 50%;
+       position: absolute;
+       top: 50%;
+       transform: translateX(-50%) translateY(-50%);
+}
+
+/*
+.messageGroupList {
+       .columnSubject {
+               
+               
+               
+       }
+       
+       tr {
+               /*
+               TODO
+               &.messageDisabled {
+                       color: $wcfDisabledColor;
+                       
+                       > td {
+                               background-color: $wcfDisabledBackgroundColor !important;
+                       }
+                       
+                       a:not(.badge) {
+                               color: $wcfDisabledColor;
+                       }
+               }
+               */
+               
+               /*
+               TODO
+               &.messageDeleted {
+                       color: $wcfDeletedColor;
+                       
+                       > td {
+                               background-color: $wcfDeletedBackgroundColor !important;
+                       }
+                       
+                       a:not(.badge) {
+                               color: $wcfDeletedColor;
+                       }
+               }
+               */
+               /*
+       }
+}
+*/
\ No newline at end of file
index f329284f481d2360c60c80832ce4182943cbe8f9..0b2a6aa3f7f43d9cfd719231bf89bd884a6e43c2 100644 (file)
@@ -1959,7 +1959,9 @@ INSERT INTO wcf1_package_update_server (serverURL, status, isDisabled, errorMess
 INSERT INTO wcf1_package_update_server (serverURL, status, isDisabled, errorMessage, lastUpdateTime, loginUsername, loginPassword) VALUES ('http://store.woltlab.com/typhoon/', 'online', 0, NULL, 0, '', '');
 
 -- style default values
+
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('individualLess', '');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('messageSidebarOrientation', 'left');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('overrideLess', '');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('pageLogo', '');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('useFluidLayout', '1');