Skip to content

Commit e645b54

Browse files
KOWX712KOWX712
committed
opt: new dialog styling
1 parent c27f44d commit e645b54

6 files changed

Lines changed: 54 additions & 45 deletions

File tree

‎webui/index.html‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,36 +29,33 @@
2929
</div>
3030
<md-menu-item id="select-denylist" data-i18n="menu_select_denylist"></md-menu-item>
3131
<md-menu-item id="deselect-unnecessary" data-i18n="menu_deselect_unnecessary"></md-menu-item>
32-
<md-menu-item id="add-system-app" data-i18n="menu_add_system_app"></md-menu-item>
33-
<md-divider role="separator" tabindex="-1"></md-divider>
32+
<md-menu-item id="add-system-app" data-i18n="menu_add_system_app" class="last"></md-menu-item>
3433
<md-sub-menu hover-close-delay="0">
35-
<md-menu-item slot="item" class="sub-menu-entry">
34+
<md-menu-item slot="item" class="sub-menu-entry first">
3635
<div slot="headline" data-i18n="menu_keybox"></div>
3736
<md-icon slot="start" class="ltr-icon">chevron_left</md-icon>
3837
<md-icon slot="start" class="rtl-icon">chevron_right</md-icon>
3938
</md-menu-item>
40-
<md-menu positioning="popover" slot="menu">
41-
<md-menu-item id="aospkb" data-i18n="menu_keybox_aosp"></md-menu-item>
39+
<md-menu positioning="popover" slot="menu" x-offset="2">
40+
<md-menu-item id="aospkb" data-i18n="menu_keybox_aosp" class="first"></md-menu-item>
4241
<md-menu-item id="devicekb" data-i18n="menu_keybox_unknown"></md-menu-item>
43-
<md-menu-item id="localkb" data-i18n="menu_keybox_local"></md-menu-item>
44-
<md-divider id="customkb-divider" role="separator" tabindex="-1"></md-divider>
45-
<md-menu-item id="customkb" class="icon-item">
42+
<md-menu-item id="localkb" data-i18n="menu_keybox_local" class="last"></md-menu-item>
43+
<md-menu-item id="customkb" class="icon-item last">
4644
<div><md-filled-tonal-icon-button><md-icon>add</md-icon></md-filled-tonal-icon-button></div>
4745
</md-menu-item>
4846
</md-menu>
4947
</md-sub-menu>
5048
<md-menu-item id="boot-hash" data-i18n="menu_set_verified_boot_hash"></md-menu-item>
51-
<md-menu-item id="security-patch" data-i18n="menu_set_security_patch"></md-menu-item>
52-
<md-divider role="separator" tabindex="-1"></md-divider>
53-
<md-menu-item id="help" data-i18n="menu_help"></md-menu-item>
49+
<md-menu-item id="security-patch" data-i18n="menu_set_security_patch" class="last"></md-menu-item>
50+
<md-menu-item id="help" data-i18n="menu_help" class="first"></md-menu-item>
5451
<md-sub-menu hover-close-delay="0">
5552
<md-menu-item slot="item" class="sub-menu-entry">
5653
<div slot="headline" data-i18n="menu_language"></div>
5754
<md-icon slot="end">language</md-icon>
5855
</md-menu-item>
59-
<md-menu positioning="popover" slot="menu" id="language-menu"></md-menu>
56+
<md-menu positioning="popover" slot="menu" id="language-menu" x-offset="2"></md-menu>
6057
</md-sub-menu>
61-
<md-menu-item id="about" data-i18n="menu_about"></md-menu-item>
58+
<md-menu-item id="about" data-i18n="menu_about" class="last"></md-menu-item>
6259
</md-menu>
6360
</div>
6461
<md-outlined-text-field class="search-input" id="search" data-i18n="search_bar_search_placeholder" placeholder="Search">
@@ -179,7 +176,7 @@
179176
<md-outlined-text-field id="boot-hash-input" type="textarea" rows="4" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash_input_placeholder" oninput="window.trimInput(this)"></md-outlined-text-field>
180177
</div>
181178
<div slot="actions">
182-
<md-text-button id="cancel-boot-hash" data-i18n="functional_button_cancel"></md-text-button>
179+
<md-outlined-button id="cancel-boot-hash" data-i18n="functional_button_cancel"></md-outlined-button>
183180
<md-filled-button id="boot-hash-save-button" data-i18n="functional_button_save"></md-filled-button>
184181
</div>
185182
</md-dialog>
@@ -317,7 +314,7 @@ <h3 class="current-system-app-list" data-i18n="add_system_app_current_list"></h3
317314
<div class="current-system-app-list-content"></div>
318315
</div>
319316
<div slot="actions">
320-
<md-text-button id="cancel-add-system-app" data-i18n="functional_button_cancel"></md-text-button>
317+
<md-outlined-button id="cancel-add-system-app" data-i18n="functional_button_cancel"></md-outlined-button>
321318
<md-filled-button id="add-system-app-button" data-i18n="add_system_app_add"></md-filled-button>
322319
</div>
323320
</md-dialog>

‎webui/scripts/custom_provider.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,11 @@ function renderCustomKeyboxEntries() {
5353

5454
if (entries.length === 0) return;
5555

56-
entries.forEach(entry => {
56+
entries.forEach((entry, index) => {
5757
const menuItem = document.createElement('md-menu-item');
5858
menuItem.className = 'customkb-entry';
59-
menuItem.innerHTML = `<div slot="headline">${entry.name}</div>`;
59+
if (index === 0) menuItem.classList.add('first');
60+
menuItem.textContent = entry.name;
6061
customkb.parentNode.insertBefore(menuItem, customkb);
6162
menuItem.onclick = () => fetchCustomKeybox(entry.link, entry.script);
6263
menuItem.oncontextmenu = (e) => {

‎webui/scripts/language.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ async function generateLanguageMenu() {
177177

178178
// Add System Default option
179179
const defaultButton = document.createElement('md-menu-item');
180-
defaultButton.className = 'top-inset';
180+
defaultButton.className = 'first top-inset';
181181
defaultButton.setAttribute('data-i18n', 'system_default');
182182
defaultButton.onclick = () => setLanguage('default');
183183
languageMenu.appendChild(defaultButton);
@@ -197,7 +197,7 @@ async function generateLanguageMenu() {
197197

198198
// Add translation guide button
199199
const moreBtn = document.createElement('md-menu-item');
200-
moreBtn.className = 'bottom-inset';
200+
moreBtn.className = 'last';
201201
moreBtn.textContent = translations.more_language;
202202
moreBtn.onclick = async () => {
203203
const guideDialog = document.getElementById('guide-dialog');

‎webui/styles/boot_hash.css‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎webui/styles/global.css‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import './theme.css';
22
@import './about.css';
33
@import './applist.css';
4-
@import './boot_hash.css';
54
@import './file_selector.css';
65
@import './header.css';
76
@import './security_patch.css';
@@ -41,14 +40,6 @@ body {
4140
transform: translateY(200%);
4241
}
4342

44-
.top-inset {
45-
padding-top: var(--top-inset);
46-
}
47-
48-
.bottom-inset {
49-
padding-bottom: var(--bottom-inset);
50-
}
51-
5243
.dialog-wrapper {
5344
z-index: 5;
5445
position: relative;
@@ -143,10 +134,18 @@ body {
143134
margin-top: 16px;
144135
}
145136

137+
md-outlined-text-field {
138+
--md-outlined-text-field-container-shape: 16px;
139+
}
140+
146141
.spacer {
147142
flex: 1;
148143
}
149144

150145
.hidden {
151146
display: none;
152147
}
148+
149+
.top-inset {
150+
margin-top: var(--top-inset);
151+
}

‎webui/styles/header.css‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -96,19 +96,42 @@
9696
}
9797

9898
.menu md-menu {
99-
--md-sys-shape-corner-extra-small: 24px;
99+
--md-menu-container-color: transparent;
100+
--md-menu-item-container-color: var(--md-sys-color-surface-container-highest);
101+
--md-menu-top-space: 0;
102+
--md-menu-bottom-space: var(--bottom-inset);
103+
--md-menu-container-elevation: 0;
100104
max-width: 60vw;
101105
}
102106

103107
.menu md-sub-menu md-menu {
104-
--md-sys-shape-corner-extra-small: 8px;
105108
max-width: 40vw;
106109
}
107110

108111
.menu md-menu-item {
109112
width: max-content;
113+
border-radius: 4px;
110114
min-width: 100%;
111115
max-width: 100%;
116+
transition: border-radius 0.2s ease;
117+
}
118+
119+
.menu md-menu-item:not(:last-child) {
120+
margin-bottom: 2px;
121+
}
122+
123+
.menu md-menu-item.first {
124+
border-top-left-radius: 20px;
125+
border-top-right-radius: 20px;
126+
}
127+
128+
.menu md-menu-item.last {
129+
border-bottom-left-radius: 20px;
130+
border-bottom-right-radius: 20px;
131+
}
132+
133+
.menu md-menu-item:active {
134+
border-radius: 20px;
112135
}
113136

114137
.menu md-menu-item.icon-item div {
@@ -118,7 +141,10 @@
118141
}
119142

120143
.menu-item-button-container {
121-
padding: 2px 4px;
144+
background-color: var(--md-sys-color-surface-container-highest);
145+
border-radius: 20px 20px 0 0;
146+
padding: 8px 4px;
147+
margin-bottom: 2px;
122148
display: flex;
123149
justify-content: space-evenly;
124150
width: 100%;
@@ -130,10 +156,6 @@
130156
--md-icon-button-icon-color: var(--md-sys-color-on-surface);
131157
}
132158

133-
#menu-options {
134-
max-height: calc(100vh - var(--top-inset) - var(--bottom-inset) - 80px);
135-
}
136-
137159
#select-denylist,
138160
#security-patch {
139161
display: none;

0 commit comments

Comments
 (0)