{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
<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>
<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'}
-<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>
margin: 30px 0;
> li {
- padding: 40px 0;
+ padding: 30px 0;
&:not(:first-child) {
border-top: 1px solid $wcfContentBorder;
.userAvatar {
display: inline-block;
position: relative;
+ margin-bottom: 10px;
> a {
display: inline-block;
}
.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
--- /dev/null
+.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
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');