From 5401998558abbd325b43966e12c1272bc75634a4 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 15 Feb 2018 15:49:16 +0100 Subject: [PATCH] Don't put #chatrooms inside #converse-roster and remove `users` id --- css/converse.css | 26 +++++++++--------- css/inverse.css | 28 +++++++++++--------- mockup/chatbox.html | 2 +- mockup/chatroom.html | 2 +- mockup/converse.html | 2 +- mockup/sidebar.html | 2 ++ mockup/user-panel.html | 50 +++++++++++++++++------------------ mockup/user-panel.js | 2 +- sass/_controlbox.scss | 29 +++++++++----------- sass/inverse/_controlbox.scss | 5 +++- 10 files changed, 76 insertions(+), 72 deletions(-) diff --git a/css/converse.css b/css/converse.css index 3824a4c6d..4fceb5827 100644 --- a/css/converse.css +++ b/css/converse.css @@ -5722,18 +5722,15 @@ body.reset { display: block; font-weight: normal; margin: 1em 0; } - #conversejs #controlbox #users .add-converse-contact { - margin: 0 0 0.75em 0; } - #conversejs #controlbox #users .chatbox-btn { - margin: 0; } #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts { - margin-top: 0.75em; } - #conversejs #controlbox #users .userinfo { + margin-top: 0.75em; + padding-bottom: 0.75em; } + #conversejs #controlbox .controlbox-pane .userinfo { padding-bottom: 1em; border-bottom: 1px solid #818479; } - #conversejs #controlbox #users .userinfo .username { + #conversejs #controlbox .controlbox-pane .userinfo .username { margin-left: 0.5em; } - #conversejs #controlbox #users .userinfo .d-flex { + #conversejs #controlbox .controlbox-pane .userinfo .d-flex { margin-bottom: 0.2em; } #conversejs #controlbox #chatrooms { border-bottom: 1px solid #818479; } @@ -5923,6 +5920,10 @@ body.reset { overflow-y: scroll; overflow-x: hidden; border-radius: 4px; } + #conversejs #controlbox .controlbox-pane .add-converse-contact { + margin: 0 0 0.75em 0; } + #conversejs #controlbox .controlbox-pane .chatbox-btn { + margin: 0; } #conversejs #controlbox .controlbox-pane .switch-form { padding-bottom: 2em; } #conversejs #controlbox .controlbox-pane .switch-form p { @@ -5987,15 +5988,14 @@ body.reset { left: 0; } #conversejs #controlbox .sidebar { display: block; } - #conversejs #controlbox #users { + #conversejs #controlbox .controlbox-pane { position: absolute; top: 0; - display: none; } - #conversejs #controlbox #users.controlbox-pane { - width: 100%; } + display: none; + width: 100%; } #conversejs.sidebar-open .chatbox:not(#controlbox) { display: none; } - #conversejs.sidebar-open #controlbox #users { + #conversejs.sidebar-open #controlbox .controlbox-pane { display: block; } } #conversejs:not(.fullscreen) #controlbox { order: -1; } diff --git a/css/inverse.css b/css/inverse.css index 80528a473..aa1a5274d 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -5794,18 +5794,15 @@ body { display: block; font-weight: normal; margin: 1em 0; } - #conversejs #controlbox #users .add-converse-contact { - margin: 0 0 0.75em 0; } - #conversejs #controlbox #users .chatbox-btn { - margin: 0; } #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts { - margin-top: 0.75em; } - #conversejs #controlbox #users .userinfo { + margin-top: 0.75em; + padding-bottom: 0.75em; } + #conversejs #controlbox .controlbox-pane .userinfo { padding-bottom: 1em; border-bottom: 1px solid #818479; } - #conversejs #controlbox #users .userinfo .username { + #conversejs #controlbox .controlbox-pane .userinfo .username { margin-left: 0.5em; } - #conversejs #controlbox #users .userinfo .d-flex { + #conversejs #controlbox .controlbox-pane .userinfo .d-flex { margin-bottom: 0.2em; } #conversejs #controlbox #chatrooms { border-bottom: 1px solid #818479; } @@ -5995,6 +5992,10 @@ body { overflow-y: scroll; overflow-x: hidden; border-radius: 4px; } + #conversejs #controlbox .controlbox-pane .add-converse-contact { + margin: 0 0 0.75em 0; } + #conversejs #controlbox .controlbox-pane .chatbox-btn { + margin: 0; } #conversejs #controlbox .controlbox-pane .switch-form { padding-bottom: 2em; } #conversejs #controlbox .controlbox-pane .switch-form p { @@ -6059,15 +6060,14 @@ body { left: 0; } #conversejs #controlbox .sidebar { display: block; } - #conversejs #controlbox #users { + #conversejs #controlbox .controlbox-pane { position: absolute; top: 0; - display: none; } - #conversejs #controlbox #users.controlbox-pane { - width: 100%; } + display: none; + width: 100%; } #conversejs.sidebar-open .chatbox:not(#controlbox) { display: none; } - #conversejs.sidebar-open #controlbox #users { + #conversejs.sidebar-open #controlbox .controlbox-pane { display: block; } } #conversejs.fullscreen #controlbox { margin: 0; } @@ -6117,6 +6117,8 @@ body { width: 100%; z-index: 1; background-color: #578EA9; } + #conversejs.fullscreen #controlbox .box-flyout .controlbox-head { + display: none; } #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login { margin: 2em 30% 3em 30%; } #conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions { diff --git a/mockup/chatbox.html b/mockup/chatbox.html index d929457b2..a78ae425f 100644 --- a/mockup/chatbox.html +++ b/mockup/chatbox.html @@ -15,7 +15,7 @@
-
+
diff --git a/mockup/chatroom.html b/mockup/chatroom.html index 698493cab..4a5b51fb3 100644 --- a/mockup/chatroom.html +++ b/mockup/chatroom.html @@ -15,7 +15,7 @@
-
+
diff --git a/mockup/converse.html b/mockup/converse.html index 1634e9505..132106212 100644 --- a/mockup/converse.html +++ b/mockup/converse.html @@ -19,7 +19,7 @@
-
+
diff --git a/mockup/sidebar.html b/mockup/sidebar.html index 095e8ede9..b4a411e0c 100644 --- a/mockup/sidebar.html +++ b/mockup/sidebar.html @@ -1,5 +1,6 @@ + diff --git a/mockup/user-panel.html b/mockup/user-panel.html index 956c8210b..3e195b6a5 100644 --- a/mockup/user-panel.html +++ b/mockup/user-panel.html @@ -13,35 +13,35 @@ -
-
-
- Chatrooms - -
-
-
-
- public -   -   -   -
-
- team -   -
-
- test -   -
+
+
+ Chatrooms + +
+
+
+
+ public +   +   +   +
+
+ team +   +
+
+ test +  
+
+
Contacts diff --git a/mockup/user-panel.js b/mockup/user-panel.js index a439b45f3..e53b0e097 100644 --- a/mockup/user-panel.js +++ b/mockup/user-panel.js @@ -1,6 +1,6 @@ /*global Backbone, _, window */ const UserPanel = Backbone.NativeView.extend({ - el: 'div#users', + el: '.controlbox-pane', initialize () { this.render(); diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 6ee2df787..25d80c8e0 100644 --- a/sass/_controlbox.scss +++ b/sass/_controlbox.scss @@ -157,21 +157,12 @@ } - #users { - .add-converse-contact { - margin: 0 0 0.75em 0; - } - - .chatbox-btn { - margin: 0; - } - } - #chatrooms, #contacts { margin-top: 0.75em; + padding-bottom: 0.75em; } - #users { + .controlbox-pane { .userinfo { padding-bottom: 1em; border-bottom: 1px solid $gray-color; @@ -420,6 +411,14 @@ overflow-x: hidden; border-radius: $chatbox-border-radius; + .add-converse-contact { + margin: 0 0 0.75em 0; + } + + .chatbox-btn { + margin: 0; + } + .switch-form { padding-bottom: 2em; p { @@ -521,13 +520,11 @@ display: block; } - #users { + .controlbox-pane { position: absolute; top: 0; display: none; - &.controlbox-pane { - width: 100%; - } + width: 100%; } } @@ -537,7 +534,7 @@ display: none; } #controlbox { - #users { + .controlbox-pane { display: block; } } diff --git a/sass/inverse/_controlbox.scss b/sass/inverse/_controlbox.scss index 07921ee9c..254d1d771 100644 --- a/sass/inverse/_controlbox.scss +++ b/sass/inverse/_controlbox.scss @@ -1,7 +1,6 @@ #conversejs.fullscreen { #controlbox { margin: 0; - // margin-left: -$chat-gutter; // Mystery why this is necessary .controlbox-pane { border-radius: 0; @@ -51,6 +50,10 @@ width: 100%; z-index: 1; background-color: $controlbox-head-color; + + .controlbox-head { + display: none; + } } #converse-register, #converse-login {