Mobile dialog style changes

- 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

View File

@ -8326,11 +8326,13 @@ table.egwGridView_grid img.et2_appicon {
--width: 100%; --width: 100%;
} }
body et2-dialog::part(panel) { body et2-dialog::part(panel) {
/* make dialog full screen */
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
height: 100%; height: 100%;
} }
body et2-dialog::part(header) { body et2-dialog::part(header) {
/* Set header size, color & background */
color: white; color: white;
background: #0c5da5; background: #0c5da5;
height: 5ex; height: 5ex;
@ -8339,25 +8341,36 @@ table.egwGridView_grid img.et2_appicon {
border-radius: 0; border-radius: 0;
} }
body et2-dialog::part(close-button) { 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) { body et2-dialog::part(footer) {
/* Move footer to top, set background color */
order: -1; order: -1;
box-shadow: 0px 4px 5px 2px silver; box-shadow: 0px 4px 5px 2px silver;
width: 100%; width: 100%;
margin-top: 0px; margin-top: 0px;
background: #0c5da5; background: #0c5da5;
/* Allow buttons to wrap */
flex-wrap: wrap;
} }
body et2-dialog et2-button[slot="footer"] { body et2-dialog et2-button[slot="footer"]:has(et2-image) {
padding-left: 150%; /* Fixed size on footer buttons */
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
body et2-dialog et2-button[slot="footer"] et2-image { body et2-dialog et2-button[slot="footer"] et2-image {
/* Make icons white, set size */
height: 24px; height: 24px;
width: 24px; width: 24px;
max-width: initial; max-width: initial;
position: absolute;
left: 0; left: 0;
-webkit-filter: brightness(0) invert(1) !important; -webkit-filter: brightness(0) invert(1) !important;
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 { body et2-dialog et2-button[slot="footer"] et2-image span {
padding-left: 20px; 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 { body et2-button.plus_button {
position: fixed !important; position: fixed !important;
right: 15px; right: 15px;

View File

@ -590,12 +590,14 @@
} }
et2-dialog::part(panel) { et2-dialog::part(panel) {
/* make dialog full screen */
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
height: 100%; height: 100%;
} }
et2-dialog::part(header) { et2-dialog::part(header) {
/* Set header size, color & background */
color: white; color: white;
background: #0c5da5; background: #0c5da5;
height: 5ex; height: 5ex;
@ -605,28 +607,38 @@
} }
et2-dialog::part(close-button) { 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) { et2-dialog::part(footer) {
/* Move footer to top, set background color */
order: -1; order: -1;
box-shadow: 0px 4px 5px 2px silver; box-shadow: 0px 4px 5px 2px silver;
width: 100%; width: 100%;
margin-top: 0px; margin-top: 0px;
background: #0c5da5; 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"] { et2-dialog et2-button[slot="footer"] {
padding-left: 150%;
width: 50px;
height: 50px;
et2-image { et2-image {
/* Make icons white, set size */
height: 24px; height: 24px;
width: 24px; width: 24px;
max-width: initial; max-width: initial;
position: absolute;
left: 0; left: 0;
.white-svg; .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 { et2-button.plus_button {
position: fixed !important; position: fixed !important;
right: 15px; right: 15px;