Skip to content

C
converse.js
Commit 74aa6021 authored by JC Brand's avatar JC Brand
Browse files
Options

Enable diagonal and horizontal drag-resizing. 

Only leftward resizing is allowed since there's no space for boxes to expand on the right.
Text area of chat boxes don't yet resize properly.
Didn't test at all on chat rooms.
parent 20834134
Expand all Show whitespace changes
Inline Side-by-side
Showing with 207 additions and 105 deletions
converse.js
View file @ 74aa6021
This diff is collapsed.
css/converse.css
View file @ 74aa6021
...@@ -1279,14 +1279,30 @@ ...@@ -1279,14 +1279,30 @@
#conversejs .minimized-chats-flyout.minimized { #conversejs .minimized-chats-flyout.minimized {
height: auto; } height: auto; }
#conversejs .dragresize { #conversejs .dragresize {
position: absolute;
width: 200px;
height: 5px;
background: transparent; background: transparent;
border: 0; border: 0;
margin: 0;
position: absolute;
top: 0; top: 0;
margin-left: 0; z-index: 20;
}
#conversejs .dragresize-top {
cursor: n-resize; cursor: n-resize;
z-index: 20; } height: 5px;
width: 100%;
}
#conversejs .dragresize-left {
cursor: w-resize;
width: 5px;
height: 100%;
left: 0;
}
#conversejs .dragresize-topleft {
cursor: nw-resize;
width: 15px;
height: 15px;
top: 0;
left: 0;
}
/*# sourceMappingURL=converse.css.map */ /*# sourceMappingURL=converse.css.map */
mockup/chatroom.html
View file @ 74aa6021
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div id="conversejs"> <div id="conversejs">
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9"> <div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize dragresize-tm"></div>
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
......
mockup/controlbox.html
View file @ 74aa6021
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
</a> </a>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;"> <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize"></div>
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"> <ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li> <li><a class="current" href="#login">Sign in</a></li>
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
</div> </div>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;"> <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize"></div>
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"> <ul id="controlbox-tabs">
<li><a class="s current" href="#users">Contacts</a></li> <li><a class="s current" href="#users">Contacts</a></li>
......
mockup/index.html
View file @ 74aa6021
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
</a> </a>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;"> <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize"></div>
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"> <ul id="controlbox-tabs">
<li><a class="current" href="#login-dialog">Sign in</a></li> <li><a class="current" href="#login-dialog">Sign in</a></li>
...@@ -62,8 +62,8 @@ ...@@ -62,8 +62,8 @@
</div> </div>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;"> <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize"></div>
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"> <ul id="controlbox-tabs">
<li><a class="s current" href="#users">Contacts</a></li> <li><a class="s current" href="#users">Contacts</a></li>
...@@ -281,8 +281,8 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span> ...@@ -281,8 +281,8 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</div> </div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f"> <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize"></div>
<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>
...@@ -360,8 +360,8 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span> ...@@ -360,8 +360,8 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</div> </div>
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392"> <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize"></div>
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<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>
...@@ -440,8 +440,8 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span> ...@@ -440,8 +440,8 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</div> </div>
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9"> <div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize"></div>
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<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>
...@@ -468,7 +468,7 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span> ...@@ -468,7 +468,7 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
Minimized <span id="minimized-count">(0)</span> Minimized <span id="minimized-count">(0)</span>
<span class="unread-message-count" href="#" style="display:block">322</span> <span class="unread-message-count" href="#" style="display:block">322</span>
</a> </a>
<div class="minimized-chats-flyout"> <div class="flyout minimized-chats-flyout">
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#" style="display:block">3</a> <a class="chat-head-message-count" href="#" style="display:block">3</a>
......
mockup/minimal.html
View file @ 74aa6021
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
</a> </a>
<div id="controlbox" class="chatbox" style="display: none;"> <div id="controlbox" class="chatbox" style="display: none;">
<div class="box-flyout"> <div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div> <div class="dragresize"></div>
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"> <ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li> <li><a class="current" href="#login">Sign in</a></li>
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
<span>Minimized <span id="minimized-count">(0)</span> <span>Minimized <span id="minimized-count">(0)</span>
<span class="unread-message-count" href="#" style="display:block">322</span> <span class="unread-message-count" href="#" style="display:block">322</span>
</a> </a>
<div class="minimized-chats-flyout"> <div class="flyout minimized-chats-flyout">
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#">3</a> <a class="chat-head-message-count" href="#">3</a>
......
sass/_core.scss
View file @ 74aa6021
...@@ -1504,48 +1504,60 @@ ...@@ -1504,48 +1504,60 @@
} }
} }
.minimized-chats-flyout, .flyout {
.box-flyout {
border-radius: 4px; border-radius: 4px;
bottom: 6px; bottom: $bottom-gutter-height;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block; display: block;
position: absolute;
}
.box-flyout {
height: $chat-height; height: $chat-height;
@media screen and (max-width: $mobile-landscape-length) { @media screen and (max-width: $mobile-landscape-length) {
height: $mobile-chat-height; height: $mobile-chat-height;
} }
position: absolute;
} }
.minimized-chats-flyout { .minimized-chats-flyout {
border-radius: 4px;
bottom: $bottom-gutter-height;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
position: absolute;
height: auto; height: auto;
width: 130px; width: $minimized-chats-width;;
.chat-head-chatroom, .chat-head-chatroom,
.chat-head { .chat-head {
border-radius: 4px; border-radius: 4px;
width: 130px; width: $minimized-chats-width;
height: 35px; height: 35px;
margin-bottom: 1px; margin-bottom: 1px;
} }
} &.minimized {
.minimized-chats-flyout.minimized {
height: auto; height: auto;
} }
}
.dragresize { .dragresize {
position: absolute;
width: $chat-width;
height: 5px;
background: transparent; background: transparent;
border: 0; border: 0;
margin: 0;
position: absolute;
top: 0; top: 0;
margin-left: 0;
cursor: n-resize;
z-index: 20; z-index: 20;
&-top {
cursor: n-resize;
height: 5px;
width: 100%;
}
&-left {
cursor: w-resize;
width: 5px;
height: 100%;
left: 0;
}
&-topleft {
cursor: nw-resize;
width: 15px;
height: 15px;
top: 0;
left: 0;
}
} }
} }
sass/_variables.scss
View file @ 74aa6021
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
$chat-width: 200px !default; $chat-width: 200px !default;
$chat-height: 400px !default; $chat-height: 400px !default;
$chat-gutter: 7px !default; $chat-gutter: 7px !default;
$minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default; $mobile-chat-width: 100% !default;
$mobile-chat-height: 400px !default; $mobile-chat-height: 400px !default;
......
src/templates/chatbox.html
View file @ 74aa6021
<div class="box-flyout" {[ if (height) { ]} style="height: {{height}}px" {[ } ]}> <div class="box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="dragresize"></div> <div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<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>
......
src/templates/chatroom.html
View file @ 74aa6021
<div class="box-flyout" {[ if (height) { ]} style="height: {{height}}px" {[ } ]}> <div class="box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="dragresize"></div> <div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<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>
......
src/templates/controlbox.html
View file @ 74aa6021
<div class="box-flyout" {[ if (height) { ]} style="height: {{height}}px" {[ } ]}> <div class="box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="dragresize"></div> <div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"></ul> <ul id="controlbox-tabs"></ul>
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
......
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