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

chore: use the <dropdown> and <dropdown-item> components everywhere

Browse source 
Resolves https://kolaente.dev/vikunja/frontend/issues/2176
This commit is contained in:
kolaente 2022-07-20 17:08:46 +02:00
parent d6a10b01dd
commit cdb63b578d
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
11 changed files with 146 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -554,8 +554,4 @@ $vikunja-nav-selected-width: 0.4rem;
.namespaces-list.loader-container.is-loading {
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
}
a.dropdown-item:hover {
background: var(--dropdown-item-hover-background-color) !important;
}
</style>

3
src/components/list/list-settings-dropdown.vue
View file

@ -56,12 +56,13 @@
{{ $t('menu.archive') }}
</dropdown-item>
<task-subscription
class="dropdown-item has-no-shadow"
class="has-no-shadow"
:is-button="false"
entity="list"
:entity-id="list.id"
:subscription="list.subscription"
@change="sub => subscription = sub"
type="dropdown"
/>
<dropdown-item
:to="{ name: 'list.settings.delete', params: { listId: list.id } }"

94
src/components/misc/dropdown-item.vue
View file

@ -1,25 +1,95 @@
<template>
<router-link
<component
:is="componentNodeName"
v-bind="elementBindings"
:to="to"
class="dropdown-item">
<span class="icon" v-if="icon !== ''">
<span class="icon" v-if="icon">
<icon :icon="icon"/>
</span>
<span>
<slot></slot>
</span>
</router-link>
</component>
</template>
<script lang="ts" setup>
defineProps({
to: {
required: true,
},
icon: {
type: String,
required: false,
default: '',
},
import {ref, useAttrs, watchEffect} from 'vue'
const props = defineProps<{
to?: object,
icon?: string | string[],
}>()
const componentNodeName = ref<Node['nodeName']>('a')
const elementBindings = ref({})
const attrs = useAttrs()
watchEffect(() => {
let nodeName = 'a'
if (props.to) {
nodeName = 'router-link'
}
if ('href' in attrs) {
nodeName = 'BaseButton'
}
componentNodeName.value = nodeName
elementBindings.value = {
...attrs,
}
})
</script>
<style scoped lang="scss">
.dropdown-item {
color: var(--text);
display: block;
font-size: 0.875rem;
line-height: 1.5;
padding: $item-padding;
position: relative;
}
a.dropdown-item,
button.dropdown-item {
text-align: inherit;
white-space: nowrap;
width: 100%;
display: flex;
align-items: center;
justify-content: left !important;
&:hover {
background-color: var(--grey-100) !important;
}
&.is-active {
background-color: var(--link);
color: var(--link-invert);
}
.icon {
padding-right: .5rem;
}
.icon:not(.has-text-success) {
color: var(--grey-300) !important;
}
&.has-text-danger .icon {
color: var(--danger) !important;
}
&.is-disabled {
cursor: not-allowed;
&:hover {
background-color: transparent;
}
}
}
</style>

33
src/components/misc/dropdown.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="dropdown is-right is-active" ref="dropdown">
<div class="dropdown" ref="dropdown">
<slot name="trigger" :close="close" :toggleOpen="toggleOpen">
<BaseButton class="dropdown-trigger is-flex" @click="toggleOpen">
<icon :icon="triggerIcon" class="icon"/>
@ -51,7 +51,36 @@ onClickOutside(dropdown, (e: Event) => {
</script>
<style lang="scss" scoped>
.dropdown-menu .dropdown-content {
.dropdown {
display: inline-flex;
position: relative;
vertical-align: top;
}
.dropdown-menu {
min-width: 12rem;
padding-top: 4px;
position: absolute;
top: 100%;
z-index: 20;
display: block;
left: auto;
right: 0;
}
.dropdown-content {
background-color: var(--scheme-main);
border-radius: $radius;
padding-bottom: .5rem;
padding-top: .5rem;
box-shadow: var(--shadow-md);
}
.dropdown-divider {
background-color: var(--border-light);
border: none;
display: block;
height: 1px;
margin: 0.5rem 0;
}
</style>

22
src/components/misc/subscription.vue
View file

@ -1,6 +1,6 @@
<template>
<x-button
v-if="isButton"
v-if="type === 'button'"
variant="secondary"
:icon="iconName"
v-tooltip="tooltipText"
@ -9,6 +9,15 @@
>
{{ buttonText }}
</x-button>
<DropdownItem
v-else-if="type === 'dropdown'"
v-tooltip="tooltipText"
@click="changeSubscription"
:class="{'is-disabled': disabled}"
:icon="iconName"
>
{{ buttonText }}
</DropdownItem>
<BaseButton
v-else
v-tooltip="tooltipText"
@ -27,6 +36,7 @@ import {computed, shallowRef} from 'vue'
import {useI18n} from 'vue-i18n'
import BaseButton from '@/components/base/BaseButton.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
import SubscriptionService from '@/services/subscription'
import SubscriptionModel from '@/models/subscription'
@ -34,15 +44,15 @@ import SubscriptionModel from '@/models/subscription'
import {success} from '@/message'
interface Props {
entity: string
entityId: number
subscription: SubscriptionModel | null
isButton?: boolean
entity: string
entityId: number
subscription: SubscriptionModel | null
type?: 'button' | 'dropdown' | null
}
const props = withDefaults(defineProps<Props>(), {
isButton: true,
subscription: null,
type: 'button',
})
const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)

3
src/components/namespace/namespace-settings-dropdown.vue
View file

@ -34,12 +34,13 @@
{{ $t('menu.archive') }}
</dropdown-item>
<task-subscription
class="dropdown-item has-no-shadow"
class="has-no-shadow"
:is-button="false"
entity="namespace"
:entity-id="namespace.id"
:subscription="subscription"
@change="sub => subscription = sub"
type="dropdown"
/>
<dropdown-item
:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"

1
src/components/tasks/partials/reminders.vue
View file

@ -50,7 +50,6 @@ const props = defineProps({
for (const e of prop) {
if (!isDate(e) && !isString(e)) {
console.log('validation failed', e, e instanceof Date)
return false
}
}

3
src/styles/common-imports.scss
View file

@ -24,9 +24,6 @@ $vikunja-font: 'Quicksand', sans-serif;
$pagination-current-border: var(--primary);
$navbar-item-active-color: var(--primary);
$dropdown-content-shadow: none;
$dropdown-item-hover-background-color: var(--grey-100);
$site-background: var(--grey-100);
$transition-duration: 150ms;

2
src/styles/global.scss
View file

@ -44,7 +44,7 @@
// imports from "bulma-css-variables/sass/components/_all";
// @import "bulma-css-variables/sass/components/breadcrumb"; // not used
@import "bulma-css-variables/sass/components/card";
@import "bulma-css-variables/sass/components/dropdown";
// @import "bulma-css-variables/sass/components/dropdown"; // moved to component
// @import "bulma-css-variables/sass/components/level"; // not used
@import "bulma-css-variables/sass/components/media";
@import "bulma-css-variables/sass/components/menu";

28
src/styles/theme/theme.scss
View file

@ -91,34 +91,6 @@ button.table {
margin-bottom: 0 !important;
}
// FIXME: merge with dropdown-item.vue
// for this to happen the component has to be used everywhere
.dropdown-item {
display: flex;
align-items: center;
justify-content: left !important;
.icon {
padding-right: .5rem;
}
.icon:not(.has-text-success) {
color: var(--grey-300) !important;
}
&.has-text-danger .icon {
color: var(--danger) !important;
}
&.is-disabled {
cursor: not-allowed;
&:hover {
background-color: transparent;
}
}
}
.is-max-width-desktop {
width: 100%;
max-width: $desktop;

27
src/views/list/ListKanban.vue
View file

@ -62,9 +62,8 @@
trigger-icon="ellipsis-v"
@close="() => showSetLimitInput = false"
>
<a
<dropdown-item
@click.stop="showSetLimitInput = true"
class="dropdown-item"
>
<div class="field has-addons" v-if="showSetLimitInput">
<div class="control">
@ -93,34 +92,32 @@
$t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit')})
}}
</template>
</a>
<a
</dropdown-item>
<dropdown-item
@click.stop="toggleDoneBucket(bucket)"
class="dropdown-item"
v-tooltip="$t('list.kanban.doneBucketHintExtended')"
>
<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}">
<icon icon="check-double"/>
</span>
{{ $t('list.kanban.doneBucket') }}
</a>
<a
class="dropdown-item"
</dropdown-item>
<dropdown-item
@click.stop="() => collapseBucket(bucket)"
>
{{ $t('list.kanban.collapse') }}
</a>
<a
</dropdown-item>
<dropdown-item
:class="{'is-disabled': buckets.length <= 1}"
@click.stop="() => deleteBucketModal(bucket.id)"
class="dropdown-item has-text-danger"
class="has-text-danger"
v-tooltip="buckets.length <= 1 ? $t('list.kanban.deleteLast') : ''"
>
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
{{ $t('misc.delete') }}
</a>
</dropdown-item>
</dropdown>
</div>
@ -241,6 +238,7 @@ import Dropdown from '@/components/misc/dropdown.vue'
import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
import {calculateItemPosition} from '../../helpers/calculateItemPosition'
import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
import DropdownItem from '@/components/misc/dropdown-item.vue'
const DRAG_OPTIONS = {
// sortable options
@ -256,6 +254,7 @@ const MIN_SCROLL_HEIGHT_PERCENT = 0.25
export default defineComponent({
name: 'Kanban',
components: {
DropdownItem,
ListWrapper,
KanbanCard,
Dropdown,
@ -728,10 +727,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
}
a.dropdown-item {
padding-right: 1rem;
}
&.is-collapsed {
align-self: flex-start;
transform: rotate(90deg) translateY(-100%);