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

Merge pull request #6258 from nextcloud/backport/6235/stable30

Browse Source 
[stable30] Fix UI with the new compact design
This commit is contained in:
Julius Härtl
2024-08-26 13:37:13 +02:00
committed by GitHub
parent 50dea78147 71fe340fad
commit 5aa2428e2d
7 changed files with 62 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Controls.vue
View File

@@ -31,7 +31,8 @@
<div class="board-actions">
<SessionList v-if="isNotifyPushEnabled && presentUsers.length"
:sessions="presentUsers" />
<div v-if="searchQuery || true" class="deck-search">
<!-- Hide but not remove for now as search might change in the future -->
<div v-if="false" class="deck-search">
<input id="deck-search-input"
ref="search"
:tabindex="0"
@@ -46,8 +47,11 @@
id="stack-add"
v-click-outside="hideAddStack">
<NcActions v-if="!isAddStackVisible">
<NcActionButton icon="icon-add" @click.stop="showAddStack">
<NcActionButton @click.stop="showAddStack">
{{ t('deck', 'Add list') }}
<template #icon>
<TableColumnPlusAfter :size="20" />
</template>
</NcActionButton>
</NcActions>
<form v-else @submit.prevent="addNewStack()">
@@ -263,6 +267,7 @@ import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
import ImageIcon from 'vue-material-design-icons/ImageMultiple.vue'
import FilterIcon from 'vue-material-design-icons/Filter.vue'
import FilterOffIcon from 'vue-material-design-icons/FilterOff.vue'
import TableColumnPlusAfter from 'vue-material-design-icons/TableColumnPlusAfter.vue'
import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical.vue'
import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'
import SessionList from './SessionList.vue'
@@ -286,6 +291,7 @@ export default {
FilterOffIcon,
ArrowCollapseVerticalIcon,
ArrowExpandVerticalIcon,
TableColumnPlusAfter,
SessionList,
},
mixins: [labelStyle],
@@ -475,7 +481,7 @@ export default {
<style lang="scss" scoped>
.controls {
display: flex;
margin: 5px;
margin: calc(var(--default-grid-baseline) * 2);
height: var(--default-clickable-area);
padding-left: var(--default-clickable-area);
@@ -486,17 +492,17 @@ export default {
h2 {
margin: 0;
margin-right: 10px;
font-size: 18px;
}
.board-bullet {
display: inline-block;
width: 20px;
height: 20px;
width: 16px;
height: 16px;
border: none;
border-radius: 50%;
background-color: transparent;
margin: 12px;
margin-left: -4px;
margin: var(--default-grid-baseline);
}
}

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

@@ -57,8 +57,11 @@
</NcActionButton>
</NcActions>
<NcActions v-if="canEdit && !showArchived && !isArchived">
<NcActionButton icon="icon-add" data-cy="action:add-card" @click.stop="showAddCard=true">
<NcActionButton data-cy="action:add-card" @click.stop="showAddCard=true">
{{ t('deck', 'Add card') }}
<template #icon>
<CardPlusOutline :size="20" />
</template>
</NcActionButton>
</NcActions>
</div>
@@ -136,6 +139,7 @@ import ClickOutside from 'vue-click-outside'
import { mapGetters, mapState } from 'vuex'
import { Container, Draggable } from 'vue-smooth-dnd'
import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
import { showError, showUndo } from '@nextcloud/dialogs'
@@ -153,6 +157,7 @@ export default {
Draggable,
NcModal,
ArchiveIcon,
CardPlusOutline,
},
directives: {
ClickOutside,
@@ -332,8 +337,9 @@ export default {
z-index: 100;
padding-left: $card-spacing;
padding-right: $card-spacing;
margin: 6px;
cursor: grab;
min-height: var(--default-clickable-area);
background-color: var(--color-main-background);
// Smooth fade out of the cards at the top
&:before {
@@ -354,7 +360,7 @@ export default {
}
&--add:before {
height: 80px;
height: 78px;
background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(255, 255, 255, 0) 100%);
body.theme--dark & {
background-image: linear-gradient(180deg, var(--color-main-background) 68px, rgba(0, 0, 0, 0) 100%);
@@ -383,9 +389,8 @@ export default {
text-overflow: ellipsis;
max-width: calc($stack-width - 60px);
border-radius: 3px;
margin: 6px;
padding: 4px 4px;
font-size: 120%;
font-size: var(--default-font-size);
&:focus-visible {
outline: 2px solid var(--color-border-dark);
@@ -394,7 +399,15 @@ export default {
}
form {
margin: 2px 0;
margin: -4px;
input {
font-weight: bold;
padding: 0 6px;
}
input[type="submit"] {
border-style: solid;
border-left-style: none;
}
}
:deep {
@@ -406,20 +419,18 @@ export default {
}
.stack__card-add {
height: var(--default-clickable-area);
flex-shrink: 0;
z-index: 100;
display: flex;
margin-top: 5px;
margin-bottom: 8px;
background-color: var(--color-main-background);
form {
display: flex;
margin-left: 12px;
margin-right: 12px;
margin-left: $stack-spacing;
margin-right: $card-spacing + $stack-spacing + 4px;
width: 100%;
border: 2px solid var(--color-border);
border: 2px solid var(--color-border-maxcontrast);
border-radius: var(--border-radius-large);
overflow: hidden;
padding: 2px;
@@ -436,6 +447,8 @@ export default {
input {
border: none;
margin: 0;
padding: 4px;
}
}

1
src/components/card/DueDateSelector.vue
View File

@@ -247,7 +247,6 @@ export default defineComponent({
.done-info--duedate,
.done-info--done {
display: flex;
padding-top: 10px;
&.dimmed {
color: var(--color-text-maxcontrast);
}

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

@@ -168,13 +168,13 @@ export default {
}
.badge-left {
align-self: end;
margin-bottom: 8px;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
flex-wrap: wrap;
align-content: flex-end;
align-items: center;
align-self: center;
gap: 3px;
}
@@ -196,6 +196,10 @@ export default {
opacity: 0;
}
.avatars:deep(button) {
margin: 0;
}
@media print {
.badges {
align-items: flex-start;

13
src/components/cards/CardItem.vue
View File

@@ -19,10 +19,10 @@
</div>
<CardCover v-if="showCardCover" :card-id="card.id" />
<div class="card-upper">
<h3 v-if="inlineEditingBlocked" dir="auto">
<h4 v-if="inlineEditingBlocked" dir="auto">
{{ card.title }}
</h3>
<h3 v-else
</h4>
<h4 v-else
dir="auto"
class="editable"
:aria-label="t('deck', 'Edit card title')">
@@ -35,7 +35,7 @@
@click.stop
@keyup.esc="cancelEdit"
@keyup.stop>{{ card.title }}</span>
</h3>
</h4>
<DueDate v-if="compactMode" :card="card" />
<CardMenu v-if="showMenuAtTitle" :card="card" class="right card-menu" />
@@ -294,7 +294,7 @@ export default {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
gap: var(--default-grid-baseline);
&:deep(*) {
cursor: pointer;
@@ -314,7 +314,8 @@ export default {
.card-upper {
display: flex;
h3 {
h4 {
font-weight: normal;
margin: 0;
padding: 6px;
flex-grow: 1;

9
src/css/selector.scss
View File

@@ -9,9 +9,13 @@
margin-top: 10px;
&--icon {
width: 38px;
padding-top: 12px;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
flex-shrink: 0;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
&--selector {
@@ -21,5 +25,6 @@
&--content {
display: flex;
flex-grow: 1;
align-items: center;
}
}

10
src/css/variables.scss
View File

@@ -2,8 +2,8 @@
* SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
$card-spacing: 16px;
$card-padding: 8px;
$stack-spacing: 12px;
$stack-width: 280px;
$board-spacing: 16px;
$card-spacing: 8px;
$card-padding: 4px;
$stack-spacing: 12px;
$stack-width: 280px;
$board-spacing: 16px;