Merge pull request #1505 from nextcloud/new-color-picker
use color picker from nextcloud vue
This commit is contained in:
Julius Härtl
GitHub
6
package-lock.json
generated
6
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,175 +0,0 @@
|
||||
<!--
|
||||
- @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
|
||||
-
|
||||
- @author Julius Härtl <jus@bitgrid.net>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-click-outside="hidePicker" class="color-picker">
|
||||
<div class="color-picker-compact">
|
||||
<Compact v-model="color" :palette="defaultColors" @input="updateColor" />
|
||||
<div :style="{'background-color': color.hex}" class="custom-color-button icon-colorpicker" @click.prevent="showFullPicker=!showFullPicker" />
|
||||
</div>
|
||||
<Chrome v-if="showFullPicker"
|
||||
v-model="color"
|
||||
:palette="defaultColors"
|
||||
@input="updateColor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// TODO: import styles manually if possible
|
||||
import { Compact, Chrome } from 'vue-color'
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
|
||||
export default {
|
||||
name: 'ColorPicker',
|
||||
components: {
|
||||
Compact,
|
||||
Chrome,
|
||||
},
|
||||
directives: {
|
||||
ClickOutside,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Object],
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: { hex: this.value },
|
||||
defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
|
||||
showFullPicker: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateColor() {
|
||||
this.$emit('input', this.color.hex)
|
||||
},
|
||||
hidePicker() {
|
||||
this.showFullPicker = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$color-field-width: 27px;
|
||||
|
||||
// #app-navigation .app-navigation-entry-edit form, #app-navigation .app-navigation-entry-edit div
|
||||
// has a to wide scope in the server styles so we need to force some width and display styles
|
||||
|
||||
.color-picker::v-deep {
|
||||
display: block !important;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.color-picker-compact {
|
||||
display: flex !important;
|
||||
}
|
||||
.custom-color-button {
|
||||
width: $color-field-width !important;
|
||||
height: $color-field-width;
|
||||
display: inline-flex !important;
|
||||
flex-grow: 1;
|
||||
flex-basis: 44px;
|
||||
}
|
||||
|
||||
.vc-compact {
|
||||
flex-grow: 5;
|
||||
width: initial;
|
||||
max-width: calc(8 * #{$color-field-width});
|
||||
display: block !important;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vc-chrome {
|
||||
width: 100%;
|
||||
border-radius: 0 3px;
|
||||
box-shadow: 0 0 2px var(--color-box-shadow);
|
||||
|
||||
.vc-saturation-pointer, .vc-saturation-circle {
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vc-chrome-fields-wrap, .vc-chrome-body {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.vc-compact-colors {
|
||||
display: flex;
|
||||
}
|
||||
.vc-compact-color-item {
|
||||
display: inline-flex;
|
||||
height: $color-field-width;
|
||||
width: 100%;
|
||||
max-width: $color-field-width;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.vc-compact-dot {
|
||||
width: 10px !important;
|
||||
height: 10px;
|
||||
position: unset;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
}
|
||||
.vc-chrome-controls {
|
||||
display: flex;
|
||||
}
|
||||
.vc-chrome-active-color {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.vc-chrome-color-wrap {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
}
|
||||
.vc-saturation-pointer {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
}
|
||||
.vc-chrome-alpha-wrap {
|
||||
display: none;
|
||||
}
|
||||
.vc-chrome-hue-wrap {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
@@ -2,8 +2,12 @@
|
||||
<div>
|
||||
<ul class="labels">
|
||||
<li v-for="label in labels" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
|
||||
<!-- Edit Tag -->
|
||||
<template v-if="editingLabelId === label.id">
|
||||
<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"
|
||||
@@ -15,7 +19,6 @@
|
||||
class="icon-close"
|
||||
@click="editingLabelId = null">
|
||||
</form>
|
||||
<ColorPicker :value="'#' + editingLabel.color" @input="updateColor" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div :style="{ backgroundColor: `#${label.color}`, color:textColor(label.color) }" class="label-title">
|
||||
@@ -33,8 +36,12 @@
|
||||
</li>
|
||||
|
||||
<li v-if="addLabel" class="editing">
|
||||
<!-- New Tag -->
|
||||
<template>
|
||||
<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"
|
||||
@@ -46,7 +53,6 @@
|
||||
class="icon-close"
|
||||
@click="addLabel=false">
|
||||
</form>
|
||||
<ColorPicker :value="'#' + addLabelObj.color" @input="updateColor" />
|
||||
</template>
|
||||
</li>
|
||||
<button v-if="canManage" @click="clickShowAddLabel()">
|
||||
@@ -60,7 +66,7 @@
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
import Color from '../../mixins/color'
|
||||
import ColorPicker from '../ColorPicker'
|
||||
import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
|
||||
|
||||
export default {
|
||||
name: 'TagsTabSidebar',
|
||||
@@ -75,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: {
|
||||
@@ -127,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() {
|
||||
@@ -139,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;
|
||||
@@ -152,19 +162,26 @@ export default {
|
||||
}
|
||||
}
|
||||
&:not(.editing) button {
|
||||
width: 44px;
|
||||
margin: 0;
|
||||
margin-left: -3px;
|
||||
width: $clickable-area;
|
||||
margin: 0 0 0 -3px;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
display: flex;
|
||||
}
|
||||
.color-picker-wrapper {
|
||||
&, &::v-deep > .trigger {
|
||||
width: $clickable-area;
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.color-picker-button {
|
||||
width: 100px;
|
||||
margin-left: 20px;
|
||||
border-radius: 6px;
|
||||
.color0 {
|
||||
position: absolute;
|
||||
width: calc(#{$clickable-area} - 6px);
|
||||
height: calc(#{$clickable-area} - 6px);
|
||||
background-size: 14px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
@@ -178,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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -29,6 +29,9 @@
|
||||
|
||||
<!-- edit entry -->
|
||||
<div v-if="editing" class="app-navigation-entry-edit">
|
||||
<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
|
||||
<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
|
||||
</ColorPicker>
|
||||
<form @submit.prevent.stop="createBoard">
|
||||
<input :placeholder="t('deck', 'New board title')" type="text" required>
|
||||
<input type="submit" value="" class="icon-confirm">
|
||||
@@ -37,13 +40,14 @@
|
||||
class="icon-close"
|
||||
@click.stop.prevent="cancelEdit">
|
||||
</form>
|
||||
<ColorPicker v-model="color" />
|
||||
|
||||
<!-- <ColorPicker v-model="color" /> -->
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorPicker from '../ColorPicker'
|
||||
import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
|
||||
export default {
|
||||
name: 'AppNavigationAddBoard',
|
||||
components: { ColorPicker },
|
||||
@@ -79,9 +83,22 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
#app-navigation .app-navigation-entry-edit div {
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
.app-navigation-entry-bullet-wrapper {
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
width: 44px !important;
|
||||
margin: 6px;
|
||||
height: 44px;
|
||||
.color0 {
|
||||
width: 30px !important;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -61,6 +61,9 @@
|
||||
|
||||
<!-- edit entry -->
|
||||
<div v-if="editing" class="app-navigation-entry-edit">
|
||||
<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
|
||||
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
|
||||
</ColorPicker>
|
||||
<form @submit.prevent.stop="applyEdit">
|
||||
<input v-model="editTitle" type="text" required>
|
||||
<input type="submit" value="" class="icon-confirm">
|
||||
@@ -69,7 +72,6 @@
|
||||
class="icon-close"
|
||||
@click.stop.prevent="cancelEdit">
|
||||
</form>
|
||||
<ColorPicker v-model="editColor" />
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -77,7 +79,7 @@
|
||||
<script>
|
||||
import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
import ColorPicker from '../ColorPicker'
|
||||
import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
|
||||
|
||||
export default {
|
||||
name: 'AppNavigationBoard',
|
||||
@@ -107,6 +109,12 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
if (this.editColor !== '') {
|
||||
return this.editColor
|
||||
}
|
||||
return this.board.color
|
||||
},
|
||||
undoText: function() {
|
||||
// todo translation
|
||||
return 'deleted ' + this.board.title
|
||||
@@ -232,6 +240,9 @@ export default {
|
||||
hideMenu() {
|
||||
this.menuOpen = false
|
||||
},
|
||||
updateColor(newColor) {
|
||||
this.editColor = newColor
|
||||
},
|
||||
applyEdit(e) {
|
||||
this.editing = false
|
||||
if (this.editTitle || this.editColor) {
|
||||
@@ -264,4 +275,17 @@ export default {
|
||||
#app-navigation #deck-navigation .editing {
|
||||
height: auto !important;
|
||||
}
|
||||
.app-navigation-entry-bullet-wrapper {
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
width: 44px !important;
|
||||
margin: 6px;
|
||||
height: 44px;
|
||||
.color0 {
|
||||
width: 30px !important;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user