Skip to content

Commit

Permalink
Merge pull request #5264 from nextcloud/fix/design
Browse files Browse the repository at this point in the history
  • Loading branch information
juliusknorr authored Nov 13, 2023
2 parents 030ad0f + b360ba6 commit 05020b0
Show file tree
Hide file tree
Showing 13 changed files with 234 additions and 191 deletions.
3 changes: 1 addition & 2 deletions cypress/e2e/cardFeatures.js
Original file line number Diff line number Diff line change
Expand Up @@ -214,8 +214,7 @@ describe('Card', function() {
cy.tick(1_000)
cy.get('[data-cy-due-date-remove] button').should('be.visible').click()

cy.get(`.card:contains("${newCardTitle}")`).find('[data-due-state]').should('not.be.visible')

cy.get(`.card:contains("${newCardTitle}")`).find('[data-due-state]').should('not.exist')
})

})
Expand Down
2 changes: 1 addition & 1 deletion src/components/board/Board.vue
Original file line number Diff line number Diff line change
Expand Up @@ -249,9 +249,9 @@ export default {
padding: $stack-spacing;
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
padding-top: 15px;
margin-top: -10px;
scrollbar-gutter: stable;
}
.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
Expand Down
14 changes: 6 additions & 8 deletions src/components/board/Stack.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,9 @@
<div v-click-outside="stopCardCreation"
class="stack__header"
:class="{'stack__header--add': showAddCard}"
tabindex="0"
:aria-label="stack.title">
<transition name="fade" mode="out-in">
<h3 v-if="!canManage || isArchived">
<h3 v-if="!canManage || isArchived" tabindex="0">
{{ stack.title }}
</h3>
<h3 v-else-if="!editing"
Expand Down Expand Up @@ -330,8 +329,6 @@ export default {
.stack {
width: $stack-width + $stack-spacing * 3;
margin-left: math.div($stack-spacing, 2);
margin-right: math.div($stack-spacing, 2);
}
.stack__header {
Expand All @@ -340,6 +337,7 @@ export default {
top: 0;
z-index: 100;
padding-left: $card-spacing;
padding-right: $card-spacing;
cursor: grab;
min-height: 44px;
Expand All @@ -348,10 +346,10 @@ export default {
content: ' ';
display: block;
position: absolute;
width: 100%;
width: calc(100% - 16px);
height: 20px;
top: 30px;
right: 10px;
left: 0px;
z-index: 99;
transition: top var(--animation-slow);
Expand Down Expand Up @@ -411,15 +409,15 @@ export default {
z-index: 100;
display: flex;
margin-top: 5px;
margin-bottom: 20px;
margin-bottom: 8px;
background-color: var(--color-main-background);
form {
display: flex;
margin-left: 12px;
margin-right: 12px;
width: 100%;
box-shadow: 0 0 3px var(--color-box-shadow);
border: 2px solid var(--color-border);
border-radius: var(--border-radius-large);
overflow: hidden;
padding: 2px;
Expand Down
12 changes: 7 additions & 5 deletions src/components/card/AttachmentList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
<template>
<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
<div v-if="!isReadOnly" class="button-group">
<button class="icon-upload" @click="uploadNewFile()">
<NcButton class="icon-upload" @click="uploadNewFile()">
{{ t('deck', 'Upload new files') }}
</button>
<button class="icon-folder" @click="shareFromFiles()">
</NcButton>
<NcButton class="icon-folder" @click="shareFromFiles()">
{{ t('deck', 'Share from Files') }}
</button>
</NcButton>
</div>
<input ref="filesAttachment"
type="file"
Expand Down Expand Up @@ -103,7 +103,7 @@

<script>
import axios from '@nextcloud/axios'
import { NcActions, NcActionButton, NcActionLink } from '@nextcloud/vue'
import { NcActions, NcActionButton, NcActionLink, NcButton } from '@nextcloud/vue'
import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
import relativeDate from '../../mixins/relativeDate.js'
import { formatFileSize } from '@nextcloud/files'
Expand All @@ -128,6 +128,7 @@ export default {
NcActions,
NcActionButton,
NcActionLink,
NcButton,
AttachmentDragAndDrop,
},
mixins: [relativeDate, attachmentUpload],
Expand Down Expand Up @@ -267,6 +268,7 @@ export default {
.button-group {
display: flex;
gap: calc(var(--default-grid-baseline) * 3);
.icon-upload, .icon-folder {
padding-left: 44px;
Expand Down
33 changes: 19 additions & 14 deletions src/components/cards/AvatarList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<div class="avatars">
<div class="avatar-list" @click.stop="togglePopover">
<div v-if="popover.length > 0">
<div class="avatardiv icon-more" />
<AccountMultiple class="avatardiv more-avatars" :size="24" />
</div>
<div v-for="user in firstUsers" :key="user.id">
<NcAvatar v-if="user.type === 0"
Expand Down Expand Up @@ -72,12 +72,14 @@
<script>
import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
import { generateUrl } from '@nextcloud/router'
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
export default {
name: 'AvatarList',
components: {
NcAvatar,
NcPopoverMenu,
AccountMultiple,
},
directives: {
tooltip: Tooltip,
Expand Down Expand Up @@ -151,7 +153,6 @@ export default {

<style scoped lang="scss">
.avatars {
margin-top: 5px;
position: relative;
flex-grow: 1;
:deep(.popovermenu) {
Expand All @@ -173,25 +174,29 @@ export default {
display: inline-flex;
padding-right: $avatar-offset;
flex-direction: row-reverse;
& > div {
height: 32px;
}
.avatardiv,
:deep(.avatardiv) {
width: 36px;
height: 36px;
width: 32px;
height: 32px;
box-sizing: content-box !important;
margin-right: -$avatar-offset;
transition: margin-right 0.2s ease-in-out;
&.icon-more {
width: 32px;
height: 32px;
opacity: .5;
background-color: var(--color-background-dark) !important;
cursor: pointer;
}
border: 2px solid var(--color-main-background);
}
&:hover div:nth-child(n+2) :deep(.avatardiv) {
margin-right: 1px;
.more-avatars {
width: 32px;
height: 32px;
background-color: var(--color-background-dark) !important;
cursor: pointer;
color: var(--color-text-maxcontrast);
}
}
.popovermenu {
Expand Down
114 changes: 81 additions & 33 deletions src/components/cards/CardBadges.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,46 +22,66 @@

<template>
<div v-if="card" class="badges">
<CardId v-if="idBadge" class="icon-badge" :card="card" />
<div v-if="card.commentsCount > 0"
v-tooltip="commentsHint"
class="icon-badge"
@click.stop="openComments">
<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
<CommentIcon v-else :size="16" />
<span>{{ card.commentsCount }}</span>
<div class="badge-left">
<DueDate v-if="card.duedate || card.done" :card="card" />

<div class="inline-badges">
<CardId v-if="idBadge" class="icon-badge" :card="card" />

<div v-if="card.commentsCount > 0"
v-tooltip="commentsHint"
class="icon-badge"
@click.stop="openComments">
<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="icon-badge">
<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
</div>

<div v-else-if="card.description && card.description.trim() && checkListCount == 0" class="icon-badge">
<TextIcon :size="16" decorative />
</div>

<div v-if="card.attachmentCount > 0" class="icon-badge">
<AttachmentIcon :size="16" />
<span>{{ card.attachmentCount }}</span>
</div>
</div>
</div>

<div v-if="card.description && checkListCount > 0" class="icon-badge">
<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
</div>

<TextIcon v-else-if="card.description && card.description.trim() && checkListCount == 0" :size="16" decorative />
<div class="badge-right">
<NcAvatarList :users="card.assignedUsers" :size="32" />

<div v-if="card.attachmentCount > 0" class="icon-badge">
<AttachmentIcon :size="16" />
<span>{{ card.attachmentCount }}</span>
<slot />
</div>

<NcAvatarList :users="card.assignedUsers" />

<CardMenu class="card-menu" :card="card" />
</div>
</template>
<script>
import NcAvatarList from './AvatarList.vue'
import CardId from './badges/CardId.vue'
import CardMenu from './CardMenu.vue'
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'
import DueDate from './badges/DueDate.vue'
export default {
name: 'CardBadges',
components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon, CardId },
components: {
DueDate,
NcAvatarList,
TextIcon,
AttachmentIcon,
CheckmarkIcon,
CommentIcon,
CommentUnreadIcon,
CardId,
},
props: {
card: {
type: Object,
Expand Down Expand Up @@ -102,26 +122,33 @@ export default {
display: flex;
width: 100%;
flex-grow: 1;
flex-direction: row;
gap: 3px;
.icon-badge {
opacity: .7;
color: var(--color-text-maxcontrast);
display: flex;
margin-right: 2px;
span,
&:deep(span) {
padding: 10px 2px;
padding: 2px;
}
}
}
.inline-badges {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3px;
}
.badges .icon.due {
background-position: 4px center;
border-radius: 3px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: var(--border-radius);
padding: 4px;
font-size: 90%;
font-size: 13px;
display: flex;
align-items: center;
opacity: .5;
Expand Down Expand Up @@ -153,6 +180,31 @@ export default {
}
}
.badge-left, .badge-right {
display: flex;
}
.badge-left {
align-self: end;
margin-bottom: 8px;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
flex-wrap: wrap;
align-content: flex-end;
gap: 3px;
}
.badge-right {
align-items: center;
align-self: flex-end;
display: flex;
justify-items: center;
max-width: 165px;
flex-grow: 0;
flex-shrink: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .125s;
}
Expand All @@ -166,9 +218,5 @@ export default {
align-items: flex-start;
max-height: none !important;
}
.card-menu {
display: none;
}
}
</style>
4 changes: 4 additions & 0 deletions src/components/cards/CardCover.vue
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ export default {
.card-cover {
height: 100px;
display: flex;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
.image-wrapper {
flex: 1;
position: relative;
Expand Down
Loading

0 comments on commit 05020b0

Please sign in to comment.