mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-13 03:27:39 +03:00
Cleanup some mobile modal screen sizes
And simplify the ko command bindinghandler to use CSS :enabled
This commit is contained in:
parent
f673344408
commit
fe45179847
6 changed files with 12 additions and 49 deletions
5
dev/External/ko.js
vendored
5
dev/External/ko.js
vendored
|
|
@ -90,7 +90,6 @@ ko.bindingHandlers.command = {
|
||||||
throw new Error('Value should be a command');
|
throw new Error('Value should be a command');
|
||||||
}
|
}
|
||||||
|
|
||||||
element.classList.add('command');
|
|
||||||
ko.bindingHandlers['FORM'==element.nodeName ? 'submit' : 'click'].init(
|
ko.bindingHandlers['FORM'==element.nodeName ? 'submit' : 'click'].init(
|
||||||
element,
|
element,
|
||||||
fValueAccessor,
|
fValueAccessor,
|
||||||
|
|
@ -105,10 +104,8 @@ ko.bindingHandlers.command = {
|
||||||
|
|
||||||
let disabled = !command.enabled();
|
let disabled = !command.enabled();
|
||||||
|
|
||||||
cl.toggle('no-disabled', !disabled);
|
|
||||||
|
|
||||||
disabled = disabled || !command.canExecute();
|
disabled = disabled || !command.canExecute();
|
||||||
['disable','disabled'].forEach(s => cl.toggle(s, disabled));
|
cl.toggle('disabled', disabled);
|
||||||
|
|
||||||
if (element.matches('INPUT,TEXTAREA,BUTTON')) {
|
if (element.matches('INPUT,TEXTAREA,BUTTON')) {
|
||||||
element.disabled = disabled;
|
element.disabled = disabled;
|
||||||
|
|
|
||||||
|
|
@ -323,12 +323,7 @@ export function startScreens(screensClasses) {
|
||||||
function decorateKoCommands(thisArg, commands) {
|
function decorateKoCommands(thisArg, commands) {
|
||||||
Object.entries(commands).forEach(([key, canExecute]) => {
|
Object.entries(commands).forEach(([key, canExecute]) => {
|
||||||
let command = thisArg[key],
|
let command = thisArg[key],
|
||||||
fn = function(...args) {
|
fn = (...args) => fn.enabled() && fn.canExecute() && command.apply(thisArg, args);
|
||||||
if (fn.enabled() && fn.canExecute()) {
|
|
||||||
command.apply(thisArg, args);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// fn.__realCanExecute = canExecute;
|
// fn.__realCanExecute = canExecute;
|
||||||
// fn.isCommand = true;
|
// fn.isCommand = true;
|
||||||
|
|
@ -337,7 +332,7 @@ function decorateKoCommands(thisArg, commands) {
|
||||||
|
|
||||||
fn.canExecute = (typeof canExecute === 'function')
|
fn.canExecute = (typeof canExecute === 'function')
|
||||||
? ko.computed(() => fn.enabled() && canExecute.call(thisArg, thisArg))
|
? ko.computed(() => fn.enabled() && canExecute.call(thisArg, thisArg))
|
||||||
: ko.computed(() => fn.enabled() && !!canExecute);
|
: ko.computed(() => fn.enabled());
|
||||||
|
|
||||||
thisArg[key] = fn;
|
thisArg[key] = fn;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -18,15 +18,10 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 1600px;
|
width: 1600px;
|
||||||
height: 400px;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
transition: left 500ms ease;
|
transition: left 500ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.domain-edit .modal-body {
|
|
||||||
height: 340px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.domain-second-page .modal-body {
|
&.domain-second-page .modal-body {
|
||||||
left: -800px;
|
left: -800px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,9 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 900px;
|
width: auto;
|
||||||
|
min-width: 550px;
|
||||||
|
max-width: 900px;
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
max-height: 700px;
|
max-height: 700px;
|
||||||
|
|
||||||
|
|
@ -184,7 +186,7 @@
|
||||||
box-shadow: inset 0 -1px 0 #ccc;
|
box-shadow: inset 0 -1px 0 #ccc;
|
||||||
|
|
||||||
.button-save-contact {
|
.button-save-contact {
|
||||||
&.no-disabled.dirty {
|
&.dirty:enabled {
|
||||||
color: #51a351;
|
color: #51a351;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
@ -201,8 +203,7 @@
|
||||||
bottom: 60px;
|
bottom: 60px;
|
||||||
left: @contacts-popup-left-width;
|
left: @contacts-popup-left-width;
|
||||||
right: 0;
|
right: 0;
|
||||||
overflow: hidden;
|
overflow: auto;
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-left: 1px solid #ddd;
|
border-left: 1px solid #ddd;
|
||||||
|
|
|
||||||
|
|
@ -204,10 +204,6 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
|
||||||
#rl-sub-right {
|
#rl-sub-right {
|
||||||
left: 500px;
|
left: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contacts-content.modal {
|
|
||||||
width: 900px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* desktop */
|
/* desktop */
|
||||||
|
|
@ -227,10 +223,6 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
|
||||||
#rl-sub-right {
|
#rl-sub-right {
|
||||||
left: 400px;
|
left: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contacts-content.modal {
|
|
||||||
width: 900px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* mobile and tablet */
|
/* mobile and tablet */
|
||||||
|
|
@ -250,29 +242,10 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
|
||||||
#rl-sub-right {
|
#rl-sub-right {
|
||||||
left: 310px;
|
left: 310px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-contacts-content.modal {
|
|
||||||
width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-contacts-content.modal {
|
|
||||||
.contactValueInput {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* tablet */
|
/* tablet */
|
||||||
@media screen and (min-width: 768px) and (max-width: 999px) {
|
@media screen and (min-width: 768px) and (max-width: 999px) {
|
||||||
.b-contacts-content.modal {
|
|
||||||
width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-contacts-content.modal {
|
|
||||||
.contactValueInput {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden-on-ctrl-btn,
|
.hidden-on-ctrl-btn,
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
#rl-popups {
|
#rl-popups {
|
||||||
.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content, .b-open-pgp-key-add-content, .b-compose-open-pgp-content, .b-message-open-pgp-content {
|
.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content {
|
||||||
|
|
||||||
&.modal {
|
&.modal {
|
||||||
width: 570px;
|
width: 570px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content, .b-open-pgp-key-add-content, .b-compose-open-pgp-content, .b-message-open-pgp-content {
|
||||||
|
|
||||||
.inputKey {
|
.inputKey {
|
||||||
font-family: var(--fontMono);
|
font-family: var(--fontMono);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue