Merge pull request #25 from sea75300/18-dark-mode

Merge dark mode

core/js/editor/editor_codemirror.js

@@ -98,7 +98,7 @@ fpcm.editor_codemirror = {
             autoCloseTags    : true,
             id               : config.editorId,
             mode             : "text/html",            
-            theme            : 'fpcm',
+            theme            : 'fpcm' + (fpcm.ui.darkModeEnabled() ? '-dark' : ''),
             matchTags        : {
                 bothTags     : true
             },

core/js/editor/editor_tinymce.js

@@ -144,6 +144,10 @@ fpcm.editor_tinymce = {
             params.emoticons_append = config.emoticons_append;
         }
 
+        if (config.skin) {
+            params.skin = config.skin;
+        }
+
         params.deprecation_warnings = false;
 
         tinymce.init(params);

core/js/files/module.js

@@ -233,6 +233,7 @@ fpcm.filemanager = {
         fpcm.dom.bindClick('.fpcm-filelist-delete',function (_e, _ui) {
             fpcm.ui_dialogs.confirm({
                 clickNoDefault: true,
+                focusNo: true,
                 clickYes: function () {
 
                     fpcm.ajax.post('files/delete', {
@@ -302,6 +303,7 @@ fpcm.filemanager = {
             }
 
             fpcm.ui_dialogs.confirm({
+                focusNo: true,
                 clickYes: function () {
                     fpcm.ajax.post('files/delete', {
                         dataType: 'json',

core/js/logs.js

@@ -38,21 +38,16 @@ fpcm.logs = {
             }
 
         });
-
-        var cleanEl = fpcm.dom.fromId('btnCleanLogs');
-        cleanEl.unbind('click');
-        cleanEl.click(function () {
-
-            var elData = fpcm.dom.fromTag(this).data();
-
+
+        fpcm.dom.bindClick('#btnCleanLogs', function (_event, _ui) {
+
             fpcm.ui_dialogs.confirm({
-                clickNoDefault: true,
+                focusNo: true,
                 clickYes: function () {
                     fpcm.logs.clearLogs(fpcm.vars.jsvars.currentLog);
                 }
             });
-
-            return false;
+
         });
 
     },

core/js/ui/base.js

@@ -192,7 +192,7 @@ fpcm.ui = {
 
         _msgCode = '   <div class="fpcm ui-message shadow ' + _css + '" role="alert" aria-live="assertive" aria-atomic="true">';
         _msgCode += '   <div class="toast-header text-white bg-'  + _msg.type +'">';
-        _msgCode += fpcm.ui.getIcon(_msg.icon);
+        _msgCode += fpcm.ui.getIcon(_msg.icon, { size: '2x' });
         _msgCode += '   <span class="d-inline-block w-100"></span>';
         _msgCode += '   <button type="button" class="btn-close '+_msg.cbtn+'" data-bs-dismiss="toast" data-bs-theme="'+_msg.bstm + '"  aria-label="' + fpcm.ui.translate('GLOBAL_CLOSE') + '"></button>';
         _msgCode += '   </div>';
@@ -206,7 +206,7 @@ fpcm.ui = {
 
     appendMessageToBody: function(_boxes)
     {
-        fpcm.dom.appendHtml('#fpcm-body', '<div class="toast-container position-fixed top-0 end-0 p-3">' + _boxes + '</div>');
+        fpcm.dom.appendHtml('#fpcm-body', '<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">' + _boxes + '</div>');
 
         let _el = document.getElementsByClassName('fpcm ui-message');
         for (var i = 0; i < _el.length; i++) {
@@ -626,6 +626,10 @@ fpcm.ui = {
 
     replaceIcon: function (_id, _haystack, _needle) {
         fpcm.dom.fromId(_id).find('span.fpcm-ui-icon').removeClass('fa-' + _haystack).addClass('fa-' + _needle);
+    },
+
+    darkModeEnabled: function () {
+        return document.documentElement.dataset.bsTheme == 'dark';
     }
 
 };

core/js/ui/dataview.js

@@ -136,7 +136,14 @@ fpcm.dataview = {
 
         let _el = document.createElement('div');
         _el.classList.add('row');
-        _el.classList.add('text-bg-primary');
+
+        if (fpcm.ui.darkModeEnabled()) {
+            _el.classList.add('bg-primary-subtle');
+        }
+        else  {
+            _el.classList.add('text-bg-primary');
+        }
+
         _el.classList.add('py-1');
         _el.classList.add('fpcm');
         _el.classList.add('ui-dataview-head');
@@ -184,7 +191,7 @@ fpcm.dataview = {
         var _notFound       = row.isNotFound === true ? true : false;
 
         var rowId           = obj.fullId + '-dataview-row-' + index;
-        var baseclass       = row.isheadline ? 'fpcm-ui-dataview-subhead bg-secondary text-light' : 'fpcm ui-background-transition';
+        var baseclass       = row.isheadline ? 'fpcm-ui-dataview-subhead bg-dark-subtle' : 'fpcm ui-background-transition';
         baseclass          += _notFound ? ' fpcm-ui-dataview-notfound' : '';
 
         row.class           = baseclass + (row.class ? ' ' + row.class : '');

core/js/ui/dialogs.js

@@ -146,16 +146,11 @@ fpcm.ui_dialogs = {
                 once: true
             });
         }
-
-        if (_params.dlOnOpenAfter) {
-            _domEl.addEventListener('shown.bs.modal', function (event) {
-                _params.dlOnOpenAfter(this, _bsObj);
-            }, {
-                once: true
-            });
-        }
 
         _bsObj.toggle(_domEl);
+
+        let _focused = '';
+
         if (_params.dlButtons !== undefined) {
 
             let _footer = document.querySelector('#' + _dlgId + ' div.modal-footer');
@@ -175,8 +170,10 @@ fpcm.ui_dialogs = {
 
                 let _btn = document.createElement('button');
 
+                _btn.id = _obj.id ? _obj.id : fpcm.ui.getUniqueID('fpcm-id-dialogbtn');
                 _btn.type = 'button';
                 _btn.className = 'btn' + (_obj.primary ? ' btn-primary' : '') + (_obj.class ? ' ' + _obj.class : '');
+                _btn.tabIndex = (_idx + 1);
 
                 if (!_obj.showLabel) {
                     _btn.innerHTML = fpcm.ui.getIcon(_obj.icon);
@@ -222,12 +219,33 @@ fpcm.ui_dialogs = {
                 };
 
                 _footer.appendChild(_btn);
-                if (_obj.primary || _obj.autofocus) {
-                    _btn.focus();
+                if (!_obj.disabled && (_obj.primary || _obj.autofocus)) {
+                    _focused = _btn.id;
+
                 }
-
             }
 
+
+
+        }
+
+        if (_focused || _params.dlOnOpenAfter) {
+
+            _domEl.addEventListener('shown.bs.modal', function (event) {
+
+                if (_focused) {
+                    document.getElementById(_focused).focus({ focusVisible: true });
+                }                
+
+                if (_params.dlOnOpenAfter) {
+                    _params.dlOnOpenAfter(this, _bsObj);
+                }
+
+
+            }, {
+                once: true
+            });
+
         }
 
         if (!_params.headlines) {
@@ -254,10 +272,6 @@ fpcm.ui_dialogs = {
     },
 
     confirm: function(_params) {
-
-        if (_params.defaultYes === undefined && _params.defaultNo === undefined) {
-            _params.defaultYes = true;
-        }
 
         if (_params.clickNoDefault === undefined) {
             _params.clickNoDefault = true;
@@ -275,6 +289,7 @@ fpcm.ui_dialogs = {
                     text: 'GLOBAL_YES',
                     icon: "check",
                     click: _params.clickYes,
+                    autofocus: _params.focusYes ? true : false,
                     class: 'btn-success',
                     clickClose: true
                 },
@@ -283,7 +298,8 @@ fpcm.ui_dialogs = {
                     icon: "times",
                     click: _params.clickNo,
                     primary: _params.defaultNo ? true : false,
-                    class: 'btn-outline-danger',
+                    autofocus: _params.focusNo ? true : false,
+                    class: 'btn-danger',
                     clickClose: _params.clickNoDefault
                 }
             ]

core/theme/style_colors.css

@@ -4,19 +4,17 @@ body {
     background-attachment: fixed;
 }
 
-body.fpcm.ui-classic-backdrop {
-    background-image: var(--fpcm-var-backdrop-classic);
-}
-
 body,
-a, a:visited, a.fpcm-link
 i, em,
 .cm-s-fpcm.CodeMirror,
-.fpcm-ui-color-grey-dark,
-a.nav-link {
+.fpcm-ui-color-grey-dark {
     color: var(--bs-body-color);
 }
 
+a, a:visited, a.fpcm-link, a.nav-link {
+    color: var(--fpcm-link-color);
+}
+
 #fpcm-top-menu a.nav-link {
     color: var(--bs-nav-link-color);
 }
@@ -35,7 +33,7 @@ span.fpcm-ui-editor-metainfo {
 }
 
 h3.fpcm.dashboard-container.headline span.fpcm-ui-icon {
-    color: var(--bs-dark);
+    color: var(--fpcm-dashboard-icons);
 }
 
 .btn-primary,
@@ -60,7 +58,7 @@ span.fpcm-ui-badge,
 }
 
 .fpcm.ui-background-white-50p {
-    background: rgba(var(--bs-white-rgb), 0.6);
+    background: var(--fpcm-white-50);
 }
 
 .fpcm.ui-background-blue-75 {
@@ -88,6 +86,10 @@ span.fpcm-ui-update-icons span.fpcm-ui-update-iconstatus.fpcm-ui-update-iconstat
     color: var(--bs-gray-500);
 }
 
+.fpcm.ui-color-font-disabled-dark {
+    color: var(--fpcm-text-disabled-dark);
+}
+
 del,
 .fpcm-ui-important-text,
 .fpcm.ui-important-text {
@@ -133,7 +135,9 @@ div.fpcm-ui-dataview div.row:hover {
 
 .fpcm-ui-input:invalid,
 .fpcm-ui-input:required:invalid {
-    background-color: rgba(var(--bs-warning-rgb), 0.75);
+    background-color: var(--bs-danger-bg-subtle);
+    border-color: var(--bs-danger-border-subtle);
+    color: var(--bs-danger-bg-subtle);
 }
 
 div.row.fpcm-ui-dataview-row.fpcm-ui-logs-error {
@@ -149,7 +153,7 @@ div.row.fpcm-ui-dataview-row.fpcm-ui-logs-deprecation-warning {
 }
 
 #fpcm-ui-toolbar .form-select {
-    background-color: var(--bs-gray-100);
+    background-color: var(--fpcm-toolbar-select);
 }
 
 
@@ -190,3 +194,9 @@ div.fileupload-progress.in {
     opacity: 1;
     transition: opacity .15s linear;
 }
+
+[data-bs-theme=dark] {
+    div.fpcm.ui-help-content > h3 {
+        color: var(--bs-primary-text-emphasis);
+    }
+}

core/theme/ui_hooks.css

@@ -35,6 +35,10 @@ div.row {
     margin-right: 0;
 }
 
+div.modal-body {
+    background-color: var(--fpcm-modal-bg);
+}
+
 /* ------ TinyMCE */
 td.fpcm-tinymce-emoticons img {
     padding: 0.5em !important;
@@ -123,11 +127,27 @@ table.diff-wrapper {
   padding: 0 0.35rem;
 }
 
-/* ------ Selectize.js */
 .fpcm.ui-image-editor-cropper .cropper-drag-box.cropper-crop.cropper-modal {
     opacity: .5 !important;
 }
 
 .toast-container.position-fixed {
     z-index : 1021;
+}
+
+
+[data-bs-theme=dark] {
+
+    .ts-control, .ts-wrapper.single.input-active .ts-control, .ts-dropdown {
+        background: var(--bs-body-bg);
+    }
+
+    .ts-control, .ts-wrapper.single.input-active .ts-control, .ts-dropdown, div.fpcm.ui-help-content .btn-outline-dark {
+        border: var(--bs-border-width) solid var(--bs-border-color);
+    }
+
+    .ts-control, .ts-control input, .ts-dropdown, div.fpcm.ui-help-content .btn-outline-dark {
+        color: var(--bs-body-color);
+    }
+
 }

core/theme/vars.css

@@ -1,12 +1,26 @@
 /* ------ General colors */
 :root {
-  --bs-primary: #0073ea;
-  --bs-red: #cc0000;
-  --bs-body-color: #454545;
-  --fpcm-blue-light: #3399ff;
-  --fpcm-grey-light: #ebe7f2;
-  --fpcm-var-blurring: 5px;
-  --fpcm-var-easing: 0.5s;
-  --fpcm-var-backdrop-image: url('./backdrops/pexels-asad-photo-maldives-4578810.jpg');
-  --fpcm-var-backdrop-classic: url('./backdrops/trianglify-classic.svg');
+    --fpcm-var-blurring: 5px;
+    --fpcm-var-easing: 0.5s;
+    --fpcm-var-backdrop-image: url('./backdrops/pexels-asad-photo-maldives-4578810.jpg');
+    --fpcm-modal-bg: var(--bs-light-bg-subtle);
+}
+
+[data-bs-theme=light] {
+    --bs-primary: #0073ea;
+    --bs-red: #cc0000;
+    --bs-body-color: #454545;
+    --fpcm-link-color: var(--bs-body-color);
+    --fpcm-blue-light: #3399ff;
+    --fpcm-grey-light: #ebe7f2;
+    --fpcm-white-50: rgba(var(--bs-white-rgb), 0.6);
+    --fpcm-text-disabled-dark: rgba(var(--bs-dark-rgb),var(--bs-text-opacity)) !important;
+    --fpcm-dashboard-icons: var(--bs-dark);
+    --fpcm-toolbar-select: var(--bs-gray-100);
+}
+
+[data-bs-theme=dark] {
+    --bs-primary: rgba(13,110,253,0.6);
+    --fpcm-var-backdrop-image: '';
+    --fpcm-white-50: rgba(var(--bs-tertiary-bg-rgb), 0.6);
 }

core/views/comments/editors/tinymce.php

@@ -1,3 +1,3 @@
-<div class="row py-2">
+<div class="row g-0 p-3">
     <?php $theView->textarea('comment[text]', 'commenttext')->setValue(stripslashes($comment->getText()) ); ?>
 </div>