ami/tl-vikunja
1
0
Fork 0
Code

feat: reduce ListWrapper selector specificity (#2679)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2679
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-11-12 10:46:00 +00:00 committed by konrad
parent 12a8f7ebe9
commit 599c1ba4b5
1 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/list/ListWrapper.vue
View File

@ -5,34 +5,42 @@
> >
<div class="switch-view-container"> <div class="switch-view-container">
<div class="switch-view"> <div class="switch-view">
<router-link <BaseButton
v-shortcut="'g l'" v-shortcut="'g l'"
:title="$t('keyboardShortcuts.list.switchToListView')" :title="$t('keyboardShortcuts.list.switchToListView')"
class="switch-view-button"
:class="{'is-active': viewName === 'list'}" :class="{'is-active': viewName === 'list'}"
:to="{ name: 'list.list', params: { listId } }"> :to="{ name: 'list.list', params: { listId } }"
>
{{ $t('list.list.title') }} {{ $t('list.list.title') }}
</router-link> </BaseButton>
<router-link <BaseButton
v-shortcut="'g g'" v-shortcut="'g g'"
:title="$t('keyboardShortcuts.list.switchToGanttView')" :title="$t('keyboardShortcuts.list.switchToGanttView')"
class="switch-view-button"
:class="{'is-active': viewName === 'gantt'}" :class="{'is-active': viewName === 'gantt'}"
:to="{ name: 'list.gantt', params: { listId } }"> :to="{ name: 'list.gantt', params: { listId } }"
>
{{ $t('list.gantt.title') }} {{ $t('list.gantt.title') }}
</router-link> </BaseButton>
<router-link <BaseButton
v-shortcut="'g t'" v-shortcut="'g t'"
:title="$t('keyboardShortcuts.list.switchToTableView')" :title="$t('keyboardShortcuts.list.switchToTableView')"
class="switch-view-button"
:class="{'is-active': viewName === 'table'}" :class="{'is-active': viewName === 'table'}"
:to="{ name: 'list.table', params: { listId } }"> :to="{ name: 'list.table', params: { listId } }"
>
{{ $t('list.table.title') }} {{ $t('list.table.title') }}
</router-link> </BaseButton>
<router-link <BaseButton
v-shortcut="'g k'" v-shortcut="'g k'"
:title="$t('keyboardShortcuts.list.switchToKanbanView')" :title="$t('keyboardShortcuts.list.switchToKanbanView')"
class="switch-view-button"
:class="{'is-active': viewName === 'kanban'}" :class="{'is-active': viewName === 'kanban'}"
:to="{ name: 'list.kanban', params: { listId } }"> :to="{ name: 'list.kanban', params: { listId } }"
>
{{ $t('list.kanban.title') }} {{ $t('list.kanban.title') }}
</router-link> </BaseButton>
</div> </div>
<slot name="header" /> <slot name="header" />
</div> </div>
@ -50,6 +58,7 @@
import {ref, computed, watch} from 'vue' import {ref, computed, watch} from 'vue'
import {useRoute} from 'vue-router' import {useRoute} from 'vue-router'
import BaseButton from '@/components/base/BaseButton.vue'
import Message from '@/components/misc/message.vue' import Message from '@/components/misc/message.vue'
import ListModel from '@/models/list' import ListModel from '@/models/list'
@ -158,35 +167,32 @@ watch(
height: $switch-view-height; height: $switch-view-height;
margin: 0 auto 1rem; margin: 0 auto 1rem;
padding: .5rem; padding: .5rem;
}
a { .switch-view-button {
padding: .25rem .5rem; padding: .25rem .5rem;
display: block; display: block;
border-radius: $radius; border-radius: $radius;
transition: all 100ms; transition: all 100ms;
&:not(:last-child) { &:not(:last-child) {
margin-right: .5rem; margin-right: .5rem;
} }
&.is-active,
&:hover { &:hover {
color: var(--switch-view-color); color: var(--switch-view-color);
background: var(--primary);
} }
&.is-active { &.is-active {
color: var(--switch-view-color);
background: var(--primary); background: var(--primary);
font-weight: bold; font-weight: bold;
box-shadow: var(--shadow-xs); box-shadow: var(--shadow-xs);
} }
&:hover {
background: var(--primary);
}
}
} }
// FIXME: this should be in notification and set via a prop
.is-archived .notification.is-warning { .is-archived .notification.is-warning {
margin-bottom: 1rem; margin-bottom: 1rem;
} }