Skip to content

C
converse.js
Commit 12fc286c authored by JC Brand's avatar JC Brand
Browse files
Options

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
parent 62f6997a
Show whitespace changes
Inline Side-by-side
Showing with 129 additions and 120 deletions
converse.css
View file @ 12fc286c
...@@ -386,16 +386,25 @@ span.spinner.hor_centered { ...@@ -386,16 +386,25 @@ span.spinner.hor_centered {
background-color: #2D617A; background-color: #2D617A;
} }
.chatroom .chat-body { .chat-body {
height: -moz-calc(100% - 38px);
height: -o-calc(100% - 38px);
height: calc(100% - 38px);
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;
border-top: 0; 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 { .chatroom .chat-area {
float: left; float: left;
width: 200px; width: 200px;
...@@ -450,16 +459,10 @@ ul.participant-list li.moderator { ...@@ -450,16 +459,10 @@ ul.participant-list li.moderator {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
} }
.chatbox .chat-content { .chat-content {
height: -moz-calc(100% - 114px); height: -moz-calc(100% - 76px);
height: -o-calc(100% - 114px); height: -o-calc(100% - 76px);
height: calc(100% - 114px); height: calc(100% - 76px);
}
.chatroom .chat-content {
height: -moz-calc(100% - 75px);
height: -o-calc(100% - 75px);
height: calc(100% - 75px);
} }
.chat-info { .chat-info {
...@@ -558,6 +561,10 @@ div.chat-title { ...@@ -558,6 +561,10 @@ div.chat-title {
height: 1em; height: 1em;
} }
div.chat-title a {
color: white;
}
.chat-head-chatbox, .chat-head-chatbox,
.chat-head-chatroom { .chat-head-chatroom {
background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(79,106,114,1) 100%); background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(79,106,114,1) 100%);
...@@ -576,6 +583,9 @@ p.chatroom-topic { ...@@ -576,6 +583,9 @@ p.chatroom-topic {
margin: 0; margin: 0;
} }
div.chat-head-chatbox a.user-custom-message {
color: white;
}
.activated{ .activated{
display: block !important; display: block !important;
} }
......
converse.js
View file @ 12fc286c
...@@ -1149,19 +1149,21 @@ ...@@ -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) { 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.saveToggleState();
this.$el.find('form.sendXMPPMessage').toggle(); this.$el.find('div.chat-body').slideToggle('fast');
this.$el.find('div.chat-content').slideToggle('fast'); var $target = $(ev.target);
this.swapToggleIcon($(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 () { updateVCard: function () {
...@@ -1746,12 +1748,6 @@ ...@@ -1746,12 +1748,6 @@
}, },
is_chatroom: true, is_chatroom: true,
toggleChat: function (ev) {
this.saveToggleState();
this.$el.find('div.chat-body').slideToggle('fast');
this.swapToggleIcon($(ev.target));
},
sendChatRoomMessage: function (body) { sendChatRoomMessage: function (body) {
var match = body.replace(/^\s*/, "").match(/^\/(.*?)(?: (.*))?$/) || [false], var match = body.replace(/^\s*/, "").match(/^\/(.*?)(?: (.*))?$/) || [false],
$chat_content; $chat_content;
......
mockup.html
View file @ 12fc286c
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" id="facebook"> <html lang="en">
<head> <head>
<title id="pageTitle">Converse: Mockup</title> <title id="pageTitle">Converse: Mockup</title>
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css"> <link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
<link type="text/css" rel="stylesheet" href="converse.css"> <link type="text/css" rel="stylesheet" href="converse.css">
<script src="components/jquery/jquery.min.js"></script> <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"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
//<![CDATA[ //<![CDATA[
...@@ -245,14 +245,15 @@ ...@@ -245,14 +245,15 @@
<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 class="toggle-chatbox-button icon-minus"></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> <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title"> JC Brand </div> <div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user">
JC Brand
</a> </a>
</div>
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p> <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
<p></p>
</div> </div>
<div class="chat-body">
<div class="chat-content"> <div class="chat-content">
<div class="chat-info"><strong>/help</strong>:This is an info message</div> <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-error">This is an error message</div>
...@@ -315,6 +316,7 @@ ...@@ -315,6 +316,7 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392"> <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="box-flyout"> <div class="box-flyout">
...@@ -325,8 +327,7 @@ ...@@ -325,8 +327,7 @@
<a class="configure-chatroom-button icon-wrench" style=""></a> <a class="configure-chatroom-button icon-wrench" style=""></a>
<div class="chat-title"> Chatroom </div> <div class="chat-title"> Chatroom </div>
<p class="chatroom-topic"></p> <p class="chatroom-topic">May the force be with you</p>
<p></p>
</div> </div>
<div class="chat-body"> <div class="chat-body">
<div class="chat-area"> <div class="chat-area">
...@@ -479,19 +480,13 @@ $(document).ready(function () { ...@@ -479,19 +480,13 @@ $(document).ready(function () {
$('.toggle-chatbox-button').click(function(ev) { $('.toggle-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent(); var $grandparent = $(ev.target).parent().parent().parent();
if ($grandparent.attr('class') == 'chatroom') {
$grandparent.find('.chat-body').slideToggle(300); $grandparent.find('.chat-body').slideToggle(300);
} else {
$grandparent.find('div.chat-content').slideToggle(300);
}
var flyout = $grandparent.find('.box-flyout'); var flyout = $grandparent.find('.box-flyout');
if (flyout.hasClass('minimized')) { if (flyout.hasClass('minimized')) {
flyout.removeClass('minimized'); flyout.removeClass('minimized');
} else { } else {
flyout.addClass('minimized'); flyout.addClass('minimized');
} }
$(ev.target).parent().parent().find('form.sendXMPPMessage').toggle();
}); });
// Clickable Dropdown // Clickable Dropdown
......
src/dragresize.js
View file @ 12fc286c
...@@ -14,7 +14,7 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com ...@@ -14,7 +14,7 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
define("dragresize", [], function() { return factory(); }); define("dragresize", [], function() { return factory(); });
} else { } else {
root.dragresize = factory(); root.DragResize = factory();
} }
}(this, function () { }(this, function () {
......
src/templates/chatbox.html
View file @ 12fc286c
...@@ -3,11 +3,18 @@ ...@@ -3,11 +3,18 @@
<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 class="toggle-chatbox-button icon-minus"></a> <a class="toggle-chatbox-button icon-minus"></a>
<div class="chat-title">
{[ if (url) { ]}
<a href="{{url}}" target="_blank" class="user"> <a href="{{url}}" target="_blank" class="user">
<div class="chat-title"> {{ fullname }} </div> {[ } ]}
{{ fullname }}
{[ if (url) { ]}
</a> </a>
{[ } ]}
</div>
<p class="user-custom-message"><p/> <p class="user-custom-message"><p/>
</div> </div>
<div class="chat-body">
<div class="chat-content"></div> <div class="chat-content"></div>
<form class="sendXMPPMessage" action="" method="post"> <form class="sendXMPPMessage" action="" method="post">
{[ if (show_toolbar) { ]} {[ if (show_toolbar) { ]}
...@@ -18,4 +25,5 @@ ...@@ -18,4 +25,5 @@
class="chat-textarea" class="chat-textarea"
placeholder="{{label_personal_message}}"/> placeholder="{{label_personal_message}}"/>
</form> </form>
</div>
</div> </div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7