Skip to content

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

Update padding of controlbox elements 

Instead of padding the container, pad individual elements that need it.
This enables us to have highlighting (e.g. on hover) that spans the full
width of the controlbox.

updates #1069
parent 6e2249e9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 197 additions and 144 deletions
css/converse.css
View file @ e8211271
......@@ -6858,18 +6858,22 @@ body.reset {
font-size: 60%; }
#conversejs {
bottom: 0;
height: 100%;
position: fixed;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
color: #666;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
direction: ltr;
display: block;
z-index: 1031; }
#conversejs .brand-heading {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
#conversejs .brand-heading .icon-conversejs {
font-size: 80%; }
#conversejs .popover {
position: fixed; }
#conversejs .converse-chatboxes {
z-index: 1031;
position: fixed;
......@@ -7203,7 +7207,7 @@ body.reset {
#conversejs form .form-group {
margin-bottom: 2em; }
#conversejs form .form-check-label {
margin-top: 0.1rem; }
margin-top: 0.3rem; }
#conversejs form .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
......@@ -7276,9 +7280,6 @@ body.reset {
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs.fullscreen form .form-check-label {
margin-top: 0.3rem; }
#conversejs #user-profile-modal label {
font-weight: bold; }
......@@ -7868,13 +7869,16 @@ body.reset {
overflow-y: auto;
background-color: white; }
#conversejs #controlbox .controlbox-pane {
padding: 1em;
background-color: white;
border: 0;
font-size: 14px;
left: 0;
text-align: left;
overflow-x: hidden; }
overflow-x: hidden;
padding: 1em 0 1em 0; }
#conversejs #controlbox .controlbox-pane .controlbox-padded {
padding-left: 1em;
padding-right: 1em; }
#conversejs #controlbox .controlbox-pane .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox .controlbox-pane .chatbox-btn {
......@@ -7939,21 +7943,21 @@ body.reset {
display: none; }
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } }
#conversejs:not(.fullscreen) #controlbox {
#conversejs:not(.converse-fullscreen) #controlbox {
order: -1;
min-width: 250px !important;
width: 250px; }
#conversejs:not(.fullscreen) #controlbox .box-flyout {
#conversejs:not(.converse-fullscreen) #controlbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs:not(.fullscreen) #controlbox:not(.logged-out) .controlbox-head {
#conversejs:not(.converse-fullscreen) #controlbox:not(.logged-out) .controlbox-head {
height: 15px; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head .brand-heading {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .brand-heading {
position: relative;
width: 100%;
min-height: 1px;
......@@ -7963,16 +7967,16 @@ body.reset {
max-width: 66.6666666667%;
color: #666;
font-size: 2em; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head .chatbox-btn {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .chatbox-btn {
color: #578EA9;
margin: 0; }
#conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
#conversejs:not(.converse-fullscreen) #controlbox #converse-register, #conversejs:not(.converse-fullscreen) #controlbox #converse-login {
flex: 0 0 100%;
max-width: 100%;
padding-bottom: 0; }
#conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
#conversejs:not(.converse-fullscreen) #controlbox #converse-register .button-cancel {
font-size: 90%; }
#conversejs:not(.fullscreen) #controlbox .controlbox-panes {
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
border-radius: 4px; }
#conversejs .list-container {
......@@ -8107,7 +8111,8 @@ body.reset {
color: #666;
display: block;
width: 100%;
padding: 0 0 0.3rem 0; }
padding-top: 0;
padding-bottom: 0.3rem; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts .roster-group li {
......
css/inverse.css
View file @ e8211271
......@@ -6858,18 +6858,22 @@ body.reset {
font-size: 60%; }
#conversejs {
bottom: 0;
height: 100%;
position: fixed;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
color: #666;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px;
direction: ltr;
display: block;
z-index: 1031; }
#conversejs .brand-heading {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
#conversejs .brand-heading .icon-conversejs {
font-size: 80%; }
#conversejs .popover {
position: fixed; }
#conversejs .converse-chatboxes {
z-index: 1031;
position: fixed;
......@@ -7245,7 +7249,7 @@ body {
#conversejs form .form-group {
margin-bottom: 2em; }
#conversejs form .form-check-label {
margin-top: 0.1rem; }
margin-top: 0.3rem; }
#conversejs form .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
......@@ -7318,9 +7322,6 @@ body {
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs.fullscreen form .form-check-label {
margin-top: 0.3rem; }
#conversejs #user-profile-modal label {
font-weight: bold; }
......@@ -7929,13 +7930,16 @@ body {
overflow-y: auto;
background-color: white; }
#conversejs #controlbox .controlbox-pane {
padding: 1.2em;
background-color: white;
border: 0;
font-size: 16px;
left: 0;
text-align: left;
overflow-x: hidden; }
overflow-x: hidden;
padding: 1em 0 1em 0; }
#conversejs #controlbox .controlbox-pane .controlbox-padded {
padding-left: 1em;
padding-right: 1em; }
#conversejs #controlbox .controlbox-pane .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox .controlbox-pane .chatbox-btn {
......@@ -8000,6 +8004,42 @@ body {
display: none; }
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } }
#conversejs:not(.converse-fullscreen) #controlbox {
order: -1;
min-width: 250px !important;
width: 250px; }
#conversejs:not(.converse-fullscreen) #controlbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs:not(.converse-fullscreen) #controlbox:not(.logged-out) .controlbox-head {
height: 15px; }
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between; }
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .brand-heading {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
color: #666;
font-size: 2em; }
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .chatbox-btn {
color: #578EA9;
margin: 0; }
#conversejs:not(.converse-fullscreen) #controlbox #converse-register, #conversejs:not(.converse-fullscreen) #controlbox #converse-login {
flex: 0 0 100%;
max-width: 100%;
padding-bottom: 0; }
#conversejs:not(.converse-fullscreen) #controlbox #converse-register .button-cancel {
font-size: 90%; }
#conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
border-radius: 4px; }
#conversejs.fullscreen #controlbox {
position: relative;
width: 100%;
......@@ -8149,7 +8189,8 @@ body {
color: #666;
display: block;
width: 100%;
padding: 0 0 0.3rem 0; }
padding-top: 0;
padding-bottom: 0.3rem; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts .roster-group li {
......
mockup/overlayed-login.html
View file @ e8211271
......@@ -9,22 +9,27 @@
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head>
<body style="background-color: #578EA9">
<body class="reset">
<div class="converse-bg container">
<h1 class="brand-heading">Converse</h1>
</div>
<div id="conversejs" class="converse-overlayed">
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
<div id="controlbox" class="chatbox logged-out">
<div class="flyout box-flyout">
<div class="chat-head controlbox-head">
<div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
<a class="chatbox-btn close-chatbox-button fa fa-close"></a>
<span class="brand-heading-container">
<div class="brand-heading">
<a href="https://conversejs.org" target="_blank" rel="noopener">
<i class="icon-conversejs"></i><span class="brand-name">converse</span>
</a>
</div>
</span>
</div>
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane row">
<form id="converse-login" class="pure-form converse-form">
<div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
<form id="converse-login" class="converse-form">
<div class="form-group">
<label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
......@@ -33,9 +38,14 @@
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
</div>
<p></p>
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
<div class="form-group form-check">
<input id="converse-login-trusted" class="form-check-input" type="checkbox" name="trusted" checked="">
<label class="form-check-label" for="converse-login-trusted">This is a trusted device</label>
</div>
<fieldset class="buttons">
<input class="btn btn-primary" type="submit" value="Log in">
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</fieldset>
</form>
</div>
</div>
......
mockup/user-panel.html
View file @ e8211271
This diff is collapsed.
sass/_controlbox.scss
View file @ e8211271
......@@ -274,13 +274,18 @@
}
.controlbox-pane {
padding: $controlbox-pane-padding;
background-color: white;
border: 0;
font-size: $font-size;
left: 0;
text-align: left;
overflow-x: hidden;
padding: 1em 0 1em 0;
.controlbox-padded {
padding-left: 1em;
padding-right: 1em;
}
.add-converse-contact {
margin: 0 0 0.75em 0;
......@@ -387,3 +392,55 @@
}
}
}
#conversejs:not(.converse-fullscreen) {
#controlbox {
order: -1;
min-width: $controlbox-width !important;
width: $controlbox-width;
.box-flyout {
min-width: $controlbox-width !important;
width: $controlbox-width;
}
&:not(.logged-out) {
.controlbox-head {
height: 15px;
}
}
.controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
.brand-heading {
@include make-col-ready();
@include make-col(8);
color: $text-color;
font-size: 2em;
}
.chatbox-btn {
color: $controlbox-head-color;
margin: 0;
}
}
#converse-register, #converse-login {
@include make-col(12);
padding-bottom: 0;
}
#converse-register {
.button-cancel {
font-size: 90%;
}
}
.controlbox-panes {
border-radius: $chatbox-border-radius;
}
}
}
sass/_forms.scss
View file @ e8211271
......@@ -5,7 +5,7 @@
}
.form-check-label {
margin-top: 0.1rem;
margin-top: $form-check-input-margin-y;
}
.form-control {
......@@ -108,12 +108,3 @@
}
}
}
#conversejs.fullscreen {
form {
.form-check-label {
margin-top: $form-check-input-margin-y;
}
}
}
sass/_roster.scss
View file @ e8211271
......@@ -70,7 +70,8 @@
color: $text-color;
display: block;
width: 100%;
padding: 0 0 0.3rem 0;
padding-top: 0;
padding-bottom: 0.3rem;
}
li {
......
sass/converse.scss
View file @ e8211271
......@@ -46,7 +46,6 @@
@import "chatbox";
@import "converse/chatbox";
@import "controlbox";
@import "converse/controlbox";
@import "roomslist";
@import "roster";
@import "chatrooms";
......
sass/converse/_controlbox.scss deleted 100644 → 0
View file @ 6e2249e9
#conversejs:not(.fullscreen) {
#controlbox {
order: -1;
min-width: $controlbox-width !important;
width: $controlbox-width;
.box-flyout {
min-width: $controlbox-width !important;
width: $controlbox-width;
}
&:not(.logged-out) {
.controlbox-head {
height: 15px;
}
}
.controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
.brand-heading {
@include make-col-ready();
@include make-col(8);
color: $text-color;
font-size: 2em;
}
.chatbox-btn {
color: $controlbox-head-color;
margin: 0;
}
}
#converse-register, #converse-login {
@include make-col(12);
padding-bottom: 0;
}
#converse-register {
.button-cancel {
font-size: 90%;
}
}
.controlbox-panes {
border-radius: $chatbox-border-radius;
}
}
}
sass/converse/_variables.scss
View file @ e8211271
......@@ -7,7 +7,6 @@ $chat-head-height: 55px !default;
$controlbox-dropdown-height: 25px !default;
$controlbox-head-height: 55px !default;
$controlbox-pane-padding: 1em !default;
$chatbox-hover-height: 1em !default;
......
sass/inverse/_variables.scss
View file @ e8211271
......@@ -9,7 +9,6 @@ $chat-head-height: 62px !default;
$controlbox-dropdown-height: 30px !default;
$controlbox-head-height: 63px !default;
$controlbox-pane-padding: $flyout-padding !default;
$rounded-border-radius: 4px !default;
......
src/converse-rosterview.js
View file @ e8211271
......@@ -357,7 +357,7 @@
_converse.RosterContactView = Backbone.NativeView.extend({
tagName: 'li',
className: 'd-flex hidden',
className: 'd-flex hidden controlbox-padded',
events: {
"click .accept-xmpp-request": "acceptRequest",
......
src/templates/bookmark.html
View file @ e8211271
<div class="list-item room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
<a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
<a class="remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
......
src/templates/bookmarks_list.html
View file @ e8211271
<a href="#" class="rooms-toggle bookmarks-toggle" title="{{{o.desc_bookmarks}}}">
<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_bookmarks}}}</a>
<div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></div>
src/templates/group_header.html
View file @ e8211271
<a href="#" class="group-toggle" title="{{{o.desc_group_toggle}}}">
<a href="#" class="group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_group}}}</a>
<ul class="roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>
src/templates/login_panel.html
View file @ e8211271
<div id="converse-login-panel" class="controlbox-pane fade-in row">
<div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
<form id="converse-login" class="converse-form" method="post">
<div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
<p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
......@@ -22,8 +22,8 @@
<input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" checked="checked">
<label for="converse-login-trusted" class="form-check-label">{{{o.__('This is a trusted device')}}}</label>
<i class="fa fa-info-circle" data-toggle="popover"
data-title=""
data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all data might be deleted.')}}}"></i>
data-title="Trusted device?"
data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')}}}"></i>
</div>
<fieldset class="buttons">
......
src/templates/profile_view.html
View file @ e8211271
<div class="userinfo">
<div class="userinfo controlbox-padded">
<div class="profile d-flex">
<a class="show-profile" href="#">
<img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
......
src/templates/room_panel.html
View file @ e8211271
<!-- <div id="chatrooms"> -->
<div class="d-flex">
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">{{{o.heading_chatrooms}}}</span>
<a class="chatbox-btn trigger-list-chatrooms-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
<a class="chatbox-btn trigger-add-chatrooms-modal fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
......
src/templates/rooms_list.html
View file @ e8211271
<a href="#" class="rooms-toggle open-rooms-toggle" title="{{{o.desc_rooms}}}">
<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_rooms}}}</a>
<div class="items-list rooms-list open-rooms-list"></div>
src/templates/rooms_list_item.html
View file @ e8211271
<div class="list-item available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
<div class="list-item controlbox-padded available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
{[ if (o.num_unread) { ]}
<span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
{[ } ]}
......
src/templates/roster.html
View file @ e8211271
<div class="d-flex">
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">{{{o.heading_contacts}}}</span>
<a class="chatbox-btn add-contact fa fa-user-plus" title="{{{o.title_add_contact}}}"
data-toggle="modal" data-target="#add-contact-modal"></a>
......
src/templates/roster_filter.html
View file @ e8211271
<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<form class="controlbox-padded roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<div class="form-inline flex-nowrap">
<div class="btn-group">
<input {[ if (o.filter_text) { ]} value="{{{o.filter_text}}}" {[ } ]}
......
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