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

4
template/chat.tpl
View File

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

49
template/message.tpl
View File

@ -1,24 +1,31 @@
{literal}
<time>{@$formattedTime}</time>
<span class="usernameContainer">
<span class="username">{*
*}{if $type != 7}{*
*}{@$formattedUsername}{*
*}{else}
{if $receiver == WCF.User.userID}
{@$formattedUsername}
{/if}
<div class="innerMessageContainer{if $type == 0 || $type == 7} normal{/if}">
<div class="userAvatar framed">
{if $type == 0 || $type == 7}
{@$avatar[32]}
{else}
{@$avatar[16]}
{/if}
</div>
<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>
{if $receiver != WCF.User.userID}
{$additionalData.receiverUsername}{/if}{*
*}{/if}{*
*}</span>{*
*}{if $receiver != WCF.User.userID}{*
*}<span class="separator">{$separator}</span>
{/if}
</span>
<span class="text">{@$formattedMessage}</span>
<span class="markContainer">
<input type="checkbox" value="{@$messageID}" />
</span>
{$additionalData.receiverUsername}
{/if}
</span>
<time>{@$formattedTime}</time>
{if $type == 0 || $type == 7}
<ul>
<li class="text">{@$formattedMessage}</li>
</ul>
{else}
<span class="text">{@$formattedMessage}</span>
{/if}
</div>
<span class="markContainer">
<input type="checkbox" value="{@$messageID}" />
</span>
</div>
{/literal}