Skip to content

Commit c3140a7

Browse files
ThisIs-DeveloperThisIs-Developer
committed
style(ui): refine settings menu icons
1 parent c7d3393 commit c3140a7

7 files changed

Lines changed: 39 additions & 14 deletions

File tree

‎assets/lucide-icons.css‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎desktop-app/resources/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
108108
<button class="settings-menu-item app-menu-item dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Switch language">
109109
<i class="lucide lucide-languages" aria-hidden="true"></i><span class="app-menu-copy"><span id="current-lang-label" class="app-menu-label">English</span><span class="app-menu-description">Application language</span></span>
110110
</button>
111-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
111+
<ul class="dropdown-menu dropdown-menu-end app-command-menu settings-language-menu" aria-labelledby="languageDropdown">
112112
<li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">English</a></li>
113113
<li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">简体中文</a></li>
114114
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">日本語</a></li>
@@ -127,11 +127,11 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
127127
</div>
128128
<div class="settings-menu-divider" role="separator"></div>
129129
<button id="private-mode-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle private mode">
130-
<i class="lucide lucide-venetian-mask" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch" aria-hidden="true"><span></span></span>
130+
<i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch" aria-hidden="true"><span></span></span>
131131
</button>
132132
<div class="settings-menu-divider" role="separator"></div>
133133
<button class="settings-menu-item app-menu-item settings-menu-reset" id="tab-reset-btn" type="button" title="Reset all files" aria-label="Reset all files">
134-
<i class="lucide lucide-undo-2" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Reset workspace</span><span class="app-menu-description">Remove all files and review data</span></span>
134+
<i class="lucide lucide-power" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Reset workspace</span><span class="app-menu-description">Remove all files and review data</span></span>
135135
</button>
136136
</div>
137137
</div>
@@ -252,7 +252,7 @@ <h2 id="mobile-menu-title" class="h5 m-0">Menu</h2>
252252
<button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
253253
<i class="lucide lucide-languages" aria-hidden="true"></i> Language: <span id="mobile-current-lang-label">English</span>
254254
</button>
255-
<ul class="dropdown-menu w-100" aria-labelledby="mobileLanguageDropdown">
255+
<ul class="dropdown-menu app-command-menu settings-language-menu mobile-language-menu w-100" aria-labelledby="mobileLanguageDropdown">
256256
<li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">English</a></li>
257257
<li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">简体中文</a></li>
258258
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">日本語</a></li>
@@ -273,10 +273,10 @@ <h2 id="mobile-menu-title" class="h5 m-0">Menu</h2>
273273
<i class="lucide lucide-moon" aria-hidden="true"></i> Appearance
274274
</button>
275275
<button id="mobile-private-mode-toggle" class="mobile-menu-item mobile-settings-item" type="button" aria-pressed="false" title="Toggle private mode">
276-
<span class="mobile-menu-item-label"><i class="lucide lucide-venetian-mask" aria-hidden="true"></i>Private mode</span><span id="mobile-private-mode-status" class="mobile-menu-item-status">Off</span>
276+
<span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i>Private mode</span><span id="mobile-private-mode-status" class="mobile-menu-item-status">Off</span>
277277
</button>
278278
<button id="mobile-tab-reset-btn" class="mobile-menu-item mobile-menu-reset" title="Reset workspace" aria-label="Reset workspace">
279-
<i class="lucide lucide-undo-2" aria-hidden="true"></i> Reset workspace
279+
<i class="lucide lucide-power" aria-hidden="true"></i> Reset workspace
280280
</button>
281281
</div>
282282
</section>

‎desktop-app/resources/js/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22080,7 +22080,7 @@ ${selector} .arrowheadPath {
2208022080
const tabResetBtn = document.getElementById('tab-reset-btn');
2208122081
if (tabResetBtn) updateMenuLabel(tabResetBtn, `${dict.reset} workspace`);
2208222082
const mTabResetBtn = document.getElementById('mobile-tab-reset-btn');
22083-
if (mTabResetBtn) mTabResetBtn.innerHTML = `<i class="lucide lucide-undo-2"></i> ${dict.reset} all files`;
22083+
if (mTabResetBtn) mTabResetBtn.innerHTML = `<i class="lucide lucide-power"></i> ${dict.reset} all files`;
2208422084

2208522085
// View toggle buttons title tooltips
2208622086
document.querySelectorAll('[data-view-mode="editor"]').forEach(b => b.title = dict.editor);

‎desktop-app/resources/styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1973,6 +1973,13 @@ body.document-sidebar-collapsed .document-sidebar {
19731973
overflow-y: auto;
19741974
}
19751975

1976+
.app-command-menu.settings-language-menu {
1977+
width: max-content;
1978+
min-width: 168px;
1979+
max-width: min(220px, calc(100vw - 24px));
1980+
padding: 7px;
1981+
}
1982+
19761983
.settings-menu-divider {
19771984
height: 1px;
19781985
margin: 6px 0;
@@ -2936,6 +2943,10 @@ a:focus {
29362943
font-size: 0.8rem;
29372944
}
29382945

2946+
[aria-labelledby="languageDropdown"].settings-language-menu .lang-select-item {
2947+
font-size: 12px;
2948+
}
2949+
29392950
/* Ensure mobile menu import, export, and language dropdown triggers/options match the mobile stats-container font size */
29402951
#mobile-import-button,
29412952
#mobile-import-github-button,

‎index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
201201
<button class="settings-menu-item app-menu-item dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Switch language">
202202
<i class="lucide lucide-languages" aria-hidden="true"></i><span class="app-menu-copy"><span id="current-lang-label" class="app-menu-label">English</span><span class="app-menu-description">Application language</span></span>
203203
</button>
204-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
204+
<ul class="dropdown-menu dropdown-menu-end app-command-menu settings-language-menu" aria-labelledby="languageDropdown">
205205
<li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">English</a></li>
206206
<li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">简体中文</a></li>
207207
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">日本語</a></li>
@@ -220,11 +220,11 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
220220
</div>
221221
<div class="settings-menu-divider" role="separator"></div>
222222
<button id="private-mode-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle private mode">
223-
<i class="lucide lucide-venetian-mask" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch" aria-hidden="true"><span></span></span>
223+
<i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch" aria-hidden="true"><span></span></span>
224224
</button>
225225
<div class="settings-menu-divider" role="separator"></div>
226226
<button class="settings-menu-item app-menu-item settings-menu-reset" id="tab-reset-btn" type="button" title="Reset all files" aria-label="Reset all files">
227-
<i class="lucide lucide-undo-2" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Reset workspace</span><span class="app-menu-description">Remove all files and review data</span></span>
227+
<i class="lucide lucide-power" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Reset workspace</span><span class="app-menu-description">Remove all files and review data</span></span>
228228
</button>
229229
</div>
230230
</div>
@@ -345,7 +345,7 @@ <h2 id="mobile-menu-title" class="h5 m-0">Menu</h2>
345345
<button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
346346
<i class="lucide lucide-languages" aria-hidden="true"></i> Language: <span id="mobile-current-lang-label">English</span>
347347
</button>
348-
<ul class="dropdown-menu w-100" aria-labelledby="mobileLanguageDropdown">
348+
<ul class="dropdown-menu app-command-menu settings-language-menu mobile-language-menu w-100" aria-labelledby="mobileLanguageDropdown">
349349
<li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">English</a></li>
350350
<li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">简体中文</a></li>
351351
<li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">日本語</a></li>
@@ -366,10 +366,10 @@ <h2 id="mobile-menu-title" class="h5 m-0">Menu</h2>
366366
<i class="lucide lucide-moon" aria-hidden="true"></i> Appearance
367367
</button>
368368
<button id="mobile-private-mode-toggle" class="mobile-menu-item mobile-settings-item" type="button" aria-pressed="false" title="Toggle private mode">
369-
<span class="mobile-menu-item-label"><i class="lucide lucide-venetian-mask" aria-hidden="true"></i>Private mode</span><span id="mobile-private-mode-status" class="mobile-menu-item-status">Off</span>
369+
<span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i>Private mode</span><span id="mobile-private-mode-status" class="mobile-menu-item-status">Off</span>
370370
</button>
371371
<button id="mobile-tab-reset-btn" class="mobile-menu-item mobile-menu-reset" title="Reset workspace" aria-label="Reset workspace">
372-
<i class="lucide lucide-undo-2" aria-hidden="true"></i> Reset workspace
372+
<i class="lucide lucide-power" aria-hidden="true"></i> Reset workspace
373373
</button>
374374
</div>
375375
</section>

‎script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22080,7 +22080,7 @@ ${selector} .arrowheadPath {
2208022080
const tabResetBtn = document.getElementById('tab-reset-btn');
2208122081
if (tabResetBtn) updateMenuLabel(tabResetBtn, `${dict.reset} workspace`);
2208222082
const mTabResetBtn = document.getElementById('mobile-tab-reset-btn');
22083-
if (mTabResetBtn) mTabResetBtn.innerHTML = `<i class="lucide lucide-undo-2"></i> ${dict.reset} all files`;
22083+
if (mTabResetBtn) mTabResetBtn.innerHTML = `<i class="lucide lucide-power"></i> ${dict.reset} all files`;
2208422084

2208522085
// View toggle buttons title tooltips
2208622086
document.querySelectorAll('[data-view-mode="editor"]').forEach(b => b.title = dict.editor);

‎styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1973,6 +1973,13 @@ body.document-sidebar-collapsed .document-sidebar {
19731973
overflow-y: auto;
19741974
}
19751975

1976+
.app-command-menu.settings-language-menu {
1977+
width: max-content;
1978+
min-width: 168px;
1979+
max-width: min(220px, calc(100vw - 24px));
1980+
padding: 7px;
1981+
}
1982+
19761983
.settings-menu-divider {
19771984
height: 1px;
19781985
margin: 6px 0;
@@ -2936,6 +2943,10 @@ a:focus {
29362943
font-size: 0.8rem;
29372944
}
29382945

2946+
[aria-labelledby="languageDropdown"].settings-language-menu .lang-select-item {
2947+
font-size: 12px;
2948+
}
2949+
29392950
/* Ensure mobile menu import, export, and language dropdown triggers/options match the mobile stats-container font size */
29402951
#mobile-import-button,
29412952
#mobile-import-github-button,

0 commit comments

Comments
 (0)