Skip to content

Commit 1eb4c60

Browse files
jelvehjelveh
committed
Remove the Button component from some UI components
1 parent c55a13d commit 1eb4c60

File tree

4 files changed

+75
-61
lines changed

4 files changed

+75
-61
lines changed

‎src/gui/src/UI/Settings/UITabSecurity.js‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
* along with this program. If not, see <https://www.gnu.org/licenses/>.
1818
*/
1919
import TeePromise from "../../util/TeePromise.js";
20-
import Button from "../Components/Button.js";
2120
import Flexer from "../Components/Flexer.js";
2221
import JustHTML from "../Components/JustHTML.js";
2322
import PasswordEntry from "../Components/PasswordEntry.js";
@@ -112,6 +111,28 @@ export default {
112111
password_confirm_promise.resolve(true);
113112
$(win).close();
114113
}
114+
115+
const passwordEntryElement = new PasswordEntry({
116+
_ref: me => password_entry = me,
117+
on_submit: async () => {
118+
try_password();
119+
}
120+
});
121+
122+
const disableBtn = $(`<button class="button button-primary">${i18n('disable_2fa')}</button>`);
123+
disableBtn.on('click', async () => {
124+
try_password();
125+
});
126+
127+
const cancelBtn = $(`<button class="button button-secondary">${i18n('cancel')}</button>`);
128+
cancelBtn.on('click', async () => {
129+
password_confirm_promise.resolve(false);
130+
$(win).close();
131+
});
132+
133+
const buttonContainer = $('<div style="display: flex; gap: 5pt;"></div>');
134+
buttonContainer.append(disableBtn, cancelBtn);
135+
115136
const password_confirm = new Flexer({
116137
children: [
117138
new JustHTML({
@@ -127,27 +148,9 @@ export default {
127148
new Flexer({
128149
gap: '5pt',
129150
children: [
130-
new PasswordEntry({
131-
_ref: me => password_entry = me,
132-
on_submit: async () => {
133-
try_password();
134-
}
135-
}),
136-
new Button({
137-
label: i18n('disable_2fa'),
138-
on_click: async () => {
139-
try_password();
140-
}
141-
}),
142-
new Button({
143-
label: i18n('cancel'),
144-
style: 'secondary',
145-
on_click: async () => {
146-
password_confirm_promise.resolve(false);
147-
$(win).close();
148-
}
149-
})
150-
]
151+
passwordEntryElement,
152+
{ dom: buttonContainer[0] }
153+
]
151154
}),
152155
]
153156
});

‎src/gui/src/UI/UIWindow2FASetup.js‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@
3939

4040
import TeePromise from "../util/TeePromise.js";
4141
import ValueHolder from "../util/ValueHolder.js";
42-
import Button from "./Components/Button.js";
4342
import CodeEntryView from "./Components/CodeEntryView.js";
4443
import ConfirmationsView from "./Components/ConfirmationsView.js";
4544
import Flexer from "./Components/Flexer.js";
@@ -169,14 +168,35 @@ const UIWindow2FASetup = async function UIWindow2FASetup () {
169168
],
170169
confirmed: done_enabled,
171170
}),
172-
new Button({
173-
enabled: done_enabled,
174-
label: i18n('setup2fa_5_button'),
175-
on_click: async () => {
176-
await enable_2fa_();
177-
stepper.next();
178-
},
179-
}),
171+
{
172+
dom: (function() {
173+
const enableButton = $(`<button class="button button-primary button-block" style="margin-top:10px;">${i18n('setup2fa_5_button')}</button>`);
174+
175+
// Initially disabled if done_enabled is initially false
176+
if (!done_enabled.get()) {
177+
enableButton.prop('disabled', true);
178+
}
179+
180+
// Handle the enabled state changes
181+
done_enabled.sub(value => {
182+
enableButton.prop('disabled', !value);
183+
});
184+
185+
enableButton.on('click', async () => {
186+
// Optional loading animation
187+
const originalText = enableButton.text();
188+
enableButton.html(`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
189+
190+
await enable_2fa_();
191+
stepper.next();
192+
193+
// Reset button text (though it may not be necessary since the view is changing)
194+
enableButton.html(originalText);
195+
});
196+
197+
return enableButton[0]; // Return the DOM element
198+
})()
199+
}
180200
]
181201
}),
182202
]

‎src/gui/src/UI/UIWindowProgress.js‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919

2020
import UIWindow from './UIWindow.js'
2121
import Placeholder from '../util/Placeholder.js';
22-
import Button from './Components/Button.js';
2322

2423
/**
2524
* General purpose progress dialog.
@@ -111,25 +110,19 @@ async function UIWindowProgress({
111110
});
112111

113112
if (on_cancel) {
114-
const cancel_btn = new Button({
115-
label: i18n('cancel'),
116-
style: 'small',
117-
on_click: () => {
118-
$(el_window).close();
119-
on_cancel();
120-
},
113+
const cancelBtn = $(`<button class="button button-small">${i18n('cancel')}</button>`);
114+
cancelBtn.on('click', () => {
115+
$(el_window).close();
116+
on_cancel();
121117
});
122-
cancel_btn.attach(placeholder_cancel_btn);
118+
placeholder_cancel_btn.replaceWith(cancelBtn);
123119
}
124-
125-
const ok_btn = new Button({
126-
label: i18n('ok'),
127-
style: 'small',
128-
on_click: () => {
129-
$(el_window).close();
130-
},
120+
121+
const okBtn = $(`<button class="button button-small">${i18n('ok')}</button>`);
122+
okBtn.on('click', () => {
123+
$(el_window).close();
131124
});
132-
ok_btn.attach(placeholder_ok_btn);
125+
placeholder_ok_btn.replaceWith(okBtn);
133126

134127
return {
135128
element: el_window,

‎src/gui/src/UI/UIWindowThemeDialog.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
* along with this program. If not, see <https://www.gnu.org/licenses/>.
1818
*/
1919
import UIComponentWindow from './UIComponentWindow.js';
20-
import Button from './Components/Button.js';
2120
import Flexer from './Components/Flexer.js';
2221
import Slider from './Components/Slider.js';
2322

@@ -61,20 +60,19 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog (options) {
6160
on_change: slider_ch,
6261
});
6362

63+
const resetButton = $(`<button class="button button-secondary">${i18n('reset_colors')}</button>`);
64+
resetButton.on('click', () => {
65+
svc_theme.reset();
66+
state = {};
67+
hue_slider.set('value', svc_theme.get('hue'));
68+
sat_slider.set('value', svc_theme.get('sat'));
69+
lig_slider.set('value', svc_theme.get('lig'));
70+
alpha_slider.set('value', svc_theme.get('alpha'));
71+
});
72+
6473
const component = new Flexer({
6574
children: [
66-
new Button({
67-
label: i18n('reset_colors'),
68-
style: 'secondary',
69-
on_click: () => {
70-
svc_theme.reset();
71-
state = {};
72-
hue_slider.set('value', svc_theme.get('hue'));
73-
sat_slider.set('value', svc_theme.get('sat'));
74-
lig_slider.set('value', svc_theme.get('lig'));
75-
alpha_slider.set('value', svc_theme.get('alpha'));
76-
},
77-
}),
75+
{ dom: resetButton[0] },
7876
hue_slider,
7977
sat_slider,
8078
lig_slider,

0 commit comments

Comments
 (0)