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

fix: design review issues

Browse Source 
Signed-off-by: Luka Trovic <luka@nextcloud.com>
This commit is contained in:
Luka Trovic
2024-07-15 19:00:15 +02:00
parent 76594bf95c
commit 9bc601c7a9
22 changed files with 73 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
css/deck.css
View File

@@ -11,3 +11,13 @@
background-image: url(../img/deck.svg); background-image: url(../img/deck.svg);
filter: var(--background-invert-if-dark); filter: var(--background-invert-if-dark);
} }
input[type=submit].icon-confirm {
border-color: var(--color-border-maxcontrast) !important;
border-left: none;
}
input[type=text]:focus+input[type=submit].icon-confirm,
input[type=text]:hover+input[type=submit].icon-confirm {
border-color: var(--color-main-text) !important;
}

2
src/components/ActivityEntry.vue
View File

@@ -120,7 +120,7 @@ export default {
margin-left: 10px; margin-left: 10px;
} }
.activity--message { .activity--message {
margin-left: 44px; margin-left: var(--default-clickable-area);
color: var(--color-text-light); color: var(--color-text-light);
margin-bottom: 10px; margin-bottom: 10px;
} }

12
src/components/Controls.vue
View File

@@ -476,8 +476,8 @@ export default {
.controls { .controls {
display: flex; display: flex;
margin: 5px; margin: 5px;
height: 44px; height: var(--default-clickable-area);
padding-left: 44px; padding-left: var(--default-clickable-area);
.board-title { .board-title {
display: flex; display: flex;
@@ -507,8 +507,8 @@ export default {
#app-navigation-toggle-custom { #app-navigation-toggle-custom {
position: static; position: static;
width: 44px; width: var(--default-clickable-area);
height: 44px; height: var(--default-clickable-area);
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
display: inline-block !important; display: inline-block !important;
@@ -567,8 +567,8 @@ export default {
.filter-button { .filter-button {
padding: 0; padding: 0;
border-radius: 50%; border-radius: 50%;
width: 44px; width: var(--default-clickable-area);
height: 44px; height: var(--default-clickable-area);
&[data-popper-shown] { &[data-popper-shown] {
background-color: var(--color-background-hover); background-color: var(--color-background-hover);

2
src/components/SessionList.vue
View File

@@ -56,7 +56,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.avatar-list { .avatar-list {
min-height: 44px; min-height: var(--default-clickable-area);
align-items: center; align-items: center;
padding-right: 0.5em; padding-right: 0.5em;
border: none; border: none;

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

@@ -250,7 +250,7 @@ export default {
.board { .board {
padding-left: $board-spacing; padding-left: $board-spacing;
position: relative; position: relative;
max-height: calc(100% - 44px); max-height: calc(100% - var(--default-clickable-area));
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
flex-grow: 1; flex-grow: 1;

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

@@ -1,6 +1,6 @@
<!-- <!--
- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later - SPDX-License-Identifier: AGPL-3.0-or-later
--> -->
<template> <template>
@@ -100,3 +100,12 @@ export default {
}, },
} }
</script> </script>
<style scoped lang="scss">
:deep {
.app-sidebar-tabs__tab-caption,
.app-sidebar-tabs__nav .checkbox-content__text {
white-space: normal !important;
}
}
</style>

6
src/components/board/DeletedTabSidebar.vue
View File

@@ -4,7 +4,7 @@
--> -->
<template> <template>
<div> <div>
<h3>{{ t('deck', 'Deleted lists') }}</h3> <h5>{{ t('deck', 'Deleted lists') }}</h5>
<ul> <ul>
<li v-for="deletedStack in deletedStacks" :key="deletedStack.id"> <li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
<span class="icon icon-deck" /> <span class="icon icon-deck" />
@@ -18,7 +18,7 @@
</li> </li>
</ul> </ul>
<h3>{{ t('deck', 'Deleted cards') }}</h3> <h5>{{ t('deck', 'Deleted cards') }}</h5>
<ul> <ul>
<li v-for="deletedCard in deletedCards" :key="deletedCard.id"> <li v-for="deletedCard in deletedCards" :key="deletedCard.id">
<div class="icon icon-deck" /> <div class="icon icon-deck" />
@@ -102,7 +102,7 @@ export default {
} }
* { * {
flex-basis: 44px; flex-basis: var(--default-clickable-area);
} }
.title { .title {

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

@@ -1,6 +1,6 @@
<!-- <!--
- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later - SPDX-License-Identifier: AGPL-3.0-or-later
--> -->
<template> <template>
@@ -261,7 +261,7 @@ export default {
}, },
startEditing(stack) { startEditing(stack) {
if (this.dragging) { if (this.dragging) {
return return
} }
this.copiedStack = Object.assign({}, stack) this.copiedStack = Object.assign({}, stack)
@@ -322,7 +322,7 @@ export default {
padding-left: $card-spacing; padding-left: $card-spacing;
padding-right: $card-spacing; padding-right: $card-spacing;
cursor: grab; cursor: grab;
min-height: 44px; min-height: var(--default-clickable-area);
// Smooth fade out of the cards at the top // Smooth fade out of the cards at the top
&:before { &:before {
@@ -374,6 +374,7 @@ export default {
border-radius: 3px; border-radius: 3px;
margin: 6px; margin: 6px;
padding: 4px 4px; padding: 4px 4px;
font-size: 120%;
&:focus-visible { &:focus-visible {
outline: 2px solid var(--color-border-dark); outline: 2px solid var(--color-border-dark);
@@ -384,10 +385,17 @@ export default {
form { form {
margin: 2px 0; margin: 2px 0;
} }
:deep {
.action-item,
.v-popper--theme-dropdown {
display: flex;
}
}
} }
.stack__card-add { .stack__card-add {
height: 44px; height: var(--default-clickable-area);
flex-shrink: 0; flex-shrink: 0;
z-index: 100; z-index: 100;
display: flex; display: flex;

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

@@ -173,7 +173,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$clickable-area: 44px; $clickable-area: var(--default-clickable-area);
.labels li { .labels li {
display: flex; display: flex;

4
src/components/boards/Boards.vue
View File

@@ -62,7 +62,7 @@ export default {
<style lang="scss"> <style lang="scss">
.board-list { .board-list {
margin-top: -44px; margin-top: - var(--default-clickable-area); //@TODO
.board-list-row { .board-list-row {
align-items: center; align-items: center;
@@ -77,7 +77,7 @@ export default {
.board-list-header-row { .board-list-header-row {
color: var(--color-text-lighter); color: var(--color-text-lighter);
height: 44px; height: var(--default-clickable-area);
} }
.board-list-bullet-cell, .board-list-bullet-cell,

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

@@ -253,10 +253,10 @@ export default {
gap: calc(var(--default-grid-baseline) * 3); gap: calc(var(--default-grid-baseline) * 3);
.icon-upload, .icon-folder { .icon-upload, .icon-folder {
padding-left: 44px; padding-left: var(--default-clickable-area);
background-position: 16px center; background-position: 16px center;
flex-grow: 1; flex-grow: 1;
height: 44px; height: var(--default-clickable-area);
margin-bottom: 12px; margin-bottom: 12px;
text-align: left; text-align: left;
} }
@@ -291,7 +291,7 @@ export default {
li.attachment { li.attachment {
display: flex; display: flex;
padding: 3px; padding: 3px;
min-height: 44px; min-height: var(--default-clickable-area);
&.deleted { &.deleted {
opacity: .5; opacity: .5;
@@ -339,7 +339,7 @@ export default {
} }
} }
button.icon-history { button.icon-history {
width: 44px; width: var(--default-clickable-area);
} }
progress { progress {
margin-top: 3px; margin-top: 3px;

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

@@ -221,7 +221,7 @@ section.app-sidebar__tab--active {
right: 0; right: 0;
max-width: calc(100% - #{$modal-padding * 2}); max-width: calc(100% - #{$modal-padding * 2});
padding: 0 14px; padding: 0 14px;
height: 100%; height: 97%;
overflow: initial; overflow: initial;
user-select: text; user-select: text;
-webkit-user-select: text; -webkit-user-select: text;

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

@@ -213,7 +213,7 @@ export default {
@import '../../css/comments'; @import '../../css/comments';
.reply { .reply {
margin: 0 0 0 44px; margin: 0 0 0 var(--default-clickable-area);
&.reply--preview { &.reply--preview {
margin: 4px 0; margin: 4px 0;

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

@@ -367,7 +367,7 @@ h5 {
} }
.description__text :deep(.ProseMirror) { .description__text :deep(.ProseMirror) {
padding-bottom: 44px; padding-bottom: var(--default-clickable-area);
} }
</style> </style>

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

@@ -338,7 +338,7 @@ export default {
} }
} }
.card-menu { .card-menu {
height: 44px; height: var(--default-clickable-area);
align-self: end; align-self: end;
} }
} }
@@ -391,7 +391,7 @@ export default {
} }
.compact { .compact {
min-height: 44px; min-height: var(--default-clickable-area);
.duedate { .duedate {
margin-right: 0; margin-right: 0;

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

@@ -73,7 +73,7 @@ export default {
.board-create { .board-create {
order: 1; order: 1;
display: flex; display: flex;
height: 44px; height: var(--default-clickable-area);
form { form {
display: flex; display: flex;
@@ -86,8 +86,8 @@ export default {
} }
.app-navigation-entry-bullet-wrapper { .app-navigation-entry-bullet-wrapper {
width: 44px; width: var(--default-clickable-area);
height: 44px; height: var(--default-clickable-area);
.color0 { .color0 {
width: 30px !important; width: 30px !important;
margin: 5px; margin: 5px;

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

@@ -319,10 +319,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.board-edit { .board-edit {
margin-left: 44px; margin-left: var(--default-clickable-area);
order: 1; order: 1;
display: flex; display: flex;
height: 44px; height: var(--default-clickable-area);
form { form {
display: flex; display: flex;
@@ -335,8 +335,8 @@ export default {
} }
.app-navigation-entry-bullet-wrapper { .app-navigation-entry-bullet-wrapper {
width: 44px; width: var(--default-clickable-area);
height: 44px; height: var(--default-clickable-area);
.color0 { .color0 {
width: 30px !important; width: 30px !important;
margin: 5px; margin: 5px;

2
src/components/overview/Overview.vue
View File

@@ -158,7 +158,7 @@ export default {
.overview { .overview {
position: relative; position: relative;
height: calc(100% - 44px); height: calc(100% - var(--default-clickable-area));
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
align-items: stretch; align-items: stretch;

2
src/components/search/Placeholder.vue
View File

@@ -59,7 +59,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../css/variables'; @import '../../css/variables';
$clickable-area: 44px; $clickable-area: var(--default-clickable-area);
.card--placeholder { .card--placeholder {
width: $stack-width; width: $stack-width;

8
src/css/comments.scss
View File

@@ -9,7 +9,7 @@
.editor__content:deep { .editor__content:deep {
flex-grow: 1; flex-grow: 1;
margin-left: 44px; margin-left: var(--default-clickable-area);
.ProseMirror { .ProseMirror {
width: 100%; width: 100%;
@@ -17,8 +17,8 @@
} }
input[type='submit'] { input[type='submit'] {
width: 44px; width: var(--default-clickable-area);
height: 44px; height: var(--default-clickable-area);
margin: 0; margin: 0;
padding: 13px; padding: 13px;
background-color: transparent; background-color: transparent;
@@ -51,6 +51,6 @@
} }
.comment--content { .comment--content {
margin-left: 44px; margin-left: var(--default-clickable-area);
word-break: break-word; word-break: break-word;
} }

1
src/helpers/mentions.js
View File

@@ -2,6 +2,7 @@
* SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later * SPDX-License-Identifier: AGPL-3.0-or-later
*/ */
const rawToParsed = (text) => { const rawToParsed = (text) => {
text = text.replace(/<br>/g, '\n') text = text.replace(/<br>/g, '\n')
text = text.replace(/&nbsp;/g, ' ') text = text.replace(/&nbsp;/g, ' ')

1
src/helpers/xml.js
View File

@@ -2,6 +2,7 @@
* SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later * SPDX-License-Identifier: AGPL-3.0-or-later
*/ */
const xmlToJson = (xml) => { const xmlToJson = (xml) => {
let obj = {} let obj = {}
if (xml.nodeType === 1) { if (xml.nodeType === 1) {