Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scale UI down #131

Merged
merged 3 commits into from
Dec 5, 2024
Merged

Scale UI down #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6c40554
feat: scaled UI down
MSchmoecker Nov 28, 2024
3b2f17e
fix: update UI styles for improved readability and consistency
elikoga Dec 2, 2024
e0dae27
fix: colors
MSchmoecker Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 13 additions & 17 deletions frontend/src/lib/components/DeployActions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import { Button } from 'flowbite-svelte';
import GearsSolid from 'svelte-awesome-icons/GearsSolid.svelte';
import ArrowsRotateSolid from 'svelte-awesome-icons/ArrowsRotateSolid.svelte';
import PlaySolid from 'svelte-awesome-icons/PlaySolid.svelte';
import Hammer from 'lucide-svelte/icons/hammer';
import Refresh from 'lucide-svelte/icons/refresh-ccw';
import Boxes from 'lucide-svelte/icons/boxes';
import DeployModal from '$lib/components/DeployModal.svelte';
import { invalidate } from '$app/navigation';

Expand All @@ -19,22 +19,18 @@
let openDeploy = false;
</script>

<div class="flex flex-wrap justify-end align-start gap-1 sm:gap-2 w-96 sm:w-[400px]">
<Button color="alternative" class="gap-2 px-2 sm:px-4 py-1 sm:py-2 h-min" on:click={build}>
<PlaySolid class="w-[10px] sm:w-[12px]" />
<span class="text-xs sm:text-sm">{$t('deploy.build')}</span>
<div class="flex flex-wrap justify-end align-start my-1.5 gap-1 sm:gap-2 w-96 sm:w-[400px]">
<Button color="alternative" class="gap-2 px-2 py-1.5 h-min" on:click={build}>
<Hammer size={'1rem'} class="min-w-4" />
<span class="text-base">{$t('deploy.build')}</span>
</Button>
<Button color="alternative" class="gap-2 px-2 sm:px-4 py-1 sm:py-2 h-min" on:click={update}>
<ArrowsRotateSolid class="w-[12px] sm:w-[16px]" />
<span class="text-xs sm:text-sm">{$t('deploy.update')}</span>
<Button color="alternative" class="gap-2 px-2 py-1.5 h-min" on:click={update}>
<Refresh size={'1rem'} class="min-w-4" />
<span class="text-base">{$t('deploy.update')}</span>
</Button>
<Button
color="alternative"
class="gap-2 px-2 sm:px-4 py-1 sm:py-2 h-min"
on:click={() => (openDeploy = true)}
>
<GearsSolid class="w-[14px] sm:w-[18px]" />
<span class="text-xs sm:text-sm">{$t('deploy.deploy')}</span>
<Button color="alternative" class="gap-2 px-2 py-1.5 h-min" on:click={() => (openDeploy = true)}>
<Boxes size={'1rem'} class="min-w-4" />
<span class="text-base">{$t('deploy.deploy')}</span>
</Button>
<DeployModal bind:open={openDeploy} />
</div>
7 changes: 5 additions & 2 deletions frontend/src/lib/components/Tabbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,17 @@
<Tabs
contentClass="mb-4"
defaultClass="flex flex-wrap gap-x-2"
activeClasses="inline-block text-sm font-medium text-center rounded-t-lg disabled:cursor-not-allowed p-2 text-primary-600 bg-gray-100 dark:bg-gray-800 dark:text-primary-400"
activeClasses="inline-block text-sm font-medium text-center rounded-t-lg disabled:cursor-not-allowed p-2 bg-gray-100 dark:bg-gray-800 text-primary-600 dark:text-primary-400"
inactiveClasses="inline-block text-sm font-medium text-center rounded-t-lg disabled:cursor-not-allowed p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
>
{#each dynamicNavItems as item}
{#if !item.hidden}
<a href={item.href + $page.url.search}>
<TabItem open={$page.url.pathname === item.href}>
<div slot="title" class="flex items-center px-1 gap-2 md:min-w-32 xl:min-w-48">
<div
slot="title"
class="font-semibold flex items-center px-1 gap-2 md:min-w-32 xl:min-w-48"
>
<svelte:component this={item.icon} size={18} />
<span>{item.name}</span>
</div>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/lib/components/TableBodyEditCell.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
{#if isEditing}
<Input
class="w-full min-w-32"
size="sm"
bind:value
on:blur={() => onEnter?.(value)}
on:keypress={(e) => {
Expand All @@ -27,7 +28,7 @@
<span class="w-full p-0">{value}</span>
{/if}
<button class="btn ml-2" on:click={() => (isEditing = !isEditing)}>
<Pen size="18" />
<Pen size={'1rem'} class="min-w-4" />
</button>
</div>
<slot name="bottom" {value} />
Expand Down
9 changes: 8 additions & 1 deletion frontend/src/lib/config/ConfigBool.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,14 @@
};
</script>

<Toggle class="mt-1.5" size="small" {name} checked={value} on:change={changeInternal} {disabled} />
<Toggle
class="mt-1.5 h-8"
size="small"
{name}
checked={value}
on:change={changeInternal}
{disabled}
/>
{#if disabled}
<Tooltip type="auto" placement={'top-start'}>{$t('config.editDisabled')}</Tooltip>
{/if}
9 changes: 8 additions & 1 deletion frontend/src/lib/config/ConfigInt.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,14 @@
};
</script>

<Input type="number" {placeholder} value={value || ''} {disabled} on:change={changeInternal} />
<Input
type="number"
class="px-2 py-1"
{placeholder}
value={value || ''}
{disabled}
on:change={changeInternal}
/>
{#if disabled}
<Tooltip type="auto" placement={'top'}>{$t('config.editDisabled')}</Tooltip>
{/if}
12 changes: 7 additions & 5 deletions frontend/src/lib/config/ConfigList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,16 @@
{/each}
<Card class="flex flex-row gap-1 w-full max-w-full drop-shadow" padding={'xs'}>
<button
class="p-2 w-full flex justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-700 gap-2"
class="p-1 w-full flex justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-700 gap-2"
{disabled}
on:click={() => onChange([...values, {}])}
>
<Plus />
{setting.type['element-name']
? $t(`config.add-element`, { values: { element: $t(setting.type['element-name']) } })
: $t('config.add_list_element')}
<Plus size="20" />
<span class="text-base">
{setting.type['element-name']
? $t(`config.add-element`, { values: { element: $t(setting.type['element-name']) } })
: $t('config.add_list_element')}
</span>
</button>
</Card>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/config/ConfigSelectOne.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
value: option[1]
}))}
{disabled}
class={disabled ? 'opacity-70' : ''}
class={`h-8 px-2 py-1 ${disabled ? 'opacity-70' : ''}`}
/>
{#if disabled}
<Tooltip type="auto" placement={'top'}>{$t('config.editDisabled')}</Tooltip>
Expand Down
9 changes: 8 additions & 1 deletion frontend/src/lib/config/ConfigString.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,14 @@
};
</script>

<Input type="text" {placeholder} value={value || ''} {disabled} on:change={changeInternal} />
<Input
type="text"
class="px-2 py-1"
{placeholder}
value={value || ''}
{disabled}
on:change={changeInternal}
/>
{#if disabled}
<Tooltip type="auto" placement={'top'}>{$t('config.editDisabled')}</Tooltip>
{/if}
28 changes: 14 additions & 14 deletions frontend/src/lib/config/ModuleCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<P class="mb-1">
{$t(setting.displayName)}
</P>
<div class="flex">
<div class="flex gap-1">
<ConfigRenderer
{setting}
moduleSettings={settings}
Expand All @@ -59,15 +59,15 @@
{#if canEdit}
{#if settings?.settings[key] !== undefined}
<button
class="btn m-1 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
class="m-0 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
on:click={() => setSetting(module, key, null)}
>
<X />
<X size="20" />
</button>
<Tooltip type="auto"><P size="sm">{$t('config.clear')}</P></Tooltip>
{:else}
<button
class="btn m-1 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
class="m-0 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
on:click={() =>
setSetting(
module,
Expand All @@ -77,7 +77,7 @@
: ''
)}
>
<Pen />
<Pen size="20" />
</button>
<Tooltip type="auto"><P size="sm">{$t('config.edit')}</P></Tooltip>
{/if}
Expand All @@ -86,8 +86,8 @@
{#if other && other.length > 0}
{#if sameOrigin(settings, other[0])}
{@const otherDefinitions = other.filter((o) => !sameOrigin(settings, o))}
<button class="btn p-0 ml-2 sm:ml-0" on:click={() => {}}>
<Route class="text-primary-400" />
<button class="m-0 p-1" on:click={() => {}}>
<Route class="text-primary-600 dark:text-primary-400" size="20" />
</button>
<Tooltip type="auto" class="z-50">
<P size="sm" class="whitespace-pre-line">{$t('config.passed')}</P>
Expand All @@ -107,8 +107,8 @@
{@const otherDefinitions = other.filter(
(o) => !sameOrigin(o, settings) && !sameOrigin(o, other[0])
)}
<button class="btn p-0 ml-2 sm:ml-0" on:click={() => {}}>
<RouteOff class="text-primary-400" />
<button class="m-0 p-1" on:click={() => {}}>
<RouteOff class="text-primary-600 dark:text-primary-400" size="20" />
</button>
<Tooltip type="auto" class="z-50">
<P size="sm" class="whitespace-pre-line">{@html $t('config.notPassed')}</P>
Expand All @@ -127,16 +127,16 @@
</Tooltip>
{/if}
{:else if self !== undefined}
<button class="btn p-0 ml-2 sm:ml-0" on:click={() => {}}>
<Route class="text-primary-400" />
<button class="m-0 p-1" on:click={() => {}}>
<Route class="text-primary-600 dark:text-primary-400" size="20" />
</button>
<Tooltip type="auto" class="z-50">
<P size="sm" class="whitespace-pre-line">{@html $t('config.passed')}</P>
<P size="sm" class="whitespace-pre-line mt-2">{$t('config.noOtherDefinitions')}</P>
</Tooltip>
{:else}
<button class="btn p-0 ml-2 sm:ml-0" on:click={() => {}}>
<RouteOff class="text-primary-400" />
<button class="m-0 p-1" on:click={() => {}}>
<RouteOff class="text-primary-600 dark:text-primary-400" size="20" />
</button>
<Tooltip type="auto" class="z-50">
<P size="sm" class="whitespace-pre-line">{@html $t('config.notSet')}</P>
Expand All @@ -146,7 +146,7 @@
{/if}
</div>
</div>
<P class="mt-6 whitespace-pre-line">{setting.description}</P>
<P class="mt-[1.9rem] whitespace-pre-line">{setting.description}</P>
{:else}
<div>{$t('config.no-settings')}</div>
{/each}
Expand Down
14 changes: 9 additions & 5 deletions frontend/src/lib/config/ModuleList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@
on:cancel={() => (moduleToRemove = undefined)}
/>
<div class="flex justify-between mb-2">
<div class="flex gap-2 inline-block items-center">
<div class="text-gray-900 dark:text-white font-semibold flex gap-2 items-center">
<slot name="icon" />
<P>{context?.displayName}</P>
<span>{context?.displayName}</span>
</div>
{#if $globalNavSelectedTarget?.identifier !== context?.identifier}
<ToolbarButton
Expand All @@ -76,7 +76,7 @@
configSelectedModule
)}"
>
<Pen />
<Pen size="20" />
</ToolbarButton>
<Tooltip type="auto">
<P size="sm">{$t('config.edit_tag_modules')}</P>
Expand Down Expand Up @@ -107,10 +107,14 @@
context.identifier,
module
)}"
class={`block p-2 w-full flex gap-2`}
class={`block px-2 py-1.5 w-full flex gap-2 items-center`}
data-sveltekit-noscroll
>
<img src={module.icon ?? '/favicon.png'} alt={module.displayName} class="w-6 h-6" />
<img
src={module.icon ?? '/favicon.png'}
alt={module.displayName}
class="w-[20px] w-[20px]"
/>
<P>{module.displayName}</P>
</a>
{#if removeModule && ($globalNavSelectedTargetType !== 'device' || module.type !== 'thymis_controller.modules.thymis.ThymisDevice')}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/lib/navbar/Navbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
<div class="flex items-center gap-2 sm:gap-4">
<NavHamburger onClick={() => (drawerHidden = !drawerHidden)} class="m-0 md:block lg:hidden" />
<NavBrand href="/">
<img src="/favicon.png" class="w-6 min-w-6 sm:w-8 sm:min-w-8" alt="Thymis Logo" />
<img src="/favicon.png" class="w-6 min-w-6 sm:w-6 sm:min-w-6" alt="Thymis Logo" />
<span class="ml-2 text-xl sm:text-2xl font-semibold dark:text-white hidden sm:block">
Thymis
</span>
</NavBrand>
<div class="ms-2 w-2 sm:w-48 lg:w-64 xl:w-96 block">
<Search size="md" placeholder={$t('common.search')} class="py-1 sm:py-2" />
<Search size="sm" placeholder={$t('common.search')} class="py-1 sm:py-2" />
</div>
</div>
<div class="flex items-center sm:gap-2 p-1">
Expand Down
28 changes: 17 additions & 11 deletions frontend/src/lib/sidebar/GlobalNavSelect.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,25 @@
};
</script>

<Button class="w-full flex gap-2 justify-start p-3 " color="alternative">
<Button class="text-base w-full flex gap-2 justify-start p-2" color="alternative">
{#if $globalNavSelectedTag}
<TagIcon size={20} class="min-w-[20px]" />
<span class="text-base text-primary-400 truncate" title={$globalNavSelectedTag?.displayName}>
<TagIcon size={'1rem'} class="min-w-4 text-primary-600 dark:text-primary-400" />
<span
class="font-semibold text-primary-600 dark:text-primary-400 truncate"
title={$globalNavSelectedTag?.displayName}
>
{$globalNavSelectedTag?.displayName}
</span>
{:else if $globalNavSelectedDevice}
<HardDrive size={20} class="min-w-[20px]" />
<span class="text-base text-primary-400 truncate" title={$globalNavSelectedDevice?.displayName}>
<HardDrive size={'1rem'} class="min-w-4 text-primary-600 dark:text-primary-400" />
<span
class="font-semibold text-primary-600 dark:text-primary-400 truncate"
title={$globalNavSelectedDevice?.displayName}
>
{$globalNavSelectedDevice?.displayName}
</span>
{:else}
<span class="text-base truncate" title={$t('common.no-tag-or-device-selected')}>
<span class="font-semibold truncate" title={$t('common.no-tag-or-device-selected')}>
{$t('common.no-tag-or-device-selected')}
</span>
{/if}
Expand All @@ -52,7 +58,7 @@
bind:open
>
<div slot="header" class="p-3 pb-0">
<Search size="md" bind:value={search} placeholder={$t('common.search')} />
<Search size="sm" bind:value={search} placeholder={$t('common.search')} />
</div>
{#each $state.tags as tag}
{@const active =
Expand All @@ -67,10 +73,10 @@
{#if isSearched(search, tag.displayName)}
<DropdownItem
href={`${subpage}?${buildGlobalNavSearchParam($page.url.search, 'tag', tag.identifier)}`}
class={`flex gap-2 my-1 p-1 hover:bg-primary-500 items-center rounded ${active ? 'text-primary-400' : ''}`}
class={`flex gap-2 my-1 p-1 hover:bg-primary-500 items-center rounded ${active ? 'text-primary-600 dark:text-primary-400' : ''}`}
on:click={() => (open = false)}
>
<TagIcon size={22} class="shrink-0" />
<TagIcon size={'1rem'} class="min-w-4" />
<span class="text-base truncate" title={tag.displayName}>{tag.displayName}</span>
</DropdownItem>
{/if}
Expand All @@ -90,10 +96,10 @@
{#if isSearched(search, device.displayName)}
<DropdownItem
href={`${subpage}?${buildGlobalNavSearchParam($page.url.search, 'device', device.identifier)}`}
class={`flex gap-2 my-1 p-1 hover:bg-primary-500 items-center rounded ${active ? 'text-primary-400' : ''}`}
class={`flex gap-2 my-1 p-1 hover:bg-primary-500 items-center rounded ${active ? 'text-primary-600 dark:text-primary-400' : ''}`}
on:click={() => (open = false)}
>
<HardDrive size={22} class="shrink-0" />
<HardDrive size={'1rem'} class="min-w-4" />
<span class="text-base truncate" title={device.displayName}>{device.displayName}</span>
</DropdownItem>
{/if}
Expand Down
Loading
Loading