diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 9cd904c45..d207369ed 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -3,6 +3,7 @@ @import (reference) "./variables.less"; @import (reference) "./avatar.less"; @import (reference) "./tools.less"; +@import (reference) "./buttons.less"; .alertify_main() { --LessLoader_require: LessLoader_currentFile(); @@ -260,100 +261,7 @@ } } - button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { - - background-color: @colortheme_alertify-cancel; - box-sizing: border-box; - position: relative; - outline: 0; - display: inline-block; - align-items: center; - padding: 0 6px; - margin: 6px 8px; - line-height: 36px; - min-height: 36px; - white-space: nowrap; - min-width: 88px; - text-align: center; - text-transform: uppercase; - font-size: 14px; - text-decoration: none; - cursor: pointer; - border-radius: 0; - - color: @alertify-btn-fg; - border: 1px solid @alertify-btn-fg; - - &.no-margin { - margin: 0; - } - - &:hover, &:active { - background-color: @alertify-light-bg; - } - - &.safe, &.danger { - color: @colortheme_old-base; - white-space: normal; - font-weight: bold; - } - &.danger { - background-color: @colortheme_alertify-red; - border-color: @colortheme_alertify-red-border; - color: @colortheme_alertify-red-color; - &:hover, &:active { - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); - } - } - - &.safe { - background-color: @colortheme_alertify-green; - border-color: @colortheme_alertify-green-border; - color: @colortheme_alertify-green-color; - &:hover, &:active { - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%)); - } - } - - &.primary { - background-color: @colortheme_alertify-primary; - color: @colortheme_alertify-primary-text; - border-color: @colortheme_alertify-primary-border; - font-weight: bold; - &:hover, &:active { - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); - } - } - - &.cancel { - border-color: @colortheme_alertify-cancel-border; - color: @colortheme_alertify-cancel-border; - &:hover, &:hover { - background-color: fade(@colortheme_alertify-cancel-border, 25%); - } - } - - - - &:focus { - //border: 1px dotted @alertify-base; - box-shadow: 0px 0px 5px @colortheme_alertify-primary; - outline: none; - } - &::-moz-focus-inner { - border: 0; - } - - &:disabled { - cursor: not-allowed !important; - background-color: @colortheme_alertify-disabled; - color: @colortheme_alertify-disabled-text; - border-color: @colortheme_alertify-disabled-border; - &:hover, &:active { - background-color: @colortheme_alertify-disabled; - } - } - } + .buttons_main(); nav { padding: @alertify_padding-base; diff --git a/customize.dist/src/less2/include/buttons.less b/customize.dist/src/less2/include/buttons.less new file mode 100644 index 000000000..f2f07663d --- /dev/null +++ b/customize.dist/src/less2/include/buttons.less @@ -0,0 +1,107 @@ +@import (reference) "./colortheme-all.less"; + +.buttons_main() { + @alertify-fore: @colortheme_modal-fg; + @alertify-btn-fg: @alertify-fore; + @alertify-light-bg: fade(@alertify-fore, 25%); + + button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { + + background-color: @colortheme_alertify-cancel; + box-sizing: border-box; + position: relative; + outline: 0; + display: inline-block; + align-items: center; + padding: 0 6px; + margin: 6px 8px; + line-height: 36px; + min-height: 36px; + white-space: nowrap; + min-width: 88px; + text-align: center; + text-transform: uppercase; + font-size: 14px; + text-decoration: none; + cursor: pointer; + border-radius: 0; + + .fa { + margin-right: 0.2em; + } + + color: @alertify-btn-fg; + border: 1px solid @alertify-btn-fg; + + &.no-margin { + margin: 0; + } + + &:hover, &:active { + background-color: lighten(@alertify-fore, 35%); + } + + &.safe, &.danger { + color: @colortheme_old-base; + white-space: normal; + font-weight: bold; + } + &.danger { + background-color: @colortheme_alertify-red; + border-color: @colortheme_alertify-red-border; + color: @colortheme_alertify-red-color; + &:hover, &:active { + background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); + } + } + + &.safe { + background-color: @colortheme_alertify-green; + border-color: @colortheme_alertify-green-border; + color: @colortheme_alertify-green-color; + &:hover, &:active { + background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%)); + } + } + + &.primary { + background-color: @colortheme_alertify-primary; + color: @colortheme_alertify-primary-text; + border-color: @colortheme_alertify-primary-border; + font-weight: bold; + &:hover, &:active { + background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); + } + } + + &.cancel { + border-color: @colortheme_alertify-cancel-border; + color: @colortheme_alertify-cancel-border; + &:hover, &:hover { + background-color: fade(@colortheme_alertify-cancel-border, 25%); + } + } + + + + &:focus { + //border: 1px dotted @alertify-base; + box-shadow: 0px 0px 5px @colortheme_alertify-primary; + outline: none; + } + &::-moz-focus-inner { + border: 0; + } + + &:disabled { + cursor: not-allowed !important; + background-color: @colortheme_alertify-disabled; + color: @colortheme_alertify-disabled-text; + border-color: @colortheme_alertify-disabled-border; + &:hover, &:active { + background-color: @colortheme_alertify-disabled; + } + } + } + +} diff --git a/www/common/messenger-ui.js b/www/common/messenger-ui.js index 41304151e..7e568a658 100644 --- a/www/common/messenger-ui.js +++ b/www/common/messenger-ui.js @@ -14,6 +14,8 @@ define([ var MessengerUI = {}; + var mutedUsers = {}; + var dataQuery = function (id) { return '[data-key="' + id + '"]'; }; @@ -70,7 +72,7 @@ define([ h('div.cp-app-contacts-friends.cp-app-contacts-category', [ h('div.cp-app-contacts-category-content.cp-contacts-friends'), h('h2.cp-app-contacts-category-title', Messages.contacts_friends), - h('button.btn.btn-secondary.cp-app-contacts-muted-button', Messages.contacts_manageMuted || 'MANAGE MUTED') // XXX + h('button.cp-app-contacts-muted-button', Messages.contacts_manageMuted || 'MANAGE MUTED') // XXX ]), h('div.cp-app-contacts-rooms.cp-app-contacts-category', [ h('div.cp-app-contacts-category-content'), @@ -510,8 +512,16 @@ define([ title: room.name }); + + var curve; + if (room.isFriendChat) { + var __channel = state.channels[id]; + curve = __channel.curvePublic; + } + var mute = h('span.cp-app-contacts-remove.fa.fa-bell-slash-o.cp-mute-icon', { - title: Messages.contacts_mute || 'mute' + title: Messages.contacts_mute || 'mute', + style: (curve && mutedUsers[curve]) ? 'display: none;' : undefined }); var remove = h('span.cp-app-contacts-remove.fa.fa-user-times', { title: Messages.contacts_remove @@ -821,6 +831,7 @@ define([ var updateMutedList = function () { execCommand('GET_MUTED_USERS', null, function (err, muted) { if (err) { return void console.error(err); } + mutedUsers = muted; var $button = $userlist.find('.cp-app-contacts-muted-button'); @@ -830,9 +841,11 @@ define([ } var rows = Object.keys(muted).map(function (curve) { + $('.cp-app-contacts-friend[data-user="'+curve+'"]') + .find('.cp-mute-icon').hide(); var data = muted[curve]; var avatar = h('span.cp-avatar'); - var button = h('button.btn.btn-secondary', [ + var button = h('button', [ h('i.fa.fa-ban'), Messages.contacts_unmute || 'unmute' ]); diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less index 99b927b6c..88a93ae9d 100644 --- a/www/contacts/app-contacts.less +++ b/www/contacts/app-contacts.less @@ -1,6 +1,7 @@ @import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/messenger.less'; @import (reference) '../../customize/src/less2/include/avatar.less'; +@import (reference) '../../customize/src/less2/include/buttons.less'; // body &.cp-app-contacts { @@ -18,6 +19,9 @@ display: flex; // We need this to remove a 3px border at the bottom of the toolbar } + .cp-app-contacts-friends { + .buttons_main(); + } .cp-contacts-muted-table { .avatar_main(50px); .cp-contacts-muted-user { @@ -29,6 +33,8 @@ } } + + .messenger_main(); }