Skip to content

C
converse.js
Commit 7d659543 authored by JC Brand's avatar JC Brand
Browse files
Options

Add the logic for toggling minimized chats

parent 5f7ec3fc
Expand all Show whitespace changes
Inline Side-by-side
Showing with 233 additions and 142 deletions
converse.js
View file @ 7d659543
This diff is collapsed.
css/converse.css
View file @ 7d659543
......@@ -559,14 +559,14 @@ span.spinner.centered {
span.spinner.hor_centered {
text-align: center;
}
#conversejs #trimmed-chatboxes .box-flyout {
#conversejs #minimized-chats .box-flyout {
position: absolute;
display: block;
height: auto;
bottom: 25px;
margin-left: 0;
}
#conversejs #trimmed-chatboxes .box-flyout .chat-head {
#conversejs #minimized-chats .box-flyout .chat-head {
font-size: 100%;
border-radius: 4px;
padding: 3px 0 0 5px;
......@@ -575,10 +575,7 @@ span.spinner.hor_centered {
height: 24px;
width: 130px;
}
#conversejs #trimmed-chatboxes .chat-head-chatroom {
width: 100px;
}
#conversejs #trimmed-chatboxes,
#conversejs #minimized-chats,
#conversejs .toggle-controlbox {
float: right;
font-size: 90%;
......@@ -591,7 +588,12 @@ span.spinner.hor_centered {
font-weight: bold;
height: 100%;
}
#conversejs .toggle-minimized-chats {
#conversejs #minimized-chats {
width: 130px;
padding: 0;
display: none;
}
#conversejs #toggle-minimized-chats {
position: relative;
padding: 4px 0 0 4px;
display: block;
......@@ -599,6 +601,10 @@ span.spinner.hor_centered {
height: 100%;
color: #0f0f0f;
}
#conversejs #toggle-minimized-chats .unread-message-count {
right: 5px;
bottom: 5px;
}
#conversejs .chat-head {
color: #ffffff;
font-size: 100%;
......@@ -838,10 +844,6 @@ dl.add-converse-contact {
background-color: #2D617A;
padding: 3px 0 0 0;
}
#conversejs .toggle-minimized-chats .unread-message-count {
right: 5px;
bottom: 5px;
}
#conversejs .unread-message-count,
#conversejs .chat-head-message-count {
font-weight: bold;
......@@ -1054,11 +1056,6 @@ dl.add-converse-contact {
margin-right: 15px;
display: block;
}
#conversejs #trimmed-chatboxes {
width: 130px;
padding: 0;
display: none;
}
#conversejs .chatbox {
width: 200px;
}
......@@ -1377,6 +1374,7 @@ input.custom-xmpp-status {
#conversejs .set-xmpp-status .dropdown dd ul {
z-index: 22;
}
#conversejs .minimized-chats-flyout,
#conversejs .box-flyout {
border-radius: 4px;
bottom: 6px;
......@@ -1385,11 +1383,24 @@ input.custom-xmpp-status {
height: 324px;
position: absolute;
}
#conversejs .box-flyout.minimized {
#conversejs .minimized-chats-flyout {
border-radius: 4px;
bottom: 25px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
position: absolute;
height: auto;
width: 130px;
}
#conversejs .minimized-chats-flyout.minimized {
height: auto;
}
#conversejs .box-flyout.minimized .chat-head {
#conversejs .minimized-chats-flyout .chat-head-chatroom,
#conversejs .minimized-chats-flyout .chat-head {
border-radius: 4px;
width: 130px;
height: 25px;
margin-bottom: 1px;
}
#conversejs .chatbox .box-flyout {
width: 200px;
......
less/converse.less
View file @ 7d659543
......@@ -588,7 +588,7 @@ span.spinner.hor_centered {
text-align: center;
}
#conversejs #trimmed-chatboxes .box-flyout {
#conversejs #minimized-chats .box-flyout {
position: absolute;
display: block;
height: auto;
......@@ -596,7 +596,7 @@ span.spinner.hor_centered {
margin-left: 0;
}
#conversejs #trimmed-chatboxes .box-flyout .chat-head {
#conversejs #minimized-chats .box-flyout .chat-head {
font-size: 100%;
border-radius: 4px;
padding: 3px 0 0 5px;
......@@ -606,11 +606,7 @@ span.spinner.hor_centered {
width: 130px;
}
#conversejs #trimmed-chatboxes .chat-head-chatroom {
width: 100px;
}
#conversejs #trimmed-chatboxes,
#conversejs #minimized-chats,
#conversejs .toggle-controlbox {
float: right;
font-size: 90%;
......@@ -624,7 +620,13 @@ span.spinner.hor_centered {
height: 100%;
}
#conversejs .toggle-minimized-chats {
#conversejs #minimized-chats {
width: 130px;
padding: 0;
display: none;
}
#conversejs #toggle-minimized-chats {
position: relative;
padding: 4px 0 0 4px;
display: block;
......@@ -633,6 +635,11 @@ span.spinner.hor_centered {
color: #0f0f0f;
}
#conversejs #toggle-minimized-chats .unread-message-count {
right: 5px;
bottom: 5px;
}
#conversejs .chat-head {
color: #ffffff;
font-size: 100%;
......@@ -917,11 +924,6 @@ dl.add-converse-contact {
padding: 3px 0 0 0;
}
#conversejs .toggle-minimized-chats .unread-message-count {
right: 5px;
bottom: 5px;
}
#conversejs .unread-message-count,
#conversejs .chat-head-message-count {
font-weight: bold;
......@@ -1166,12 +1168,6 @@ dl.add-converse-contact {
display: block;
}
#conversejs #trimmed-chatboxes {
width: 130px;
padding: 0;
display: none;
}
#conversejs .chatbox {
width: 200px;
}
......@@ -1551,6 +1547,7 @@ input.custom-xmpp-status {
z-index: 22;
}
#conversejs .minimized-chats-flyout,
#conversejs .box-flyout {
border-radius: 4px;
bottom: 6px;
......@@ -1560,12 +1557,26 @@ input.custom-xmpp-status {
position: absolute;
}
#conversejs .box-flyout.minimized {
#conversejs .minimized-chats-flyout {
border-radius: 4px;
bottom: 25px;
box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
display: block;
position: absolute;
height: auto;
width: 130px;
}
#conversejs .minimized-chats-flyout.minimized {
height: auto;
}
#conversejs .box-flyout.minimized .chat-head {
#conversejs .minimized-chats-flyout .chat-head-chatroom,
#conversejs .minimized-chats-flyout .chat-head {
border-radius: 4px;
width: 130px;
height: 25px;
margin-bottom: 1px;
}
#conversejs .chatbox .box-flyout {
......
mockup/index.html
View file @ 7d659543
......@@ -373,11 +373,12 @@
</div>
</div>
<div id="trimmed-chatboxes">
<a class="toggle-minimized-chats" href="#">
<div id="minimized-chats">
<a id="toggle-minimized-chats" href="#">
<span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
<span class="unread-message-count" href="#" style="display:block">322</span>
</a>
<div class="box-flyout minimized-chats">
<div class="minimized-chats-flyout">
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#" style="display:block">3</a>
......
mockup/minimal.html
View file @ 7d659543
......@@ -45,12 +45,12 @@
</div>
<div id="trimmed-chatboxes">
<a class="toggle-minimized-chats" href="#">
<span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
<div id="minimized-chats" style="display: block">
<a id="toggle-minimized-chats" href="#">
<span>Minimized <span id="minimized-count">(0)</span>
<span class="unread-message-count" href="#" style="display:block">322</span>
</a>
<div class="box-flyout minimized-chats">
<div class="minimized-chats-flyout">
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#" style="display:block">3</a>
......@@ -194,7 +194,7 @@ $(document).ready(function () {
});
$('.toggle-minimized-chats').click(function(ev) {
$('.minimized-chats').toggle();
$('.minimized-chats-flyout').toggle();
});
// Clickable Dropdown
......
src/templates.js
View file @ 7d659543
......@@ -8,6 +8,7 @@ define("converse-templates", [
"tpl!src/templates/chatbox",
"tpl!src/templates/chatroom",
"tpl!src/templates/chatrooms_tab",
"tpl!src/templates/chats_panel",
"tpl!src/templates/choose_status",
"tpl!src/templates/contacts",
"tpl!src/templates/contacts_panel",
......@@ -36,7 +37,7 @@ define("converse-templates", [
"tpl!src/templates/status_option",
"tpl!src/templates/toolbar",
"tpl!src/templates/trimmed_chat",
"tpl!src/templates/trimmed_chats"
"tpl!src/templates/toggle_chats"
], function () {
return {
action: arguments[0],
......@@ -48,34 +49,35 @@ define("converse-templates", [
chatbox: arguments[6],
chatroom: arguments[7],
chatrooms_tab: arguments[8],
choose_status: arguments[9],
contacts: arguments[10],
contacts_panel: arguments[11],
contacts_tab: arguments[12],
controlbox: arguments[13],
controlbox_toggle: arguments[14],
field: arguments[15],
form_checkbox: arguments[16],
form_input: arguments[17],
form_select: arguments[18],
info: arguments[19],
login_panel: arguments[20],
login_tab: arguments[21],
message: arguments[22],
new_day: arguments[23],
occupant: arguments[24],
pending_contact: arguments[25],
pending_contacts: arguments[26],
requesting_contact: arguments[27],
requesting_contacts: arguments[28],
room_description: arguments[29],
room_item: arguments[30],
room_panel: arguments[31],
roster_item: arguments[32],
select_option: arguments[33],
status_option: arguments[34],
toolbar: arguments[35],
trimmed_chat: arguments[36],
trimmed_chats: arguments[37]
chats_panel: arguments[9],
choose_status: arguments[10],
contacts: arguments[11],
contacts_panel: arguments[12],
contacts_tab: arguments[13],
controlbox: arguments[14],
controlbox_toggle: arguments[15],
field: arguments[16],
form_checkbox: arguments[17],
form_input: arguments[18],
form_select: arguments[19],
info: arguments[20],
login_panel: arguments[21],
login_tab: arguments[22],
message: arguments[23],
new_day: arguments[24],
occupant: arguments[25],
pending_contact: arguments[26],
pending_contacts: arguments[27],
requesting_contact: arguments[28],
requesting_contacts: arguments[29],
room_description: arguments[30],
room_item: arguments[31],
room_panel: arguments[32],
roster_item: arguments[33],
select_option: arguments[34],
status_option: arguments[35],
toolbar: arguments[36],
trimmed_chat: arguments[37],
toggle_chats: arguments[38]
};
});
src/templates/chats_panel.html 0 → 100644
View file @ 7d659543
<div id="minimized-chats">
<a id="toggle-minimized-chats" href="#">
<span>Minimized <span id="minimized-count">(0)</span>
<span class="unread-message-count" href="#">0</span>
</a>
<div class="minimized-chats-flyout"></div>
</div>
src/templates/toggle_chats.html 0 → 100644
View file @ 7d659543
{{Minimized}} <span id="minimized-count">({{num_minimized}})</span>
<span class="unread-message-count" href="#">0</span>
src/templates/trimmed_chat.html
View file @ 7d659543
<a class="close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#">0</a>
<div class="chat-title">
<a href="#" class="restore-chat">
<div class="chat-head-message-count">0</div>
<a href="#" class="restore-chat" title="{{tooltip}}">
{{ title }}
</a>
</div>
src/templates/trimmed_chats.html deleted 100644 → 0
View file @ 5f7ec3fc
<div id="trimmed-chatboxes"><div class="box-flyout"></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