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

Merge pull request #3803 from nextcloud/bugfix/noid/icon-css

Browse Source 
SCSS cleanup
This commit is contained in:
Julius Härtl
2022-07-25 19:51:01 +02:00
committed by GitHub
parent 484a47e0fd 9de6a61ea5
commit 3f78ee72b4
27 changed files with 190 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Controls.vue
View File

@@ -76,10 +76,16 @@
:aria-label="t('deck', 'Active filters')"
@show="filterVisible=true"
@hide="filterVisible=false">
<Actions slot="trigger" :title="t('deck', 'Apply filter')">
<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
<ActionButton v-else icon="icon-filter" />
</Actions>
<!-- We cannot use Actions here are the popover trigger does not update on reactive icons -->
<Button slot="trigger"
:title="t('deck', 'Apply filter')"
class="filter-button"
type="tertiary-no-background">
<template #icon>
<FilterIcon v-if="isFilterActive" :size="20" decorative />
<FilterOffIcon v-else :size="20" decorative />
</template>
</Button>
<div v-if="filterVisible" class="filter">
<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -179,18 +185,20 @@
</div>
<Actions>
<ActionButton icon="icon-archive"
@click="toggleShowArchived">
<ActionButton @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"
icon="icon-toggle-compact-collapsed"
@click="toggleCompactMode">
<ArrowExpandVerticalIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Toggle compact mode') }}
</ActionButton>
<ActionButton v-else
icon="icon-toggle-compact-expanded"
@click="toggleCompactMode">
<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Toggle compact mode') }}
</ActionButton>
</Actions>
@@ -208,11 +216,26 @@ import { mapState, mapGetters } from 'vuex'
import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
import labelStyle from '../mixins/labelStyle'
import CardCreateDialog from '../CardCreateDialog'
import ArchiveIcon from 'vue-material-design-icons/Archive'
import FilterIcon from 'vue-material-design-icons/Filter'
import FilterOffIcon from 'vue-material-design-icons/FilterOff'
import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical'
import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical'
export default {
name: 'Controls',
components: {
Actions, ActionButton, Avatar, Button, Popover, CardCreateDialog,
Actions,
ActionButton,
Button,
Popover,
Avatar,
CardCreateDialog,
ArchiveIcon,
FilterIcon,
FilterOffIcon,
ArrowCollapseVerticalIcon,
ArrowExpandVerticalIcon,
},
mixins: [labelStyle],
props: {
@@ -255,10 +278,7 @@ export default {
}
},
isFilterActive() {
if (this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== '') {
return true
}
return false
return this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== ''
},
labelsSorted() {
return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
@@ -443,6 +463,17 @@ export default {
margin-top: 0px;
margin-bottom: 5px;
}
.filter-button {
padding: 0;
border-radius: 50%;
width: 44px;
height: 44px;
&:hover, &:focus {
background-color: rgba(127,127,127,0.25) !important;
}
}
</style>
<style lang="scss">
.popover:focus {

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

@@ -50,7 +50,10 @@
</form>
</transition>
<Actions v-if="canManage && !isArchived" :force-menu="true">
<ActionButton icon="icon-archive" @click="modalArchivAllCardsShow=true">
<ActionButton @click="modalArchivAllCardsShow=true">
<template #icon>
<ArchiveIcon decorative />
</template>
{{ t('deck', 'Archive all cards') }}
</ActionButton>
<ActionButton icon="icon-delete" @click="deleteStack(stack)">
@@ -130,6 +133,7 @@ import { showError, showUndo } from '@nextcloud/dialogs'
import CardItem from '../cards/CardItem'
import '@nextcloud/dialogs/styles/toast.scss'
import ArchiveIcon from 'vue-material-design-icons/Archive'
export default {
name: 'Stack',
@@ -140,6 +144,7 @@ export default {
Container,
Draggable,
Modal,
ArchiveIcon,
},
props: {

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

@@ -57,8 +57,10 @@
<AppSidebarTab id="attachments"
:order="1"
:name="t('deck', 'Attachments')"
icon="icon-attach">
:name="t('deck', 'Attachments')">
<template #icon>
<AttachmentIcon size="20" decorative />
</template>
<CardSidebarTabAttachments :card="currentCard" />
</AppSidebarTab>
@@ -89,6 +91,7 @@ import CardSidebarTabComments from './CardSidebarTabComments'
import CardSidebarTabActivity from './CardSidebarTabActivity'
import relativeDate from '../../mixins/relativeDate'
import moment from '@nextcloud/moment'
import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
import { showError } from '@nextcloud/dialogs'
import { getLocale } from '@nextcloud/l10n'
@@ -105,6 +108,7 @@ export default {
CardSidebarTabComments,
CardSidebarTabActivity,
CardSidebarTabDetails,
AttachmentIcon,
},
mixins: [relativeDate],
props: {

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

@@ -25,7 +25,10 @@
{{ comment.actorDisplayName }}
</span>
<Actions v-show="!edit" :force-menu="true">
<ActionButton icon="icon-reply" :close-after-click="true" @click="replyTo()">
<ActionButton :close-after-click="true" @click="replyTo()">
<template #icon>
<ReplyIcon decorative />
</template>
{{ t('deck', 'Reply') }}
</ActionButton>
<ActionButton v-if="canEdit"
@@ -67,6 +70,7 @@ import CommentForm from './CommentForm'
import { getCurrentUser } from '@nextcloud/auth'
import md5 from 'blueimp-md5'
import relativeDate from '../../mixins/relativeDate'
import ReplyIcon from 'vue-material-design-icons/Reply'
const AtMention = {
name: 'AtMention',
@@ -90,6 +94,7 @@ export default {
ActionButton,
CommentForm,
RichText,
ReplyIcon,
},
mixins: [relativeDate],
props: {

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

@@ -39,7 +39,10 @@
</ActionButton>
</Actions>
<Actions v-if="canEdit">
<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
<ActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
<template #icon>
<PaperclipIcon :size="24" decorative />
</template>
{{ t('deck', 'Add Attachment') }}
</ActionButton>
</Actions>
@@ -80,6 +83,7 @@ import { Actions, ActionButton, Modal } from '@nextcloud/vue'
import { formatFileSize } from '@nextcloud/files'
import { generateUrl } from '@nextcloud/router'
import { mapState, mapGetters } from 'vuex'
import PaperclipIcon from 'vue-material-design-icons/Paperclip'
const markdownIt = new MarkdownIt({
linkify: true,
@@ -101,6 +105,7 @@ export default {
ActionButton,
Modal,
AttachmentList,
PaperclipIcon,
},
props: {
card: {

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

@@ -31,6 +31,7 @@
:user="user.participant.uid"
:display-name="user.participant.displayname"
:disable-menu="true"
:show-user-status="false"
:size="32" />
<Avatar v-if="user.type === 1"
:user="user.participant.uid"

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

@@ -24,19 +24,23 @@
<div v-if="card" class="badges">
<div v-if="card.commentsCount > 0"
v-tooltip="commentsHint"
class="icon icon-comment"
:class="{ 'icon-comment--unread': card.commentsUnread > 0 }"
class="icon-badge"
@click.stop="openComments">
{{ card.commentsCount }}
<CommentUnreadIcon v-if="card.commentsUnread > 0" size="16" />
<CommentIcon v-else size="16" />
<span>{{ card.commentsCount }}</span>
</div>
<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
{{ checkListCheckedCount }}/{{ checkListCount }}
<div v-if="card.description && checkListCount > 0" class="icon-badge">
<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
</div>
<div v-else-if="card.description.trim() && checkListCount == 0" class="icon icon-description" />
<div v-if="card.attachmentCount > 0" class="icon-attach icon icon-attach-dark">
{{ card.attachmentCount }}
<TextIcon v-else-if="card.description.trim() && checkListCount == 0" size="16" decorative />
<div v-if="card.attachmentCount > 0" class="icon-badge">
<AttachmentIcon size="16" />
<span>{{ card.attachmentCount }}</span>
</div>
<AvatarList :users="card.assignedUsers" />
@@ -47,10 +51,15 @@
<script>
import AvatarList from './AvatarList'
import CardMenu from './CardMenu'
import TextIcon from 'vue-material-design-icons/Text.vue'
import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'
import CommentIcon from 'vue-material-design-icons/Comment.vue'
import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
export default {
name: 'CardBadges',
components: { AvatarList, CardMenu },
components: { AvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
props: {
card: {
type: Object,
@@ -89,18 +98,13 @@ export default {
width: 100%;
flex-grow: 1;
.icon {
opacity: 0.5;
padding: 10px 20px;
padding-right: 4px;
margin-right: 5px;
background-position: left;
background-size: 16px;
.icon-badge {
opacity: .7;
display: flex;
margin-right: 2px;
span {
margin-left: 18px;
}
&.icon-comment--unread {
opacity: 1;
padding: 10px 2px;
}
}
}

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

@@ -40,9 +40,13 @@
{{ t('deck', 'Move card') }}
</ActionButton>
<ActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
<CardBulletedIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Card details') }}
</ActionButton>
<ActionButton icon="icon-archive" :close-after-click="true" @click="archiveUnarchiveCard()">
<ActionButton :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"
@@ -90,10 +94,12 @@ import { generateUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import { showUndo } from '@nextcloud/dialogs'
import '@nextcloud/dialogs/styles/toast.scss'
import ArchiveIcon from 'vue-material-design-icons/Archive'
import CardBulletedIcon from 'vue-material-design-icons/CardBulleted'
export default {
name: 'CardMenu',
components: { Actions, ActionButton, Modal, Multiselect },
components: { Actions, ActionButton, Modal, Multiselect, ArchiveIcon, CardBulletedIcon },
props: {
card: {
type: Object,

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

@@ -36,8 +36,11 @@
<AppNavigationBoardCategory id="deck-navigation-archived"
to="/board/archived"
:text="t('deck', 'Archived boards')"
:boards="archivedBoards"
icon="icon-archive" />
:boards="archivedBoards">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
</AppNavigationBoardCategory>
<AppNavigationBoardCategory id="deck-navigation-shared"
to="/board/shared"
:text="t('deck', 'Shared with you')"
@@ -98,6 +101,7 @@ 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'
const canCreateState = loadState('deck', 'canCreate')
@@ -110,6 +114,7 @@ export default {
AppNavigationBoardCategory,
Multiselect,
AppNavigationItem,
ArchiveIcon,
},
directives: {
ClickOutside,

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

@@ -47,21 +47,27 @@
{{ t('deck', 'Edit board') }}
</ActionButton>
<ActionButton v-if="canManage && !board.archived"
icon="icon-clone"
:close-after-click="true"
@click="actionClone">
<template #icon>
<CloneIcon :size="20" decorative />
</template>
{{ t('deck', 'Clone board') }}
</ActionButton>
<ActionButton v-if="canManage && board.archived"
icon="icon-archive"
: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"
icon="icon-archive"
:close-after-click="true"
@click="actionArchive">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
{{ t('deck', 'Archive board') }}
</ActionButton>
@@ -133,6 +139,8 @@
<script>
import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } 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'
export default {
name: 'AppNavigationBoard',
@@ -143,6 +151,8 @@ export default {
ColorPicker,
Actions,
ActionButton,
ArchiveIcon,
CloneIcon,
},
directives: {
ClickOutside,

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

@@ -28,6 +28,9 @@
:allow-collapse="collapsible"
:open="opened">
<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />
<template #icon>
<slot name="icon" />
</template>
</AppNavigationItem>
</template>