ami/tl-vikunja
1
0
Fork 0
Code

feat: group navigation styles further

Browse Source
This commit is contained in:
Dominik Pschenitschni 2022-11-13 22:36:11 +01:00 committed by Gitea
parent ff9efe7889
commit 4fc7b9c67e
2 changed files with 81 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/home/navigation.vue
View File

@ -72,7 +72,7 @@
({{ namespaceListsCount[nk] }})
</span>
</BaseButton>
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>
</div>
<!--
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
@ -128,7 +128,7 @@
>
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
</BaseButton>
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0" />
<span class="list-setting-spacer" v-else></span>
</li>
</template>
@ -318,21 +318,6 @@ $vikunja-nav-selected-width: 0.4rem;
}
.menu {
// good
.menu-label {
font-size: 1rem;
font-weight: 700;
font-weight: bold;
font-family: $vikunja-font;
color: $vikunja-nav-color;
font-weight: 500;
min-height: 2.5rem;
padding-top: 0;
padding-left: $navbar-padding;
overflow: hidden;
}
.menu-label,
.menu-list .list-menu-link,
.menu-list a {
@ -341,45 +326,10 @@ $vikunja-nav-selected-width: 0.4rem;
justify-content: space-between;
cursor: pointer;
// good
.list-menu-title {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.color-bubble {
height: 12px;
flex: 0 0 12px;
}
}
.favorite {
margin-left: .25rem;
transition: opacity $transition, color $transition;
opacity: 0;
&:hover,
&.is-favorite {
color: var(--warning);
}
}
.favorite.is-favorite,
.list-menu:hover .favorite {
opacity: 1;
}
.menu-label {
.color-bubble {
width: 14px;
height: 14px;
flex-basis: auto;
}
.is-archived {
min-width: 85px;
}
}
.menu-label,
@ -399,14 +349,12 @@ $vikunja-nav-selected-width: 0.4rem;
background: var(--white);
}
:deep(.dropdown-trigger) {
.menu-list-dropdown {
opacity: 0;
padding: .5rem;
cursor: pointer;
transition: $transition;
}
&:hover :deep(.dropdown-trigger) {
&:hover .menu-list-dropdown {
opacity: 1;
}
}
@ -499,14 +447,18 @@ $vikunja-nav-selected-width: 0.4rem;
.namespaces-lists {
padding-top: math.div($navbar-padding, 2);
.namespace-title {
display: flex;
align-items: center;
justify-content: space-between;
color: $vikunja-nav-color;
padding: 0 .25rem;
.menu-label {
font-size: 1rem;
font-weight: 700;
font-weight: bold;
font-family: $vikunja-font;
color: $vikunja-nav-color;
font-weight: 500;
min-height: 2.5rem;
padding-top: 0;
padding-left: $navbar-padding;
overflow: hidden;
margin-bottom: 0;
flex: 1 1 auto;
@ -523,10 +475,45 @@ $vikunja-nav-selected-width: 0.4rem;
}
}
:deep(.dropdown-trigger) {
padding: .5rem;
cursor: pointer;
.favorite {
margin-left: .25rem;
transition: opacity $transition, color $transition;
opacity: 0;
&:hover,
&.is-favorite {
color: var(--warning);
}
}
.favorite.is-favorite,
.list-menu:hover .favorite {
opacity: 1;
}
.list-menu-title {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.color-bubble {
width: 14px;
height: 14px;
flex-basis: auto;
}
.is-archived {
min-width: 85px;
}
}
.namespace-title {
display: flex;
align-items: center;
justify-content: space-between;
color: $vikunja-nav-color;
padding: 0 .25rem;
.toggle-lists-icon {
svg {
@ -548,7 +535,6 @@ $vikunja-nav-selected-width: 0.4rem;
&:not(.has-menu) .toggle-lists-icon {
padding-right: 1rem;
}
}
}
.list-setting-spacer {

4
src/components/misc/dropdown.vue
View File

@ -59,6 +59,10 @@ onClickOutside(dropdown, (e: Event) => {
vertical-align: top;
}
.dropdown-trigger {
padding: .5rem;
}
.dropdown-menu {
min-width: 12rem;
padding-top: 4px;