frontend: button IDs for easier customization

Massimo Melina committed Feb 17, 2023 at 19:32 UTC 713febf2792c00e007e3562549ffbdbb0535927c
1 file changed +10
frontend/src/menu.ts
+10
@@ -50,6 +50,7 @@ export function MenuPanel() {
50 h('div', { id: 'menu-bar' },
51 h(LoginButton),
52 h(MenuButton, {
53 + id: 'select-button',
54 icon: 'check',
55 label: "Select",
56 tooltip: `Selection applies to "Zip" and "Delete" (when available), but you can also filter the list`,
@@ -59,11 +60,13 @@ export function MenuPanel() {
60 }
61 }),
62 h(MenuButton, changingButton === 'delete' ? {
63 + id: 'delete-button',
64 icon: 'trash',
65 label: "Delete",
66 className: 'show-sliding',
67 onClick: () => deleteFiles(Object.keys(selected), pathname)
68 } : changingButton === 'upload' ? {
69 + id: 'upload-button',
70 icon: 'upload',
71 label: "Upload",
72 className: 'show-sliding ' + (uploading ? 'ani-working' : ''),
@@ -71,11 +74,13 @@ export function MenuPanel() {
74 } : { icon: '', label: '', className: 'before-sliding' }),
75 h(MenuButton, getSearchProps()),
76 h(MenuButton, {
77 + id: 'options-button',
78 icon: 'settings',
79 label: 'Options',
80 onClick: showOptions
81 }),
82 h(MenuLink, {
83 + id: 'zip-button',
84 icon: 'archive',
85 label: "Zip",
86 tooltip: list ? "Download selected elements as a single zip file"
@@ -105,6 +110,7 @@ export function MenuPanel() {
110
111 function getSearchProps() {
112 return stopSearch && started1secAgo ? {
113 + id: 'search-stop-button',
114 icon: 'stop',
115 label: 'Stop list',
116 className: 'ani-working',
@@ -113,12 +119,14 @@ export function MenuPanel() {
119 state.stoppedSearch = true
120 }
121 } : state.remoteSearch && !stopSearch ? {
122 + id: 'search-clear-button',
123 icon: 'search_off',
124 label: 'Clear search',
125 onClick() {
126 state.remoteSearch = ''
127 }
128 } : {
129 + id: 'search-button',
130 icon: 'search',
131 label: "Search",
132 onClickAnimation: false,
@@ -171,10 +179,12 @@ function LoginButton() {
179 const snap = useSnapState()
180 const navigate = useNavigate()
181 return MenuButton(snap.username ? {
182 + id: 'user-button',
183 icon: 'user',
184 label: snap.username,
185 onClick: showUserPanel
186 } : {
187 + id: 'login-button',
188 icon: 'login',
189 label: 'Login',
190 onClickAnimation: false,