Skip to content

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

Update CSS of controlbox list items 

Trying to use more generic CSS selectors and to extract out common patterns.
parent 47ec7501
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 232 additions and 341 deletions
css/converse.css
View file @ 388719ff
This diff is collapsed.
dist/converse.js
View file @ 388719ff
......@@ -80816,7 +80816,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
events: {
'click .add-bookmark': 'addBookmark',
'click .close-room': 'closeRoom',
'click .rooms-toggle': 'toggleRoomsList',
'click .list-toggle': 'toggleRoomsList',
'click .remove-bookmark': 'removeBookmark',
'click .open-room': 'openRoom'
},
......@@ -83950,7 +83950,7 @@ __e(o.jid) +
__e(o.open_title) +
'" href="#">' +
__e(o.name) +
'</a>\n <a class="remove-bookmark fa fa-bookmark align-self-center ';
'</a>\n <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ';
if (o.bookmarked) { ;
__p += ' button-on ';
} ;
......@@ -83977,7 +83977,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/bookmarks_list.html -->\n<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="' +
__p += '<!-- src/templates/bookmarks_list.html -->\n<a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="' +
__e(o.desc_bookmarks) +
'">\n <span class="fa ';
if (o.toggle_state === o._converse.OPENED) { ;
......@@ -86177,7 +86177,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/rooms_list.html -->\n<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="' +
__p += '<!-- src/templates/rooms_list.html -->\n<a href="#" class="list-toggle open-rooms-toggle controlbox-padded" title="' +
__e(o.desc_rooms) +
'">\n <span class="fa ';
if (o.toggle_state === o._converse.OPENED) { ;
......@@ -86220,7 +86220,7 @@ __p += '\n <span class="msgs-indicator badge badge-info">' +
__e( o.num_unread ) +
'</span>\n';
} ;
__p += '\n<a class="open-room available-room w-100"\n data-room-jid="' +
__p += '\n<a class="list-item-link open-room available-room w-100"\n data-room-jid="' +
__e(o.jid) +
'"\n title="' +
__e(o.open_title) +
......@@ -86228,7 +86228,7 @@ __e(o.open_title) +
__e(o.name || o.jid) +
'</a>\n\n';
if (o.allow_bookmarks) { ;
__p += '\n<a class="fa ';
__p += '\n<a class="list-item-action fa ';
if (o.bookmarked) { ;
__p += ' fa-bookmark remove-bookmark button-on ';
} else { ;
......@@ -86250,11 +86250,11 @@ __e(o.info_add_bookmark) +
} ;
__p += '"\n href="#">&nbsp;</a>\n';
} ;
__p += '\n<a class="room-info fa fa-info-circle" data-room-jid="' +
__p += '\n\n<a class="list-item-action room-info fa fa-info-circle" data-room-jid="' +
__e(o.jid) +
'"\n title="' +
__e(o.info_title) +
'" href="#">&nbsp;</a>\n\n<a class="fa fa-times close-room"\n data-room-jid="' +
'" href="#">&nbsp;</a>\n\n<a class="list-item-action fa fa-times close-room"\n data-room-jid="' +
__e(o.jid) +
'"\n data-room-name="' +
__e(o.name || o.jid) +
......@@ -86418,7 +86418,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/roster_item.html -->\n<a class="cbox-list-item open-chat w-100 ';
__p += '<!-- src/templates/roster_item.html -->\n<a class="list-item-link cbox-list-item open-chat w-100 ';
if (o.num_unread) { ;
__p += ' unread-msgs ';
} ;
......@@ -86442,7 +86442,7 @@ __p += '">' +
__e(o.display_name) +
'</span></a>\n';
if (o.allow_contact_removal) { ;
__p += '\n<a class="remove-xmpp-contact fa fa-trash" title="' +
__p += '\n<a class="list-item-action remove-xmpp-contact fa fa-trash" title="' +
__e(o.desc_remove) +
'" href="#"></a>\n';
} ;
mockup/user-panel.html
View file @ 388719ff
This diff is collapsed.
sass/_lists.scss
View file @ 388719ff
......@@ -3,7 +3,7 @@
text-align: left;
padding: 0.3em 0;
.rooms-toggle {
.list-toggle {
font-family: $heading-font;
display: block;
color: $text-color;
......@@ -28,17 +28,59 @@
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
.list-item-link {
&:hover {
color: $dark-link-color;
}
font-size: $font-size;
line-height: $font-size;
padding-right: 0.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-item-action {
opacity: 0;
font-size: $font-size-tiny;
padding: 0;
margin: 0 0 0 0.4em;
width: 1.6em;
&:before {
font-size: $font-size;
}
&.button-on {
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
color: $subdued-color;
&:hover {
color: $gray-color;
opacity: 1;
}
}
&.open {
background-color: $controlbox-head-color;
&:hover {
background-color: $controlbox-head-color !important;
}
a {
color: white !important;
}
.fa:hover {
color: white;
}
.list-item-link {
&:hover {
color: white;
}
}
.list-item-action {
color: lighten($lightest-blue, 25%);
&:hover {
color: white;
}
}
.fa-circle {
color: lighten($green, 25%);
}
......@@ -54,16 +96,10 @@
}
}
}
.available-chatroom,
.open-headline,
.open-chatroom,
.list-item {
&:hover {
background-color: lighten($controlbox-head-color, 45%);
.fa {
display: block !important;
opacity: 1;
}
}
&.unread-msgs {
......@@ -77,40 +113,6 @@
font-weight: bold;
}
}
a {
&:hover {
color: $dark-link-color;
}
&.fa {
display: none;
&:before {
font-size: 15px;
}
}
&.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em;
}
&.available-room {
width: 85%;
}
}
.add-bookmark,
.remove-bookmark,
.close-room,
.room-info {
&.button-on {
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
color: $subdued-color;
}
}
}
}
sass/_roster.scss
View file @ 388719ff
......@@ -72,17 +72,6 @@
}
li {
border: none;
clear: both;
color: $text-color;
display: block;
overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size;
width: 100%;
height: 2em;
padding-top: 0.5em;
&.requesting-xmpp-contact {
a {
line-height: $line-height;
......@@ -120,7 +109,7 @@
text-overflow: ellipsis;
padding: 0;
margin: 0;
max-width: 80%;
max-width: 90%;
float: none;
height: 100%;
&.unread-msgs {
......@@ -148,22 +137,9 @@
white-space: nowrap;
text-overflow: ellipsis;
}
span {
padding: 0;
}
.decline-xmpp-request {
margin-left: 5px;
}
.remove-xmpp-contact {
font-size: $font-size-tiny;
margin: 0;
padding: 0;
width: 2em;
display: none;
&:before {
font-size: $font-size;
}
}
&:hover {
background-color: lighten($controlbox-head-color, 45%);
.remove-xmpp-contact {
......
sass/converse.scss
View file @ 388719ff
......@@ -43,8 +43,8 @@
@import "profile";
@import "chatbox";
@import "controlbox";
@import "lists";
@import "roster";
@import "lists";
@import "chatrooms";
@import "headline";
@import "messages";
......
src/converse-roomslist.js
View file @ 388719ff
......@@ -156,7 +156,7 @@
events: {
'click .add-bookmark': 'addBookmark',
'click .close-room': 'closeRoom',
'click .rooms-toggle': 'toggleRoomsList',
'click .list-toggle': 'toggleRoomsList',
'click .remove-bookmark': 'removeBookmark',
'click .open-room': 'openRoom',
},
......
src/templates/bookmark.html
View file @ 388719ff
<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 {[ } ]}"
<a class="list-item-action remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
title="{{{o.info_remove_bookmark}}}" href="#">&nbsp;</a>
</div>
src/templates/bookmarks_list.html
View file @ 388719ff
<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
<a href="#" class="list-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/rooms_list.html
View file @ 388719ff
<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
<a href="#" class="list-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 @ 388719ff
......@@ -5,20 +5,21 @@
{[ if (o.num_unread) { ]}
<span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
{[ } ]}
<a class="open-room available-room w-100"
<a class="list-item-link open-room available-room w-100"
data-room-jid="{{{o.jid}}}"
title="{{{o.open_title}}}" href="#">{{{o.name || o.jid}}}</a>
{[ if (o.allow_bookmarks) { ]}
<a class="fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark-o {[ } ]}"
<a class="list-item-action fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark-o {[ } ]}"
data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
href="#">&nbsp;</a>
{[ } ]}
<a class="room-info fa fa-info-circle" data-room-jid="{{{o.jid}}}"
<a class="list-item-action room-info fa fa-info-circle" data-room-jid="{{{o.jid}}}"
title="{{{o.info_title}}}" href="#">&nbsp;</a>
<a class="fa fa-times close-room"
<a class="list-item-action fa fa-times close-room"
data-room-jid="{{{o.jid}}}"
data-room-name="{{{o.name || o.jid}}}"
title="{{{o.info_leave_room}}}" href="#">&nbsp;</a>
......
src/templates/roster_item.html
View file @ 388719ff
<a class="cbox-list-item open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
<a class="list-item-link cbox-list-item open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
title="{{{o.desc_chat}}}" href="#">
<span class="fa {{{o.status_icon}}}" title="{{{o.desc_status}}}"></span>
{[ if (o.num_unread) { ]}
......@@ -6,5 +6,5 @@
{[ } ]}
<span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.display_name}}}</span></a>
{[ if (o.allow_contact_removal) { ]}
<a class="remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></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