infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix buttons UI in contacts

Browse Source
pull/1/head
yflory 5 years ago
parent e8c1eb9f11
commit fb8be19657
4 changed files with 131 additions and 97 deletions
Show Stats Download Patch File Download Diff File

96
customize.dist/src/less2/include/alertify.less
Unescape Escape View File

@ -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;

107
customize.dist/src/less2/include/buttons.less
Unescape Escape View File

@ -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;
}
}
}
}

19
www/common/messenger-ui.js
Unescape Escape View File

@ -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'
]);

6
www/contacts/app-contacts.less
Unescape Escape View File

@ -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();
}

Write Preview
Loading…
Cancel
Save