extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-05 09:42:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

WIP of better UI

Browse Source
This commit is contained in:
Hadi Nategh 2022-08-30 07:50:43 +02:00
parent d521d2aa24
commit e1a87caf6c
11 changed files with 39 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/Et2Button/ButtonMixin.ts
View File

@ -83,7 +83,7 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
} }
/* Make hover border match other widgets (select) */ /* Make hover border match other widgets (select) */
.button--standard.button--default:hover:not(.button--disabled) { .button--standard.button--default:hover:not(.button--disabled) {
background-color: var(--sl-input-background-color-hover); background-color: var(--sl-color-gray-100);
border-color: var(--sl-input-border-color-hover); border-color: var(--sl-input-border-color-hover);
color: var(--sl-input-color-hover); color: var(--sl-input-color-hover);
} }

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

@ -57,7 +57,7 @@ export class Et2Favorites extends Et2DropdownButton implements et2_INextmatchHea
et2-image { et2-image {
height: 2ex; height: 2ex;
padding: 0px; padding: 0px;
margin-top: -5px; margin-top: -13px;
vertical-align: middle; vertical-align: middle;
} }
et2-image[src="trash"] { et2-image[src="trash"] {

4
api/js/etemplate/Layout/Et2Tabs/Et2Tab.ts
View File

@ -13,7 +13,9 @@ export class Et2Tab extends Et2Widget(SlTab)
css` css`
.tab { .tab {
font-size: var(--sl-size-x-small); font-size: var(--sl-size-x-small);
} }
.tab.tab--active:not(.tab--disabled) {color:var(--sl-color-gray-800)}
.tab:hover:not(.tab--disabled) {color:var(--sl-color-gray-800)}
` `
]; ];
} }

6
api/js/etemplate/Styles/shoelace.ts
View File

@ -39,10 +39,10 @@ export default [sl_css, css`
:root, :root,
:host, :host,
.sl-theme-light { .sl-theme-light {
--sl-font-size-medium: 11px; --sl-font-size-medium: 12px;
--sl-input-height-small: 18px; --sl-input-height-small: 24px;
--sl-input-height-medium: 24px; --sl-input-height-medium: 32px;
--sl-spacing-small: 0.1rem; --sl-spacing-small: 0.1rem;
--sl-spacing-medium: 0.5rem; --sl-spacing-medium: 0.5rem;

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

@ -2194,7 +2194,6 @@ lion-validation-feedback[type] {
.nextmatch_header .header_count { .nextmatch_header .header_count {
padding: 0px 10px; padding: 0px 10px;
height: 22px;
border: 1px solid rgb(212, 212, 216); /* --sl-input-border-color */ border: 1px solid rgb(212, 212, 216); /* --sl-input-border-color */
text-align: center; text-align: center;
border-radius: 3px; border-radius: 3px;
@ -2205,7 +2204,7 @@ lion-validation-feedback[type] {
.nextmatch_header .header_count span { .nextmatch_header .header_count span {
position: relative; position: relative;
top: 4px; top: 8px;
font-size: 11px; font-size: 11px;
color: gray; color: gray;
} }
@ -2536,7 +2535,6 @@ div.et2_progress {
background-color: white; background-color: white;
width: 30px; width: 30px;
padding: 1px; padding: 1px;
margin: 2px;
text-align: left; text-align: left;
} }
@ -2810,7 +2808,7 @@ div.et2_toolbar.ui-widget-header {
.et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short { .et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short {
background-image: url(images/dots.svg); background-image: url(images/dots.svg);
background-size: 16px; background-size: 16px;
height: 24px; height: 32px;
width: 20px; width: 20px;
margin-top: 0px; margin-top: 0px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -2821,7 +2819,7 @@ div.et2_toolbar.ui-widget-header {
.et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short { .et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short {
padding: 0px !important; padding: 0px !important;
width: 40px; width: 40px;
height: 24px; height: 32px;
margin-top: 0px; margin-top: 0px;
} }
@ -2889,7 +2887,7 @@ div.et2_toolbar.ui-widget-header {
.et2_toolbar .et2_toolbar_actionlist et2-button, .et2_toolbar .et2_toolbar_actionlist et2-button,
.et2_toolbar .et2_toolbar_actionlist et2-switch { .et2_toolbar .et2_toolbar_actionlist et2-switch {
margin-right: 1ex; margin-right: 1ex;
min-width: 24px; min-width: 32px;
} }
.et2_toolbar .ui-toolbar-menulist > *:hover{ .et2_toolbar .ui-toolbar-menulist > *:hover{
outline: none; outline: none;
@ -2935,8 +2933,6 @@ et2-button.transparent-button::part(container) {
.nextmatch_header_row button, .nextmatch_header_row button,
.et2_toolbar div.et2_progress, .et2_toolbar div.et2_progress,
.nextmatch_header_row div.et2_progress { .nextmatch_header_row div.et2_progress {
margin: 1px 4px 1px 0;
height: 24px;
border-radius: 3px; border-radius: 3px;
background-color: #fafafa; background-color: #fafafa;
border: 1px solid silver; border: 1px solid silver;
@ -2944,13 +2940,10 @@ et2-button.transparent-button::part(container) {
.et2_toolbar div.et2_progress, .nextmatch_header_row div.et2_progress { .et2_toolbar div.et2_progress, .nextmatch_header_row div.et2_progress {
padding: 0; padding: 0;
height: 22px;
} }
.et2_toolbar .et2_progress > div, .nextmatch_header_row .et2_progress > div { .et2_toolbar .et2_progress > div, .nextmatch_header_row .et2_progress > div {
margin: 2px;
border-radius: 3px; border-radius: 3px;
height: 18px;
} }
/** /**
@ -3198,7 +3191,6 @@ div.et2_toolbar_more h.ui-accordion-header {
.et2_toolbar_actionlist { .et2_toolbar_actionlist {
float: left; float: left;
height: 24px;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
} }
@ -3741,9 +3733,10 @@ td.avatar {
/*Dialog headers styling*/ /*Dialog headers styling*/
.popupMainDiv table.et2_grid > tbody > tr > td,
tr.dialogHeader td, tr.dialogHeader2 td, tr.dialogHeader3 td, tr.dialogHeader4 td, tr.dialogHeader td, tr.dialogHeader2 td, tr.dialogHeader3 td, tr.dialogHeader4 td,
tr.dialogOperators td, .dialogFooterToolbar { tr.dialogOperators td, .dialogFooterToolbar {
padding: 5px 0 5px 3px; padding: 5px 0 5px 0px;
vertical-align: middle; vertical-align: middle;
} }
.dialogFooterToolbar td { .dialogFooterToolbar td {

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

@ -214,7 +214,7 @@ div.calendar_conflicts {
/* Toolbar */ /* Toolbar */
#calendar-toolbar { #calendar-toolbar {
height: 30px; height: 3.6em;
margin-top: 0.3em; margin-top: 0.3em;
} }
#calendar-toolbar > div { #calendar-toolbar > div {
@ -1566,7 +1566,6 @@ img.calendar_print_button, img.calendar_print_appicon {
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: var(--height); height: var(--height);
display: inline-flex; display: inline-flex;
width: var(--width);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
@ -1576,7 +1575,6 @@ img.calendar_print_button, img.calendar_print_appicon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7); filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px;
} }
et2-switch#calendar-toolbar_toolbar-weekend { et2-switch#calendar-toolbar_toolbar-weekend {
background-image: none !important; background-image: none !important;
@ -1597,7 +1595,7 @@ et2-switch#calendar-toolbar_toolbar-weekend {
visibility: hidden; visibility: hidden;
} }
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: 24px; height: 32px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border: 1px solid silver; border: 1px solid silver;

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

@ -226,7 +226,8 @@ div.calendar_conflicts {
} }
/* Toolbar */ /* Toolbar */
#calendar-toolbar { #calendar-toolbar {
height: 30px; height: 3.6em;
margin-top: 0.3em;
} }
#calendar-toolbar > div { #calendar-toolbar > div {
display: flex; display: flex;
@ -1533,7 +1534,6 @@ img.calendar_print_appicon {
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: var(--height); height: var(--height);
display: inline-flex; display: inline-flex;
width: var(--width);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"], #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
@ -1542,14 +1542,15 @@ img.calendar_print_appicon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7); filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px; }
et2-switch#calendar-toolbar_toolbar-weekend {
background-image: none !important;
} }
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked], #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked], #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] { #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] {
filter: none; filter: none;
box-shadow: inset 1px 1px 1px 1px gray !important; box-shadow: inset 1px 1px 1px 1px gray !important;
width: var(--width);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label, #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label,
@ -1561,7 +1562,7 @@ img.calendar_print_appicon {
visibility: hidden; visibility: hidden;
} }
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: 24px; height: 32px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border: 1px solid silver; border: 1px solid silver;
@ -1669,6 +1670,10 @@ img.calendar_print_appicon {
#calendar-list_nm .nextmatch_header .search { #calendar-list_nm .nextmatch_header .search {
display: none; display: none;
} }
#calendar-edit_description {
height: 70%;
margin-bottom: 2em;
}
/*generell*/ /*generell*/
.egw_fw_content_browser_iframe img[src$="svg"] { .egw_fw_content_browser_iframe img[src$="svg"] {
background-color: #828282 !important; background-color: #828282 !important;
@ -2845,7 +2850,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 21px; height: 28px;
top: 0; top: 0;
filter: invert(1); filter: invert(1);
} }
@ -2853,7 +2858,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 21px; height: 28px;
top: 0; top: 0;
} }
#calendar-toolbar_toolbar et2-switch .label span { #calendar-toolbar_toolbar et2-switch .label span {
@ -3001,3 +3006,4 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
color: #707070; color: #707070;
} }
} }
/*# sourceMappingURL=app.css.map */

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

@ -214,7 +214,7 @@ div.calendar_conflicts {
} }
/* Toolbar */ /* Toolbar */
#calendar-toolbar { #calendar-toolbar {
height: 30px; height: 3.6em;
margin-top: 0.3em; margin-top: 0.3em;
} }
#calendar-toolbar > div { #calendar-toolbar > div {
@ -1522,7 +1522,6 @@ img.calendar_print_appicon {
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: var(--height); height: var(--height);
display: inline-flex; display: inline-flex;
width: var(--width);
} }
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch, #calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"], #toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
@ -1531,7 +1530,6 @@ img.calendar_print_appicon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
filter: grayscale(1) contrast(0.9999) opacity(0.7); filter: grayscale(1) contrast(0.9999) opacity(0.7);
width: 24px;
} }
et2-switch#calendar-toolbar_toolbar-weekend { et2-switch#calendar-toolbar_toolbar-weekend {
background-image: none !important; background-image: none !important;
@ -1552,7 +1550,7 @@ et2-switch#calendar-toolbar_toolbar-weekend {
visibility: hidden; visibility: hidden;
} }
#calendar-toolbar_toolbar et2-switch { #calendar-toolbar_toolbar et2-switch {
height: 24px; height: 32px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border: 1px solid silver; border: 1px solid silver;
@ -2840,7 +2838,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 21px; height: 28px;
top: 0; top: 0;
filter: invert(1); filter: invert(1);
} }
@ -2848,7 +2846,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 21px; height: 28px;
top: 0; top: 0;
} }
#calendar-toolbar_toolbar et2-switch .label span { #calendar-toolbar_toolbar et2-switch .label span {

4
calendar/templates/pixelegg/app.less
View File

@ -1221,7 +1221,7 @@ div#calendar-container {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 21px; height: 28px;
top:0; top:0;
filter: invert(1); filter: invert(1);
} }
@ -1229,7 +1229,7 @@ div#calendar-container {
background-size: 18px 18px; background-size: 18px 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 21px; height: 28px;
top:0; top:0;
} }
span {color:transparent !important;} span {color:transparent !important;}

4
pixelegg/css/pixelegg.css
View File

@ -3288,7 +3288,7 @@ table.dialog-main-view {
/********** Header Part ********************/ /********** Header Part ********************/
.dialogHeader { .dialogHeader {
color: #000000; color: #000000;
border-bottom: 3px solid #696969; border-bottom: 2px solid #696969;
} }
.dialogHeader input[type="radio"], .dialogHeader input[type="radio"],
.dialogHeader input.et2_radiobox { .dialogHeader input.et2_radiobox {
@ -3461,7 +3461,7 @@ div#etemplate\.tab_widget {
/*##############################################*/ /*##############################################*/
.dialogFooterToolbar { .dialogFooterToolbar {
background-color: transparent; background-color: transparent;
border-top: 3px solid #696969; border-top: 2px solid #696969;
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/ /*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
} }
.dialogFooterToolbar td { .dialogFooterToolbar td {

4
pixelegg/less/layout_dialog.less
View File

@ -152,7 +152,7 @@ table.dialog-main-view {width: 100%;}
/********** Header Part ********************/ /********** Header Part ********************/
.dialogHeader { .dialogHeader {
.color_100_gray; .color_100_gray;
border-bottom: 3px solid @gray_60; border-bottom: 2px solid @gray_60;
// radio button // radio button
input[type="radio"], input[type="radio"],
@ -335,7 +335,7 @@ div#etemplate\.tab_widget {
.dialogFooterToolbar{ .dialogFooterToolbar{
background-color: transparent; background-color: transparent;
border-top: 3px solid #696969; border-top: 2px solid #696969;
td { td {
padding: 5px 5px 0px 0px; padding: 5px 5px 0px 0px;
} }