vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: replace color dot with handle icon on hover

This commit is contained in:
kolaente 2023-04-14 17:06:20 +02:00
parent a342ae67de
commit a3e2cbeb27
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/home/ProjectsNavigationItem.vue
View File

@ -16,15 +16,22 @@
class="list-menu-link"
:class="{'router-link-exact-active': currentProject.id === project.id}"
>
<span class="collapse-project-button-placeholder" v-if="!canCollapse || childProjects?.length === 0"></span>
<ColorBubble
v-if="project.hexColor !== ''"
:color="project.hexColor"
class="handle"
/>
<span class="icon menu-item-icon handle" v-else>
<icon icon="grip-lines"/>
</span>
<span
v-if="!canCollapse || childProjects?.length === 0"
class="collapse-project-button-placeholder"
></span>
<div class="color-bubble-handle-wrapper">
<ColorBubble
v-if="project.hexColor !== ''"
:color="project.hexColor"
/>
<span
class="icon menu-item-icon handle lines-handle"
:class="{'has-color-bubble': project.hexColor !== ''}"
>
<icon icon="grip-lines"/>
</span>
</div>
<span class="list-menu-title">{{ getProjectTitle(project) }}</span>
</BaseButton>
<BaseButton
@ -124,4 +131,26 @@ const canNestDeeper = computed(() => {
.list-menu:hover > div > .favorite {
opacity: 1;
}
.list-menu:hover > div > a > .color-bubble-handle-wrapper > .color-bubble {
opacity: 0;
}
.color-bubble-handle-wrapper {
position: relative;
width: 1rem;
height: 1rem;
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: .25rem;
.color-bubble, .icon {
transition: all $transition;
position: absolute;
width: 12px;
margin: 0 !important;
padding: 0 !important;
}
}
</style>