ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Bump to @nextcloud/vue@6.0.0-beta.3

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2022-08-20 11:50:27 +02:00
parent e761c9aec9
commit 4be99a93c8
33 changed files with 680 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ActivityEntry.vue
View File

@@ -36,7 +36,7 @@
<script>
import RichText from '@juliushaertl/vue-richtext'
import { UserBubble } from '@nextcloud/vue'
import { NcUserBubble } from '@nextcloud/vue'
import moment from '@nextcloud/moment'
import DOMPurify from 'dompurify'
import relativeDate from '../mixins/relativeDate'
@@ -93,7 +93,7 @@ export default {
break
case 'user':
parameters[key] = {
component: UserBubble,
component: NcUserBubble,
props: {
user: parameters[key].id,
displayName: parameters[key].name,

8
src/components/AttachmentDragAndDrop.vue
View File

@@ -41,7 +41,7 @@
</div>
</transition>
<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
<NcModal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
<div class="modal__content">
<h2>{{ t('deck', 'File already exists') }}</h2>
<p>
@@ -57,12 +57,12 @@
{{ t('deck', 'Keep existing file') }}
</button>
</div>
</Modal>
</NcModal>
</div>
</template>
<script>
import { Modal } from '@nextcloud/vue'
import { NcModal } from '@nextcloud/vue'
import attachmentUpload from '../mixins/attachmentUpload'
import { loadState } from '@nextcloud/initial-state'
@@ -75,7 +75,7 @@ try {
export default {
name: 'AttachmentDragAndDrop',
components: { Modal },
components: { NcModal },
mixins: [attachmentUpload],
props: {
cardId: {

68
src/components/Controls.vue
View File

@@ -25,11 +25,11 @@
<div v-if="overviewName" class="board-title">
<div class="board-bullet icon-calendar-dark" />
<h2>{{ overviewName }}</h2>
<Actions>
<ActionButton icon="icon-add" @click="clickShowAddCardModel">
<NcActions>
<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
{{ t('deck', 'Add card') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
<CardCreateDialog v-if="showAddCardModal" @close="clickHideAddCardModel" />
</div>
<div v-else-if="board" class="board-title">
@@ -49,11 +49,11 @@
<div v-if="board && canManage && !showArchived && !board.archived"
id="stack-add"
v-click-outside="hideAddStack">
<Actions v-if="!isAddStackVisible">
<ActionButton icon="icon-add" @click.stop="showAddStack">
<NcActions v-if="!isAddStackVisible">
<NcActionButton icon="icon-add" @click.stop="showAddStack">
{{ t('deck', 'Add list') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
<form v-else @submit.prevent="addNewStack()">
<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add list') }}</label>
<input id="new-stack-input-main"
@@ -71,13 +71,13 @@
</div>
<div v-if="board" class="board-action-buttons">
<div class="board-action-buttons__filter">
<Popover container=".board-action-buttons__filter"
<NcPopover container=".board-action-buttons__filter"
:placement="'bottom-end'"
:aria-label="t('deck', 'Active filters')"
@show="filterVisible=true"
@hide="filterVisible=false">
<!-- We cannot use Actions here are the popover trigger does not update on reactive icons -->
<Button slot="trigger"
<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
<NcButton slot="trigger"
:title="t('deck', 'Apply filter')"
class="filter-button"
type="tertiary-no-background">
@@ -85,7 +85,7 @@
<FilterIcon v-if="isFilterActive" :size="20" decorative />
<FilterOffIcon v-else :size="20" decorative />
</template>
</Button>
</NcButton>
<div v-if="filterVisible" class="filter">
<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -117,7 +117,7 @@
class="checkbox"
:value="user.uid"
@change="setFilter">
<label :for="user.uid"><Avatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
<label :for="user.uid"><NcAvatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
</div>
<h3>{{ t('deck', 'Filter by due date') }}</h3>
@@ -177,38 +177,38 @@
<label for="noDue">{{ t('deck', 'No due date') }}</label>
</div>
<Button :disabled="!isFilterActive" :wide="true" @click="clearFilter">
<NcButton :disabled="!isFilterActive" :wide="true" @click="clearFilter">
{{ t('deck', 'Clear filter') }}
</Button>
</NcButton>
</div>
</Popover>
</NcPopover>
</div>
<Actions>
<ActionButton @click="toggleShowArchived">
<NcActions>
<NcActionButton @click="toggleShowArchived">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
{{ showArchived ? t('deck', 'Hide archived cards') : t('deck', 'Show archived cards') }}
</ActionButton>
<ActionButton v-if="compactMode"
</NcActionButton>
<NcActionButton v-if="compactMode"
@click="toggleCompactMode">
<ArrowExpandVerticalIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Toggle compact mode') }}
</ActionButton>
<ActionButton v-else
</NcActionButton>
<NcActionButton v-else
@click="toggleCompactMode">
<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Toggle compact mode') }}
</ActionButton>
</Actions>
<!-- FIXME: ActionRouter currently doesn't work as an inline action -->
<Actions>
<ActionButton icon="icon-menu-sidebar"
</NcActionButton>
</NcActions>
<!-- FIXME: NcActionRouter currently doesn't work as an inline action -->
<NcActions>
<NcActionButton icon="icon-menu-sidebar"
:aria-label="t('deck', 'Open details')"
:title="t('deck', 'Details')"
@click="toggleDetailsView" />
</Actions>
</NcActions>
</div>
</div>
</div>
@@ -216,7 +216,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover } from '@nextcloud/vue'
import labelStyle from '../mixins/labelStyle'
import CardCreateDialog from '../CardCreateDialog'
import ArchiveIcon from 'vue-material-design-icons/Archive'
@@ -228,11 +228,11 @@ import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertic
export default {
name: 'Controls',
components: {
Actions,
ActionButton,
Button,
Popover,
Avatar,
NcActions,
NcActionButton,
NcButton,
NcPopover,
NcAvatar,
CardCreateDialog,
ArchiveIcon,
FilterIcon,

8
src/components/board/Board.vue
View File

@@ -30,7 +30,7 @@
<h2>{{ t('deck', 'Loading board') }}</h2>
<p />
</div>
<EmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
<NcEmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
{{ t('deck', 'No lists available') }}
<template v-if="canManage" #desc>
{{ t('deck', 'Create a new list to add cards to this board') }}
@@ -48,7 +48,7 @@
value="">
</form>
</template>
</EmptyContent>
</NcEmptyContent>
<div v-else-if="!isEmpty && !loading" key="board" class="board">
<Container lock-axix="y"
orientation="horizontal"
@@ -75,7 +75,7 @@ import { Container, Draggable } from 'vue-smooth-dnd'
import { mapState, mapGetters } from 'vuex'
import Controls from '../Controls'
import Stack from './Stack'
import { EmptyContent } from '@nextcloud/vue'
import { NcEmptyContent } from '@nextcloud/vue'
import GlobalSearchResults from '../search/GlobalSearchResults'
import { showError } from '../../helpers/errors'
@@ -87,7 +87,7 @@ export default {
Container,
Draggable,
Stack,
EmptyContent,
NcEmptyContent,
},
inject: [
'boardApi',

26
src/components/board/BoardSidebar.vue
View File

@@ -21,40 +21,40 @@
-->
<template>
<AppSidebar v-if="board != null"
<NcAppSidebar v-if="board != null"
:actions="[]"
:title="board.title"
@close="closeSidebar">
<AppSidebarTab id="sharing"
<NcAppSidebarTab id="sharing"
:order="0"
:name="t('deck', 'Sharing')"
icon="icon-shared">
<SharingTabSidebar :board="board" />
</AppSidebarTab>
</NcAppSidebarTab>
<AppSidebarTab id="tags"
<NcAppSidebarTab id="tags"
:order="1"
:name="t('deck', 'Tags')"
icon="icon-tag">
<TagsTabSidebar :board="board" />
</AppSidebarTab>
</NcAppSidebarTab>
<AppSidebarTab v-if="canEdit"
<NcAppSidebarTab v-if="canEdit"
id="deleted"
:order="2"
:name="t('deck', 'Deleted items')"
icon="icon-delete">
<DeletedTabSidebar :board="board" />
</AppSidebarTab>
</NcAppSidebarTab>
<AppSidebarTab v-if="hasActivity"
<NcAppSidebarTab v-if="hasActivity"
id="activity"
:order="3"
:name="t('deck', 'Timeline')"
icon="icon-activity">
<TimelineTabSidebar :board="board" />
</AppSidebarTab>
</AppSidebar>
</NcAppSidebarTab>
</NcAppSidebar>
</template>
<script>
@@ -63,15 +63,15 @@ import SharingTabSidebar from './SharingTabSidebar'
import TagsTabSidebar from './TagsTabSidebar'
import DeletedTabSidebar from './DeletedTabSidebar'
import TimelineTabSidebar from './TimelineTabSidebar'
import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
const capabilities = window.OC.getCapabilities()
export default {
name: 'BoardSidebar',
components: {
AppSidebar,
AppSidebarTab,
NcAppSidebar,
NcAppSidebarTab,
SharingTabSidebar,
TagsTabSidebar,
DeletedTabSidebar,

26
src/components/board/SharingTabSidebar.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<Multiselect v-if="canShare"
<NcMultiselect v-if="canShare"
v-model="addAcl"
:placeholder="t('deck', 'Share board with a user, group or circle …')"
:options="formatedSharees"
@@ -18,12 +18,12 @@
<template #noResult>
{{ isSearching ? t('deck', 'Searching for users, groups and circles …') : t('deck', 'No participants found') }}
</template>
</Multiselect>
</NcMultiselect>
<ul id="shareWithList"
class="shareWithList">
<li>
<Avatar :user="board.owner.uid" />
<NcAvatar :user="board.owner.uid" />
<span class="has-tooltip username">
{{ board.owner.displayname }}
<span v-if="!isCurrentUser(board.owner.uid)" class="board-owner-label">
@@ -32,7 +32,7 @@
</span>
</li>
<li v-for="acl in board.acl" :key="acl.id">
<Avatar v-if="acl.type===0" :user="acl.participant.uid" />
<NcAvatar v-if="acl.type===0" :user="acl.participant.uid" />
<div v-if="acl.type===1" class="avatardiv icon icon-group" />
<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
<span class="has-tooltip username">
@@ -44,7 +44,7 @@
<ActionCheckbox v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0) && (canManage || (canEdit && canShare))" :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
{{ t('deck', 'Can edit') }}
</ActionCheckbox>
<Actions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
<NcActions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
<ActionCheckbox v-if="canManage || canShare" :checked="acl.permissionShare" @change="clickShareAcl(acl)">
{{ t('deck', 'Can share') }}
</ActionCheckbox>
@@ -54,10 +54,10 @@
<ActionCheckbox v-if="acl.type === 0 && isCurrentUser(board.owner.uid)" :checked="acl.owner" @change="clickTransferOwner(acl.participant.uid)">
{{ t('deck', 'Owner') }}
</ActionCheckbox>
<ActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
<NcActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
{{ t('deck', 'Delete') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</li>
</ul>
@@ -69,7 +69,7 @@
</template>
<script>
import { Avatar, Multiselect, Actions, ActionButton, ActionCheckbox } from '@nextcloud/vue'
import { NcAvatar, NcMultiselect, NcActions, NcActionButton, ActionCheckbox } from '@nextcloud/vue'
import { CollectionList } from 'nextcloud-vue-collections'
import { mapGetters, mapState } from 'vuex'
import { getCurrentUser } from '@nextcloud/auth'
@@ -80,11 +80,11 @@ import debounce from 'lodash/debounce'
export default {
name: 'SharingTabSidebar',
components: {
Avatar,
Actions,
ActionButton,
NcAvatar,
NcActions,
NcActionButton,
ActionCheckbox,
Multiselect,
NcMultiselect,
CollectionList,
},
props: {

32
src/components/board/Stack.vue
View File

@@ -52,25 +52,25 @@
value="">
</form>
</transition>
<Actions v-if="canManage && !isArchived" :force-menu="true">
<ActionButton @click="modalArchivAllCardsShow=true">
<NcActions v-if="canManage && !isArchived" :force-menu="true">
<NcActionButton @click="modalArchivAllCardsShow=true">
<template #icon>
<ArchiveIcon decorative />
</template>
{{ t('deck', 'Archive all cards') }}
</ActionButton>
<ActionButton icon="icon-delete" @click="deleteStack(stack)">
</NcActionButton>
<NcActionButton icon="icon-delete" @click="deleteStack(stack)">
{{ t('deck', 'Delete list') }}
</ActionButton>
</Actions>
<Actions v-if="canEdit && !showArchived && !isArchived">
<ActionButton icon="icon-add" @click.stop="showAddCard=true">
</NcActionButton>
</NcActions>
<NcActions v-if="canEdit && !showArchived && !isArchived">
<NcActionButton icon="icon-add" @click.stop="showAddCard=true">
{{ t('deck', 'Add card') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</div>
<Modal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
<NcModal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
<div class="modal__content">
<h3>{{ t('deck', 'Archive all cards in this list') }}</h3>
<progress :value="stackTransfer.current" :max="stackTransfer.total" />
@@ -81,7 +81,7 @@
{{ t('deck', 'Cancel') }}
</button>
</div>
</Modal>
</NcModal>
<transition name="slide-top" appear>
<div v-if="showAddCard" class="stack__card-add">
@@ -131,7 +131,7 @@
import { mapGetters, mapState } from 'vuex'
import { Container, Draggable } from 'vue-smooth-dnd'
import { Actions, ActionButton, Modal } from '@nextcloud/vue'
import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
import { showError, showUndo } from '@nextcloud/dialogs'
import CardItem from '../cards/CardItem'
@@ -141,12 +141,12 @@ import ArchiveIcon from 'vue-material-design-icons/Archive'
export default {
name: 'Stack',
components: {
Actions,
ActionButton,
NcActions,
NcActionButton,
CardItem,
Container,
Draggable,
Modal,
NcModal,
ArchiveIcon,
},

48
src/components/board/TagsTabSidebar.vue
View File

@@ -5,59 +5,59 @@
<!-- Edit Tag -->
<template v-if="editingLabelId === label.id">
<form class="label-form" @submit.prevent="updateLabel(label)">
<ColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
<NcColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
</ColorPicker>
</NcColorPicker>
<input v-model="editingLabel.title" type="text">
<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
:disabled="!editLabelObjValidated"
type="submit"
value=""
class="icon-confirm">
<Actions>
<ActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
<NcActions>
<NcActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
:disabled="!editLabelObjValidated"
icon="icon-close"
@click="editingLabelId = null">
{{ t('deck', 'Cancel') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</form>
</template>
<template v-else>
<div class="label-title" @click="clickEdit(label)">
<span :style="{ backgroundColor: `#${label.color}`, color: textColor(label.color) }">{{ label.title }}</span>
</div>
<Actions v-if="canManage && !isArchived">
<ActionButton icon="icon-rename" @click="clickEdit(label)">
<NcActions v-if="canManage && !isArchived">
<NcActionButton icon="icon-rename" @click="clickEdit(label)">
{{ t('deck', 'Edit') }}
</ActionButton>
</Actions>
<Actions v-if="canManage && !isArchived">
<ActionButton icon="icon-delete" @click="deleteLabel(label.id)">
</NcActionButton>
</NcActions>
<NcActions v-if="canManage && !isArchived">
<NcActionButton icon="icon-delete" @click="deleteLabel(label.id)">
{{ t('deck', 'Delete') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</template>
</li>
<li v-if="addLabel" class="editing">
<!-- New Tag -->
<form class="label-form" @submit.prevent="clickAddLabel">
<ColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
<NcColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
</ColorPicker>
</NcColorPicker>
<input v-model="addLabelObj.title" type="text">
<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
:disabled="!addLabelObjValidated"
type="submit"
value=""
class="icon-confirm">
<Actions>
<ActionButton icon="icon-close" @click="addLabel=false">
<NcActions>
<NcActionButton icon="icon-close" @click="addLabel=false">
{{ t('deck', 'Cancel') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</form>
</li>
<button v-if="canManage && !isArchived" @click="clickShowAddLabel()">
@@ -71,14 +71,14 @@
import { mapGetters } from 'vuex'
import Color from '../../mixins/color'
import { ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
import { NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
export default {
name: 'TagsTabSidebar',
components: {
ColorPicker,
Actions,
ActionButton,
NcColorPicker,
NcActions,
NcActionButton,
},
mixins: [Color],
data() {

8
src/components/boards/BoardItem.vue
View File

@@ -33,8 +33,8 @@
{{ board.title }}
</div>
<div class="board-list-avatars-cell" title="">
<Avatar :user="board.owner.uid" :display-name="board.owner.displayname" class="board-list-avatar" />
<Avatar v-for="user in limitedAcl"
<NcAvatar :user="board.owner.uid" :display-name="board.owner.displayname" class="board-list-avatar" />
<NcAvatar v-for="user in limitedAcl"
:key="user.id"
:user="user.participant.uid"
:display-name="user.participant.displayname"
@@ -46,12 +46,12 @@
</template>
<script>
import { Avatar } from '@nextcloud/vue'
import { NcAvatar } from '@nextcloud/vue'
export default {
name: 'BoardItem',
components: {
Avatar,
NcAvatar,
},
props: {
board: {

30
src/components/card/AttachmentList.vue
View File

@@ -70,12 +70,12 @@
</div>
</a>
</div>
<Actions v-if="selectable">
<ActionButton icon="icon-confirm" @click="$emit('select-attachment', attachment)">
<NcActions v-if="selectable">
<NcActionButton icon="icon-confirm" @click="$emit('select-attachment', attachment)">
{{ t('deck', 'Add this attachment') }}
</ActionButton>
</Actions>
<Actions v-if="removable && !isReadOnly" :force-menu="true">
</NcActionButton>
</NcActions>
<NcActions v-if="removable && !isReadOnly" :force-menu="true">
<ActionLink v-if="attachment.extendedData.fileid" icon="icon-folder" :href="internalLink(attachment)">
{{ t('deck', 'Show in Files') }}
</ActionLink>
@@ -85,17 +85,17 @@
download>
{{ t('deck', 'Download') }}
</ActionLink>
<ActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
<NcActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
{{ t('deck', 'Remove attachment') }}
</ActionButton>
</NcActionButton>
<ActionButton v-if="!attachment.extendedData.fileid && attachment.deletedAt === 0" icon="icon-delete" @click="$emit('delete-attachment', attachment)">
<NcActionButton v-if="!attachment.extendedData.fileid && attachment.deletedAt === 0" icon="icon-delete" @click="$emit('delete-attachment', attachment)">
{{ t('deck', 'Delete Attachment') }}
</ActionButton>
<ActionButton v-else-if="!attachment.extendedData.fileid" icon="icon-history" @click="$emit('restore-attachment', attachment)">
</NcActionButton>
<NcActionButton v-else-if="!attachment.extendedData.fileid" icon="icon-history" @click="$emit('restore-attachment', attachment)">
{{ t('deck', 'Restore Attachment') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</li>
</ul>
</AttachmentDragAndDrop>
@@ -103,7 +103,7 @@
<script>
import axios from '@nextcloud/axios'
import { Actions, ActionButton, ActionLink } from '@nextcloud/vue'
import { NcActions, NcActionButton, ActionLink } from '@nextcloud/vue'
import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
import relativeDate from '../../mixins/relativeDate'
import { formatFileSize } from '@nextcloud/files'
@@ -125,8 +125,8 @@ const picker = getFilePickerBuilder(t('deck', 'File to share'))
export default {
name: 'AttachmentList',
components: {
Actions,
ActionButton,
NcActions,
NcActionButton,
ActionLink,
AttachmentDragAndDrop,
},

40
src/components/card/CardSidebar.vue
View File

@@ -21,7 +21,7 @@
-->
<template>
<AppSidebar v-if="currentBoard && currentCard"
<NcAppSidebar v-if="currentBoard && currentCard"
:active="tabId"
:title="title"
:subtitle="subtitle"
@@ -32,57 +32,57 @@
@submit-title="handleSubmitTitle"
@close="closeSidebar">
<template #secondary-actions>
<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
<NcActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
{{ t('deck', 'Open in sidebar view') }}
</ActionButton>
<ActionButton v-else icon="icon-external" @click.stop="showModal()">
</NcActionButton>
<NcActionButton v-else icon="icon-external" @click.stop="showModal()">
{{ t('deck', 'Open in bigger view') }}
</ActionButton>
</NcActionButton>
<ActionButton v-for="action in cardActions"
<NcActionButton v-for="action in cardActions"
:key="action.label"
:close-after-click="true"
:icon="action.icon"
@click="action.callback(cardRichObject)">
{{ action.label }}
</ActionButton>
</NcActionButton>
</template>
<AppSidebarTab id="details"
<NcAppSidebarTab id="details"
:order="0"
:name="t('deck', 'Details')"
icon="icon-home">
<CardSidebarTabDetails :card="currentCard" />
</AppSidebarTab>
</NcAppSidebarTab>
<AppSidebarTab id="attachments"
<NcAppSidebarTab id="attachments"
:order="1"
:name="t('deck', 'Attachments')">
<template #icon>
<AttachmentIcon size="20" decorative />
</template>
<CardSidebarTabAttachments :card="currentCard" />
</AppSidebarTab>
</NcAppSidebarTab>
<AppSidebarTab id="comments"
<NcAppSidebarTab id="comments"
:order="2"
:name="t('deck', 'Comments')"
icon="icon-comment">
<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
</AppSidebarTab>
</NcAppSidebarTab>
<AppSidebarTab v-if="hasActivity"
<NcAppSidebarTab v-if="hasActivity"
id="timeline"
:order="3"
:name="t('deck', 'Timeline')"
icon="icon-activity">
<CardSidebarTabActivity :card="currentCard" />
</AppSidebarTab>
</AppSidebar>
</NcAppSidebarTab>
</NcAppSidebar>
</template>
<script>
import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
import { NcActionButton, NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
import { generateUrl } from '@nextcloud/router'
import { mapState, mapGetters } from 'vuex'
import CardSidebarTabDetails from './CardSidebarTabDetails'
@@ -101,9 +101,9 @@ const capabilities = window.OC.getCapabilities()
export default {
name: 'CardSidebar',
components: {
AppSidebar,
AppSidebarTab,
ActionButton,
NcAppSidebar,
NcAppSidebarTab,
NcActionButton,
CardSidebarTabAttachments,
CardSidebarTabComments,
CardSidebarTabActivity,

6
src/components/card/CardSidebarTabComments.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="comment--header">
<Avatar :user="currentUser.uid" />
<NcAvatar :user="currentUser.uid" />
<span class="has-tooltip username">
{{ currentUser.displayName }}
</span>
@@ -35,7 +35,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import { Avatar } from '@nextcloud/vue'
import { NcAvatar } from '@nextcloud/vue'
import CommentItem from './CommentItem'
import CommentForm from './CommentForm'
import InfiniteLoading from 'vue-infinite-loading'
@@ -44,7 +44,7 @@ import { getCurrentUser } from '@nextcloud/auth'
export default {
name: 'CardSidebarTabComments',
components: {
Avatar,
NcAvatar,
CommentItem,
CommentForm,
InfiniteLoading,

34
src/components/card/CardSidebarTabDetails.vue
View File

@@ -27,7 +27,7 @@
<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
</div>
<div class="section-details">
<Multiselect v-model="assignedLabels"
<NcMultiselect v-model="assignedLabels"
:multiple="true"
:disabled="!canEdit"
:options="labelsSorted"
@@ -47,7 +47,7 @@
{{ scope.option.title }}
</div>
</template>
</Multiselect>
</NcMultiselect>
</div>
</div>
@@ -56,7 +56,7 @@
<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
</div>
<div class="section-details">
<Multiselect v-if="canEdit"
<NcMultiselect v-if="canEdit"
v-model="assignedUsers"
:multiple="true"
:options="formatedAssignables"
@@ -69,16 +69,16 @@
@remove="removeUserFromCard">
<template #tag="scope">
<div class="avatarlist--inline">
<Avatar :user="scope.option.uid"
<NcAvatar :user="scope.option.uid"
:display-name="scope.option.displayname"
:size="24"
:is-no-user="scope.option.isNoUser"
:disable-menu="true" />
</div>
</template>
</Multiselect>
</NcMultiselect>
<div v-else class="avatar-list--readonly">
<Avatar v-for="option in assignedUsers"
<NcAvatar v-for="option in assignedUsers"
:key="option.primaryKey"
:user="option.uid"
:display-name="option.displayname"
@@ -93,7 +93,7 @@
<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
</div>
<div class="section-details">
<DatetimePicker v-model="duedate"
<NcDatetimePicker v-model="duedate"
:placeholder="t('deck', 'Set a due date')"
type="datetime"
:minute-step="5"
@@ -103,11 +103,11 @@
:disabled="saving || !canEdit"
:shortcuts="shortcuts"
confirm />
<Actions v-if="canEdit">
<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
<NcActions v-if="canEdit">
<NcActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
{{ t('deck', 'Remove due date') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</div>
</div>
@@ -125,7 +125,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from '@nextcloud/moment'
import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker } from '@nextcloud/vue'
import { NcAvatar, NcActions, NcActionButton, NcMultiselect, NcDatetimePicker } from '@nextcloud/vue'
import { loadState } from '@nextcloud/initial-state'
import { CollectionList } from 'nextcloud-vue-collections'
@@ -142,11 +142,11 @@ export default {
name: 'CardSidebarTabDetails',
components: {
Description,
Multiselect,
DatetimePicker,
Actions,
ActionButton,
Avatar,
NcMultiselect,
NcDatetimePicker,
NcActions,
NcActionButton,
NcAvatar,
CollectionList,
},
mixins: [Color],

10
src/components/card/CommentForm.vue
View File

@@ -29,12 +29,12 @@
name-key="displayname"
:tab-select="true">
<template #item="s">
<Avatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
<NcAvatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
<span class="atwho-li--name" v-text="s.item.displayname" />
</template>
<template #embeddedItem="scope">
<span>
<UserBubble v-if="scope.current.uid"
<NcUserBubble v-if="scope.current.uid"
:data-mention-id="scope.current.uid"
:user="scope.current.uid"
:display-name="scope.current.displayname" />
@@ -63,7 +63,7 @@
<script>
import { mapState } from 'vuex'
import { UserBubble, Avatar } from '@nextcloud/vue'
import { NcUserBubble, NcAvatar } from '@nextcloud/vue'
import At from 'vue-at'
import { rawToParsed } from '../../helpers/mentions'
@@ -71,8 +71,8 @@ export default {
name: 'CommentForm',
components: {
At,
Avatar,
UserBubble,
NcAvatar,
NcUserBubble,
},
props: {
value: {

46
src/components/card/CommentItem.vue
View File

@@ -4,13 +4,13 @@
<div class="reply--header">
<div class="reply--hint">
{{ t('deck', 'In reply to') }}
<UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
<NcUserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
</div>
<Actions v-if="preview" class="reply--cancel">
<ActionButton icon="icon-close" @click="$emit('cancel')">
<NcActions v-if="preview" class="reply--cancel">
<NcActionButton icon="icon-close" @click="$emit('cancel')">
{{ t('deck', 'Cancel reply') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</div>
<RichText class="comment--content"
:text="richText(comment)"
@@ -20,33 +20,33 @@
</div>
<li v-else class="comment">
<div class="comment--header">
<Avatar :user="comment.actorId" />
<NcAvatar :user="comment.actorId" />
<span class="has-tooltip username">
{{ comment.actorDisplayName }}
</span>
<Actions v-show="!edit" :force-menu="true">
<ActionButton :close-after-click="true" @click="replyTo()">
<NcActions v-show="!edit" :force-menu="true">
<NcActionButton :close-after-click="true" @click="replyTo()">
<template #icon>
<ReplyIcon decorative />
</template>
{{ t('deck', 'Reply') }}
</ActionButton>
<ActionButton v-if="canEdit"
</NcActionButton>
<NcActionButton v-if="canEdit"
icon="icon-rename"
:close-after-click="true"
@click="showUpdateForm()">
{{ t('deck', 'Update') }}
</ActionButton>
<ActionButton v-if="canEdit"
</NcActionButton>
<NcActionButton v-if="canEdit"
icon="icon-delete"
:close-after-click="true"
@click="deleteComment()">
{{ t('deck', 'Delete') }}
</ActionButton>
</Actions>
<Actions v-if="edit">
<ActionButton icon="icon-close" @click="hideUpdateForm" />
</Actions>
</NcActionButton>
</NcActions>
<NcActions v-if="edit">
<NcActionButton icon="icon-close" @click="hideUpdateForm" />
</NcActions>
<div class="spacer" />
<div class="timestamp">
{{ relativeDate(comment.creationDateTime) }}
@@ -64,7 +64,7 @@
</template>
<script>
import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
import { NcAvatar, NcActions, NcActionButton, NcUserBubble } from '@nextcloud/vue'
import RichText from '@juliushaertl/vue-richtext'
import CommentForm from './CommentForm'
import { getCurrentUser } from '@nextcloud/auth'
@@ -80,7 +80,7 @@ const AtMention = {
return createElement(
'span',
{ attrs: { 'data-at-embedded': true, contenteditable: false } },
[createElement(UserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
[createElement(NcUserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
)
},
}
@@ -88,10 +88,10 @@ const AtMention = {
export default {
name: 'CommentItem',
components: {
Avatar,
UserBubble,
Actions,
ActionButton,
NcAvatar,
NcUserBubble,
NcActions,
NcActionButton,
CommentForm,
RichText,
ReplyIcon,

32
src/components/card/Description.vue
View File

@@ -30,22 +30,22 @@
href="https://deck.readthedocs.io/en/latest/Markdown/"
target="_blank"
class="icon icon-info" />
<Actions v-if="canEdit">
<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
<NcActions v-if="canEdit">
<NcActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
{{ t('deck', 'Edit description') }}
</ActionButton>
<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
</NcActionButton>
<NcActionButton v-else icon="icon-toggle" @click="hideEditor()">
{{ t('deck', 'View description') }}
</ActionButton>
</Actions>
<Actions v-if="canEdit">
<ActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
</NcActionButton>
</NcActions>
<NcActions v-if="canEdit">
<NcActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
<template #icon>
<PaperclipIcon :size="24" decorative />
</template>
{{ t('deck', 'Add Attachment') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</h5>
<div v-if="!descriptionEditing && hasDescription"
@@ -63,14 +63,14 @@
@update:modelValue="updateDescription"
@blur="saveDescription" />
<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
<NcModal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
<div class="modal__content">
<h3>{{ t('deck', 'Choose attachment') }}</h3>
<AttachmentList :card-id="card.id"
:selectable="true"
@select-attachment="addAttachment" />
</div>
</Modal>
</NcModal>
</div>
</template>
@@ -79,7 +79,7 @@ import MarkdownIt from 'markdown-it'
import MarkdownItTaskCheckbox from 'markdown-it-task-checkbox'
import MarkdownItLinkAttributes from 'markdown-it-link-attributes'
import AttachmentList from './AttachmentList'
import { Actions, ActionButton, Modal } from '@nextcloud/vue'
import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
import { formatFileSize } from '@nextcloud/files'
import { generateUrl } from '@nextcloud/router'
import { mapState, mapGetters } from 'vuex'
@@ -101,9 +101,9 @@ export default {
name: 'Description',
components: {
VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
Actions,
ActionButton,
Modal,
NcActions,
NcActionButton,
NcModal,
AttachmentList,
PaperclipIcon,
},

16
src/components/cards/AvatarList.vue
View File

@@ -27,20 +27,20 @@
<div class="avatardiv icon-more" />
</div>
<div v-for="user in firstUsers" :key="user.id">
<Avatar v-if="user.type === 0"
<NcAvatar v-if="user.type === 0"
:user="user.participant.uid"
:display-name="user.participant.displayname"
:disable-menu="true"
:show-user-status="false"
:size="32" />
<Avatar v-if="user.type === 1"
<NcAvatar v-if="user.type === 1"
:user="user.participant.uid"
:display-name="user.participant.displayname"
:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Group)')"
:is-no-user="true"
:disable-="true"
:size="32" />
<Avatar v-if="user.type === 7"
<NcAvatar v-if="user.type === 7"
:user="user.participant.uid"
:display-name="user.participant.displayname"
:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Circle)')"
@@ -51,13 +51,13 @@
</div>
<div v-show="popoverVisible" class="popovermenu menu-right">
<PopoverMenu :menu="popover" />
<NcPopoverMenu :menu="popover" />
<slot />
</div>
<div class="avatar-print-list">
<div v-for="user in avatarUsers" :key="user.id" class="avatar-print-list-item">
<Avatar class="avatar-print-list-avatar"
<NcAvatar class="avatar-print-list-avatar"
:user="user.participant.uid"
:display-name="user.participant.displayname"
:disable-menu="true"
@@ -70,14 +70,14 @@
</template>
<script>
import { Avatar, PopoverMenu, Tooltip } from '@nextcloud/vue'
import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
import { generateUrl } from '@nextcloud/router'
export default {
name: 'AvatarList',
components: {
Avatar,
PopoverMenu,
NcAvatar,
NcPopoverMenu,
},
directives: {
tooltip: Tooltip,

6
src/components/cards/CardBadges.vue
View File

@@ -43,13 +43,13 @@
<span>{{ card.attachmentCount }}</span>
</div>
<AvatarList :users="card.assignedUsers" />
<NcAvatarList :users="card.assignedUsers" />
<CardMenu class="card-menu" :card="card" />
</div>
</template>
<script>
import AvatarList from './AvatarList'
import NcAvatarList from './AvatarList'
import CardMenu from './CardMenu'
import TextIcon from 'vue-material-design-icons/Text.vue'
import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
@@ -59,7 +59,7 @@ import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
export default {
name: 'CardBadges',
components: { AvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
props: {
card: {
type: Object,

42
src/components/cards/CardMenu.vue
View File

@@ -23,50 +23,50 @@
<template>
<div v-if="card">
<div @click.stop.prevent>
<Actions>
<ActionButton v-if="showArchived === false && !isCurrentUserAssigned"
<NcActions>
<NcActionButton v-if="showArchived === false && !isCurrentUserAssigned"
icon="icon-user"
:close-after-click="true"
@click="assignCardToMe()">
{{ t('deck', 'Assign to me') }}
</ActionButton>
<ActionButton v-if="showArchived === false && isCurrentUserAssigned"
</NcActionButton>
<NcActionButton v-if="showArchived === false && isCurrentUserAssigned"
icon="icon-user"
:close-after-click="true"
@click="unassignCardFromMe()">
{{ t('deck', 'Unassign myself') }}
</ActionButton>
<ActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
</NcActionButton>
<NcActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
{{ t('deck', 'Move card') }}
</ActionButton>
<ActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
</NcActionButton>
<NcActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
<CardBulletedIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Card details') }}
</ActionButton>
<ActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
</NcActionButton>
<NcActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
</ActionButton>
<ActionButton v-if="showArchived === false"
</NcActionButton>
<NcActionButton v-if="showArchived === false"
icon="icon-delete"
:close-after-click="true"
@click="deleteCard()">
{{ t('deck', 'Delete card') }}
</ActionButton>
</Actions>
</NcActionButton>
</NcActions>
</div>
<Modal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
<div class="modal__content">
<h3>{{ t('deck', 'Move card to another board') }}</h3>
<Multiselect v-model="selectedBoard"
<NcMultiselect v-model="selectedBoard"
:placeholder="t('deck', 'Select a board')"
:options="activeBoards"
:max-height="100"
label="title"
@select="loadStacksFromBoard" />
<Multiselect v-model="selectedStack"
<NcMultiselect v-model="selectedStack"
:placeholder="t('deck', 'Select a list')"
:options="stacksFromBoard"
:max-height="100"
@@ -74,7 +74,7 @@
<span slot="noOptions">
{{ t('deck', 'List is empty') }}
</span>
</Multiselect>
</NcMultiselect>
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
{{ t('deck', 'Move card') }}
@@ -83,11 +83,11 @@
{{ t('deck', 'Cancel') }}
</button>
</div>
</Modal>
</NcModal>
</div>
</template>
<script>
import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
import { NcModal, NcActions, NcActionButton, NcMultiselect } from '@nextcloud/vue'
import { mapGetters, mapState } from 'vuex'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
@@ -99,7 +99,7 @@ import CardBulletedIcon from 'vue-material-design-icons/CardBulleted'
export default {
name: 'CardMenu',
components: { Actions, ActionButton, Modal, Multiselect, ArchiveIcon, CardBulletedIcon },
components: { NcActions, NcActionButton, NcModal, NcMultiselect, ArchiveIcon, CardBulletedIcon },
props: {
card: {
type: Object,

19
src/components/icons/DeckIcon.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" :height="size" :width="size" version="1.1" viewBox="0 0 16 16">
<rect ry="1" height="8" width="14" y="7" x="1"/>
<rect ry=".5" height="1" width="12" y="5" x="2"/>
<rect ry=".5" height="1" width="10" y="3" x="3"/>
<rect ry=".5" height="1" width="8" y="1" x="4"/>
</svg>
</template>
<script>
export default {
name: 'DeckIcon',
props: {
size: {
type: Number,
default: 16,
},
},
}
</script>

49
src/components/navigation/AppNavigation.vue
View File

@@ -21,18 +21,25 @@
-->
<template>
<AppNavigationVue :class="{'icon-loading': loading}">
<NcAppNavigation :class="{'icon-loading': loading}">
<template #list>
<AppNavigationItem :title="t('deck', 'Upcoming cards')"
icon="icon-calendar-dark"
<NcAppNavigationItem :title="t('deck', 'Upcoming cards')"
:exact="true"
to="/" />
to="/">
<template #icon>
<CalendarIcon :size="20" />
</template>
</NcAppNavigationItem>
<AppNavigationBoardCategory id="deck-navigation-all"
to="/board"
:text="t('deck', 'All boards')"
:boards="noneArchivedBoards"
:open-on-add-boards="true"
icon="icon-deck" />
icon="icon-deck">
<template #icon>
<DeckIcon :size="16" />
</template>
</AppNavigationBoardCategory>
<AppNavigationBoardCategory id="deck-navigation-archived"
to="/board/archived"
:text="t('deck', 'Archived boards')"
@@ -45,11 +52,15 @@
to="/board/shared"
:text="t('deck', 'Shared with you')"
:boards="sharedBoards"
icon="icon-shared" />
icon="icon-shared">
<template #icon>
<ShareVariantIcon :size="20" decorative />
</template>
</AppNavigationBoardCategory>
<AppNavigationAddBoard v-if="canCreate" />
</template>
<template #footer>
<AppNavigationSettings :title="t('deck', 'Deck settings')">
<NcAppNavigationSettings :title="t('deck', 'Deck settings')">
<div>
<div>
<input id="toggle-modal"
@@ -71,7 +82,7 @@
</label>
</div>
<Multiselect v-if="isAdmin"
<NcMultiselect v-if="isAdmin"
v-model="groupLimit"
:class="{'icon-loading-small': groupLimitDisabled}"
open-direction="bottom"
@@ -86,35 +97,41 @@
{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}
</p>
</div>
</AppNavigationSettings>
</NcAppNavigationSettings>
</template>
</AppNavigationVue>
</NcAppNavigation>
</template>
<script>
import axios from '@nextcloud/axios'
import { mapGetters } from 'vuex'
import ClickOutside from 'vue-click-outside'
import { AppNavigation as AppNavigationVue, AppNavigationItem, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcMultiselect } from '@nextcloud/vue'
import AppNavigationAddBoard from './AppNavigationAddBoard'
import AppNavigationBoardCategory from './AppNavigationBoardCategory'
import { loadState } from '@nextcloud/initial-state'
import { generateOcsUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import ArchiveIcon from 'vue-material-design-icons/Archive'
import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
import DeckIcon from './../icons/DeckIcon.vue'
import ShareVariantIcon from 'vue-material-design-icons/Share.vue'
const canCreateState = loadState('deck', 'canCreate')
export default {
name: 'AppNavigation',
components: {
AppNavigationVue,
AppNavigationSettings,
NcAppNavigation,
NcAppNavigationSettings,
AppNavigationAddBoard,
AppNavigationBoardCategory,
Multiselect,
AppNavigationItem,
NcMultiselect,
NcAppNavigationItem,
ArchiveIcon,
CalendarIcon,
DeckIcon,
ShareVariantIcon,
},
directives: {
ClickOutside,

12
src/components/navigation/AppNavigationAddBoard.vue
View File

@@ -20,24 +20,24 @@
-
-->
<template>
<AppNavigationItem v-if="!editing"
<NcAppNavigationItem v-if="!editing"
:title="t('deck', 'Add board')"
icon="icon-add"
@click.prevent.stop="startCreateBoard" />
<div v-else class="board-create">
<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</ColorPicker>
</NcColorPicker>
<form @submit.prevent.stop="createBoard">
<input :placeholder="t('deck', 'Board name')" type="text" required>
<input type="submit" value="" class="icon-confirm">
<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
</form>
</div>
</template>
<script>
import { ColorPicker, ActionButton, Actions, AppNavigationItem } from '@nextcloud/vue'
import { NcColorPicker, NcActionButton, NcActions, NcAppNavigationItem } from '@nextcloud/vue'
/**
*
@@ -52,7 +52,7 @@ function randomColor() {
export default {
name: 'AppNavigationAddBoard',
components: { ColorPicker, AppNavigationItem, ActionButton, Actions },
components: { NcColorPicker, NcAppNavigationItem, NcActionButton, NcActions },
directives: {},
props: {},
data() {

76
src/components/navigation/AppNavigationBoard.vue
View File

@@ -20,124 +20,124 @@
-
-->
<template>
<AppNavigationItem v-if="!editing"
<NcAppNavigationItem v-if="!editing"
:title="!deleted ? board.title : undoText"
:loading="loading"
:to="routeTo"
:undo="deleted"
@undo="unDelete">
<AppNavigationIconBullet slot="icon" :color="board.color" />
<NcAppNavigationIconBullet slot="icon" :color="board.color" />
<AppNavigationCounter v-if="board.acl.length"
<NcAppNavigationCounter v-if="board.acl.length"
slot="counter"
class="icon-shared"
style="opacity: 0.5" />
<template v-if="!deleted" slot="actions">
<template v-if="!isDueSubmenuActive">
<ActionButton icon="icon-info"
<NcActionButton icon="icon-info"
:close-after-click="true"
@click="actionDetails">
{{ t('deck', 'Board details') }}
</ActionButton>
<ActionButton v-if="canManage && !board.archived"
</NcActionButton>
<NcActionButton v-if="canManage && !board.archived"
icon="icon-rename"
:close-after-click="true"
@click="actionEdit">
{{ t('deck', 'Edit board') }}
</ActionButton>
<ActionButton v-if="canManage && !board.archived"
</NcActionButton>
<NcActionButton v-if="canManage && !board.archived"
:close-after-click="true"
@click="actionClone">
<template #icon>
<CloneIcon :size="20" decorative />
</template>
{{ t('deck', 'Clone board') }}
</ActionButton>
<ActionButton v-if="canManage && board.archived"
</NcActionButton>
<NcActionButton v-if="canManage && board.archived"
:close-after-click="true"
@click="actionUnarchive">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
{{ t('deck', 'Unarchive board') }}
</ActionButton>
<ActionButton v-else-if="canManage && !board.archived"
</NcActionButton>
<NcActionButton v-else-if="canManage && !board.archived"
:close-after-click="true"
@click="actionArchive">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
{{ t('deck', 'Archive board') }}
</ActionButton>
</NcActionButton>
<ActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
{{ board.settings['notify-due'] === 'off' ? t('deck', 'Turn on due date reminders') : t('deck', 'Turn off due date reminders') }}
</ActionButton>
</NcActionButton>
</template>
<!-- Due date reminder settings -->
<template v-if="isDueSubmenuActive">
<ActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
:disabled="updateDueSetting"
@click="isDueSubmenuActive=false">
{{ t('deck', 'Due date reminders') }}
</ActionButton>
</NcActionButton>
<ActionButton name="notification"
<NcActionButton name="notification"
icon="icon-sound"
:disabled="updateDueSetting"
:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
@click="updateSetting('notify-due', 'all')">
{{ t('deck', 'All cards') }}
</ActionButton>
<ActionButton name="notification"
</NcActionButton>
<NcActionButton name="notification"
icon="icon-user"
:disabled="updateDueSetting"
:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
@click="updateSetting('notify-due', 'assigned')">
{{ t('deck', 'Assigned cards') }}
</ActionButton>
<ActionButton name="notification"
</NcActionButton>
<NcActionButton name="notification"
icon="icon-sound-off"
:disabled="updateDueSetting"
:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
@click="updateSetting('notify-due', 'off')">
{{ t('deck', 'No notifications') }}
</ActionButton>
</NcActionButton>
</template>
<ActionButton v-else-if="!board.archived && board.acl.length > 0"
<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
:title="t('deck', 'Due date reminders')"
:icon="dueDateReminderIcon"
@click="isDueSubmenuActive=true">
{{ dueDateReminderText }}
</ActionButton>
</NcActionButton>
<ActionButton v-if="canManage && !isDueSubmenuActive"
<NcActionButton v-if="canManage && !isDueSubmenuActive"
icon="icon-delete"
:close-after-click="true"
@click="actionDelete">
{{ t('deck', 'Delete board') }}
</ActionButton>
</NcActionButton>
</template>
</AppNavigationItem>
</NcAppNavigationItem>
<div v-else-if="editing" class="board-edit">
<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
<NcColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</ColorPicker>
</NcColorPicker>
<form @submit.prevent.stop="applyEdit">
<input v-model="editTitle"
v-focus
type="text"
required>
<input type="submit" value="" class="icon-confirm">
<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
</form>
</div>
</template>
<script>
import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
import { NcAppNavigationIconBullet, NcAppNavigationCounter, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
import ClickOutside from 'vue-click-outside'
import ArchiveIcon from 'vue-material-design-icons/Archive'
import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
@@ -145,12 +145,12 @@ import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
export default {
name: 'AppNavigationBoard',
components: {
AppNavigationIconBullet,
AppNavigationCounter,
AppNavigationItem,
ColorPicker,
Actions,
ActionButton,
NcAppNavigationIconBullet,
NcAppNavigationCounter,
NcAppNavigationItem,
NcColorPicker,
NcActions,
NcActionButton,
ArchiveIcon,
CloneIcon,
},

13
src/components/navigation/AppNavigationBoardCategory.vue
View File

@@ -20,9 +20,8 @@
-
-->
<template>
<AppNavigationItem v-if="boards.length > 0"
<NcAppNavigationItem v-if="boards.length > 0"
:title="text"
:icon="icon"
:to="to"
:exact="true"
:allow-collapse="collapsible"
@@ -31,17 +30,17 @@
<template #icon>
<slot name="icon" />
</template>
</AppNavigationItem>
</NcAppNavigationItem>
</template>
<script>
import AppNavigationBoard from './AppNavigationBoard'
import { AppNavigationItem } from '@nextcloud/vue'
import { NcAppNavigationItem } from '@nextcloud/vue'
export default {
name: 'AppNavigationBoardCategory',
components: {
AppNavigationItem,
NcAppNavigationItem,
AppNavigationBoard,
},
props: {
@@ -57,10 +56,6 @@ export default {
type: String,
required: true,
},
icon: {
type: String,
required: true,
},
boards: {
type: Array,
required: true,

10
src/components/search/GlobalSearchResults.vue
View File

@@ -26,9 +26,9 @@
<RichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" />
<div v-if="loading" class="icon-loading-small" />
</h2>
<Actions>
<ActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
</Actions>
<NcActions>
<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
</NcActions>
<div class="search-wrapper">
<div v-if="loading || filteredResults.length > 0" class="search-results">
<CardItem v-for="card in filteredResults"
@@ -59,7 +59,7 @@ import { generateOcsUrl } from '@nextcloud/router'
import InfiniteLoading from 'vue-infinite-loading'
import RichText from '@juliushaertl/vue-richtext'
import Placeholder from './Placeholder'
import { Actions, ActionButton } from '@nextcloud/vue'
import { NcActions, NcActionButton } from '@nextcloud/vue'
const createCancelToken = () => axios.CancelToken.source()
@@ -88,7 +88,7 @@ function search({ query, cursor }) {
export default {
name: 'GlobalSearchResults',
components: { CardItem, InfiniteLoading, RichText, Placeholder, Actions, ActionButton },
components: { CardItem, InfiniteLoading, RichText, Placeholder, NcActions, NcActionButton },
data() {
return {
results: [],