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

fix: icon offset and color
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Dominik Pschenitschni 2022-11-18 13:59:38 +01:00 committed by Gitea
parent 3282f55c34
commit 74ad98de68
6 changed files with 53 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/e2e/list/list.spec.ts
View File

@ -52,7 +52,7 @@ describe('Lists', () => {
cy.get('.list-title h1')
.should('contain', 'First List')
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
.click()
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
.contains('Edit')
@ -80,7 +80,7 @@ describe('Lists', () => {
it('Should remove a list', () => {
cy.visit(`/lists/${lists[0].id}`)
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
.click()
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
.contains('Delete')

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

@ -7,7 +7,7 @@
<ul class="menu-list">
<li>
<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
<span class="icon">
<span class="menu-item-icon icon">
<icon icon="calendar"/>
</span>
{{ $t('navigation.overview') }}
@ -15,7 +15,7 @@
</li>
<li>
<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
<span class="icon">
<span class="menu-item-icon icon">
<icon :icon="['far', 'calendar-alt']"/>
</span>
{{ $t('navigation.upcoming') }}
@ -23,7 +23,7 @@
</li>
<li>
<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
<span class="icon">
<span class="menu-item-icon icon">
<icon icon="layer-group"/>
</span>
{{ $t('namespace.title') }}
@ -31,7 +31,7 @@
</li>
<li>
<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
<span class="icon">
<span class="menu-item-icon icon">
<icon icon="tags"/>
</span>
{{ $t('label.title') }}
@ -39,7 +39,7 @@
</li>
<li>
<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
<span class="icon">
<span class="menu-item-icon icon">
<icon icon="users"/>
</span>
{{ $t('team.title') }}
@ -63,7 +63,7 @@
/>
<span class="name">{{ namespaceTitles[nk] }}</span>
<div
class="icon is-small toggle-lists-icon pl-2"
class="icon menu-item-icon is-small toggle-lists-icon pl-2"
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
>
<icon icon="chevron-down"/>
@ -111,7 +111,7 @@
class="list-menu-link"
:class="{'router-link-exact-active': currentList.id === l.id}"
>
<span class="icon handle">
<span class="icon menu-item-icon handle">
<icon icon="grip-lines"/>
</span>
<ColorBubble
@ -128,7 +128,13 @@
>
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
</BaseButton>
<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0" />
<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0">
<template #trigger="{toggleOpen}">
<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
<icon icon="ellipsis-h" class="icon"/>
</BaseButton>
</template>
</list-settings-dropdown>
<span class="list-setting-spacer" v-else></span>
</li>
</template>
@ -354,6 +360,15 @@ $vikunja-nav-selected-width: 0.4rem;
}
}
.menu-item-icon {
color: var(--grey-400);
}
.menu-list-dropdown-trigger {
display: flex;
padding: 0.5rem;
}
.flip-list-move {
transition: transform $transition-duration;
}
@ -398,25 +413,21 @@ $vikunja-nav-selected-width: 0.4rem;
padding-right: 0.5rem;
}
&.router-link-exact-active .icon {
&.router-link-exact-active .icon:not(.handle) {
color: var(--primary);
}
.icon.handle {
.handle {
opacity: 0;
transition: opacity $transition;
margin-right: .25rem;
cursor: grab;
}
&:hover .icon.handle {
&:hover .handle {
opacity: 1;
}
}
}
.icon {
color: var(--grey-400) !important;
}
}
.top-menu {

11
src/components/list/list-settings-dropdown.vue
View File

@ -1,5 +1,13 @@
<template>
<dropdown>
<template #trigger="triggerProps">
<slot name="trigger" v-bind="triggerProps">
<BaseButton class="dropdown-trigger" @click="triggerProps.toggleOpen">
<icon icon="ellipsis-h" class="icon"/>
</BaseButton>
</slot>
</template>
<template v-if="isSavedFilter(list)">
<dropdown-item
:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
@ -78,6 +86,7 @@
<script setup lang="ts">
import {ref, computed, watchEffect, type PropType} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Dropdown from '@/components/misc/dropdown.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
import Subscription from '@/components/misc/subscription.vue'
@ -115,4 +124,4 @@ function setSubscriptionInStore(sub: ISubscription) {
listStore.setList(updatedList)
namespaceStore.setListInNamespaceById(updatedList)
}
</script>
</script>

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

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

15
src/components/namespace/namespace-settings-dropdown.vue
View File

@ -1,5 +1,13 @@
<template>
<dropdown>
<template #trigger="triggerProps">
<slot name="trigger" v-bind="triggerProps">
<BaseButton class="dropdown-trigger" @click="triggerProps.toggleOpen">
<icon icon="ellipsis-h" class="icon"/>
</BaseButton>
</slot>
</template>
<template v-if="namespace.isArchived">
<dropdown-item
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
@ -56,6 +64,7 @@
<script setup lang="ts">
import {ref, onMounted, type PropType} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Dropdown from '@/components/misc/dropdown.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
import Subscription from '@/components/misc/subscription.vue'
@ -85,3 +94,9 @@ function setSubscriptionInStore(sub: ISubscription) {
})
}
</script>
<style scoped lang="scss">
.dropdown-trigger {
padding: 0.5rem;
}
</style>

1
src/views/list/ListKanban.vue
View File

@ -750,7 +750,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
:deep(.dropdown-trigger) {
cursor: pointer;
padding: .5rem;
}