From 935e71c92cc5e3644c5e5813d24d1a310210202e Mon Sep 17 00:00:00 2001 From: milan Date: Thu, 26 Sep 2024 20:04:20 +0200 Subject: [PATCH] fancy theme tab header styling --remove text and added it as hover instead and moved image size calculation from class.pixelegg_framework.inc.php to pixelegg.less so it can be overwritten by e.g. fancy.less --- api/js/framework/fw_ui.js | 1 + pixelegg/css/fancy.css | 39 ++++++++++++++++++- pixelegg/css/fancy.less | 39 +++++++++++++++++++ pixelegg/css/pixelegg.less | 6 ++- pixelegg/inc/class.pixelegg_framework.inc.php | 5 --- pixelegg/mobile/fw_mobile.css | 6 ++- 6 files changed, 88 insertions(+), 8 deletions(-) diff --git a/api/js/framework/fw_ui.js b/api/js/framework/fw_ui.js index 352e7830e9..1cbe8ca06b 100644 --- a/api/js/framework/fw_ui.js +++ b/api/js/framework/fw_ui.js @@ -337,6 +337,7 @@ window.egw_fw_ui_tab = function(_parent, _contHeaderDiv, _contDiv, _icon, _callb this.headerDiv = document.createElement("span"); this.headerDiv._position = _pos; jQuery(this.headerDiv).attr('id', this.tag.appName+'-egw_fw_ui_tab_header').addClass("egw_fw_ui_tab_header"); + this.headerDiv.setAttribute('title', this.tag.displayName); //Create a new callback object and attach it to the header div this.headerDiv._callbackObject = new egw_fw_class_callback(this, _callback); diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css index 5350e5c30b..1625fef469 100644 --- a/pixelegg/css/fancy.css +++ b/pixelegg/css/fancy.css @@ -7076,7 +7076,11 @@ table.egwGridView_grid img.et2_appicon { border-top-color: #404040; border-top-width: 4px !important; } -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon, +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { + filter: none; + width: calc(1em + 2px) !important; + height: calc(1em + 2px) !important; +} .standartTreeImage { filter: none; } @@ -7245,3 +7249,36 @@ div.flatpickr-calendar .shortcut-buttons-flatpickr-buttons button:last-child { .nextmatch_header .header_count { border-radius: var(--sl-border-radius-medium); } +#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active h1 { + text-transform: none; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header { + gap: 1em; + padding-top: 5px; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { + display: none; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { + width: 40px !important; + height: 28px !important; + margin: 0; + padding: 0; + padding-top: 0.2em; + padding-right: 0.5em; + padding-left: 0.5em; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header { + padding: 0; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover:not(.egw_fw_ui_tab_header_active) { + border-top: 0; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover { + border-top: 0; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tab_close_button { + background-size: 12px 12px; + right: 0px; + top: 2px; +} diff --git a/pixelegg/css/fancy.less b/pixelegg/css/fancy.less index 240c6233b6..d5e821246f 100644 --- a/pixelegg/css/fancy.less +++ b/pixelegg/css/fancy.less @@ -94,4 +94,43 @@ div.flatpickr-calendar .shortcut-buttons-flatpickr-buttons button:last-child { // styling of legacy NM parts .nextmatch_header .header_count { border-radius: var(--sl-border-radius-medium); +} + +//tabs header styling +#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active h1 { + text-transform: none; +} + +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header{ + gap:1em; + padding-top: 5px; +} + +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { + display: none; +} + +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { + width: 40px !important; + height: 28px !important; + margin: 0; + padding: 0; + padding-top: .2em; + padding-right:.5em; + padding-left: .5em; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header{ + padding: 0; +} + +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover:not(.egw_fw_ui_tab_header_active){ + border-top:0; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover{ + border-top:0; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tab_close_button{ + background-size: 12px 12px; + right: 0px; + top: 2px } \ No newline at end of file diff --git a/pixelegg/css/pixelegg.less b/pixelegg/css/pixelegg.less index 3f4339a392..f2f033c201 100644 --- a/pixelegg/css/pixelegg.less +++ b/pixelegg/css/pixelegg.less @@ -334,7 +334,11 @@ border-top-color: @ranking-color; border-top-width: 4px !important; } -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon, +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon{ + filter: none; + width: calc(1em + 2px) !important; + height: calc(1em + 2px) !important; +} .standartTreeImage { filter: none; } diff --git a/pixelegg/inc/class.pixelegg_framework.inc.php b/pixelegg/inc/class.pixelegg_framework.inc.php index aa03dd44ff..c096eeb53e 100755 --- a/pixelegg/inc/class.pixelegg_framework.inc.php +++ b/pixelegg/inc/class.pixelegg_framework.inc.php @@ -149,11 +149,6 @@ class pixelegg_framework extends Api\Framework\Ajax --sl-font-size-medium: {$textsize}px; } et2-lavatar, et2-avatar {font-size: 12px} - #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon - { - width: {$iconSize}px !important; - height: {$iconSize}px !important; - } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a {background-position:left;background-size:{$iconSize}px} "; } diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 9b40e60395..7042480867 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -6886,7 +6886,11 @@ span.egw_tutorial_title { border-top-color: #404040; border-top-width: 4px !important; } -#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon, +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { + filter: none; + width: calc(1em + 2px) !important; + height: calc(1em + 2px) !important; +} .standartTreeImage { filter: none; }