Various changes, see below:
- disable drag resizing when chatboxes are minimized. - refactored chat box and chat room markup so that they are more similar. - don't make the chat box title clickable if no vcard URL is available - make only the title text clickable, not the whitespace - fixed toggling of resized chats
This commit is contained in:
JC Brand
parent
62f6997a25
commit
12fc286ca6
38
converse.css
38
converse.css
|
|
@ -386,16 +386,25 @@ span.spinner.hor_centered {
|
|||
background-color: #2D617A;
|
||||
}
|
||||
|
||||
.chatroom .chat-body {
|
||||
height: -moz-calc(100% - 38px);
|
||||
height: -o-calc(100% - 38px);
|
||||
height: calc(100% - 38px);
|
||||
.chat-body {
|
||||
background-color: white;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.chatbox .chat-body {
|
||||
height: -moz-calc(100% - 38px);
|
||||
height: -o-calc(100% - 38px);
|
||||
height: calc(100% - 38px);
|
||||
}
|
||||
|
||||
.chatroom .chat-body {
|
||||
height: -moz-calc(100% - 38px);
|
||||
height: -o-calc(100% - 38px);
|
||||
height: calc(100% - 38px);
|
||||
}
|
||||
|
||||
.chatroom .chat-area {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
|
@ -450,16 +459,10 @@ ul.participant-list li.moderator {
|
|||
-moz-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chatbox .chat-content {
|
||||
height: -moz-calc(100% - 114px);
|
||||
height: -o-calc(100% - 114px);
|
||||
height: calc(100% - 114px);
|
||||
}
|
||||
|
||||
.chatroom .chat-content {
|
||||
height: -moz-calc(100% - 75px);
|
||||
height: -o-calc(100% - 75px);
|
||||
height: calc(100% - 75px);
|
||||
.chat-content {
|
||||
height: -moz-calc(100% - 76px);
|
||||
height: -o-calc(100% - 76px);
|
||||
height: calc(100% - 76px);
|
||||
}
|
||||
|
||||
.chat-info {
|
||||
|
|
@ -558,6 +561,10 @@ div.chat-title {
|
|||
height: 1em;
|
||||
}
|
||||
|
||||
div.chat-title a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chat-head-chatbox,
|
||||
.chat-head-chatroom {
|
||||
background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(79,106,114,1) 100%);
|
||||
|
|
@ -576,6 +583,9 @@ p.chatroom-topic {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
div.chat-head-chatbox a.user-custom-message {
|
||||
color: white;
|
||||
}
|
||||
.activated{
|
||||
display: block !important;
|
||||
}
|
||||
|
|
|
|||
30
converse.js
30
converse.js
|
|
@ -1149,19 +1149,21 @@
|
|||
}
|
||||
},
|
||||
|
||||
swapToggleIcon: function ($el) {
|
||||
if ($el.hasClass('icon-minus')) {
|
||||
$el.removeClass('icon-minus').addClass('icon-plus');
|
||||
} else {
|
||||
$el.removeClass('icon-plus').addClass('icon-minus');
|
||||
}
|
||||
},
|
||||
|
||||
toggleChat: function (ev) {
|
||||
// FIXME: Restore chat box to original resized height.
|
||||
// Requires that we save the custom height.
|
||||
this.$el.children('.box-flyout').attr('style', '');
|
||||
|
||||
this.saveToggleState();
|
||||
this.$el.find('form.sendXMPPMessage').toggle();
|
||||
this.$el.find('div.chat-content').slideToggle('fast');
|
||||
this.swapToggleIcon($(ev.target));
|
||||
this.$el.find('div.chat-body').slideToggle('fast');
|
||||
var $target = $(ev.target);
|
||||
if ($target.hasClass('icon-minus')) {
|
||||
$target.removeClass('icon-minus').addClass('icon-plus');
|
||||
} else {
|
||||
$target.removeClass('icon-plus').addClass('icon-minus');
|
||||
}
|
||||
// Toggle drag resize ability
|
||||
this.$el.find('.dragresize-tm').toggle();
|
||||
},
|
||||
|
||||
updateVCard: function () {
|
||||
|
|
@ -1746,12 +1748,6 @@
|
|||
},
|
||||
is_chatroom: true,
|
||||
|
||||
toggleChat: function (ev) {
|
||||
this.saveToggleState();
|
||||
this.$el.find('div.chat-body').slideToggle('fast');
|
||||
this.swapToggleIcon($(ev.target));
|
||||
},
|
||||
|
||||
sendChatRoomMessage: function (body) {
|
||||
var match = body.replace(/^\s*/, "").match(/^\/(.*?)(?: (.*))?$/) || [false],
|
||||
$chat_content;
|
||||
|
|
|
|||
145
mockup.html
145
mockup.html
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" id="facebook">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title id="pageTitle">Converse: Mockup</title>
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
|
||||
<link type="text/css" rel="stylesheet" href="converse.css">
|
||||
<script src="components/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="dragresize/dragresize_commented.js"></script>
|
||||
<script type="text/javascript" src="src/dragresize.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
//<![CDATA[
|
||||
|
|
@ -245,74 +245,76 @@
|
|||
<div class="chat-head chat-head-chatbox">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="toggle-chatbox-button icon-minus"></a>
|
||||
|
||||
<a href="http://opkode.com" target="_blank" class="user">
|
||||
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
|
||||
<div class="chat-title"> JC Brand </div>
|
||||
</a>
|
||||
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
|
||||
<div class="chat-title">
|
||||
<a href="http://opkode.com" target="_blank" class="user">
|
||||
JC Brand
|
||||
</a>
|
||||
</div>
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="chat-content">
|
||||
<div class="chat-info"><strong>/help</strong>:This is an info message</div>
|
||||
<div class="chat-error">This is an error message</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">09:35 me: </span>
|
||||
<span class="chat-message-content">
|
||||
Hello world
|
||||
<span class="icon-smiley"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-them">19:25 Benedict-John: </span>
|
||||
<span class="chat-message-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:39 me: </span>
|
||||
<span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:42 me: </span>
|
||||
<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 class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="chat-info"><strong>/help</strong>:This is an info message</div>
|
||||
<div class="chat-error">This is an error message</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">09:35 me: </span>
|
||||
<span class="chat-message-content">
|
||||
Hello world
|
||||
<span class="icon-smiley"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-them">19:25 Benedict-John: </span>
|
||||
<span class="chat-message-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:39 me: </span>
|
||||
<span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:42 me: </span>
|
||||
<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 no-text-select">
|
||||
<li class="toggle-smiley icon-happy" title="Insert a smilery">
|
||||
<ul>
|
||||
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
|
||||
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
|
||||
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
|
||||
<li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
|
||||
<li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
|
||||
<li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
|
||||
<li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
|
||||
<li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
|
||||
<li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
|
||||
<li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
|
||||
<li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
|
||||
<li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
|
||||
<li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="icon-unlocked"></span>
|
||||
<ul>
|
||||
<li><a href="#">Start private conversation</a></li>
|
||||
<li><a href="#">End private conversation</a></li>
|
||||
<li><a href="#">Authenticate buddy</a></li>
|
||||
<li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley icon-happy" title="Insert a smilery">
|
||||
<ul>
|
||||
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
|
||||
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
|
||||
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
|
||||
<li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
|
||||
<li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
|
||||
<li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
|
||||
<li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
|
||||
<li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
|
||||
<li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
|
||||
<li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
|
||||
<li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
|
||||
<li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
|
||||
<li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="icon-unlocked"></span>
|
||||
<ul>
|
||||
<li><a href="#">Start private conversation</a></li>
|
||||
<li><a href="#">End private conversation</a></li>
|
||||
<li><a href="#">Authenticate buddy</a></li>
|
||||
<li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -325,8 +327,7 @@
|
|||
<a class="configure-chatroom-button icon-wrench" style=""></a>
|
||||
|
||||
<div class="chat-title"> Chatroom </div>
|
||||
<p class="chatroom-topic"></p>
|
||||
<p></p>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-area">
|
||||
|
|
@ -479,19 +480,13 @@ $(document).ready(function () {
|
|||
|
||||
$('.toggle-chatbox-button').click(function(ev) {
|
||||
var $grandparent = $(ev.target).parent().parent().parent();
|
||||
if ($grandparent.attr('class') == 'chatroom') {
|
||||
$grandparent.find('.chat-body').slideToggle(300);
|
||||
} else {
|
||||
$grandparent.find('div.chat-content').slideToggle(300);
|
||||
}
|
||||
$grandparent.find('.chat-body').slideToggle(300);
|
||||
var flyout = $grandparent.find('.box-flyout');
|
||||
if (flyout.hasClass('minimized')) {
|
||||
flyout.removeClass('minimized');
|
||||
} else {
|
||||
flyout.addClass('minimized');
|
||||
}
|
||||
|
||||
$(ev.target).parent().parent().find('form.sendXMPPMessage').toggle();
|
||||
});
|
||||
|
||||
// Clickable Dropdown
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com
|
|||
if (typeof define === 'function' && define.amd) {
|
||||
define("dragresize", [], function() { return factory(); });
|
||||
} else {
|
||||
root.dragresize = factory();
|
||||
root.DragResize = factory();
|
||||
}
|
||||
}(this, function () {
|
||||
|
||||
|
|
|
|||
|
|
@ -3,19 +3,27 @@
|
|||
<div class="chat-head chat-head-chatbox">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="toggle-chatbox-button icon-minus"></a>
|
||||
<a href="{{url}}" target="_blank" class="user">
|
||||
<div class="chat-title"> {{ fullname }} </div>
|
||||
</a>
|
||||
<div class="chat-title">
|
||||
{[ if (url) { ]}
|
||||
<a href="{{url}}" target="_blank" class="user">
|
||||
{[ } ]}
|
||||
{{ fullname }}
|
||||
{[ if (url) { ]}
|
||||
</a>
|
||||
{[ } ]}
|
||||
</div>
|
||||
<p class="user-custom-message"><p/>
|
||||
</div>
|
||||
<div class="chat-content"></div>
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
{[ if (show_toolbar) { ]}
|
||||
<ul class="chat-toolbar no-text-select"></ul>
|
||||
{[ } ]}
|
||||
<textarea
|
||||
type="text"
|
||||
class="chat-textarea"
|
||||
placeholder="{{label_personal_message}}"/>
|
||||
</form>
|
||||
<div class="chat-body">
|
||||
<div class="chat-content"></div>
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
{[ if (show_toolbar) { ]}
|
||||
<ul class="chat-toolbar no-text-select"></ul>
|
||||
{[ } ]}
|
||||
<textarea
|
||||
type="text"
|
||||
class="chat-textarea"
|
||||
placeholder="{{label_personal_message}}"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user