Cleanup checkbox component

This commit is contained in:
djmaze 2021-09-07 23:09:56 +02:00
parent 081761b593
commit 01d96153c6
6 changed files with 11 additions and 20 deletions

View file

@ -8,20 +8,11 @@ class AbstractCheckbox extends AbstractComponent {
constructor(params = {}) {
super();
this.value = params.value;
if (undefined === this.value || !this.value.subscribe) {
this.value = ko.observable(!!this.value);
}
this.value = ko.isObservable(params.value) ? params.value
: ko.observable(!!params.value);
this.enable = params.enable;
if (undefined === this.enable || !this.enable.subscribe) {
this.enable = ko.observable(undefined === this.enable || !!this.enable);
}
this.disable = params.disable;
if (undefined === this.disable || !this.disable.subscribe) {
this.disable = ko.observable(!!this.disable);
}
this.enable = ko.isObservable(params.enable) ? params.enable
: ko.observable(undefined === params.enable || !!params.enable);
this.label = params.label || '';
this.inline = !!params.inline;

View file

@ -35,7 +35,7 @@ export class GeneralUserSettings {
this.notificationSounds = ko.observableArray(SettingsGet('NewMailSounds'));
this.enableDesktopNotification = NotificationUserStore.enableDesktopNotification;
this.isDesktopNotificationDenied = NotificationUserStore.isDesktopNotificationDenied;
this.isDesktopNotificationAllowed = NotificationUserStore.isDesktopNotificationAllowed;
this.showImages = SettingsUserStore.showImages;
this.removeColors = SettingsUserStore.removeColors;

View file

@ -41,13 +41,13 @@ export const NotificationUserStore = new class {
this.enableDesktopNotification = ko.observable(false)/*.extend({ notify: 'always' })*/;
this.isDesktopNotificationDenied = ko.observable(NotificationsDenied());
this.isDesktopNotificationAllowed = ko.observable(!NotificationsDenied());
this.enableDesktopNotification.subscribe(value => {
DesktopNotifications = !!value;
if (value && HTML5Notification && !NotificationsGranted()) {
HTML5Notification.requestPermission(() =>
this.isDesktopNotificationDenied(NotificationsDenied())
this.isDesktopNotificationAllowed(!NotificationsDenied())
);
}
});

View file

@ -1,4 +1,4 @@
<span class="e-component e-checkbox inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': disable() || !enable() }">
<span class="e-component e-checkbox inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
<i role="checkbox" class="e-checkbox-icon fontastic" data-bind="text: value() ? '☑' : '☐'"></i>
<!-- ko if: labeled -->
<span class="sub-label" data-bind="attr: {'data-i18n': label}"></span>

View file

@ -1,4 +1,4 @@
<span class="e-component e-checkbox material-design inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': disable() || !enable() }">
<span class="e-component e-checkbox material-design inline" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
<div class="sub-checkbox-container" role="checkbox">
<div class="sub-checkbox" data-bind="css: {'checked': value(),
'unchecked': !value(),

View file

@ -114,12 +114,12 @@
params: {
label: 'SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION_DESC',
value: enableDesktopNotification,
disable: isDesktopNotificationDenied,
enable: isDesktopNotificationAllowed,
inline: true
}
}"></div>
&nbsp;
<span data-bind="visible: isDesktopNotificationDenied" style="color: #999" data-i18n="SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION_DESC_DENIED"></span>
<span data-bind="visible: !isDesktopNotificationAllowed()" style="color: #999" data-i18n="SETTINGS_GENERAL/LABEL_CHROME_NOTIFICATION_DESC_DENIED"></span>
<span class="fontastic" data-bind="click: testSystemNotification" style="color:green;cursor:pointer">▶️</span>
</div>
<div>