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

Fix styling in label color picker and pick random default colors

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-01-29 13:18:10 +01:00
parent 167448dde1
commit 36dadfe25d
5 changed files with 67 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@@ -3570,9 +3570,9 @@
}
},
"@nextcloud/vue": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.2.8.tgz",
"integrity": "sha512-YEiI+Cu7v+xRXgZ15vK/pcbOEyOcy6PHI90/JMHsVJVVGTYijy5oeG4izQFc0+/oC1idgbShrwN4Cr1W1JfxWA==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.3.0.tgz",
"integrity": "sha512-zqSLvrp+pX012qNBbJBuE/Z9MPv/A6fovsro2nkGCoO0ppBD+W9gmjzLa6D9jRHN24+BmDWB3lNGd9T/G0q3Fw==",
"requires": {
"@nextcloud/axios": "^1.1.0",
"@nextcloud/router": "^1.0.0",

2
package.json
View File

@@ -32,7 +32,7 @@
"@nextcloud/axios": "^1.3.1",
"@nextcloud/l10n": "^1.0.1",
"@nextcloud/router": "^1.0.0",
"@nextcloud/vue": "^1.2.8",
"@nextcloud/vue": "^1.3.0",
"fuse.js": "^3.4.6",
"nextcloud-server": "^0.15.10",
"nextcloud-vue-collections": "^0.7.1",

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

@@ -25,22 +25,32 @@
:actions="[]"
:title="board.title"
@close="closeSidebar">
<AppSidebarTab :order="0" name="Sharing" icon="icon-shared">
<AppSidebarTab id="sharing"
:order="0"
:name="t('deck', 'Sharing')"
icon="icon-shared">
<SharingTabSidebar :board="board" />
</AppSidebarTab>
<AppSidebarTab :order="1" name="Tags" icon="icon-tag">
<AppSidebarTab id="tags"
:order="1"
:name="t('deck', 'Tags')"
icon="icon-tag">
<TagsTabSidebar :board="board" />
</AppSidebarTab>
<AppSidebarTab v-if="canEdit"
id="deleted"
:order="2"
name="Deleted items"
:name="t('deck', 'Deleted items')"
icon="icon-delete">
<DeletedTabSidebar :board="board" />
</AppSidebarTab>
<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
<AppSidebarTab id="activity"
:order="3"
:name="t('deck', 'Timeline')"
icon="icon-activity">
<TimelineTabSidebar :board="board" />
</AppSidebarTab>
</AppSidebar>

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

@@ -4,10 +4,10 @@
<li v-for="label in labels" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
<!-- Edit Tag -->
<template v-if="editingLabelId === label.id">
<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</ColorPicker>
<form class="label-form" @submit.prevent="updateLabel(label)">
<ColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
</ColorPicker>
<input v-model="editingLabel.title" type="text">
<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
:disabled="!editLabelObjValidated"
@@ -38,10 +38,10 @@
<li v-if="addLabel" class="editing">
<!-- New Tag -->
<template>
<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</ColorPicker>
<form class="label-form" @submit.prevent="clickAddLabel">
<ColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
</ColorPicker>
<input v-model="addLabelObj.title" type="text">
<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
:disabled="!addLabelObjValidated"
@@ -81,7 +81,7 @@ export default {
addLabelObj: null,
addLabel: false,
missingDataLabel: t('deck', 'title and color value must be provided'),
defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
defaultColors: ['31CC7C', '17CCC', 'FF7A66', 'F1DB50', '7C31CC', 'CC317C', '3A3B3D', 'CACBCD'],
}
},
computed: {
@@ -133,7 +133,7 @@ export default {
this.editingLabelId = null
},
clickShowAddLabel() {
this.addLabelObj = { cardId: null, color: '000000', title: '' }
this.addLabelObj = { cardId: null, color: this.defaultColors[Math.floor(Math.random() * this.defaultColors.length)], title: '' }
this.addLabel = true
},
clickAddLabel() {
@@ -145,9 +145,13 @@ export default {
}
</script>
<style scoped lang="scss">
$clickable-area: 37px;
.labels li {
display: flex;
margin-bottom: 3px;
align-items: stretch;
height: $clickable-area;
.label-title {
flex-grow: 1;
@@ -158,23 +162,27 @@ export default {
}
}
&:not(.editing) button {
width: 44px;
margin: 0;
margin-left: -3px;
width: $clickable-area;
margin: 0 0 0 -3px;
}
.app-navigation-entry-bullet-wrapper {
position: absolute;
width: 44px !important;
margin: 6px;
height: 44px;
.color0 {
width: 30px !important;
height: 30px;
border-radius: 50%;
background-size: 14px;
.color-picker-wrapper {
&, &::v-deep > .trigger {
width: $clickable-area;
padding: 3px;
display: flex;
align-items: stretch;
position: relative;
}
.color0 {
position: absolute;
width: calc(#{$clickable-area} - 6px);
height: calc(#{$clickable-area} - 6px);
background-size: 14px;
border-radius: 50%;
}
}
}
&.editing {
display: block;
@@ -187,12 +195,11 @@ export default {
}
button,
input:not([type='text']):last-child {
border-bottom-right-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-bottom-left-radius: 0;
border-top-left-radius: 0;
min-width: $clickable-area;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
margin-left: -1px;
width: 35px;
background-color: var(--color-main-background);
}
}
</style>

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

@@ -26,7 +26,10 @@
:subtitle="subtitle"
@close="closeSidebar">
<template #secondary-actions />
<AppSidebarTab :order="0" name="Details" icon="icon-home">
<AppSidebarTab id="details"
:order="0"
:name="t('deck', 'Details')"
icon="icon-home">
<div class="section-wrapper">
<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
@@ -117,15 +120,24 @@
<VueEasymde ref="markdownEditor" v-model="copiedCard.description" :configs="mdeConfig" />
</AppSidebarTab>
<AppSidebarTab :order="1" :name="t('deck', 'Attachments')" icon="icon-attach">
<AppSidebarTab id="attachments"
:order="1"
:name="t('deck', 'Attachments')"
icon="icon-attach">
<CardSidebarTabAttachments :card="currentCard" />
</AppSidebarTab>
<AppSidebarTab :order="2" :name="t('deck', 'Comments')" icon="icon-comment">
<AppSidebarTab id="comments"
:order="2"
:name="t('deck', 'Comments')"
icon="icon-comment">
<CardSidebarTabComments :card="currentCard" />
</AppSidebarTab>
<AppSidebarTab :order="3" :name="t('deck', 'Timeline')" icon="icon-activity">
<AppSidebarTab id="timeline"
:order="3"
:name="t('deck', 'Timeline')"
icon="icon-activity">
<CardSidebarTabActivity :card="currentCard" />
</AppSidebarTab>
</AppSidebar>