Merge branch 'mockup' into otr
This commit is contained in:
JC Brand
commit
887d27ae59
105
converse.css
105
converse.css
|
|
@ -78,7 +78,7 @@ span.spinner.hor_centered {
|
|||
font-size: 100%;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
padding: 3px 0 3px 7px;
|
||||
padding: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.chat-head-chatbox {
|
||||
|
|
@ -91,7 +91,7 @@ span.spinner.hor_centered {
|
|||
}
|
||||
|
||||
.chatroom .chat-body {
|
||||
height: 272px;
|
||||
height: 274px;
|
||||
background-color: white;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
|
|
@ -110,12 +110,12 @@ span.spinner.hor_centered {
|
|||
|
||||
.chatroom .participants {
|
||||
float: left;
|
||||
width: auto;
|
||||
height: 272px;
|
||||
height: 274px;
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
border-left: 1px solid #AAA;
|
||||
max-width: 99px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.participants ul.participant-list li {
|
||||
|
|
@ -124,17 +124,13 @@ span.spinner.hor_centered {
|
|||
white-space: nowrap;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 0.5em 0 0 0.5em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
ul.participant-list li.moderator {
|
||||
color: #FE0007;
|
||||
}
|
||||
|
||||
.chatroom form.sendXMPPMessage {
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
color: #8f2831;
|
||||
}
|
||||
|
||||
.chatroom .participant-list {
|
||||
|
|
@ -148,10 +144,11 @@ ul.participant-list li.moderator {
|
|||
}
|
||||
|
||||
.chat-content {
|
||||
position: relative;
|
||||
padding: 0.3em;
|
||||
font-size: 13px;
|
||||
color: rgb(79, 79, 79);
|
||||
height:193px;
|
||||
height:180px;
|
||||
width: 190px;
|
||||
overflow-y:auto;
|
||||
border: 0;
|
||||
|
|
@ -159,19 +156,8 @@ ul.participant-list li.moderator {
|
|||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
border: 0;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.chat-textarea-chatbox-selected {
|
||||
border: 1px solid #578308;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.chat-textarea-chatroom-selected {
|
||||
border: 2px solid #2D617A;
|
||||
margin:0;
|
||||
.chatroom .chat-content {
|
||||
height:200px;
|
||||
}
|
||||
|
||||
.chat-info {
|
||||
|
|
@ -196,7 +182,7 @@ ul.participant-list li.moderator {
|
|||
}
|
||||
|
||||
.chat-message-them {
|
||||
color: #F62817;
|
||||
color: #8f2831;
|
||||
}
|
||||
|
||||
.chat-message-me {
|
||||
|
|
@ -746,7 +732,7 @@ form.sendXMPPMessage {
|
|||
background: white;
|
||||
border: 0;
|
||||
border-top: 1px solid #BBB;
|
||||
padding: 0.5em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
-webkit-border-radius: 4px;
|
||||
|
|
@ -757,7 +743,61 @@ form.sendXMPPMessage {
|
|||
background-clip: padding-box;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
height: 54px;
|
||||
height: 85px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.chatroom form.sendXMPPMessage {
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
border-radius: 4px;
|
||||
resize: none;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
ul.chat-toolbar {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 0 5px 0 0;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.chat-toolbar-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.not-private {
|
||||
color: #8f2831;
|
||||
}
|
||||
|
||||
.unverified {
|
||||
color: #cf5300;
|
||||
}
|
||||
|
||||
.private {
|
||||
color: #4B7003
|
||||
}
|
||||
|
||||
ul.chat-toolbar li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: 0 3px 0 3px;
|
||||
}
|
||||
|
||||
ul.chat-toolbar li:hover {
|
||||
cursor: pointer;
|
||||
color: rgb(39, 39, 39);
|
||||
}
|
||||
|
||||
form#set-custom-xmpp-status {
|
||||
|
|
@ -765,6 +805,17 @@ form#set-custom-xmpp-status {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-textarea-chatbox-selected {
|
||||
border: 1px solid #578308;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.chat-textarea-chatroom-selected {
|
||||
border: 2px solid #2D617A;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
|
||||
#set-custom-xmpp-status button {
|
||||
padding: 1px 2px 1px 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -709,7 +709,7 @@
|
|||
return;
|
||||
}
|
||||
var img_src = 'data:'+this.model.get('image_type')+';base64,'+this.model.get('image'),
|
||||
canvas = $('<canvas height="35px" width="35px" class="avatar"></canvas>'),
|
||||
canvas = $('<canvas height="33px" width="33px" class="avatar"></canvas>'),
|
||||
ctx = canvas.get(0).getContext('2d'),
|
||||
img = new Image(); // Create new Image object
|
||||
img.onload = function() {
|
||||
|
|
|
|||
19
mockup.html
19
mockup.html
|
|
@ -193,7 +193,7 @@
|
|||
<div class="chat-head chat-head-chatbox">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a href="http://opkode.com" target="_blank" class="user">
|
||||
<canvas height="35px" width="35px" class="avatar" style="background-color: black"></canvas>
|
||||
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
|
||||
<div class="chat-title"> JC Brand </div>
|
||||
</a>
|
||||
<p class="user-custom-message"></p>
|
||||
|
|
@ -219,8 +219,21 @@
|
|||
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-event">JC Brand is busy</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-me">19:43 me: </span>
|
||||
<span class="chat-message-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
<ul class="chat-toolbar">
|
||||
<li class="icon-happy" title="Insert a smilery"></li>
|
||||
<li class="icon-camera-2" title="Enable video chat"></li>
|
||||
<li class="icon-newspaper" title="Fetch and show this user's vCard"></li>
|
||||
<li class="otr" title="Turn on 'off-the-record' chat encryption">
|
||||
<span class="chat-toolbar-text not-private">Not private</span>
|
||||
<span class="icon-unlocked not-private"/>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -255,6 +268,10 @@
|
|||
<span class="chat-message-me">19:42 me: </span>
|
||||
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master: </span>
|
||||
<span class="chat-message-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
<textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user