wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-22 00:10:37 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fixed NavItem layout (#6675)

Browse Source
This commit is contained in:
Alexander Platov 2024-09-23 08:57:35 +07:00 committed by GitHub
parent 52ac3fee30
commit f998dc6faa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/ui/src/components/NavItem.svelte
View File

@ -61,7 +61,6 @@
let levelReset: boolean = false let levelReset: boolean = false
let hovered: boolean = false let hovered: boolean = false
$: showArrow = selected && (type === 'type-link' || type === 'type-object')
$: if (!showMenu && levelReset && !hovered) levelReset = false $: if (!showMenu && levelReset && !hovered) levelReset = false
$: isOpen = !getTreeCollapsed(_id, collapsedPrefix) $: isOpen = !getTreeCollapsed(_id, collapsedPrefix)
$: setTreeCollapsed(_id, !isOpen, collapsedPrefix) $: setTreeCollapsed(_id, !isOpen, collapsedPrefix)
@ -147,14 +146,11 @@
</div> </div>
{/if} {/if}
{#if count !== null} {#if count !== null}
<span class="hulyNavItem-count font-regular-12"> <span class="hulyNavItem-count font-bold-12">
{count} {count}
</span> </span>
{/if} {/if}
<slot name="notify" /> <slot name="notify" />
{#if showArrow}
<div class="hulyNavItem-icon right"><IconOpenedArrow size={'small'} /></div>
{/if}
</button> </button>
{#if (isFold && (isOpen || (!isOpen && visible)) && !empty) || forciblyСollapsed} {#if (isFold && (isOpen || (!isOpen && visible)) && !empty) || forciblyСollapsed}
<div class="hulyNavItem-dropbox"> <div class="hulyNavItem-dropbox">
@ -202,6 +198,7 @@
} }
} }
.hulyNavItem-icon { .hulyNavItem-icon {
margin-right: var(--spacing-1);
width: var(--global-min-Size); width: var(--global-min-Size);
height: var(--global-min-Size); height: var(--global-min-Size);
color: var(--global-primary-TextColor); color: var(--global-primary-TextColor);
@ -212,14 +209,6 @@
height: 0.625rem; height: 0.625rem;
border-radius: var(--min-BorderRadius); border-radius: var(--min-BorderRadius);
} }
&.right {
visibility: hidden;
margin-left: var(--spacing-0_5);
color: var(--global-accent-IconColor);
}
&:not(.right) {
margin-right: var(--spacing-1);
}
&.withBackground { &.withBackground {
width: var(--global-extra-small-Size); width: var(--global-extra-small-Size);
height: var(--global-extra-small-Size); height: var(--global-extra-small-Size);
@ -245,12 +234,9 @@
gap: var(--spacing-0_25); gap: var(--spacing-0_25);
} }
.hulyNavItem-count { .hulyNavItem-count {
margin-left: var(--spacing-1); margin: 0 var(--spacing-1);
color: var(--global-tertiary-TextColor); color: var(--global-tertiary-TextColor);
} }
&:not(.selected) .hulyNavItem-count {
margin-right: var(--spacing-1);
}
&:not(.selected):hover, &:not(.selected):hover,
&:not(.selected).showMenu { &:not(.selected).showMenu {
background-color: var(--global-ui-hover-highlight-BackgroundColor); background-color: var(--global-ui-hover-highlight-BackgroundColor);
@ -259,27 +245,15 @@
cursor: default; cursor: default;
background-color: var(--global-ui-highlight-BackgroundColor); background-color: var(--global-ui-highlight-BackgroundColor);
// &:not(.type-anchor-link) .hulyNavItem-label:not(.description) {
// font-weight: 700;
// }
.hulyNavItem-actions {
order: 1;
margin-left: var(--spacing-0_5);
}
.hulyNavItem-count { .hulyNavItem-count {
color: var(--global-secondary-TextColor); color: var(--global-secondary-TextColor);
} }
} }
// &.bold:not(.type-anchor-link) .hulyNavItem-label:not(.description) {
// font-weight: 700;
// }
&.type-link { &.type-link {
padding: 0 var(--spacing-0_5) 0 var(--spacing-1_25); padding: 0 var(--spacing-0_5) 0 var(--spacing-1_25);
&.selected { &.selected {
padding: 0 var(--spacing-0_75) 0 var(--spacing-1_25);
&.indent { &.indent {
padding-left: var(--spacing-4); padding-left: var(--spacing-4);
} }
@ -289,9 +263,6 @@
.hulyNavItem-label:not(.description) { .hulyNavItem-label:not(.description) {
color: var(--global-accent-TextColor); color: var(--global-accent-TextColor);
} }
.hulyNavItem-icon.right {
visibility: visible;
}
} }
} }
&.type-tag { &.type-tag {
@ -303,17 +274,14 @@
} }
} }
&.type-object { &.type-object {
padding: 0 var(--spacing-0_5) 0 var(--spacing-0_5); padding: 0 var(--spacing-0_5);
.hulyNavItem-icon { .hulyNavItem-icon {
margin-right: var(--spacing-0_75);
width: var(--global-extra-small-Size); width: var(--global-extra-small-Size);
height: var(--global-extra-small-Size); height: var(--global-extra-small-Size);
background-color: var(--global-ui-BackgroundColor);
&:not(.right) { border-radius: var(--extra-small-BorderRadius);
margin-right: var(--spacing-0_75);
background-color: var(--global-ui-BackgroundColor);
border-radius: var(--extra-small-BorderRadius);
}
} }
&.selected { &.selected {
.hulyNavItem-label:not(.description) { .hulyNavItem-label:not(.description) {
@ -321,10 +289,6 @@
} }
.hulyNavItem-icon { .hulyNavItem-icon {
color: var(--global-accent-TextColor); color: var(--global-accent-TextColor);
&.right {
visibility: visible;
}
} }
} }
} }
@ -353,14 +317,9 @@
background-color: var(--button-tertiary-hover-BackgroundColor); background-color: var(--button-tertiary-hover-BackgroundColor);
} }
&:not(.noActions):hover, &:not(.noActions):hover .hulyNavItem-actions,
&:not(.noActions).showMenu { &:not(.noActions).showMenu .hulyNavItem-actions {
.hulyNavItem-actions { display: flex;
display: flex;
}
.hulyNavItem-icon.right {
display: none;
}
} }
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;