Merge branch 'mockup' into otr
This commit is contained in:
commit
887d27ae59
105
converse.css
105
converse.css
@ -78,7 +78,7 @@ span.spinner.hor_centered {
|
|||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
border-top-right-radius: 4px;
|
border-top-right-radius: 4px;
|
||||||
border-top-left-radius: 4px;
|
border-top-left-radius: 4px;
|
||||||
padding: 3px 0 3px 7px;
|
padding: 3px 0 0 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-head-chatbox {
|
.chat-head-chatbox {
|
||||||
@ -91,7 +91,7 @@ span.spinner.hor_centered {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chatroom .chat-body {
|
.chatroom .chat-body {
|
||||||
height: 272px;
|
height: 274px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-bottom-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
@ -110,12 +110,12 @@ span.spinner.hor_centered {
|
|||||||
|
|
||||||
.chatroom .participants {
|
.chatroom .participants {
|
||||||
float: left;
|
float: left;
|
||||||
width: auto;
|
height: 274px;
|
||||||
height: 272px;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border-left: 1px solid #AAA;
|
border-left: 1px solid #AAA;
|
||||||
max-width: 99px;
|
max-width: 99px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.participants ul.participant-list li {
|
.participants ul.participant-list li {
|
||||||
@ -124,17 +124,13 @@ span.spinner.hor_centered {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
padding: 0.5em 0 0 0.5em;
|
padding: 0.5em 0 0 0.5em;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.participant-list li.moderator {
|
ul.participant-list li.moderator {
|
||||||
color: #FE0007;
|
color: #8f2831;
|
||||||
}
|
|
||||||
|
|
||||||
.chatroom form.sendXMPPMessage {
|
|
||||||
-webkit-border-bottom-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatroom .participant-list {
|
.chatroom .participant-list {
|
||||||
@ -148,10 +144,11 @@ ul.participant-list li.moderator {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chat-content {
|
.chat-content {
|
||||||
|
position: relative;
|
||||||
padding: 0.3em;
|
padding: 0.3em;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: rgb(79, 79, 79);
|
color: rgb(79, 79, 79);
|
||||||
height:193px;
|
height:180px;
|
||||||
width: 190px;
|
width: 190px;
|
||||||
overflow-y:auto;
|
overflow-y:auto;
|
||||||
border: 0;
|
border: 0;
|
||||||
@ -159,19 +156,8 @@ ul.participant-list li.moderator {
|
|||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-textarea {
|
.chatroom .chat-content {
|
||||||
border: 0;
|
height:200px;
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-textarea-chatbox-selected {
|
|
||||||
border: 1px solid #578308;
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-textarea-chatroom-selected {
|
|
||||||
border: 2px solid #2D617A;
|
|
||||||
margin:0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-info {
|
.chat-info {
|
||||||
@ -196,7 +182,7 @@ ul.participant-list li.moderator {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chat-message-them {
|
.chat-message-them {
|
||||||
color: #F62817;
|
color: #8f2831;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-message-me {
|
.chat-message-me {
|
||||||
@ -746,7 +732,7 @@ form.sendXMPPMessage {
|
|||||||
background: white;
|
background: white;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid #BBB;
|
border-top: 1px solid #BBB;
|
||||||
padding: 0.5em;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
@ -757,7 +743,61 @@ form.sendXMPPMessage {
|
|||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-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 {
|
form#set-custom-xmpp-status {
|
||||||
@ -765,6 +805,17 @@ form#set-custom-xmpp-status {
|
|||||||
padding: 0;
|
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 {
|
#set-custom-xmpp-status button {
|
||||||
padding: 1px 2px 1px 1px;
|
padding: 1px 2px 1px 1px;
|
||||||
}
|
}
|
||||||
|
@ -709,7 +709,7 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var img_src = 'data:'+this.model.get('image_type')+';base64,'+this.model.get('image'),
|
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'),
|
ctx = canvas.get(0).getContext('2d'),
|
||||||
img = new Image(); // Create new Image object
|
img = new Image(); // Create new Image object
|
||||||
img.onload = function() {
|
img.onload = function() {
|
||||||
|
19
mockup.html
19
mockup.html
@ -193,7 +193,7 @@
|
|||||||
<div class="chat-head chat-head-chatbox">
|
<div class="chat-head chat-head-chatbox">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="close-chatbox-button icon-close"></a>
|
||||||
<a href="http://opkode.com" target="_blank" class="user">
|
<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>
|
<div class="chat-title"> JC Brand </div>
|
||||||
</a>
|
</a>
|
||||||
<p class="user-custom-message"></p>
|
<p class="user-custom-message"></p>
|
||||||
@ -219,8 +219,21 @@
|
|||||||
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-event">JC Brand is busy</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>
|
</div>
|
||||||
<form class="sendXMPPMessage" action="" method="post">
|
<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>
|
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@ -255,6 +268,10 @@
|
|||||||
<span class="chat-message-me">19:42 me: </span>
|
<span class="chat-message-me">19:42 me: </span>
|
||||||
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<form class="sendXMPPMessage" action="" method="post">
|
<form class="sendXMPPMessage" action="" method="post">
|
||||||
<textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
|
<textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
|
||||||
|
Loading…
Reference in New Issue
Block a user