extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-21 23:43:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Change toolbar style

Browse Source 
- buttons normally have no border, only on hover
- border below toolbar
This commit is contained in:
nathan 2024-10-30 09:40:20 -06:00
parent 445df7dcad
commit 968af0b1d2
13 changed files with 46 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/et2_widget_toolbar.ts
View File

@ -108,7 +108,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_toolbar._attributes, _child || {}));
this.div = jQuery(document.createElement('div'))
.addClass('et2_toolbar ui-widget-header ui-corner-all');
.addClass('et2_toolbar');
// Set proper id and dom_id for the widget
this.set_id(this.id);

29
api/templates/default/etemplate2.css
View File

@ -2601,8 +2601,10 @@ table.egwGridView_outer thead tr th.noResize:hover {
.et2_toolbar {
border: none;
background: none;
margin: 0 !important;
padding: 0 !important;
border-bottom-width: var(--sl-panel-border-width);
border-color: var(--sl-panel-border-color);
border-bottom-style: solid;
}
.et2_toolbar *[class ^="et2_toolbar_draggable"] {cursor: pointer !important;}
@ -2618,15 +2620,29 @@ table.egwGridView_outer thead tr th.noResize:hover {
top: 100%;
}
.et2_toolbar et2-switch-icon {
.et2_toolbar et2-button:not(:hover)::part(base) {
border-color: transparent;
}
.et2_toolbar *:not(.ui-toolbar-menulist) > et2-button:hover::part(base) {
background-color: var(--sl-input-background-color);
}
.et2_toolbar *:not(.ui-toolbar-menulist) > et2-switch-icon {
font-size: 20px;
border-radius: var(--sl-border-radius-medium);
border-color: var(--sl-input-border-color);
border-color: transparent;
border-width: var(--sl-input-border-width);
border-style: solid;
padding: 0px var(--sl-spacing-medium);
}
.et2_toolbar *:not(.ui-toolbar-menulist) > et2-switch:hover {
border-color: var(--sl-input-border-color-hover);
border-width: var(--sl-input-border-width);
border-style: solid;
}
.et2_toolbar et2-switch-icon::part(form-control-label) {
position: absolute;
top: 100%;
@ -2637,8 +2653,7 @@ table.egwGridView_outer thead tr th.noResize:hover {
top: calc(-0.3 * var(--sl-spacing-medium));
}
et2-switch-icon:hover:not([disabled]), et2-switch-icon:hover:not([disabled])::part(control) {
background-color: var(--sl-color-gray-150);
et2-switch-icon:hover:not([disabled]) {
border-color: var(--sl-input-border-color-hover);
color: var(--sl-input-color-hover);
}
@ -2733,7 +2748,7 @@ div.et2_toolbar.ui-widget-header {
--et2-button-image-padding-left: 0px;
}
.et2_toolbar et2-button::part(base) {
.et2_toolbar *:not(.ui-toolbar-menulist) > et2-button::part(base) {
padding-inline-start: 0px;
justify-content: center;
}

5
calendar/templates/default/app.css
View File

@ -125,14 +125,14 @@
/* Toolbar */
#calendar-toolbar {
height: 3.6em;
margin-top: 0.3em;
height: auto;
}
#calendar-toolbar > div {
display: flex;
}
#calendar-toolbar .et2_toolbar {
background: inherit;
border:none;
}
#calendar-toolbar .egw_fw_ui_app_header_container {
border: none;
@ -1532,7 +1532,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {width: 100%; height: 1
#calendar-toolbar_toolbar et2-switch {
display: inline-block;
vertical-align: top;
border: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium, 3px);
}
.ui-toolbar-menulist et2-switch,

5
calendar/templates/mobile/app.css
View File

@ -138,14 +138,14 @@
}
/* Toolbar */
#calendar-toolbar {
height: 3.6em;
margin-top: 0.3em;
height: auto;
}
#calendar-toolbar > div {
display: flex;
}
#calendar-toolbar .et2_toolbar {
background: inherit;
border: none;
}
#calendar-toolbar .egw_fw_ui_app_header_container {
border: none;
@ -1509,7 +1509,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
#calendar-toolbar_toolbar et2-switch {
display: inline-block;
vertical-align: top;
border: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium, 3px);
}
.ui-toolbar-menulist et2-switch,

5
calendar/templates/pixelegg/app.css
View File

@ -126,14 +126,14 @@
}
/* Toolbar */
#calendar-toolbar {
height: 3.6em;
margin-top: 0.3em;
height: auto;
}
#calendar-toolbar > div {
display: flex;
}
#calendar-toolbar .et2_toolbar {
background: inherit;
border: none;
}
#calendar-toolbar .egw_fw_ui_app_header_container {
border: none;
@ -1497,7 +1497,6 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
#calendar-toolbar_toolbar et2-switch {
display: inline-block;
vertical-align: top;
border: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium, 3px);
}
.ui-toolbar-menulist et2-switch,

2
mail/templates/default/app.css
View File

@ -477,7 +477,6 @@ et2-details.details {width: 100%}
}
#mail-compose_composeToolbar {
padding: 0px !important;
border: none;
}
#mail-compose_composeToolbar > button {
padding: .2em .4em;
@ -516,7 +515,6 @@ et2-details.details {width: 100%}
top: 0;
}
#mail-index_toolbar {
padding: 0px;
height: 35px;
}
#mail-index_toolbar > button > span {

8
pixelegg/css/fancy.css
View File

@ -1042,8 +1042,6 @@
*/
.et2_toolbar {
background: none;
margin: 0 !important;
padding: 0 !important;
}
.et2_toolbar-dropdown button {
/* height: 100% !important;
@ -7190,7 +7188,7 @@ img.et2_button_icon[src*="svg"]:hover {
:host et2-tabbox::part(body),
.sl-theme-light et2-tabbox::part(body),
.sl-theme-dark et2-tabbox::part(body) {
animation: detect-scroll 1s linear;
animation: detect-scroll linear;
animation-timeline: scroll(self);
border: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium);
@ -7231,6 +7229,10 @@ img.et2_button_icon[src*="svg"]:hover {
.et2_required:not(.hasValue) {
background-color: initial;
}
.et2_toolbar {
padding: 0;
border-bottom: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
}
div.flatpickr-calendar {
border-radius: var(--sl-border-radius-medium);
}

5
pixelegg/css/fancy.less
View File

@ -71,6 +71,11 @@
background-color: initial;
}
.et2_toolbar {
padding: 0;
border-bottom: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
}
//rounded flatpickr
div.flatpickr-calendar {
border-radius: var(--sl-border-radius-medium);

2
pixelegg/css/mobile.css
View File

@ -1045,8 +1045,6 @@
*/
.et2_toolbar {
background: none;
margin: 0 !important;
padding: 0 !important;
}
.et2_toolbar-dropdown button {
/* height: 100% !important;

5
pixelegg/css/monochrome.css
View File

@ -1024,8 +1024,6 @@
*/
.et2_toolbar {
background: none;
margin: 0 !important;
padding: 0 !important;
}
.et2_toolbar-dropdown button {
/* height: 100% !important;
@ -1321,9 +1319,6 @@ option:checked {
.ui-widget-header .ui-state-error-text {
color: #FF0000;
}
.drop-hover {
background-color: #FFDD73;
}
.ui-icon-close {
background-image: url("../../node_modules/bootstrap-icons/icons/x-square.svg");
background-repeat: no-repeat;

11
pixelegg/css/pixelegg.css
View File

@ -1035,8 +1035,6 @@
*/
.et2_toolbar {
background: none;
margin: 0 !important;
padding: 0 !important;
}
.et2_toolbar-dropdown button {
/* height: 100% !important;
@ -6790,6 +6788,7 @@ table.egwGridView_grid img.et2_appicon {
--sl-focus-ring-width: 2px;
--sl-color-gray-150: hsl(240, 4.9%, 92.5%);
--track-width: 3px;
--et2-favorites-left: 0.4em;
}
.bi::before,
[class^="bi-"]::before,
@ -7068,7 +7067,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;
}
@ -7135,7 +7138,7 @@ img.et2_button_icon[src*="svg"]:hover {
::-ms-input-placeholder {
color: #666666;
}
.et2-toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
justify-content: center;
--et2-button-image-padding-left: 0;
padding-inline-start: 0;

2
pixelegg/less/etemplate2.less
View File

@ -880,8 +880,6 @@ textarea.description {
*/
.et2_toolbar {
background: none;
margin: 0 !important;
padding: 0 !important;
}
.et2_toolbar-dropdown {

2
pixelegg/mobile/fw_mobile.css
View File

@ -1055,8 +1055,6 @@
*/
.et2_toolbar {
background: none;
margin: 0 !important;
padding: 0 !important;
}
.et2_toolbar-dropdown button {
/* height: 100% !important;