ami/tl-vikunja
1
0
Fork 0
Code

fix: stop revealing elements on hover if hover is not supported (#3191)

Browse Source 
Resolves #3162

Co-authored-by: Dan Stewart <git@mail.danstewart.dev>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/3191
Reviewed-by: konrad <k@knt.li>
Co-authored-by: danstewart <danstewart@noreply.kolaente.de>
Co-committed-by: danstewart <danstewart@noreply.kolaente.de>
This commit is contained in:
danstewart 2023-03-04 16:13:31 +00:00 committed by konrad
parent ad0029789d
commit 7b6f76d1b4
3 changed files with 53 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -221,7 +221,7 @@ function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
// This is a bit hacky: since we do have to filter out the archived items from the list // This is a bit hacky: since we do have to filter out the archived items from the list
// for vue draggable updating it is not as simple as replacing it. // for vue draggable updating it is not as simple as replacing it.
// To work around this, we merge the active lists with the archived ones. Doing so breaks the order // To work around this, we merge the active lists with the archived ones. Doing so breaks the order
// because now all archived lists are sorted after the active ones. This is fine because they are sorted // because now all archived lists are sorted after the active ones. This is fine because they are sorted
// later when showing them anyway, and it makes the merging happening here a lot easier. // later when showing them anyway, and it makes the merging happening here a lot easier.
const lists = [ const lists = [
...activeLists, ...activeLists,
@ -246,8 +246,8 @@ async function saveListPosition(e: SortableEvent) {
// If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive // If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive
// array instead of using the position. Because the index is wrong in that case, dragging the list will fail. // array instead of using the position. Because the index is wrong in that case, dragging the list will fail.
// To work around that we're explicitly checking that case here and decrease the index. // To work around that we're explicitly checking that case here and decrease the index.
const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex
const list = listsActive[newIndex] const list = listsActive[newIndex]
const listBefore = listsActive[newIndex - 1] ?? null const listBefore = listsActive[newIndex - 1] ?? null
const listAfter = listsActive[newIndex + 1] ?? null const listAfter = listsActive[newIndex + 1] ?? null
@ -342,13 +342,20 @@ $vikunja-nav-selected-width: 0.4rem;
} }
.menu-list-dropdown { .menu-list-dropdown {
opacity: 0; opacity: 1;
transition: $transition; transition: $transition;
} }
&:hover .menu-list-dropdown { @media(hover: hover) and (pointer: fine) {
opacity: 1; .menu-list-dropdown {
opacity: 0;
}
&:hover .menu-list-dropdown {
opacity: 1;
}
} }
} }
.menu-item-icon { .menu-item-icon {
@ -418,7 +425,6 @@ $vikunja-nav-selected-width: 0.4rem;
opacity: 1; opacity: 1;
} }
} }
&:not(.dragging-disabled) .handle { &:not(.dragging-disabled) .handle {
cursor: grab; cursor: grab;
} }
@ -427,7 +433,7 @@ $vikunja-nav-selected-width: 0.4rem;
.top-menu { .top-menu {
margin-top: math.div($navbar-padding, 2); margin-top: math.div($navbar-padding, 2);
.menu-list { .menu-list {
li { li {
font-weight: 600; font-weight: 600;
@ -482,17 +488,24 @@ $vikunja-nav-selected-width: 0.4rem;
.favorite { .favorite {
margin-left: .25rem; margin-left: .25rem;
transition: opacity $transition, color $transition; transition: opacity $transition, color $transition;
opacity: 0; opacity: 1;
&:hover,
&.is-favorite { &.is-favorite {
color: var(--warning); color: var(--warning);
opacity: 1;
} }
} }
.favorite.is-favorite,
.list-menu:hover .favorite { @media(hover: hover) and (pointer: fine) {
opacity: 1; .list-menu .favorite {
opacity: 0;
}
.list-menu:hover .favorite,
.favorite.is-favorite {
opacity: 1;
}
} }
.list-menu-title { .list-menu-title {

14
src/components/list/partials/ListCard.vue
View File

@ -147,7 +147,7 @@ const listStore = useListStore()
top: var(--list-card-padding); top: var(--list-card-padding);
right: var(--list-card-padding); right: var(--list-card-padding);
transition: opacity $transition, color $transition; transition: opacity $transition, color $transition;
opacity: 0; opacity: 1;
&:hover { &:hover {
color: var(--warning); color: var(--warning);
@ -160,8 +160,14 @@ const listStore = useListStore()
} }
} }
.list-card:hover .favorite { @media(hover: hover) and (pointer: fine) {
opacity: 1; .list-card .favorite {
opacity: 0;
}
.list-card:hover .favorite {
opacity: 1;
}
} }
.background-fade-in { .background-fade-in {
@ -173,4 +179,4 @@ const listStore = useListStore()
opacity: 1; opacity: 1;
} }
} }
</style> </style>

29
src/components/tasks/partials/singleTaskInList.vue
View File

@ -9,13 +9,13 @@
@change="markAsDone" @change="markAsDone"
v-model="task.done" v-model="task.done"
/> />
<ColorBubble <ColorBubble
v-if="showListColor && listColor !== '' && currentList.id !== task.listId" v-if="showListColor && listColor !== '' && currentList.id !== task.listId"
:color="listColor" :color="listColor"
class="mr-1" class="mr-1"
/> />
<div <div
:class="{ 'done': task.done, 'show-list': showList && taskList !== null}" :class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
class="tasktext" class="tasktext"
@ -287,7 +287,7 @@ function hideDeferDueDatePopup(e) {
cursor: pointer; cursor: pointer;
border-radius: $radius; border-radius: $radius;
border: 2px solid transparent; border: 2px solid transparent;
color: var(--text); color: var(--text);
transition: color ease $transition-duration; transition: color ease $transition-duration;
@ -339,7 +339,7 @@ function hideDeferDueDatePopup(e) {
} }
.favorite { .favorite {
opacity: 0; opacity: 1;
text-align: center; text-align: center;
width: 27px; width: 27px;
transition: opacity $transition, color $transition; transition: opacity $transition, color $transition;
@ -354,21 +354,26 @@ function hideDeferDueDatePopup(e) {
} }
} }
&:hover .favorite {
opacity: 1;
}
.handle { .handle {
opacity: 0; opacity: 1;
transition: opacity $transition; transition: opacity $transition;
margin-right: .25rem; margin-right: .25rem;
cursor: grab; cursor: grab;
} }
&:hover .handle { @media(hover: hover) and (pointer: fine) {
opacity: 1; & .favorite,
& .handle {
opacity: 0;
}
&:hover .favorite,
&:hover .handle {
opacity: 1;
}
} }
:deep(.fancycheckbox) { :deep(.fancycheckbox) {
height: 18px; height: 18px;
padding-top: 0; padding-top: 0;
@ -420,4 +425,4 @@ function hideDeferDueDatePopup(e) {
margin-bottom: 0; margin-bottom: 0;
} }
} }
</style> </style>