WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-09-12 20:57:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix UI. CSS optimization. (#932)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2022-02-04 11:02:56 +01:00
committed by GitHub
parent 9f9650f938
commit bf2e0aba30
15 changed files with 133 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/setting-resources/src/components/CategoryElement.svelte
+4 -33
View File
@@ -19,53 +19,24 @@
export let icon: Asset | undefined = undefined
export let label: IntlString | undefined = undefined
export let selected: boolean = false
const dispatch = createEventDispatcher()
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class="flex-row-center container"
class="antiNav-element" class:selected
on:click|stopPropagation={() => {
dispatch('click')
}}
>
<div class="icon">
<div class="an-element__icon">
{#if icon}
<Icon {icon} size={'small'} />
{/if}
</div>
<span>
<span class="an-element__label title">
{#if label}<Label {label} />{:else}{label}{/if}
</span>
</div>
<style lang="scss">
.container {
margin: 0 1rem;
padding-left: .625rem;
padding-right: .75rem;
min-height: 2.25rem;
font-weight: 500;
color: var(--theme-caption-color);
border-radius: .5rem;
user-select: none;
cursor: pointer;
.icon {
margin-right: 1rem;
width: 1rem;
min-width: 1rem;
height: 1rem;
border-radius: .25rem;
}
span {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&:hover { background-color: var(--theme-button-bg-enabled); }
}
</style>
plugins/setting-resources/src/components/Settings.svelte
+24 -34
View File
@@ -41,44 +41,34 @@
}
</script>
<div class="container">
<div class="antiPanel-navigator filled indent">
<div class="flex-between navheader-container">
<span class="fs-title overflow-label">
<Label label={setting.string.Settings}/>
</span>
</div>
{#each categories as category}
<CategoryElement icon={category.icon} label={category.label} on:click={() => { selectCategory(category.name) }}/>
{/each}
<div class="signout">
<CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut}/>
</div>
</div>
<div class="flex h-full">
<div class="antiPanel-navigator filled indent">
<div class="antiNav-header">
<span class="fs-title overflow-label">
<Label label={setting.string.Settings}/>
</span>
</div>
{#each categories as category}
<CategoryElement icon={category.icon} label={category.label} selected={category.name === categoryId} on:click={() => { selectCategory(category.name) }}/>
{/each}
<div class="signout">
<CategoryElement icon={setting.icon.Signout} label={setting.string.Signout} on:click={signOut}/>
</div>
</div>
<div class="antiPanel-component filled">
{#if category}
<Component is={category.component} />
{/if}
</div>
<div class="antiPanel-component filled">
{#if category}
<Component is={category.component} />
{/if}
</div>
</div>
<style lang="scss">
.container {
display: flex;
height: 100%;
background: var(--theme-menu-color);
.signout {
display: flex;
flex-direction: column-reverse;
flex-grow: 1;
margin-bottom: 2rem;
}
}
.navheader-container {
padding: 0 1.75rem;
height: 4rem;
.signout {
display: flex;
flex-direction: column-reverse;
flex-grow: 1;
margin-bottom: 2rem;
}
</style>