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

Fix color picker in sidebar

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2019-04-26 09:39:43 +02:00
parent dfb91a0e39
commit b2d844c013
2 changed files with 108 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/ColorPicker.vue
View File

@@ -21,18 +21,20 @@
--> -->
<template> <template>
<div class="color-picker"> <div v-click-outside="hidePicker" class="color-picker">
<div class="color-picker-compact"> <div class="color-picker-compact">
<Compact :palette="defaultColors" @input="updateColor" v-model="color"></Compact> <Compact :palette="defaultColors" v-model="color" @input="updateColor" />
<div class="custom-color-button icon-colorpicker" :style="{'background-color': color.hex}" @click="showFullPicker=!showFullPicker"></div> <div :style="{'background-color': color.hex}" class="custom-color-button icon-colorpicker" @click.prevent="showFullPicker=!showFullPicker" />
</div> </div>
<Chrome v-if="showFullPicker" :palette="defaultColors" @input="updateColor" v-model="color"></Chrome> <Chrome v-if="showFullPicker" :palette="defaultColors" v-model="color"
@input="updateColor" />
</div> </div>
</template> </template>
<script> <script>
// TODO: import styles manually if possible // TODO: import styles manually if possible
import { Compact, Chrome } from 'vue-color' import { Compact, Chrome } from 'vue-color'
import ClickOutside from 'vue-click-outside'
export default { export default {
name: 'ColorPicker', name: 'ColorPicker',
@@ -40,17 +42,28 @@
Compact, Compact,
Chrome Chrome
}, },
props: ['value'], directives: {
ClickOutside
},
props: {
value: {
type: [String, Object],
default: null
}
},
data() { data() {
return { return {
color: { hex: this.value }, color: { hex: this.value },
defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'], defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
showFullPicker: false, showFullPicker: false
} }
}, },
methods: { methods: {
updateColor() { updateColor() {
this.$emit('input', this.color) this.$emit('input', this.color)
},
hidePicker() {
this.showFullPicker = false
} }
} }
} }
@@ -59,17 +72,28 @@
<style scoped> <style scoped>
div.color-picker { div.color-picker {
display: block !important; display: block !important;
overflow: hidden;
border-radius: 3px;
}
</style>
<style lang="scss">
$color-field-width: 27px;
#content .color-picker {
// this is required to overwrite
// #app-navigation .app-navigation-entry-edit form, #app-navigation .app-navigation-entry-edit div
// which has a to wide scope in the server styles
div {
width: auto;
display: block;
} }
.color-picker-compact { .color-picker-compact {
display: flex; display: flex;
} }
.custom-color-button { .custom-color-button {
width: 24px; width: $color-field-width;
height: 24px; height: $color-field-width;
display: block; display: block;
} flex-grow: 1;
.vc-chrome {
display: block !important;
} }
.vc-compact { .vc-compact {
@@ -79,9 +103,11 @@
background-color: transparent; background-color: transparent;
width: auto; width: auto;
} }
</style>
<style lang="scss"> .vc-chrome {
.color-picker { border-radius: 0 3px;
box-shadow: 0 0 2px var(--color-box-shadow);
}
.vc-chrome-fields-wrap { .vc-chrome-fields-wrap {
display: none !important; display: none !important;
} }
@@ -91,10 +117,40 @@
} }
.vc-compact-color-item { .vc-compact-color-item {
display: inline-flex; display: inline-flex;
height: 24px; height: $color-field-width;
width: 24px; width: $color-field-width;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.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> </style>

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

@@ -28,20 +28,20 @@
</a> </a>
<!-- edit entry --> <!-- edit entry -->
<div v-if="editing" class="app-navigation-entry-edit-copy"> <div v-if="editing" class="app-navigation-entry-edit">
<form @submit.prevent.stop="createBoard"> <form @submit.prevent.stop="createBoard">
<input :placeholder="t('deck', 'New board title')" type="text"> <input :placeholder="t('deck', 'New board title')" type="text">
<input type="submit" value="" class="icon-confirm"> <input type="submit" value="" class="icon-confirm">
<input type="submit" value="" class="icon-close" <input type="submit" value="" class="icon-close"
@click.stop.prevent="cancelEdit"> @click.stop.prevent="cancelEdit">
</form> </form>
<ColorPicker v-model="color"></ColorPicker> <ColorPicker v-model="color" />
</div> </div>
</li> </li>
</template> </template>
<script> <script>
import ColorPicker from '../ColorPicker'; import ColorPicker from '../ColorPicker'
export default { export default {
name: 'AppNavigationAddBoard', name: 'AppNavigationAddBoard',
components: { ColorPicker }, components: { ColorPicker },
@@ -77,19 +77,9 @@ export default {
} }
} }
</script> </script>
<style> <style scoped>
#app-navigation .app-navigation-entry-edit-copy { #app-navigation .app-navigation-entry-edit div {
width: calc(100% - 1px); width: auto;
transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out;
position: absolute;
left: 0;
background-color: var(--color-main-background);
box-sizing: border-box;
display: block; display: block;
position: absolute;
background: #fff;
height: auto;
z-index: 250;
padding-left: 38px !important;
} }
</style> </style>