extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-07 16:44:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Mobile dialog style changes

Browse Source 
- Add dialog close button back, hide the footer cancel buttons to avoid duplication
- Footer buttons with icon show only icon, label preserved for accessibility
- Footer buttons without icon show as button with label
- Footer buttons can wrap to another line
This commit is contained in:
nathan 2023-02-24 10:38:35 -07:00
parent 0abbd65d35
commit ae01e30d55
2 changed files with 78 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
pixelegg/mobile/fw_mobile.css
View File

@ -8326,11 +8326,13 @@ table.egwGridView_grid img.et2_appicon {
--width: 100%;
}
body et2-dialog::part(panel) {
/* make dialog full screen */
max-width: 100%;
max-height: 100%;
height: 100%;
}
body et2-dialog::part(header) {
/* Set header size, color & background */
color: white;
background: #0c5da5;
height: 5ex;
@ -8339,25 +8341,36 @@ table.egwGridView_grid img.et2_appicon {
border-radius: 0;
}
body et2-dialog::part(close-button) {
display: none;
/* Move dialog close button up, change color */
position: absolute;
top: 0px;
right: 0px;
-webkit-filter: brightness(0) invert(1) !important;
filter: brightness(0) invert(1) !important;
background-color: transparent !important;
background-size: 24px 24px !important;
border: none;
}
body et2-dialog::part(footer) {
/* Move footer to top, set background color */
order: -1;
box-shadow: 0px 4px 5px 2px silver;
width: 100%;
margin-top: 0px;
background: #0c5da5;
/* Allow buttons to wrap */
flex-wrap: wrap;
}
body et2-dialog et2-button[slot="footer"] {
padding-left: 150%;
body et2-dialog et2-button[slot="footer"]:has(et2-image) {
/* Fixed size on footer buttons */
width: 50px;
height: 50px;
}
body et2-dialog et2-button[slot="footer"] et2-image {
/* Make icons white, set size */
height: 24px;
width: 24px;
max-width: initial;
position: absolute;
left: 0;
-webkit-filter: brightness(0) invert(1) !important;
filter: brightness(0) invert(1) !important;
@ -8368,6 +8381,27 @@ table.egwGridView_grid img.et2_appicon {
body et2-dialog et2-button[slot="footer"] et2-image span {
padding-left: 20px;
}
body et2-dialog et2-button[slot="footer"][id*="cancel"] {
/* Hide cancel button, it will look like a duplicated bug so close to dialog close button */
display: none;
}
body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base),
body et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover),
body et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover) {
/* Have an icon - Hide button style, just show image */
border: none;
background: transparent;
justify-content: center;
}
body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label) {
/* Visually hide labels but leave them there for accessibility */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
flex: 0 1 auto;
}
body et2-button.plus_button {
position: fixed !important;
right: 15px;

46
pixelegg/mobile/fw_mobile.less
View File

@ -590,12 +590,14 @@
}
et2-dialog::part(panel) {
/* make dialog full screen */
max-width: 100%;
max-height: 100%;
height: 100%;
}
et2-dialog::part(header) {
/* Set header size, color & background */
color: white;
background: #0c5da5;
height: 5ex;
@ -605,28 +607,38 @@
}
et2-dialog::part(close-button) {
display: none;
/* Move dialog close button up, change color */
position: absolute;
top: 0px;
right: 0px;
.white-svg
}
et2-dialog::part(footer) {
/* Move footer to top, set background color */
order: -1;
box-shadow: 0px 4px 5px 2px silver;
width: 100%;
margin-top: 0px;
background: #0c5da5;
/* Allow buttons to wrap */
flex-wrap: wrap;
}
et2-dialog et2-button[slot="footer"]:has(et2-image) {
/* Fixed size on footer buttons */
width: 50px;
height: 50px;
}
et2-dialog et2-button[slot="footer"] {
padding-left: 150%;
width: 50px;
height: 50px;
et2-image {
/* Make icons white, set size */
height: 24px;
width: 24px;
max-width: initial;
position: absolute;
left: 0;
.white-svg;
@ -636,6 +648,28 @@
}
}
et2-dialog et2-button[slot="footer"][id*="cancel"] {
/* Hide cancel button, it will look like a duplicated bug so close to dialog close button */
display: none;
}
et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base), et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover), et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover) {
/* Have an icon - Hide button style, just show image */
border: none;
background: transparent;
justify-content: center;
}
et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label) {
/* Visually hide labels but leave them there for accessibility */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
flex: 0 1 auto;
}
et2-button.plus_button {
position: fixed !important;
right: 15px;