extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-12 09:40:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Kdots style work

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
Gruntfile.js
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");

35
kdots/assets/styles/framework_dark.less
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 **/
}

62
kdots/assets/styles/framework.css → kdots/css/kdots.css
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;

13
kdots/assets/styles/framework.less → kdots/css/kdots.less
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);
}

1
kdots/head.tpl
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}

4
kdots/inc/class.kdots_framework.inc.php
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'])

1
kdots/js/EgwDarkmodeToggle.ts
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(() =>
{ {

5
kdots/setup/setup.inc.php
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',

2
pixelegg/head.tpl
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>

2
updateGruntfile.php
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();