This commit is contained in:
parent
0aa7024845
commit
8d105df3f8
GPG Key ID:
B257AC0149F43A77
|
|
@ -51,7 +51,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')
|
||||||
|
|
|
||||||
|
|
@ -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', '/')
|
||||||
|
|
|
||||||
|
|
@ -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,19 +104,13 @@
|
||||||
>
|
>
|
||||||
<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 }"
|
|
||||||
custom
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
@click="navigate"
|
|
||||||
:href="href"
|
|
||||||
class="list-menu-link"
|
class="list-menu-link"
|
||||||
:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
|
:class="{'router-link-exact-active': currentList.id === l.id}"
|
||||||
>
|
>
|
||||||
<span class="icon handle">
|
<span class="icon handle">
|
||||||
<icon icon="grip-lines"/>
|
<icon icon="grip-lines"/>
|
||||||
|
|
@ -136,24 +120,20 @@
|
||||||
class="color-bubble"
|
class="color-bubble"
|
||||||
v-if="l.hexColor !== ''">
|
v-if="l.hexColor !== ''">
|
||||||
</span>
|
</span>
|
||||||
<span class="list-menu-title">
|
<span class="list-menu-title">{{ getListTitle(l) }}</span>
|
||||||
{{ getListTitle(l) }}
|
</BaseButton>
|
||||||
</span>
|
|
||||||
<!-- FIXME: we shouldn't use a button inside a link This can be unwrapped by using CSS -->
|
|
||||||
<BaseButton
|
<BaseButton
|
||||||
|
class="favorite"
|
||||||
:class="{'is-favorite': l.isFavorite}"
|
:class="{'is-favorite': l.isFavorite}"
|
||||||
@click.prevent.stop="toggleFavoriteList(l)"
|
@click="toggleFavoriteList(l)"
|
||||||
class="favorite">
|
>
|
||||||
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
|
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
|
||||||
</BaseButton>
|
</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,30 +337,23 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
flex: 0 0 12px;
|
flex: 0 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
.favorite {
|
.favorite {
|
||||||
margin-left: .25rem;
|
margin-left: .25rem;
|
||||||
transition: opacity $transition, color $transition;
|
transition: opacity $transition, color $transition;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover,
|
||||||
color: var(--warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-favorite {
|
&.is-favorite {
|
||||||
opacity: 1;
|
|
||||||
color: var(--warning);
|
color: var(--warning);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .favorite {
|
.favorite.is-favorite,
|
||||||
|
.list-menu:hover .favorite {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-label {
|
.menu-label {
|
||||||
.color-bubble {
|
.color-bubble {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
@ -560,7 +534,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;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,9 +244,6 @@ export default defineComponent({
|
||||||
input.input {
|
input.input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled a {
|
|
||||||
cursor: default;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.datepicker-popup {
|
.datepicker-popup {
|
||||||
|
|
@ -280,8 +257,9 @@ export default defineComponent({
|
||||||
@media screen and (max-width: ($tablet)) {
|
@media screen and (max-width: ($tablet)) {
|
||||||
width: calc(100vw - 5rem);
|
width: calc(100vw - 5rem);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a:not(.button) {
|
.datepicker__quick-select-date {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 .5rem;
|
padding: 0 .5rem;
|
||||||
|
|
@ -317,7 +295,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.button {
|
.datepicker__close-button {
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
width: calc(100% - 2rem);
|
width: calc(100% - 2rem);
|
||||||
}
|
}
|
||||||
|
|
@ -326,6 +304,4 @@ export default defineComponent({
|
||||||
margin: 0 auto 8px;
|
margin: 0 auto 8px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -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
|
||||||
:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
|
v-else
|
||||||
|
: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(--light);
|
color: var(--light);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.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,21 +181,33 @@ 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 {
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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,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>
|
||||||
|
|
|
||||||
|
|
@ -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%,
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in New Issue
Block a user