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
committed by grnd-alt
parent 88c5f5fe15
commit aed4baa8fc
20 changed files with 67 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
css/deck.css
View File

@@ -7,3 +7,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

@@ -137,7 +137,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

@@ -493,8 +493,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;
@@ -524,8 +524,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;
@@ -584,8 +584,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

@@ -72,7 +72,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

@@ -277,7 +277,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;

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

@@ -117,3 +117,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

@@ -1,6 +1,6 @@
<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" />
@@ -14,7 +14,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" />
@@ -98,7 +98,7 @@ export default {
} }
* { * {
flex-basis: 44px; flex-basis: var(--default-clickable-area);
} }
.title { .title {

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

@@ -351,7 +351,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 {
@@ -403,6 +403,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);
@@ -413,10 +414,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

@@ -169,7 +169,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

@@ -79,7 +79,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;
@@ -94,7 +94,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

@@ -280,10 +280,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;
} }
@@ -318,7 +318,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;
@@ -366,7 +366,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

@@ -229,7 +229,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

@@ -209,7 +209,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

@@ -387,7 +387,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

@@ -363,7 +363,7 @@ export default {
} }
} }
.card-menu { .card-menu {
height: 44px; height: var(--default-clickable-area);
align-self: end; align-self: end;
} }
} }
@@ -416,7 +416,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

@@ -90,7 +90,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;
@@ -103,8 +103,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

@@ -336,10 +336,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;
@@ -352,8 +352,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

@@ -175,7 +175,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

@@ -55,7 +55,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

@@ -5,7 +5,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%;
@@ -13,8 +13,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;
@@ -47,6 +47,6 @@
} }
.comment--content { .comment--content {
margin-left: 44px; margin-left: var(--default-clickable-area);
word-break: break-word; word-break: break-word;
} }