Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-10-31 14:10:08 +00:00
Code Issues Releases Wiki Activity

Improve frontend

Browse Source 
according to http://ux.stackexchange.com/a/41142/32862
This commit is contained in:
Maximilian Mader 2013-06-23 18:48:48 +02:00
parent 820711cc9f
commit a71e1ec00e
3 changed files with 94 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
file/style/be.bastelstu.wcf.chat.less
View File

@ -38,7 +38,7 @@
} }
.timsChatMessageContainer { .timsChatMessageContainer {
height: 200px; height: 320px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
display: none; display: none;
@ -84,40 +84,80 @@
} }
&:nth-child(even) { &:nth-child(even) {
background-color: @wcfContainerAccentBackgroundColor; > .innerMessageContainer.normal .innerMessage {
background-color: @wcfContainerAccentBackgroundColor;
&:after {
border-color: transparent @wcfContainerAccentBackgroundColor;
}
}
} }
> { > .innerMessageContainer {
time, .usernameContainer, .text, .markContainer { padding: 5px 20px 5px 5px;
display: table-cell; position: relative;
vertical-align: top;
padding: @wcfGapTiny 0; .userAvatar {
float: left;
margin-left: 16px;
} }
.markContainer { .innerMessage {
display: none; margin-left: 46px;
padding: 0; padding: 2px 5px 5px;
} }
time { time {
&::before { float: right;
content: "["; }
&.normal {
.userAvatar {
margin-left: 0;
} }
&::after {
content: "]"; .innerMessage {
border-width: 1px;
border-style: solid;
border-color: @wcfContainerBorderColor;
border-radius: @wcfContainerBorderRadius;
background-color: @wcfContainerBackgroundColor;
.username {
font-weight: bold;
}
&:before {
border-color: transparent @wcfContainerBorderColor;
border-style: solid;
border-width: 6px 6px 6px 0;
content: "";
display: block;
left: 46px;
position: absolute;
top: 12px;
width: 0;
}
&:after {
border-color: transparent @wcfContainerBackgroundColor;;
border-style: solid;
border-width: 5px 5px 5px 0;
content: "";
display: block;
left: 47px;
position: absolute;
top: 13px;
width: 0;
}
} }
} }
.usernameContainer { > .markContainer {
text-align: right; display: none;
min-width: 100px; position: absolute;
padding-right: @wcfGapSmall; right: 0px;
white-space: nowrap; top: 6px;
font-weight: bold;
}
.text {
width: 100%;
} }
} }
} }

4
template/chat.tpl
View File

@ -61,7 +61,7 @@
//]]> //]]>
</script> </script>
<style type="text/css"> <!--<style type="text/css">
/*<![CDATA[*/ /*<![CDATA[*/
.timsChatMessage::before { .timsChatMessage::before {
content: ""; content: "";
@ -80,7 +80,7 @@
content: "\f05a"; content: "\f05a";
} }
/*]]>*/ /*]]>*/
</style> </style>-->
</head> </head>
<body id="tpl{$templateName|ucfirst}"> <body id="tpl{$templateName|ucfirst}">

49
template/message.tpl
View File

@ -1,24 +1,31 @@
{literal} {literal}
<time>{@$formattedTime}</time> <div class="innerMessageContainer{if $type == 0 || $type == 7} normal{/if}">
<span class="usernameContainer"> <div class="userAvatar framed">
<span class="username">{* {if $type == 0 || $type == 7}
*}{if $type != 7}{* {@$avatar[32]}
*}{@$formattedUsername}{* {else}
*}{else} {@$avatar[16]}
{if $receiver == WCF.User.userID} {/if}
{@$formattedUsername} </div>
{/if} <div class="innerMessage">
<span class="username">
{@$formattedUsername}
{if $type == 7}
<span class="icon icon16 icon-double-angle-right jsTooltip" title="{/literal}{lang}chat.ui.whispers{/lang}{literal}" onclick="be.bastelstu.Chat.insertText('/whisper {if $receiver == WCF.User.userID}{$username.replace("\\", "\\\\").replace("'", "\\'")}{else}{$additionalData.receiverUsername.replace("\\", "\\\\").replace("'", "\\'")}{/if}, ', { append: false });"></span> <span class="icon icon16 icon-double-angle-right jsTooltip" title="{/literal}{lang}chat.ui.whispers{/lang}{literal}" onclick="be.bastelstu.Chat.insertText('/whisper {if $receiver == WCF.User.userID}{$username.replace("\\", "\\\\").replace("'", "\\'")}{else}{$additionalData.receiverUsername.replace("\\", "\\\\").replace("'", "\\'")}{/if}, ', { append: false });"></span>
{if $receiver != WCF.User.userID} {$additionalData.receiverUsername}
{$additionalData.receiverUsername}{/if}{* {/if}
*}{/if}{* </span>
*}</span>{* <time>{@$formattedTime}</time>
*}{if $receiver != WCF.User.userID}{* {if $type == 0 || $type == 7}
*}<span class="separator">{$separator}</span> <ul>
{/if} <li class="text">{@$formattedMessage}</li>
</span> </ul>
<span class="text">{@$formattedMessage}</span> {else}
<span class="markContainer"> <span class="text">{@$formattedMessage}</span>
<input type="checkbox" value="{@$messageID}" /> {/if}
</span> </div>
<span class="markContainer">
<input type="checkbox" value="{@$messageID}" />
</span>
</div>
{/literal} {/literal}