kunkun-extensions-mirror/kunkunsh-kunkun-ext-neohtop
1
0
Fork 0
mirror of https://github.com/kunkunsh/kunkun-ext-neohtop.git synced 2025-04-03 17:36:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

refresh controls

Browse Source
This commit is contained in:
Abdenasser 2024-11-13 14:50:25 +01:00
parent b5e4acf13f
commit b9515c8ae3
2 changed files with 119 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/lib/components/toolbar/RefreshControls.svelte
View File

@ -0,0 +1,117 @@
<script lang="ts">
import Fa from "svelte-fa";
import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";
import type { AppConfig } from "$lib/types/config";
import { configStore } from "$lib/stores/config";
export let refreshRate: number;
export let isFrozen: boolean;
const refreshRateOptions = [
{ value: 1000, label: "1s" },
{ value: 2000, label: "2s" },
{ value: 5000, label: "5s" },
{ value: 10000, label: "10s" },
{ value: 30000, label: "30s" },
];
function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
configStore.updateConfig({
behavior: {
...$configStore.behavior,
[key]: value,
},
});
}
</script>
<div class="refresh-controls">
<select
class="select-input"
bind:value={refreshRate}
on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
disabled={isFrozen}
>
{#each refreshRateOptions as option}
<option value={option.value}>{option.label}</option>
{/each}
</select>
<button
class="btn-action"
class:frozen={isFrozen}
on:click={() => (isFrozen = !isFrozen)}
title={isFrozen ? "Resume Updates" : "Pause Updates"}
>
{#if isFrozen}
<Fa icon={faPlay} />
{:else}
<Fa icon={faPause} />
{/if}
</button>
</div>
<style>
.refresh-controls {
display: flex;
gap: 8px;
align-items: center;
}
.refresh-controls :global(svg) {
font-size: 14px;
color: var(--subtext0);
}
.btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: var(--surface0);
color: var(--text);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-action:hover {
background: var(--surface1);
}
.btn-action.frozen {
background: var(--blue);
color: var(--base);
}
.select-input {
height: 28px;
padding: 0 8px;
border: 1px solid var(--surface1);
border-radius: 6px;
background: var(--surface0);
color: var(--text);
font-size: 13px;
cursor: pointer;
appearance: none;
padding-right: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
}
.select-input:hover {
background-color: var(--surface1);
}
.select-input:focus {
outline: none;
border-color: var(--blue);
}
.select-input:disabled {
opacity: 0.7;
cursor: not-allowed;
}
</style>

36
src/lib/components/toolbar/ToolBar.svelte
View File

@ -12,6 +12,7 @@
import type { AppConfig } from "$lib/types/config";
import StatusFilter from "./StatusFilter.svelte";
import SearchBox from "./SearchBox.svelte";
import RefreshControls from "./RefreshControls.svelte";
export let searchTerm: string;
export let statusFilter: string = "all";
export let itemsPerPage: number;
@ -37,14 +38,6 @@
})),
];
const refreshRateOptions = [
{ value: 1000, label: "1s" },
{ value: 2000, label: "2s" },
{ value: 5000, label: "5s" },
{ value: 10000, label: "10s" },
{ value: 30000, label: "30s" },
];
function changePage(page: number) {
if (page >= 1 && page <= totalPages) {
currentPage = page;
@ -166,32 +159,7 @@
{/if}
</div>
<div class="toolbar-group">
<div class="refresh-controls">
<select
class="select-input"
bind:value={refreshRate}
on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
disabled={isFrozen}
>
{#each refreshRateOptions as option}
<option value={option.value}>{option.label}</option>
{/each}
</select>
<button
class="btn-action"
class:frozen={isFrozen}
on:click={() => (isFrozen = !isFrozen)}
title={isFrozen ? "Resume Updates" : "Pause Updates"}
>
{#if isFrozen}
<Fa icon={faPlay} />
{:else}
<Fa icon={faPause} />
{/if}
</button>
</div>
</div>
<RefreshControls bind:refreshRate bind:isFrozen />
<AppInfo />
</div>