Skip to content

Commit 7dece34

Browse files
khiemgluongkhiemgluong
committed
More reactive button elements
1 parent 78eceaf commit 7dece34

14 files changed

+66
-66
lines changed

‎frontend/src/App.svelte

+6-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { onDestroy, onMount } from "svelte";
2+
import { onMount } from "svelte";
33
import { get } from "svelte/store";
44
55
import Login from "./components/pages/Login.svelte";
@@ -12,14 +12,12 @@
1212
CheckKeyFileInCWD,
1313
GetDirName,
1414
GetDirectoryPath,
15-
GetHeight,
1615
} from "../wailsjs/go/main/Getters";
1716
import {
1817
EventsOn,
1918
LogDebug,
2019
LogError,
2120
LogInfo,
22-
LogWarning,
2321
} from "../wailsjs/runtime/runtime";
2422
import { DirectoryWatcher, ResizeWindow } from "../wailsjs/go/main/App";
2523
import {
@@ -28,13 +26,12 @@
2826
largeFilePercent,
2927
largeFileName,
3028
newAccount,
31-
height,
3229
filterInputs,
3330
} from "./stores/dynamicVariables.ts";
34-
import { buildFileTree, fileTree } from "./tools/fileTree.ts";
31+
import { fileTree } from "./tools/fileTree.ts";
3532
import { addLogEntry } from "./tools/logger.ts";
3633
import AppSetup from "./components/pages/AppSetup.svelte";
37-
import { width } from "./stores/constantVariables.ts";
34+
import { height, width } from "./stores/constantVariables.ts";
3835
import {
3936
AddInputToFilterTemplate,
4037
LoadFileFilters,
@@ -50,16 +47,13 @@
5047
5148
onMount(async () => {
5249
isRightDir = await GetDirName();
53-
let _height = await GetHeight();
54-
height.set(_height);
55-
56-
if (!isRightDir) ResizeWindow(320, _height + 10);
50+
if (!isRightDir) ResizeWindow(320, height + 10);
5751
else {
5852
CheckKeyFileInCWD().then((_keyFilePath) => {
5953
if (_keyFilePath === "") {
6054
currentPage.set(AppPage.AppSetup);
6155
newAccount.set(true);
62-
ResizeWindow(350, _height + 50);
56+
ResizeWindow(350, height + 50);
6357
}
6458
});
6559
}
@@ -101,7 +95,7 @@
10195
LogError("Error loading file filters:" + error);
10296
}
10397
currentPage.set(AppPage.Vault);
104-
ResizeWindow(width * 2, $height);
98+
ResizeWindow(width * 2, height);
10599
106100
let unsubscribe = () => {};
107101
unsubscribe = fileTree.subscribe((value) => {

‎frontend/src/components/modals/Info.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@
4141
<div
4242
id="modal-panel"
4343
class="rounded-md ml-0.5 mr-1 !mt-0.5 hover:outline outline-1 bg-primary-700 dark:bg-primary-600"
44-
style="max-height: {_currentPage === AppPage.Login ? '68vh' : '97%'};"
44+
style="max-height: {_currentPage === AppPage.Login ? '65.75vh' : '97%'};
45+
margin-bottom: {_currentPage === AppPage.Login ? '2.5vh' : ''};"
4546
>
4647
<div
4748
class="mb-1.5 pb-6 w-1/3 left-1/3 rounded-bl-lg rounded-br-lg font-semibold h-5 bg-primary-400 dark:bg-primary-300

‎frontend/src/components/modals/Settings.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@
134134
<div
135135
id="modal-panel"
136136
class="rounded-md ml-0.5 mr-1 !mt-0.5 hover:outline outline-1 bg-primary-700 dark:bg-primary-600"
137-
style="max-height: {_currentPage === AppPage.Login ? '68vh' : '97%'};"
137+
style="max-height: {_currentPage === AppPage.Login ? '65.75vh' : '97%'};
138+
margin-bottom: {_currentPage === AppPage.Login ? '2.5vh' : ''};"
138139
>
139140
<div
140141
class="mb-1.5 pb-6 w-1/2 left-1/4 rounded-bl-lg rounded-br-lg font-semibold h-5 bg-primary-400 dark:bg-primary-300

‎frontend/src/components/pages/AppSetup.svelte

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
import { LogInfo } from "../../../wailsjs/runtime/runtime";
55
66
import { ArrowLeftOutline, ArrowRightOutline } from "flowbite-svelte-icons";
7-
import { width } from "../../stores/constantVariables";
7+
import { height, width } from "../../stores/constantVariables";
88
import {
99
accentColor,
1010
darkLightMode,
11-
height,
1211
} from "../../stores/dynamicVariables";
1312
import TitleBar from "../widgets/TitleBar.svelte";
1413
import License from "../modals/License.svelte";
@@ -35,7 +34,7 @@
3534
3635
function goToLoginPage() {
3736
currentPage.set(AppPage.Login);
38-
ResizeWindow(width, $height + 5);
37+
ResizeWindow(width, height);
3938
LogInfo("going to login page");
4039
}
4140

‎frontend/src/components/pages/Login.svelte

+8-10
Original file line numberDiff line numberDiff line change
@@ -383,18 +383,18 @@
383383
{/if}
384384
</div>
385385

386-
<div class={`flex justify-between items-center`}>
387-
<div
388-
class={`flex space-x-1 relative ${_modal === Modals.None ? `top-10` : `top-0`}`}
389-
>
386+
<div
387+
class={`flex justify-between items-center relative ${_modal === Modals.None ? `top-11` : `top-0`}`}
388+
>
389+
<div class={`flex space-x-1`}>
390390
<Button
391391
pill={true}
392-
class="p-0 px-0.5 hover:drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] "
392+
class="p-0 px-0.5 hover:drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] hover:outline outline-1"
393393
shadow
394394
on:click={() => switchModals(Modals.Info)}
395395
>
396396
<InfoCircleOutline
397-
class="w-6 h-6 "
397+
class="w-6 h-6"
398398
color={$darkLightMode ? lightTextColor : darkTextColor}
399399
/>
400400
</Button>
@@ -410,14 +410,12 @@
410410
/>
411411
</Button>
412412
</div>
413-
<div
414-
class={`relative ${_modal === Modals.None ? `top-10` : `top-0`}`}
415-
>
413+
<div class={``}>
416414
{#if $newAccount}
417415
{#if !enteredPassword}
418416
{#if usernameCheck && checks.passwordCheck}
419417
<NeuButton
420-
_class="!w-20 "
418+
_class="!w-20"
421419
on:click={() => enterPasswordBtn()}
422420
>ENTER</NeuButton
423421
>

‎frontend/src/components/pages/MBox.svelte

+10-11
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@
109109
110110
onMount(() => {
111111
pageLoading.set(true);
112+
currentMBoxState = MboxState.None;
112113
buildFileTree();
113114
if (_currentFileTask === FileTasks.None) retrieveDuplicateFiles();
114115
@@ -284,7 +285,7 @@
284285
}}
285286
>
286287
<DirSize />
287-
<div class="h-1/3 bg-red-100">
288+
<div class="h-1/3">
288289
{#if currentMBoxState === MboxState.None}
289290
{#if _currentFileTask === FileTasks.None}
290291
<div class="text-primary-100 dark:text-primary-200">
@@ -306,6 +307,7 @@
306307
<div style="height: 1.95rem" />
307308
<FileTools />
308309
</div>
310+
<div class="h-1.5" />
309311
<div class="row" role="none" on:click|stopPropagation>
310312
<Input
311313
class="max-h-5 m-0"
@@ -360,11 +362,11 @@
360362
arrow={false}>more than 4 characters</Tooltip
361363
>
362364
</div>
365+
<div class="h-5">
366+
<FileTools />
367+
</div>
368+
<div class="h-1.5" />
363369
{#if !enteredPassword}
364-
<div style="height: 1.25rem">
365-
<FileTools />
366-
</div>
367-
368370
<div class="row" role="none" on:click|stopPropagation>
369371
<Input
370372
class="max-h-5 m-0"
@@ -382,9 +384,6 @@
382384
on:passwordStrengthUpdated={handlePasswordStrengthUpdated}
383385
/>
384386
{:else}
385-
<div style="height: 1.1rem">
386-
<FileTools />
387-
</div>
388387
<div class="row" role="none" on:click|stopPropagation>
389388
<Input
390389
class="max-h-5 m-0"
@@ -431,12 +430,12 @@
431430
{/if}
432431
{/if}
433432
</div>
434-
<div class="h-1/2 bg-green-300">
435-
<div class="relative !top-[1.3rem]">
433+
<div class="h-1/2">
434+
<div class="relative top-[1.8rem]">
436435
<ModalButtons />
437436
</div>
438437
<div
439-
class="flex justify-between space-x-3.5 space-evenly relative !top-[2.6rem]"
438+
class="flex justify-between space-x-3.5 space-evenly relative top-[2.8rem]"
440439
>
441440
<NeuButton on:click={() => switchPages(AppPage.Vault)}
442441
>VAULT</NeuButton

‎frontend/src/components/pages/Vault.svelte

+5-5
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@
187187
}}
188188
>
189189
<DirSize />
190-
<div class="h-1/3 bg-red-400">
190+
<div class="h-1/3">
191191
{#if _currentFileTask === FileTasks.None}
192192
{#if _hotFiler}
193193
<Chronograph />
@@ -206,7 +206,7 @@
206206
{:else}
207207
<TaskDisplay />
208208
{/if}
209-
<div class="bg-blue-100">
209+
<div>
210210
{#if _currentFileTask === FileTasks.None}
211211
<div>
212212
<FileTools />
@@ -218,11 +218,11 @@
218218
<div class="h-0.5" />
219219
</div>
220220

221-
<div class="h-1/2 bg-green-400">
222-
<div class="relative !top-[1.3rem]">
221+
<div class="h-1/2">
222+
<div class="relative top-[1.8rem]">
223223
<ModalButtons />
224224
</div>
225-
<div class="flex justify-between relative !top-[2.6rem]">
225+
<div class="flex justify-between relative top-[2.8rem]">
226226
<NeuButton
227227
on:click={() => switchPages(AppPage.Mbox)}
228228
_class="!w-20">M-BOX</NeuButton

‎frontend/src/components/widgets/FileTools.svelte

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<script lang="ts">
22
import {
3-
FolderArrowRightOutline,
43
FolderOpenSolid,
54
PlaySolid,
6-
BookOpenOutline,
5+
BookOpenSolid,
76
} from "flowbite-svelte-icons";
87
import { darkLightMode } from "../../stores/dynamicVariables";
98
import { getRootDir } from "../../tools/utils";
109
11-
import { darkLightTextOnClasses } from "../../tools/themes";
1210
1311
import { heldDownBtns } from "../../tools/utils";
1412
import { LogInfo } from "../../../wailsjs/runtime/runtime";
@@ -40,26 +38,29 @@
4038
}
4139
return FileTypes.Unknown;
4240
}
41+
42+
let fileToolIconClass =
43+
"drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] hover:drop-shadow-[0_1.2px_1.2px_rgba(220,220,220,1)]";
4344
</script>
4445

4546
{#if $currentModal !== Modals.Logger}
4647
{#if Object.keys($heldDownBtns).length > 0}
47-
<div id="file-tools" class="flex justify-end space-x-1">
48+
<div id="file-tools" class="flex justify-end space-x-0.5">
4849
{#if lastFile !== FileTypes.Encrypted && lastFile !== FileTypes.Unknown && lastFile !== FileTypes.EncryptedP}
4950
<button
5051
style={`--text-color: ${$darkLightMode ? lightTextColor : darkTextColor};`}
5152
tabindex={-1}
5253
on:click|stopPropagation={() => OpenFile(lastFilePath)}
5354
>
54-
<PlaySolid />
55+
<PlaySolid size="lg" class={fileToolIconClass} />
5556
</button>
5657
{/if}
5758
<button
5859
style={`--text-color: ${$darkLightMode ? lightTextColor : darkTextColor};`}
5960
tabindex={-1}
6061
on:click|stopPropagation={() => OpenDirectory(lastFilePath)}
6162
>
62-
<FolderOpenSolid />
63+
<FolderOpenSolid size="lg" class={fileToolIconClass} />
6364
</button>
6465
</div>
6566
{/if}
@@ -70,7 +71,7 @@
7071
tabindex={-1}
7172
on:pointerdown|stopPropagation={OpenLogEntriesFile}
7273
>
73-
<BookOpenOutline />
74+
<BookOpenSolid size="lg" class={fileToolIconClass} />
7475
</button>
7576
</div>
7677
{/if}

‎frontend/src/components/widgets/ModalButtons.svelte

+20-5
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
BarsFromLeftOutline,
77
InfoCircleOutline,
88
} from "flowbite-svelte-icons";
9-
import { Modals } from "../../enums/Modals";
9+
import { currentModal, Modals } from "../../enums/Modals";
1010
11-
import { darkLightMode } from "../../stores/dynamicVariables";
11+
import { darkLightMode, accentColor } from "../../stores/dynamicVariables";
1212
import { switchModals } from "../../tools/utils";
1313
1414
import {
@@ -30,26 +30,41 @@
3030
onDestroy(() => {
3131
unsub_darkLightMode();
3232
});
33+
34+
let iconClass = "p-px hover:outline outline-1 rounded-full";
3335
</script>
3436

3537
<div class="icon space-y-1 !flex-row !justify-center items-baseline space-x-2">
3638
<button
3739
class="icon__neumorphic"
3840
on:pointerdown|stopPropagation={() => switchModals(Modals.Info)}
3941
>
40-
<InfoCircleOutline class="p-px pt-0.5" size="lg" />
42+
<InfoCircleOutline
43+
class={iconClass}
44+
size="lg"
45+
style={`color: ${$currentModal === Modals.Info ? $accentColor : "var(--text-color)"}`}
46+
/>
4147
</button>
4248
<button
4349
class="icon__neumorphic"
4450
on:pointerdown|stopPropagation={() => switchModals(Modals.Logger)}
4551
>
46-
<BarsFromLeftOutline class="p-px pt-0.5" role="button" size="lg" />
52+
<BarsFromLeftOutline
53+
class={iconClass}
54+
role="button"
55+
size="lg"
56+
style={`color: ${$currentModal === Modals.Logger ? $accentColor : "var(--text-color)"}`}
57+
/>
4758
</button>
4859
<button
4960
class="icon__neumorphic"
5061
on:pointerdown|stopPropagation={() => switchModals(Modals.Settings)}
5162
>
52-
<CogSolid class="p-px pt-0.5" size="lg" />
63+
<CogSolid
64+
class={iconClass}
65+
size="lg"
66+
style={`color: ${$currentModal === Modals.Settings ? $accentColor : "var(--text-color)"}`}
67+
/>
5368
</button>
5469
</div>
5570

‎frontend/src/components/widgets/OvalSpinner.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
{#if $pageLoading}
99
<div
10-
class="fixed items-center justify-center mt-10 w-full left-1/2 mr-10 z-60"
10+
class="fixed items-center justify-center mt-12 w-full left-1/2 mr-10 z-60"
1111
style="--wails-draggable: drag; background-color:transparent"
1212
>
1313
<div id="oval-spinner">

‎frontend/src/neu_icons.scss

-7
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,5 @@
2424
cursor: pointer;
2525
color: var(--text-color);
2626
transition: all 0.2s ease;
27-
&:active {
28-
box-shadow: var(--inner-shadow);
29-
color: var(--icon-active);
30-
}
31-
&:hover {
32-
color: var(--icon-hover);
33-
}
3427
}
3528
}

‎frontend/src/stores/constantVariables.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const setupPagePClass =
55
export const inputFloatClass =
66
"flex absolute inset-y-0 items-center text-green-300"
77

8-
export const width = 220; export const height = 145;
8+
export const width = 220; export const height = 195;
99

1010
export const darkBGColor = "#757575"
1111
export const lightBGColor = "#eeeeee"

0 commit comments

Comments
 (0)