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

added new color picker

Browse Source 
Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
This commit is contained in:
Jakob Röhrl
2020-01-29 10:59:12 +01:00
committed by Julius Härtl
parent 1ef22524ec
commit 167448dde1
4 changed files with 41 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/components/ColorPicker.vue
View File

@@ -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>

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

@@ -2,7 +2,11 @@
<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">
<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)">
<input v-model="editingLabel.title" type="text">
<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
@@ -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,7 +36,11 @@
</li>
<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">
<input v-model="addLabelObj.title" type="text">
<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
@@ -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',
@@ -157,15 +163,18 @@ export default {
margin-left: -3px;
}
.color-picker {
display: flex;
}
.color-picker-button {
width: 100px;
margin-left: 20px;
border-radius: 6px;
.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;
}
}
&.editing {
display: block;

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

@@ -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>

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

@@ -62,7 +62,7 @@
<!-- 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"></div>
<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>
@@ -79,7 +79,6 @@
<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 {