mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-31 07:28:44 +03:00
Fix UI. CSS optimization. (#932)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
9f9650f938
commit
bf2e0aba30
@ -121,7 +121,7 @@
|
||||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
padding: 0 2.5rem 0 2.5rem;
|
||||
min-height: 0;
|
||||
height: 4rem;
|
||||
color: var(--theme-content-accent-color);
|
||||
|
||||
@ -46,6 +46,8 @@
|
||||
--primary-color-pink: #FA8DA1;
|
||||
|
||||
--highlight-red: #F96E50;
|
||||
--highlight-red-hover: #ff967e;
|
||||
--highlight-red-press: #f96f50bd;
|
||||
}
|
||||
|
||||
/* Dark Theme */
|
||||
|
||||
@ -52,6 +52,61 @@
|
||||
padding: 0 1.75rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.antiNav-element {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 1rem;
|
||||
height: 2.25rem;
|
||||
border-radius: .5rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
.an-element__icon {
|
||||
min-width: 1rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
margin: 0 1.125rem 0 .625rem;
|
||||
&.sub { margin: 0 .5rem 0 2.75rem }
|
||||
}
|
||||
.an-element__label {
|
||||
flex-grow: 1;
|
||||
margin-right: .75rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
font-weight: 400;
|
||||
color: var(--theme-content-color);
|
||||
&.title {
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
.an-element__tool {
|
||||
margin-right: .75rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
.an-element__counter {
|
||||
margin-right: .75rem;
|
||||
font-weight: 600;
|
||||
font-size: .75rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
&:hover, &.hovered {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
.an-element__tool { visibility: visible; }
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--theme-menu-selection);
|
||||
&:hover { background-color: var(--theme-button-bg-enabled); }
|
||||
}
|
||||
|
||||
&__dropbox {
|
||||
height: auto;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
.antiNav-divider {
|
||||
flex-shrink: 0;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
@ -78,6 +78,13 @@
|
||||
background-color: var(--theme-button-bg-pressed);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.redlight {
|
||||
color: var(--highlight-red);
|
||||
&:hover { color: var(--highlight-red-hover); }
|
||||
&:active { color: var(--highlight-red-press); }
|
||||
&:focus { color: var(--highlight-red-press); }
|
||||
}
|
||||
}
|
||||
.ap-check {
|
||||
margin-left: 1rem;
|
||||
|
||||
@ -9,6 +9,10 @@
|
||||
<path d="M2.5,9.8l3.7,3.7c0,0,0,0,0,0c0.6,0.6,1.6,0.6,2.2,0l5.5-5.5C13.9,8,14,7.8,14,7.7V2.5C14,2.2,13.8,2,13.5,2H8.3 C8.1,2,8,2.1,7.9,2.1L2.5,7.6C2.2,7.9,2,8.3,2,8.7C2,9.1,2.2,9.5,2.5,9.8z M3.2,8.3L8.5,3H13v4.5l-5.3,5.3c-0.2,0.2-0.6,0.2-0.8,0 L3.2,9.1C3.1,9,3,8.9,3,8.7S3.1,8.4,3.2,8.3z"/>
|
||||
</symbol>
|
||||
<symbol id="variant" viewBox="0 0 24 24">
|
||||
<path d="M16,16c-1.3,0-2.4,0.8-2.8,2H9c-1.5,0-2.4,0-2.7-0.3S6,16.5,6,15v-3.2C6.7,12,7.7,12,9,12h4.2c0.4,1.2,1.5,2,2.8,2 c1.7,0,3-1.3,3-3s-1.3-3-3-3c-1.3,0-2.4,0.8-2.8,2H9c-1.5,0-2.4,0-2.7-0.3C6.1,9.5,6,8.8,6,7.8C7.2,7.4,8,6.3,8,5c0-1.7-1.3-3-3-3 S2,3.3,2,5c0,1.3,0.8,2.4,2,2.8C4,7.9,4,7.9,4,8h0v7c0,2.1,0,3.2,0.9,4.1S6.9,20,9,20h4.2c0.4,1.2,1.5,2,2.8,2c1.7,0,3-1.3,3-3 S17.7,16,16,16z M16,10c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S15.4,10,16,10z M5,4c0.6,0,1,0.4,1,1S5.6,6,5,6S4,5.6,4,5S4.4,4,5,4z M16,20c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S16.6,20,16,20z"/>
|
||||
<g fill="var(--duotone-color)">
|
||||
<path d="M16,11L16,11c0,1.1-0.9,2-2,2l0,0c-1.1,0-2-0.9-2-2l0,0c0-1.1,0.9-2,2-2l0,0C15.1,9,16,9.9,16,11z"/>
|
||||
<path d="M20,19L20,19c0,1.1-0.9,2-2,2l0,0c-1.1,0-2-0.9-2-2l0,0c0-1.1,0.9-2,2-2l0,0C19.1,17,20,17.9,20,19z"/>
|
||||
</g>
|
||||
<path d="M18,16.4c-1.2,0-2.3,0.9-2.5,2H9c-1.8,0-2.6,0-3-0.4c-0.4-0.4-0.4-1.2-0.4-3v-3.8c0.7,0.4,1.8,0.4,3.4,0.4h2.5 c0.3,1.1,1.3,2,2.5,2c1.4,0,2.6-1.2,2.6-2.6S15.4,8.4,14,8.4c-1.2,0-2.3,0.9-2.5,2H9c-1.8,0-2.6,0-3-0.4C5.6,9.6,5.6,8.8,5.6,7V4 H4.4v11c0,2,0,3.1,0.8,3.8C5.9,19.6,7,19.6,9,19.6h6.5c0.3,1.1,1.3,2,2.5,2c1.4,0,2.6-1.2,2.6-2.6S19.4,16.4,18,16.4z M14,9.6 c0.8,0,1.4,0.6,1.4,1.4s-0.6,1.4-1.4,1.4s-1.4-0.6-1.4-1.4S13.2,9.6,14,9.6z M18,20.4c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4 s1.4,0.6,1.4,1.4S18.8,20.4,18,20.4z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.5 KiB |
@ -68,6 +68,7 @@
|
||||
<Grid column={1} rowGap={1.5}>
|
||||
<EditBox
|
||||
label={inventory.string.Category}
|
||||
icon={inventory.icon.Categories}
|
||||
bind:value={name}
|
||||
placeholder={inventory.string.Category}
|
||||
maxWidth={'16rem'}
|
||||
|
||||
@ -80,6 +80,7 @@
|
||||
<Grid column={1} rowGap={1.75}>
|
||||
<EditBox
|
||||
label={inventory.string.Product}
|
||||
icon={inventory.icon.Products}
|
||||
bind:value={doc.name}
|
||||
placeholder={inventory.string.Product}
|
||||
maxWidth={'16rem'}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</script>
|
||||
|
||||
{#if value}
|
||||
<div class="sm-tool-icon">
|
||||
<div class="overflow-label sm-tool-icon">
|
||||
{value.name}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -38,46 +38,27 @@
|
||||
)
|
||||
</script>
|
||||
|
||||
<div class="flex-col statuses-container">
|
||||
<div class="antiPopup">
|
||||
<div class="ap-space" />
|
||||
{#each states as state}
|
||||
<div
|
||||
class="flex-row-center state"
|
||||
<button
|
||||
class="ap-menuItem ap-woScroll flex-row-center"
|
||||
on:click={() => {
|
||||
dispatch('close', state)
|
||||
}}
|
||||
>
|
||||
<div class="color" style="background-color: {getPlatformColor(state.color)}" />
|
||||
{state.title}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="ap-space" />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.statuses-container {
|
||||
padding: 0.5rem;
|
||||
max-height: 100%;
|
||||
min-width: 10rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: 0.75rem;
|
||||
user-select: none;
|
||||
filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
|
||||
|
||||
.state {
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
}
|
||||
.color {
|
||||
margin-right: 0.75rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
.color {
|
||||
margin-right: .75rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,16 +23,18 @@
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="flex-col popup">
|
||||
<div class="flex-row-center red-color menu-item" on:click={() => { dispatch('close'); onDelete() }}>
|
||||
<div class="antiPopup">
|
||||
<div class="ap-space" />
|
||||
<div class="ap-menuItem ap-woScroll flex-row-center redlight" on:click={() => { dispatch('close'); onDelete() }}>
|
||||
<div class="mr-3">
|
||||
<Delete size={'small'} />
|
||||
</div>
|
||||
<div class="flex-grow"><Label label={task.string.Delete} /></div>
|
||||
<Label label={task.string.Delete} />
|
||||
</div>
|
||||
<div class="ap-space" />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
<!-- <style lang="scss">
|
||||
.popup {
|
||||
padding: .5rem;
|
||||
min-width: 12rem;
|
||||
@ -51,4 +53,4 @@
|
||||
|
||||
&:hover { background-color: var(--theme-button-bg-hovered); }
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
||||
@ -57,9 +57,8 @@
|
||||
specBottomCount = bottomSpecials.length
|
||||
}
|
||||
if (model.spaces) spModelCount = model.spaces.length
|
||||
showDivider = (specTopCount > 0) ?? false
|
||||
|
||||
shownSpaces = spaces.filter(sp => !sp.archived)
|
||||
showDivider = (specTopCount > 0 && specBottomCount + spModelCount > 0) ? true : false
|
||||
}
|
||||
|
||||
$: if (model) update(model, spaces)
|
||||
|
||||
@ -29,75 +29,25 @@
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="flex-row-center container" class:selected={selected}
|
||||
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>
|
||||
{#each actions as action}
|
||||
<div class="tool">
|
||||
<div class="an-element__tool">
|
||||
<ActionIcon label={action.label} icon={action.icon} size={'small'} action={action.action} />
|
||||
</div>
|
||||
{/each}
|
||||
{#if notifications > 0}
|
||||
<div class="counter">{notifications}</div>
|
||||
<div class="an-element__counter">{notifications}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
margin: 0 16px;
|
||||
padding-left: 10px;
|
||||
padding-right: 12px;
|
||||
min-height: 36px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
border-radius: 8px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-right: 18px;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
span {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tool {
|
||||
margin-left: 12px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.counter {
|
||||
margin-left: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
.tool {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,31 +43,28 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="container"
|
||||
class:selected
|
||||
class:hovered
|
||||
<div class="antiNav-element" class:selected class:hovered
|
||||
on:click|stopPropagation={() => {
|
||||
if (node && !icon) collapsed = !collapsed
|
||||
dispatch('click')
|
||||
}}
|
||||
>
|
||||
<div class="icon" class:sub={!node}>
|
||||
<div class="an-element__icon" class:sub={!node}>
|
||||
{#if icon}
|
||||
<Icon {icon} size={'small'} />
|
||||
{:else if collapsed}<Collapsed size={'small'} />{:else}<Expanded size={'small'} />{/if}
|
||||
</div>
|
||||
<span class="label" class:sub={node}>
|
||||
<span class="an-element__label" class:title={node}>
|
||||
{#if label}<Label {label} />{:else}{title}{/if}
|
||||
</span>
|
||||
{#if node === false}
|
||||
<div class="tool" on:click|stopPropagation={onMenuClick}>
|
||||
<div class="an-element__tool" on:click|stopPropagation={onMenuClick}>
|
||||
<IconMoreV size={'small'} />
|
||||
</div>
|
||||
{:else}
|
||||
{#await actions() then actionItems}
|
||||
{#if actionItems.length === 1}
|
||||
<div class="tool">
|
||||
<div class="an-element__tool">
|
||||
<ActionIcon
|
||||
label={actionItems[0].label}
|
||||
icon={actionItems[0].icon}
|
||||
@ -78,81 +75,16 @@
|
||||
/>
|
||||
</div>
|
||||
{:else if actionItems.length > 1}
|
||||
<div class="tool" on:click|stopPropagation={onMenuClick}>
|
||||
<div class="an-element__tool" on:click|stopPropagation={onMenuClick}>
|
||||
<IconMoreV size={'small'} />
|
||||
</div>
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
{#if notifications > 0 && collapsed}
|
||||
<div class="counter">{notifications}</div>
|
||||
<div class="an-element__counter">{notifications}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if node && !icon && !collapsed}
|
||||
<div class="dropbox"><slot /></div>
|
||||
<div class="antiNav-element__dropbox"><slot /></div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 1rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 0.5rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
min-width: 1rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
margin: 0 1.125rem 0 0.625rem;
|
||||
&.sub {
|
||||
margin: 0 0.5rem 0 2.75rem;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
margin-right: 0.75rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
font-weight: 400;
|
||||
color: var(--theme-content-color);
|
||||
&.sub {
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
.tool {
|
||||
margin-right: 0.75rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
.counter {
|
||||
margin-right: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hovered {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
.tool {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--theme-menu-selection);
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropbox {
|
||||
height: auto;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user