local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: button styling

Browse source
This commit is contained in:
Dominik Pschenitschni 2022-05-11 01:15:08 +02:00 committed by Gitea
parent 3b9bc5b2f8
commit 02f985d8a3
9 changed files with 214 additions and 256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/list/list-view-list.spec.ts
View file

@ -61,7 +61,7 @@ describe('List View List', () => {
}) })
cy.visit(`/lists/${lists[1].id}/`) cy.visit(`/lists/${lists[1].id}/`)
cy.get('.list-title a.icon') cy.get('.list-title .icon')
.should('not.exist') .should('not.exist')
cy.get('input.input[placeholder="Add a new task..."') cy.get('input.input[placeholder="Add a new task..."')
.should('not.exist') .should('not.exist')

14
cypress/e2e/list/list.spec.ts
View file

@ -52,9 +52,9 @@ describe('Lists', () => {
cy.get('.list-title h1') cy.get('.list-title h1')
.should('contain', 'First List') .should('contain', 'First List')
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger') cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
.click() .click()
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content') cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
.contains('Edit') .contains('Edit')
.click() .click()
cy.get('#title') cy.get('#title')
@ -68,7 +68,7 @@ describe('Lists', () => {
cy.get('.list-title h1') cy.get('.list-title h1')
.should('contain', newListName) .should('contain', newListName)
.should('not.contain', lists[0].title) .should('not.contain', lists[0].title)
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child') cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
.should('contain', newListName) .should('contain', newListName)
.should('not.contain', lists[0].title) .should('not.contain', lists[0].title)
cy.visit('/') cy.visit('/')
@ -80,9 +80,9 @@ describe('Lists', () => {
it('Should remove a list', () => { it('Should remove a list', () => {
cy.visit(`/lists/${lists[0].id}`) cy.visit(`/lists/${lists[0].id}`)
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger') cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
.click() .click()
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content') cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
.contains('Delete') .contains('Delete')
.click() .click()
cy.url() cy.url()
@ -93,7 +93,7 @@ describe('Lists', () => {
cy.get('.global-notification') cy.get('.global-notification')
.should('contain', 'Success') .should('contain', 'Success')
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list') cy.get('.namespace-container .menu.namespaces-lists .menu-list')
.should('not.contain', lists[0].title) .should('not.contain', lists[0].title)
cy.location('pathname') cy.location('pathname')
.should('equal', '/') .should('equal', '/')
@ -112,7 +112,7 @@ describe('Lists', () => {
cy.get('.modal-content [data-cy=modalPrimary]') cy.get('.modal-content [data-cy=modalPrimary]')
.click() .click()
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list') cy.get('.namespace-container .menu.namespaces-lists .menu-list')
.should('not.contain', lists[0].title) .should('not.contain', lists[0].title)
cy.get('main.app-content') cy.get('main.app-content')
.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.') .should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')

124
src/components/home/navigation.vue
View file

@ -51,10 +51,7 @@
<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}"> <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
<template v-for="(n, nk) in namespaces" :key="n.id"> <template v-for="(n, nk) in namespaces" :key="n.id">
<div class="namespace-title" :class="{'has-menu': n.id > 0}"> <div class="namespace-title" :class="{'has-menu': n.id > 0}">
<!-- FIXME we shouldn't wrap with the clickable area and have another one inside aswell <BaseButton
@click should only be used on interactive elements
-->
<span
@click="toggleLists(n.id)" @click="toggleLists(n.id)"
class="menu-label" class="menu-label"
v-tooltip="namespaceTitles[nk]" v-tooltip="namespaceTitles[nk]"
@ -64,32 +61,25 @@
:style="{ backgroundColor: n.hexColor }" :style="{ backgroundColor: n.hexColor }"
class="color-bubble" class="color-bubble"
/> />
<span class="name"> <span class="name">{{ namespaceTitles[nk] }}</span>
{{ namespaceTitles[nk] }} <div
</span>
<BaseButton
class="icon is-small toggle-lists-icon pl-2" class="icon is-small toggle-lists-icon pl-2"
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}" :class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
@click="toggleLists(n.id)"
> >
<icon icon="chevron-down"/> <icon icon="chevron-down"/>
</BaseButton> </div>
<span class="count" :class="{'ml-2 mr-0': n.id > 0}"> <span class="count" :class="{'ml-2 mr-0': n.id > 0}">
({{ namespaceListsCount[nk] }}) ({{ namespaceListsCount[nk] }})
</span> </span>
</span> </BaseButton>
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/> <namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
</div> </div>
<div
v-if="listsVisible[n.id] ?? true"
:key="n.id + 'child'"
class="more-container"
>
<!-- <!--
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
triggered by the change needs to have access to the current namespace triggered by the change needs to have access to the current namespace
--> -->
<draggable <draggable
v-if="listsVisible[n.id] ?? true"
v-bind="dragOptions" v-bind="dragOptions"
:modelValue="activeLists[nk]" :modelValue="activeLists[nk]"
@update:modelValue="(lists) => updateActiveLists(n, lists)" @update:modelValue="(lists) => updateActiveLists(n, lists)"
@ -114,46 +104,36 @@
> >
<template #item="{element: l}"> <template #item="{element: l}">
<li <li
class="loader-container is-loading-small" class="list-menu loader-container is-loading-small"
:class="{'is-loading': listUpdating[l.id]}" :class="{'is-loading': listUpdating[l.id]}"
> >
<router-link <BaseButton
:to="{ name: 'list.index', params: { listId: l.id} }" :to="{ name: 'list.index', params: { listId: l.id} }"
v-slot="{ href, navigate, isActive }" class="list-menu-link"
custom :class="{'router-link-exact-active': currentList.id === l.id}"
> >
<a <span class="icon handle">
@click="navigate" <icon icon="grip-lines"/>
:href="href" </span>
class="list-menu-link" <span
:class="{'router-link-exact-active': isActive || currentList?.id === l.id}" :style="{ backgroundColor: l.hexColor }"
> class="color-bubble"
<span class="icon handle"> v-if="l.hexColor !== ''">
<icon icon="grip-lines"/> </span>
</span> <span class="list-menu-title">{{ getListTitle(l) }}</span>
<span </BaseButton>
:style="{ backgroundColor: l.hexColor }" <BaseButton
class="color-bubble" class="favorite"
v-if="l.hexColor !== ''"> :class="{'is-favorite': l.isFavorite}"
</span> @click="toggleFavoriteList(l)"
<span class="list-menu-title"> >
{{ getListTitle(l) }} <icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
</span> </BaseButton>
<!-- FIXME: we shouldn't use a button inside a link This can be unwrapped by using CSS -->
<BaseButton
:class="{'is-favorite': l.isFavorite}"
@click.prevent.stop="toggleFavoriteList(l)"
class="favorite">
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
</BaseButton>
</a>
</router-link>
<list-settings-dropdown :list="l" v-if="l.id > 0"/> <list-settings-dropdown :list="l" v-if="l.id > 0"/>
<span class="list-setting-spacer" v-else></span> <span class="list-setting-spacer" v-else></span>
</li> </li>
</template> </template>
</draggable> </draggable>
</div>
</template> </template>
</nav> </nav>
<PoweredByLink/> <PoweredByLink/>
@ -339,7 +319,7 @@ $vikunja-nav-selected-width: 0.4rem;
} }
.menu-label, .menu-label,
.menu-list span.list-menu-link, .menu-list .list-menu-link,
.menu-list a { .menu-list a {
display: flex; display: flex;
align-items: center; align-items: center;
@ -357,28 +337,21 @@ $vikunja-nav-selected-width: 0.4rem;
flex: 0 0 12px; flex: 0 0 12px;
} }
.favorite { }
margin-left: .25rem; .favorite {
transition: opacity $transition, color $transition; margin-left: .25rem;
opacity: 0; transition: opacity $transition, color $transition;
opacity: 0;
&:hover { &:hover,
color: var(--warning); &.is-favorite {
} color: var(--warning);
&.is-favorite {
opacity: 1;
color: var(--warning);
}
} }
}
&:hover .favorite { .favorite.is-favorite,
opacity: 1; .list-menu:hover .favorite {
} opacity: 1;
&:hover {
background: transparent;
}
} }
.menu-label { .menu-label {
@ -397,6 +370,8 @@ $vikunja-nav-selected-width: 0.4rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
color: $vikunja-nav-color;
padding: 0 .25rem;
.menu-label { .menu-label {
margin-bottom: 0; margin-bottom: 0;
@ -415,11 +390,6 @@ $vikunja-nav-selected-width: 0.4rem;
} }
} }
a:not(.dropdown-item) {
color: $vikunja-nav-color;
padding: 0 .25rem;
}
:deep(.dropdown-trigger) { :deep(.dropdown-trigger) {
padding: .5rem; padding: .5rem;
cursor: pointer; cursor: pointer;
@ -449,7 +419,7 @@ $vikunja-nav-selected-width: 0.4rem;
.menu-label, .menu-label,
.nsettings, .nsettings,
.menu-list span.list-menu-link, .menu-list .list-menu-link,
.menu-list a { .menu-list a {
color: $vikunja-nav-color; color: $vikunja-nav-color;
} }
@ -488,7 +458,11 @@ $vikunja-nav-selected-width: 0.4rem;
} }
} }
span.list-menu-link, li > a { a:hover {
background: transparent;
}
.list-menu-link, li > a {
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem); padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
transition: all 0.2s ease; transition: all 0.2s ease;
@ -561,7 +535,7 @@ $vikunja-nav-selected-width: 0.4rem;
font-family: $vikunja-font; font-family: $vikunja-font;
} }
span.list-menu-link, li > a { .list-menu-link, li > a {
padding-left: 2rem; padding-left: 2rem;
display: inline-block; display: inline-block;

220
src/components/input/datepicker.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="datepicker" :class="{'disabled': disabled}"> <div class="datepicker">
<BaseButton @click.stop="toggleDatePopup" class="show"> <BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
{{ date === null ? chooseDateLabel : formatDateShort(date) }} {{ date === null ? chooseDateLabel : formatDateShort(date) }}
</BaseButton> </BaseButton>
@ -9,83 +9,63 @@
<BaseButton <BaseButton
v-if="(new Date()).getHours() < 21" v-if="(new Date()).getHours() < 21"
class="datepicker__quick-select-date"
@click.stop="setDate('today')" @click.stop="setDate('today')"
> >
<span class="icon"> <span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
<icon :icon="['far', 'calendar-alt']"/>
</span>
<span class="text"> <span class="text">
<span> <span>{{ $t('input.datepicker.today') }}</span>
{{ $t('input.datepicker.today') }} <span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
</span>
<span class="weekday">
{{ getWeekdayFromStringInterval('today') }}
</span>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton @click.stop="() => setDate('tomorrow')"> <BaseButton
<span class="icon"> class="datepicker__quick-select-date"
<icon :icon="['far', 'sun']"/> @click.stop="setDate('tomorrow')"
</span> >
<span class="icon"><icon :icon="['far', 'sun']"/></span>
<span class="text"> <span class="text">
<span> <span>{{ $t('input.datepicker.tomorrow') }}</span>
{{ $t('input.datepicker.tomorrow') }} <span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
</span>
<span class="weekday">
{{ getWeekdayFromStringInterval('tomorrow') }}
</span>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton @click.stop="() => setDate('nextMonday')"> <BaseButton
<span class="icon"> class="datepicker__quick-select-date"
<icon icon="coffee"/> @click.stop="setDate('nextMonday')"
</span> >
<span class="icon"><icon icon="coffee"/></span>
<span class="text"> <span class="text">
<span> <span>{{ $t('input.datepicker.nextMonday') }}</span>
{{ $t('input.datepicker.nextMonday') }} <span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
</span>
<span class="weekday">
{{ getWeekdayFromStringInterval('nextMonday') }}
</span>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton @click.stop="() => setDate('thisWeekend')"> <BaseButton
<span class="icon"> class="datepicker__quick-select-date"
<icon icon="cocktail"/> @click.stop="setDate('thisWeekend')"
</span> >
<span class="icon"><icon icon="cocktail"/></span>
<span class="text"> <span class="text">
<span> <span>{{ $t('input.datepicker.thisWeekend') }}</span>
{{ $t('input.datepicker.thisWeekend') }} <span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
</span>
<span class="weekday">
{{ getWeekdayFromStringInterval('thisWeekend') }}
</span>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton @click.stop="() => setDate('laterThisWeek')"> <BaseButton
<span class="icon"> class="datepicker__quick-select-date"
<icon icon="chess-knight"/> @click.stop="setDate('laterThisWeek')"
</span> >
<span class="icon"><icon icon="chess-knight"/></span>
<span class="text"> <span class="text">
<span> <span>{{ $t('input.datepicker.laterThisWeek') }}</span>
{{ $t('input.datepicker.laterThisWeek') }} <span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
</span>
<span class="weekday">
{{ getWeekdayFromStringInterval('laterThisWeek') }}
</span>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton @click.stop="() => setDate('nextWeek')"> <BaseButton
<span class="icon"> class="datepicker__quick-select-date"
<icon icon="forward"/> @click.stop="setDate('nextWeek')"
</span> >
<span class="icon"><icon icon="forward"/></span>
<span class="text"> <span class="text">
<span> <span>{{ $t('input.datepicker.nextWeek') }}</span>
{{ $t('input.datepicker.nextWeek') }} <span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
</span>
<span class="weekday">
{{ getWeekdayFromStringInterval('nextWeek') }}
</span>
</span> </span>
</BaseButton> </BaseButton>
@ -96,7 +76,7 @@
/> />
<x-button <x-button
class="is-fullwidth" class="datepicker__close-button is-fullwidth"
:shadow="false" :shadow="false"
@click="close" @click="close"
v-cy="'closeDatepicker'" v-cy="'closeDatepicker'"
@ -264,68 +244,64 @@ export default defineComponent({
input.input { input.input {
display: none; display: none;
} }
}
&.disabled a { .datepicker-popup {
cursor: default; position: absolute;
} z-index: 99;
width: 320px;
background: var(--white);
border-radius: $radius;
box-shadow: $shadow;
.datepicker-popup { @media screen and (max-width: ($tablet)) {
position: absolute; width: calc(100vw - 5rem);
z-index: 99;
width: 320px;
background: var(--white);
border-radius: $radius;
box-shadow: $shadow;
@media screen and (max-width: ($tablet)) {
width: calc(100vw - 5rem);
}
a:not(.button) {
display: flex;
align-items: center;
padding: 0 .5rem;
width: 100%;
height: 2.25rem;
color: var(--text);
transition: all $transition;
&:first-child {
border-radius: $radius $radius 0 0;
}
&:hover {
background: var(--grey-100);
}
.text {
width: 100%;
font-size: .85rem;
display: flex;
justify-content: space-between;
padding-right: .25rem;
.weekday {
color: var(--text-light);
text-transform: capitalize;
}
}
.icon {
width: 2rem;
text-align: center;
}
}
a.button {
margin: 1rem;
width: calc(100% - 2rem);
}
:deep(.flatpickr-calendar) {
margin: 0 auto 8px;
box-shadow: none;
}
} }
} }
.datepicker__quick-select-date {
display: flex;
align-items: center;
padding: 0 .5rem;
width: 100%;
height: 2.25rem;
color: var(--text);
transition: all $transition;
&:first-child {
border-radius: $radius $radius 0 0;
}
&:hover {
background: var(--grey-100);
}
.text {
width: 100%;
font-size: .85rem;
display: flex;
justify-content: space-between;
padding-right: .25rem;
.weekday {
color: var(--text-light);
text-transform: capitalize;
}
}
.icon {
width: 2rem;
text-align: center;
}
}
.datepicker__close-button {
margin: 1rem;
width: calc(100% - 2rem);
}
:deep(.flatpickr-calendar) {
margin: 0 auto 8px;
box-shadow: none;
}
</style> </style>

82
src/components/list/partials/list-card.vue
View file

@ -15,20 +15,21 @@
<div <div
class="list-background background-fade-in" class="list-background background-fade-in"
:class="{'is-visible': background}" :class="{'is-visible': background}"
:style="{'background-image': background !== null ? `url(${background})` : false}"></div> :style="{'background-image': background !== null ? `url(${background})` : undefined}"
/>
<div class="list-content"> <div class="list-content">
<div class="is-archived-container"> <span class="is-archived" v-if="list.isArchived">
<span class="is-archived" v-if="list.isArchived"> {{ $t('namespace.archived') }}
{{ $t('namespace.archived') }} </span>
</span> <BaseButton
<BaseButton v-else
:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}" :class="{'is-favorite': list.isFavorite}"
@click.stop="toggleFavoriteList(list)" @click.stop="toggleFavoriteList(list)"
class="favorite" class="favorite"
> >
<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/> <icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
</BaseButton> </BaseButton>
</div>
<div class="title">{{ list.title }}</div> <div class="title">{{ list.title }}</div>
</div> </div>
</router-link> </router-link>
@ -112,13 +113,14 @@ function toggleFavoriteList(list: ListModel) {
color: var(--grey-100); color: var(--grey-100);
} }
&.has-background, .list-background { &.has-background,
.list-background {
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
&.has-background .list-content .title { &.has-background .title {
text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700); text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
color: var(--white); color: var(--white);
} }
@ -179,23 +181,35 @@ function toggleFavoriteList(list: ListModel) {
.list-content { .list-content {
display: flex; display: flex;
justify-content: space-between; align-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding: 1rem; padding: 1rem;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
.is-archived-container {
width: 100%;
text-align: right;
.is-archived { .is-archived {
font-size: .75rem; font-size: .75rem;
float: left; }
.favorite {
margin-left: auto;
transition: opacity $transition, color $transition;
opacity: 0;
display: block;
&:hover,
&.is-favorite {
color: var(--warning);
} }
} }
.favorite.is-favorite,
&:hover .favorite {
opacity: 1;
}
.title { .title {
align-self: flex-end; align-self: flex-end;
font-family: $vikunja-font; font-family: $vikunja-font;
@ -212,30 +226,6 @@ function toggleFavoriteList(list: ListModel) {
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.favorite {
transition: opacity $transition, color $transition;
opacity: 0;
&:hover {
color: var(--warning);
}
&.is-archived {
display: none;
}
&.is-favorite {
display: inline-block;
opacity: 1;
color: var(--warning);
}
}
&:hover .favorite {
opacity: 1;
}
} }
} }
</style> </style>

7
src/components/misc/api-config.vue
View file

@ -27,7 +27,7 @@
<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span> <span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
</i18n-t> </i18n-t>
<br/> <br/>
<BaseButton @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</BaseButton> <BaseButton class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</BaseButton>
</div> </div>
<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2"> <message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
@ -118,4 +118,9 @@ async function setApiUrl() {
.url { .url {
border-bottom: 1px dashed var(--primary); border-bottom: 1px dashed var(--primary);
} }
.api-config__change-button {
display: inline-block;
color: var(--link);
}
</style> </style>

2
src/components/misc/error.vue
View file

@ -2,7 +2,7 @@
<message variant="danger"> <message variant="danger">
<i18n-t keypath="loadingError.failed"> <i18n-t keypath="loadingError.failed">
<BaseButton @click="reload">{{ $t('loadingError.tryAgain') }}</BaseButton> <BaseButton @click="reload">{{ $t('loadingError.tryAgain') }}</BaseButton>
<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a> <BaseButton href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</BaseButton>
</i18n-t> </i18n-t>
</message> </message>
</template> </template>

13
src/components/tasks/partials/attachments.vue
View file

@ -57,20 +57,23 @@
</p> </p>
<p> <p>
<BaseButton <BaseButton
class="attachment-info-meta-button"
@click.prevent.stop="downloadAttachment(a)" @click.prevent.stop="downloadAttachment(a)"
v-tooltip="$t('task.attachment.downloadTooltip')" v-tooltip="$t('task.attachment.downloadTooltip')"
> >
{{ $t('misc.download') }} {{ $t('misc.download') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="attachment-info-meta-button"
@click.stop="copyUrl(a)" @click.stop="copyUrl(a)"
v-tooltip="$t('task.attachment.copyUrlTooltip')" v-tooltip="$t('task.attachment.copyUrlTooltip')"
> >
{{ $t('task.attachment.copyUrl') }} {{ $t('task.attachment.copyUrl') }}
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
v-if="editEnabled" v-if="editEnabled"
class="attachment-info-meta-button"
@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
v-tooltip="$t('task.attachment.deleteTooltip')" v-tooltip="$t('task.attachment.deleteTooltip')"
> >
{{ $t('misc.delete') }} {{ $t('misc.delete') }}
@ -303,7 +306,7 @@ export default defineComponent({
display: flex; display: flex;
> span:not(:last-child):after, > span:not(:last-child):after,
> a:not(:last-child):after { > button:not(:last-child):after {
content: '·'; content: '·';
padding: 0 .25rem; padding: 0 .25rem;
} }
@ -383,7 +386,7 @@ export default defineComponent({
} }
> span:not(:last-child):after, > span:not(:last-child):after,
> a:not(:last-child):after { > button:not(:last-child):after {
display: none; display: none;
} }
@ -393,6 +396,10 @@ export default defineComponent({
} }
} }
.attachment-info-meta-button {
color: var(--link);
}
@keyframes bounce { @keyframes bounce {
from, from,
20%, 20%,

6
src/components/tasks/partials/singleTaskInList.vue
View file

@ -41,6 +41,7 @@
/> />
<BaseButton <BaseButton
v-if="+new Date(task.dueDate) > 0" v-if="+new Date(task.dueDate) > 0"
class="dueDate"
@click.prevent.stop="showDefer = !showDefer" @click.prevent.stop="showDefer = !showDefer"
v-tooltip="formatDate(task.dueDate)" v-tooltip="formatDate(task.dueDate)"
> >
@ -254,6 +255,11 @@ export default defineComponent({
display: inline-block; display: inline-block;
flex: 1 0 50%; flex: 1 0 50%;
.dueDate {
display: inline-block;
margin-left: 5px;
}
.overdue { .overdue {
color: var(--danger); color: var(--danger);
} }