extern
/
egroupware_official
mirror of https://github.com/EGroupware/egroupware.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
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: {
files: {
"pixelegg/css/pixelegg.min.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",
"pixelegg/css/pixelegg.css",
"api/templates/default/print.css",
"pixelegg/print.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/mobile.min.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",
"pixelegg/css/mobile.css",
"api/templates/default/print.css",
"pixelegg/print.css"
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"pixelegg/css/mobile.min.css"
],
"pixelegg/mobile/fw_mobile.min.css": [
"node_modules/flatpickr/dist/themes/light.css",
@ -76,28 +62,44 @@ module.exports = function (grunt) {
"pixelegg/print.css"
],
"pixelegg/css/monochrome.min.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",
"pixelegg/css/monochrome.css",
"api/templates/default/print.css",
"pixelegg/print.css"
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
"pixelegg/css/monochrome.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",
"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",
"pixelegg/css/pixelegg.css",
"api/templates/default/print.css",
"pixelegg/print.css"
"kdots/css/kdots.css",
"api/templates/default/print.css"
]
}
}
@ -108,7 +110,8 @@ module.exports = function (grunt) {
"*/Gruntfile.js"
]
}
}
},
terser: null
});
// Load plugin for css minification
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
*
* 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 **/
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;
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 ***/
/*** APPLICATION ***/
/*** End APPLICATION ***/
@ -14,20 +46,26 @@ html[data-darkmode="1"] body {
/* This should mostly go away with webcomponents */
/** 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;
}
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);
}
html[data-darkmode="1"] body .et2_container {
html[data-darkmode="1"] .et2_container,
.sl-theme-dark .et2_container {
background-color: initial;
}
html[data-darkmode="1"] body .dialogFooterToolbar et2-button::part(base):not(:hover),
html[data-darkmode="1"] body et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
html[data-darkmode="1"] .dialogFooterToolbar et2-button::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);
}
html[data-darkmode="1"] body .nextmatch_sortheader {
html[data-darkmode="1"] .nextmatch_sortheader,
.sl-theme-dark .nextmatch_sortheader {
color: #96bcd9;
}
/** End theme customisations **/
@ -163,7 +201,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
left: 0;
width: 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-size: 32px;
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 {
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-size: 24px;
background-position: center;
@ -223,7 +261,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
width: 1em;
}
#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 {
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;
padding: 4px 14px 0 2px;
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-size: 10px 10px;
display: inline-block;

13
kdots/assets/styles/framework.less → kdots/css/kdots.less
View File

@ -1,12 +1,13 @@
/**
* 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 **/
@import "./framework_dark.less";
@import "./less/light.less";
@import "./less/dark.less";
/** End theme customisations **/
html, body {
@ -164,7 +165,7 @@ egw-framework#egw_fw_basecontainer {
left: 0;
width: 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-size: 32px;
background-position: center center;
@ -177,7 +178,7 @@ egw-framework#egw_fw_basecontainer {
span#quick_add {
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-size: 24px;
background-position: center;
@ -236,7 +237,7 @@ egw-framework#egw_fw_basecontainer {
}
}
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;
padding: 4px 14px 0 2px;
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-size: 10px 10px;
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-language-{lang_code}.css">
<script src="{webserver_url}/api/js/offline/offline.min.js"></script>
<link rel="stylesheet" href="{webserver_url}/kdots/assets/styles/framework.css">
{css_file}
<style type="text/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())
{
self::includeCSS('/kdots/assets/styles/kdots.css');
// Skip making a mess for iframe apps, they're on their own
if($extra['check-framework'] == true)
{
@ -36,7 +38,7 @@ class kdots_framework extends Api\Framework\Ajax
}
$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']);
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");
}
// Set class for Shoelace
document.documentElement.classList.toggle("sl-theme-dark", this.darkmode);
this.requestUpdate("darkmode")
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']['windowed'] = true;
// specify (different) labels for default themes
$GLOBALS['egw_info']['template']['kdots']['themes'] = array(
'default' => 'Standard'
);
// Dependencies for this template to work
$GLOBALS['egw_info']['template']['kdots']['depends'][] = array(
'appname' => 'api',

2
pixelegg/head.tpl
View File

@ -14,6 +14,8 @@
<link rel="manifest" href="{webserver_url}/manifest.json"/>
<link rel="icon" href="{img_icon}" type="image/x-ico" />
<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-language-{lang_code}.css">
<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'];
$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
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;
$tpl = Framework::factory();