Cleanup some mobile modal screen sizes

And simplify the ko command bindinghandler to use CSS :enabled
This commit is contained in:
djmaze 2021-02-19 23:31:50 +01:00
parent f673344408
commit fe45179847
6 changed files with 12 additions and 49 deletions

5
dev/External/ko.js vendored
View file

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

View file

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

View file

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

View file

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

View file

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

View file

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