Fix buttons UI in contacts
yflory
parent
e8c1eb9f11
commit
fb8be19657
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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'
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue