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