Skip to content

Commit 360bb7b

Browse files
author
Gusted
authored
Confirm before resetting changes (darkreader#4887)
- Ask for confirmation before resetting changes. - Resolves darkreader#4885 - Resolves darkreader#2158
1 parent 7498178 commit 360bb7b

3 files changed

Lines changed: 59 additions & 5 deletions

File tree

‎src/ui/devtools/components/body.tsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {m} from 'malevic';
2+
import {getContext} from 'malevic/dom';
23
import {withState, useState} from 'malevic/state';
3-
import {Button} from '../../controls';
4+
import {Button, MessageBox, Overlay} from '../../controls';
45
import ThemeEngines from '../../../generators/theme-engines';
56
import {DEVTOOLS_DOCS_URL} from '../../../utils/links';
67
import type {ExtWrapper, TabInfo} from '../../../definitions';
@@ -10,6 +11,7 @@ import {isFirefox} from '../../../utils/platform';
1011
type BodyProps = ExtWrapper & {tab: TabInfo};
1112

1213
function Body({data, tab, actions}: BodyProps) {
14+
const context = getContext();
1315
const {state, setState} = useState({errorText: null as string});
1416
let textNode: HTMLTextAreaElement;
1517
const previewButtonText = data.settings.previewNewDesign ? 'Switch to old design' : 'Preview new design';
@@ -71,7 +73,26 @@ function Body({data, tab, actions}: BodyProps) {
7173
}
7274
}
7375

76+
function showDialog() {
77+
context.store.isDialogVisible = true;
78+
context.refresh();
79+
}
80+
81+
function hideDialog() {
82+
context.store.isDialogVisible = false;
83+
context.refresh();
84+
}
85+
86+
const dialog = context && context.store.isDialogVisible ? (
87+
<MessageBox
88+
caption="Are you sure you want to remove current changes? You cannot restore them later."
89+
onOK={reset}
90+
onCancel={hideDialog}
91+
/>
92+
) : null;
93+
7494
function reset() {
95+
context.store.isDialogVisible = false;
7596
wrapper.reset();
7697
setState({errorText: null});
7798
}
@@ -97,7 +118,10 @@ function Body({data, tab, actions}: BodyProps) {
97118
/>
98119
<label id="error-text">{state.errorText}</label>
99120
<div id="buttons">
100-
<Button onclick={reset}>Reset</Button>
121+
<Button onclick={showDialog}>
122+
Reset changes
123+
{dialog}
124+
</Button>
101125
<Button onclick={apply}>Apply</Button>
102126
<Button class="preview-design-button" onclick={toggleDesign}>{previewButtonText}</Button>
103127
</div>
@@ -106,6 +130,7 @@ function Body({data, tab, actions}: BodyProps) {
106130
If a <strong>popular</strong> website looks incorrect
107131
e-mail to <strong>DarkReaderApp@gmail.com</strong>
108132
</p>
133+
<Overlay />
109134
</body>
110135
);
111136
}

‎src/ui/devtools/style.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,3 +153,7 @@ header {
153153
margin-bottom: @indent-small;
154154
}
155155
}
156+
157+
.message-box {
158+
border: @size-border solid @color-border;
159+
}

‎src/ui/stylesheet-editor/components/body.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {m} from 'malevic';
2-
import {Button} from '../../controls';
2+
import {getContext} from 'malevic/dom';
3+
import {Button, MessageBox, Overlay} from '../../controls';
34
import {getURLHostOrProtocol, isURLInList} from '../../../utils/url';
45
import type {ExtWrapper, TabInfo} from '../../../definitions';
56

@@ -8,6 +9,7 @@ interface BodyProps extends ExtWrapper {
89
}
910

1011
export default function Body({data, tab, actions}: BodyProps) {
12+
const context = getContext();
1113
const host = getURLHostOrProtocol(tab.url);
1214
const custom = data.settings.customThemes.find(({url}) => isURLInList(tab.url, url));
1315

@@ -20,7 +22,7 @@ export default function Body({data, tab, actions}: BodyProps) {
2022
'}',
2123
].join('\n');
2224

23-
function onTextRender(node) {
25+
function onTextRender(node: HTMLTextAreaElement) {
2426
textNode = node;
2527
textNode.value = (custom ? custom.theme.stylesheet : data.settings.theme.stylesheet) || '';
2628
if (document.activeElement !== textNode) {
@@ -37,7 +39,26 @@ export default function Body({data, tab, actions}: BodyProps) {
3739
}
3840
}
3941

42+
function showDialog() {
43+
context.store.isDialogVisible = true;
44+
context.refresh();
45+
}
46+
47+
function hideDialog() {
48+
context.store.isDialogVisible = false;
49+
context.refresh();
50+
}
51+
52+
const dialog = context && context.store.isDialogVisible ? (
53+
<MessageBox
54+
caption="Are you sure you want to remove current changes? You cannot restore them later."
55+
onOK={reset}
56+
onCancel={hideDialog}
57+
/>
58+
) : null;
59+
4060
function reset() {
61+
context.store.isDialogVisible = false;
4162
applyStyleSheet('');
4263
}
4364

@@ -64,9 +85,13 @@ export default function Body({data, tab, actions}: BodyProps) {
6485
autocapitalize="off"
6586
/>
6687
<div id="buttons">
67-
<Button onclick={reset}>Reset</Button>
88+
<Button onclick={showDialog}>
89+
Reset changes
90+
{dialog}
91+
</Button>
6892
<Button onclick={apply}>Apply</Button>
6993
</div>
94+
<Overlay />
7095
</body>
7196
);
7297
}

0 commit comments

Comments
 (0)