Kdots style work

- Get CSS minify working
- Further darkmode work
This commit is contained in:
nathan 2024-07-12 10:17:57 -06:00
parent 7559ae4f21
commit 076694187c
12 changed files with 170 additions and 101 deletions

View File

@ -40,28 +40,14 @@ module.exports = function (grunt) {
pixelegg: { pixelegg: {
files: { files: {
"pixelegg/css/pixelegg.min.css": [ "pixelegg/css/pixelegg.min.css": [
"node_modules/flatpickr/dist/themes/light.css", "node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"api/js/egw_action/test/skins/dhtmlxmenu_egw.css", "node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"vendor/bower-asset/diff2html/dist/diff2html.css", "pixelegg/css/pixelegg.min.css"
"vendor/bower-asset/cropper/dist/cropper.min.css",
"api/templates/default/css/flags.css",
"api/templates/default/css/htmlarea.css",
"api/templates/default/etemplate2.css",
"pixelegg/css/pixelegg.css",
"api/templates/default/print.css",
"pixelegg/print.css"
], ],
"pixelegg/css/mobile.min.css": [ "pixelegg/css/mobile.min.css": [
"node_modules/flatpickr/dist/themes/light.css", "node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"api/js/egw_action/test/skins/dhtmlxmenu_egw.css", "node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"vendor/bower-asset/diff2html/dist/diff2html.css", "pixelegg/css/mobile.min.css"
"vendor/bower-asset/cropper/dist/cropper.min.css",
"api/templates/default/css/flags.css",
"api/templates/default/css/htmlarea.css",
"api/templates/default/etemplate2.css",
"pixelegg/css/mobile.css",
"api/templates/default/print.css",
"pixelegg/print.css"
], ],
"pixelegg/mobile/fw_mobile.min.css": [ "pixelegg/mobile/fw_mobile.min.css": [
"node_modules/flatpickr/dist/themes/light.css", "node_modules/flatpickr/dist/themes/light.css",
@ -76,28 +62,44 @@ module.exports = function (grunt) {
"pixelegg/print.css" "pixelegg/print.css"
], ],
"pixelegg/css/monochrome.min.css": [ "pixelegg/css/monochrome.min.css": [
"node_modules/flatpickr/dist/themes/light.css", "node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"api/js/egw_action/test/skins/dhtmlxmenu_egw.css", "node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"vendor/bower-asset/diff2html/dist/diff2html.css", "pixelegg/css/monochrome.min.css"
"vendor/bower-asset/cropper/dist/cropper.min.css",
"api/templates/default/css/flags.css",
"api/templates/default/css/htmlarea.css",
"api/templates/default/etemplate2.css",
"pixelegg/css/monochrome.css",
"api/templates/default/print.css",
"pixelegg/print.css"
], ],
"pixelegg/css/modern.min.css": [ "pixelegg/css/modern.min.css": [
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"pixelegg/css/pixelegg.min.css"
],
"pixelegg/css/0.min.css": [
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"pixelegg/css/pixelegg.min.css"
],
"pixelegg/css/1.min.css": [
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"pixelegg/css/pixelegg.min.css"
],
"pixelegg/css/2.min.css": [
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"pixelegg/css/pixelegg.min.css"
],
"pixelegg/css/3.min.css": [
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"pixelegg/css/pixelegg.min.css"
]
}
},
kdots: {
files: {
"kdots/css/kdots.min.css": [
"node_modules/flatpickr/dist/themes/light.css", "node_modules/flatpickr/dist/themes/light.css",
"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
"vendor/bower-asset/diff2html/dist/diff2html.css",
"vendor/bower-asset/cropper/dist/cropper.min.css",
"api/templates/default/css/flags.css",
"api/templates/default/css/htmlarea.css",
"api/templates/default/etemplate2.css", "api/templates/default/etemplate2.css",
"pixelegg/css/pixelegg.css", "kdots/css/kdots.css",
"api/templates/default/print.css", "api/templates/default/print.css"
"pixelegg/print.css"
] ]
} }
} }
@ -108,7 +110,8 @@ module.exports = function (grunt) {
"*/Gruntfile.js" "*/Gruntfile.js"
] ]
} }
} },
terser: null
}); });
// Load plugin for css minification // Load plugin for css minification
grunt.loadNpmTasks("grunt-contrib-cssmin"); grunt.loadNpmTasks("grunt-contrib-cssmin");

View File

@ -1,35 +0,0 @@
html[data-darkmode="1"] body {
background-color: black;
color: var(--sl-color-neutral-700);
/*** HEADER ***/
#egw_fw_topmenu_info_items {
#topmenu_info_timer:before {
filter:initial;
}
}
/*** APPLICATION ***/
egw-app {
--application-header-text-color: var(--sl-color-neutral-700);
}
/*** End APPLICATION ***/
/*** WIDGETS ***/
/* This should mostly go away with webcomponents */
.et2_container {
background-color: initial;
}
.dialogFooterToolbar et2-button::part(base):not(:hover), et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
background-color: var(--sl-input-background-color);
}
.nextmatch_sortheader {
color: #96bcd9;
}
/** End WIDGETS **/
}

View File

@ -1,12 +1,44 @@
/** /**
* kDots main styles * kDots main styles
* *
* Note that light / dark colors should go in framework_light.less & framework_dark.less * Note that light / dark colors should go in kdots_light.less & kdots_dark.less
*/ */
/** Theme customisations **/ /** Theme customisations **/
html[data-darkmode="1"] body { :root,
:host,
html,
.sl-theme-light {
/*
color token generator using #0053c9
https://codepen.io/claviska/full/QWveRgL
*/
--sl-color-primary-50: #f7fafd;
--sl-color-primary-100: #e4edf9;
--sl-color-primary-200: #d0dff5;
--sl-color-primary-300: #bad0f0;
--sl-color-primary-400: #9cbcea;
--sl-color-primary-500: #75a2e2;
--sl-color-primary-600: #4984d8;
--sl-color-primary-700: #2169d0;
--sl-color-primary-800: #0051c5;
--sl-color-primary-900: #003a8d;
--sl-color-primary-950: #002458;
}
html[data-darkmode="1"],
.sl-theme-dark {
background-color: black; background-color: black;
color: var(--sl-color-neutral-700); color: var(--sl-color-neutral-700);
--sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
--sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
--sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
--sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
--sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
--sl-color-primary-500: var(--primary-color);
--sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
--sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
--sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
--sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
--sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));
/*** HEADER ***/ /*** HEADER ***/
/*** APPLICATION ***/ /*** APPLICATION ***/
/*** End APPLICATION ***/ /*** End APPLICATION ***/
@ -14,20 +46,26 @@ html[data-darkmode="1"] body {
/* This should mostly go away with webcomponents */ /* This should mostly go away with webcomponents */
/** End WIDGETS **/ /** End WIDGETS **/
} }
html[data-darkmode="1"] body #egw_fw_topmenu_info_items #topmenu_info_timer:before { html[data-darkmode="1"] #egw_fw_topmenu_info_items #topmenu_info_timer:before,
.sl-theme-dark #egw_fw_topmenu_info_items #topmenu_info_timer:before {
filter: initial; filter: initial;
} }
html[data-darkmode="1"] body egw-app { html[data-darkmode="1"] egw-app,
.sl-theme-dark egw-app {
--application-header-text-color: var(--sl-color-neutral-700); --application-header-text-color: var(--sl-color-neutral-700);
} }
html[data-darkmode="1"] body .et2_container { html[data-darkmode="1"] .et2_container,
.sl-theme-dark .et2_container {
background-color: initial; background-color: initial;
} }
html[data-darkmode="1"] body .dialogFooterToolbar et2-button::part(base):not(:hover), html[data-darkmode="1"] .dialogFooterToolbar et2-button::part(base):not(:hover),
html[data-darkmode="1"] body et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) { .sl-theme-dark .dialogFooterToolbar et2-button::part(base):not(:hover),
html[data-darkmode="1"] et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover),
.sl-theme-dark et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
background-color: var(--sl-input-background-color); background-color: var(--sl-input-background-color);
} }
html[data-darkmode="1"] body .nextmatch_sortheader { html[data-darkmode="1"] .nextmatch_sortheader,
.sl-theme-dark .nextmatch_sortheader {
color: #96bcd9; color: #96bcd9;
} }
/** End theme customisations **/ /** End theme customisations **/
@ -163,7 +201,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url(../../../timesheet/templates/default/images/navbar.svg); background-image: url(../../timesheet/templates/default/images/navbar.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 32px; background-size: 32px;
background-position: center center; background-position: center center;
@ -174,7 +212,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
} }
#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add { #egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add {
display: block; display: block;
background-image: url(../../../api/templates/default/images/add.svg); background-image: url(../../api/templates/default/images/add.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px; background-size: 24px;
background-position: center; background-position: center;
@ -223,7 +261,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
width: 1em; width: 1em;
} }
#egw_fw_topmenu_info_items button#topmenu_info_search { #egw_fw_topmenu_info_items button#topmenu_info_search {
background-image: url(../../../api/templates/default/images/topmenu_items/search.svg); background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
} }
#topmenu_info_print_title { #topmenu_info_print_title {
background-image: url(../../../api/templates/default/images/print.svg); background-image: url(../../../api/templates/default/images/print.svg);
@ -354,7 +392,7 @@ div.et2_nextmatch .egwGridView_outer thead > tr th.optcol span.selectcols {
height: 9px; height: 9px;
padding: 4px 14px 0 2px; padding: 4px 14px 0 2px;
margin-top: 4px; margin-top: 4px;
background-image: url(../../../api/templates/default/images/selectcols.svg); background-image: url(../../api/templates/default/images/selectcols.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 10px 10px; background-size: 10px 10px;
display: inline-block; display: inline-block;

View File

@ -1,12 +1,13 @@
/** /**
* kDots main styles * kDots main styles
* *
* Note that light / dark colors should go in framework_light.less & framework_dark.less * Note that light / dark colors should go in kdots_light.less & kdots_dark.less
*/ */
/** Theme customisations **/ /** Theme customisations **/
@import "./framework_dark.less"; @import "./less/light.less";
@import "./less/dark.less";
/** End theme customisations **/ /** End theme customisations **/
html, body { html, body {
@ -164,7 +165,7 @@ egw-framework#egw_fw_basecontainer {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url(../../../timesheet/templates/default/images/navbar.svg); background-image: url(../../timesheet/templates/default/images/navbar.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 32px; background-size: 32px;
background-position: center center; background-position: center center;
@ -177,7 +178,7 @@ egw-framework#egw_fw_basecontainer {
span#quick_add { span#quick_add {
display: block; display: block;
background-image: url(../../../api/templates/default/images/add.svg); background-image: url(../../api/templates/default/images/add.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px; background-size: 24px;
background-position: center; background-position: center;
@ -236,7 +237,7 @@ egw-framework#egw_fw_basecontainer {
} }
} }
button#topmenu_info_search { button#topmenu_info_search {
background-image: url(../../../api/templates/default/images/topmenu_items/search.svg); background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
} }
} }
@ -383,7 +384,7 @@ div.et2_nextmatch {
height: 9px; height: 9px;
padding: 4px 14px 0 2px; padding: 4px 14px 0 2px;
margin-top: 4px; margin-top: 4px;
background-image: url(../../../api/templates/default/images/selectcols.svg); background-image: url(../../api/templates/default/images/selectcols.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 10px 10px; background-size: 10px 10px;
display: inline-block; display: inline-block;

47
kdots/css/less/dark.less Normal file
View File

@ -0,0 +1,47 @@
html[data-darkmode="1"], .sl-theme-dark {
background-color: black;
color: var(--sl-color-neutral-700);
--sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
--sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
--sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
--sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
--sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
--sl-color-primary-500: var(--primary-color);
--sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
--sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
--sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
--sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
--sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));
/*** HEADER ***/
#egw_fw_topmenu_info_items {
#topmenu_info_timer:before {
filter:initial;
}
}
/*** APPLICATION ***/
egw-app {
--application-header-text-color: var(--sl-color-neutral-700);
}
/*** End APPLICATION ***/
/*** WIDGETS ***/
/* This should mostly go away with webcomponents */
.et2_container {
background-color: initial;
}
.dialogFooterToolbar et2-button::part(base):not(:hover), et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
background-color: var(--sl-input-background-color);
}
.nextmatch_sortheader {
color: #96bcd9;
}
/** End WIDGETS **/
}

18
kdots/css/less/light.less Normal file
View File

@ -0,0 +1,18 @@
:root, :host, html, .sl-theme-light {
/*
color token generator using #0053c9
https://codepen.io/claviska/full/QWveRgL
*/
--sl-color-primary-50: rgb(247 250 253);
--sl-color-primary-100: rgb(228 237 249);
--sl-color-primary-200: rgb(208 223 245);
--sl-color-primary-300: rgb(186 208 240);
--sl-color-primary-400: rgb(156 188 234);
--sl-color-primary-500: rgb(117 162 226);
--sl-color-primary-600: rgb(73 132 216);
--sl-color-primary-700: rgb(33 105 208);
--sl-color-primary-800: rgb(0 81 197);
--sl-color-primary-900: rgb(0 58 141);
--sl-color-primary-950: rgb(0 36 88);
}

View File

@ -17,7 +17,6 @@
<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-theme-slide.css"> <link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-theme-slide.css">
<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-language-{lang_code}.css"> <link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-language-{lang_code}.css">
<script src="{webserver_url}/api/js/offline/offline.min.js"></script> <script src="{webserver_url}/api/js/offline/offline.min.js"></script>
<link rel="stylesheet" href="{webserver_url}/kdots/assets/styles/framework.css">
{css_file} {css_file}
<style type="text/css"> <style type="text/css">
{app_css} {app_css}

View File

@ -28,6 +28,8 @@ class kdots_framework extends Api\Framework\Ajax
*/ */
protected function _get_header(array $extra = array()) protected function _get_header(array $extra = array())
{ {
self::includeCSS('/kdots/assets/styles/kdots.css');
// Skip making a mess for iframe apps, they're on their own // Skip making a mess for iframe apps, they're on their own
if($extra['check-framework'] == true) if($extra['check-framework'] == true)
{ {
@ -36,7 +38,7 @@ class kdots_framework extends Api\Framework\Ajax
} }
$data = parent::_get_header($extra); $data = parent::_get_header($extra);
$data['theme'] .= $data['darkmode'] ? 'data-darkmode="1" class="sl-theme-dark"' : ''; $data['theme'] .= $GLOBALS['egw_info']['user']['preferences']['common']['darkmode'] ? 'data-darkmode="1" class="sl-theme-dark"' : '';
unset($data['darkmode']); unset($data['darkmode']);
if($extra['navbar-apps']) if($extra['navbar-apps'])

View File

@ -69,7 +69,6 @@ export class EgwDarkmodeToggle extends LitElement
document.documentElement.setAttribute("data-darkmode", "0"); document.documentElement.setAttribute("data-darkmode", "0");
} }
// Set class for Shoelace // Set class for Shoelace
document.documentElement.classList.toggle("sl-theme-dark", this.darkmode);
this.requestUpdate("darkmode") this.requestUpdate("darkmode")
this.updateComplete.then(() => this.updateComplete.then(() =>
{ {

View File

@ -20,11 +20,6 @@ $GLOBALS['egw_info']['template']['kdots']['maintainer'] = array(
$GLOBALS['egw_info']['template']['kdots']['description'] = "WIP framework of EGroupware."; $GLOBALS['egw_info']['template']['kdots']['description'] = "WIP framework of EGroupware.";
$GLOBALS['egw_info']['template']['kdots']['windowed'] = true; $GLOBALS['egw_info']['template']['kdots']['windowed'] = true;
// specify (different) labels for default themes
$GLOBALS['egw_info']['template']['kdots']['themes'] = array(
'default' => 'Standard'
);
// Dependencies for this template to work // Dependencies for this template to work
$GLOBALS['egw_info']['template']['kdots']['depends'][] = array( $GLOBALS['egw_info']['template']['kdots']['depends'][] = array(
'appname' => 'api', 'appname' => 'api',

View File

@ -14,6 +14,8 @@
<link rel="manifest" href="{webserver_url}/manifest.json"/> <link rel="manifest" href="{webserver_url}/manifest.json"/>
<link rel="icon" href="{img_icon}" type="image/x-ico" /> <link rel="icon" href="{img_icon}" type="image/x-ico" />
<link rel="shortcut icon" href="{img_shortcut}" /> <link rel="shortcut icon" href="{img_shortcut}" />
<link rel="stylesheet" href="{webserver_url}/node_modules/@shoelace-style/shoelace/dist/themes/light.css"/>
<link rel="stylesheet" href="{webserver_url}/node_modules/@shoelace-style/shoelace/dist/themes/dark.css"/>
<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-theme-slide.css"> <link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-theme-slide.css">
<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-language-{lang_code}.css"> <link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-language-{lang_code}.css">
<script src="{webserver_url}/api/js/offline/offline.min.js"></script> <script src="{webserver_url}/api/js/offline/offline.min.js"></script>

View File

@ -78,7 +78,7 @@ foreach(Bundle::all() as $name => $files)
$cssmin =& $config['cssmin']; $cssmin =& $config['cssmin'];
$GLOBALS['egw_info']['flags']['currentapp'] = '*grunt*'; // to not find any app.css files $GLOBALS['egw_info']['flags']['currentapp'] = '*grunt*'; // to not find any app.css files
$GLOBALS['egw_info']['server']['debug_minify'] = 'True'; // otherwise we would only get minified file $GLOBALS['egw_info']['server']['debug_minify'] = 'True'; // otherwise we would only get minified file
foreach(array('pixelegg','jdots')/*array_keys(Framework::list_templates())*/ as $template) foreach(array('pixelegg', 'jdots', 'kdots')/*array_keys(Framework::list_templates())*/ as $template)
{ {
$GLOBALS['egw_info']['server']['template_set'] = $template; $GLOBALS['egw_info']['server']['template_set'] = $template;
$tpl = Framework::factory(); $tpl = Framework::factory();