vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Added color picker to edit label
All checks were successful
the build was successful
Details

Browse Source
This commit is contained in:
kolaente 2019-03-06 08:20:32 +01:00
parent 2d814f64e2
commit d541f7e9bf
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
6 changed files with 59 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -8,10 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@caohenghu/vue-colorpicker": "^1.1.1",
"bulma": "^0.7.1",
"lodash": "^4.17.11",
"v-tooltip": "^2.0.0-rc.33",
"verte": "^0.0.10",
"vue": "^2.5.17"
},
"devDependencies": {

48
src/components/labels/ListLabels.vue
View File

@ -1,14 +1,17 @@
<template>
<div class="loader-container content" :class="{ 'is-loading': labelService.loading}">
<h1>Manage labels</h1>
<p>Click on a label to edit it.</p>
<p>
Click on a label to edit it.
You can edit all labels you are the owner of, you can use all lables of whose list you have access to.
</p>
<div class="columns">
<div class="labels-list column">
<a
v-for="l in labels" :key="l.id"
class="tag"
@click="labelEditLabel = l; isLabelEdit = true"
:style="{'background': '#' + l.hex_color, 'color': l.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'}">
:style="{'background': l.hex_color, 'color': l.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'}">
<span>{{ l.title }}</span>
<a class="delete is-small" @click="deleteLabel(l)"></a>
</a>
@ -26,7 +29,7 @@
</a>
</header>
<div class="card-content">
<form>
<form @submit.prevent="editLabelSubmit()">
<div class="field">
<label class="label">Title</label>
<div class="control">
@ -42,7 +45,14 @@
<div class="field">
<label class="label">Color</label>
<div class="control">
<input class="input" type="text" placeholder="Label color" v-model="labelEditLabel.hex_color">
<verte
v-model="labelEditLabel.hex_color"
menuPosition="top"
picker="square"
model="hex"
:enableAlpha="false"
:rgbSliders="true">
</verte>
</div>
</div>
<div class="control">
@ -51,10 +61,6 @@
</button>
</div>
</form>
<color-picker
:color="labelEditLabel.hex_color"
@changeColor="changeColor"
/>
</div>
</div>
</div>
@ -63,7 +69,9 @@
</template>
<script>
import colorPicker from '@caohenghu/vue-colorpicker'
import verte from 'verte'
import 'verte/dist/verte.css'
import LabelService from '../../services/label'
import LabelModel from '../../models/label'
import message from '../../message'
@ -71,7 +79,7 @@
export default {
name: 'ListLabels',
components: {
colorPicker,
verte,
},
data() {
return {
@ -79,7 +87,6 @@
labels: [],
labelEditLabel: LabelModel,
isLabelEdit: false,
color: '',
}
},
created() {
@ -112,10 +119,21 @@
message.error(e, this)
})
},
changeColor(color) {
const {rgba: {r, g, b}} = color
this.labelEditLabel.hex_color = `${r.toString(16)}${g.toString(16)}${b.toString(16)}`
},
editLabelSubmit() {
this.labelService.update(this.labelEditLabel)
.then(r => {
//
for (const l in this.labels) {
if (this.labels[l].id === r.id) {
this.$set(this.labels, l, r)
}
}
message.success({message: 'The label was successfully updated.'}, this)
})
.catch(e => {
message.error(e, this)
})
}
}
}
</script>

2
src/components/lists/ShowList.vue
View File

@ -245,7 +245,7 @@
tag-placeholder="Add this as new label"
>
<template slot="tag" slot-scope="{ option, remove }">
<span class="tag" :style="{'background': '#' + option.hex_color, 'color': option.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'}">
<span class="tag" :style="{'background': option.hex_color, 'color': option.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'}">
<span>{{ option.title }}</span>
<a class="delete is-small" @click="removeLabel(option)"></a>
</span>

9
src/models/label.js
View File

@ -4,6 +4,11 @@ import UserModel from "./user";
export default class LabelModel extends AbstractModel {
constructor(data) {
super(data)
// Set the default color
if (this.hex_color === '') {
this.hex_color = 'e8e8e8'
}
this.hex_color = '#' + this.hex_color
this.created_by = new UserModel(this.created_by)
}
@ -22,11 +27,11 @@ export default class LabelModel extends AbstractModel {
}
hasDarkColor() {
if (this.hex_color === '') {
if (this.hex_color === '#') {
return true // Defaults to dark
}
let rgb = parseInt(this.hex_color, 16); // convert rrggbb to decimal
let rgb = parseInt(this.hex_color.substring(1, 7), 16); // convert rrggbb to decimal
let r = (rgb >> 16) & 0xff; // extract red
let g = (rgb >> 8) & 0xff; // extract green
let b = (rgb >> 0) & 0xff; // extract blue

5
src/services/label.js
View File

@ -15,4 +15,9 @@ export default class LabelService extends AbstractService {
modelFactory(data) {
return new LabelModel(data)
}
beforeUpdate(label) {
label.hex_color = label.hex_color.substring(1, 7)
return label
}
}

17
yarn.lock
View File

@ -649,11 +649,6 @@
lodash "^4.17.10"
to-fast-properties "^2.0.0"
"@caohenghu/vue-colorpicker@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@caohenghu/vue-colorpicker/-/vue-colorpicker-1.1.1.tgz#af9a3d8d58296be09140a3a8ca8327ad326edc91"
integrity sha512-RantMCH82kMP6/QrJVGNHHME0h6/D95lfvZWuxDbicLLIlRS6aKQpTNjd5h6nRqJolmtx/kBs4ErgBoNxOvb4A==
"@fortawesome/fontawesome-common-types@^0.2.12":
version "0.2.12"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.12.tgz#42baa71f97ca06faeb0b6718fa5ed20c5eefdf07"
@ -2146,6 +2141,11 @@ color-convert@^1.9.0, color-convert@^1.9.1:
dependencies:
color-name "1.1.3"
color-fns@^0.0.10:
version "0.0.10"
resolved "https://registry.yarnpkg.com/color-fns/-/color-fns-0.0.10.tgz#b03f34ab3bb3902ac24e7c86ff32d845fbbaf7bf"
integrity sha512-QFKowTE9CXCLp09Gz5cQo8VPUP55hf73iHEI52JC3NyKfMpQG2VoLWmTxYeTKH6ngkEnoMrCdEX//M6J4PVQBA==
color-name@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@ -8959,6 +8959,13 @@ verror@1.10.0:
core-util-is "1.0.2"
extsprintf "^1.2.0"
verte@^0.0.10:
version "0.0.10"
resolved "https://registry.yarnpkg.com/verte/-/verte-0.0.10.tgz#27e132cfb74a55171602184263417eeb8a5692a5"
integrity sha512-h4PCDC8hvH9E+CmUx1K/xT2pZgdZ0oxpgaL23xkJD16jhXTU9c4B6h4RD/fBWeu9CURHgWf6+sf6E9m/wfKbuA==
dependencies:
color-fns "^0.0.10"
vm-browserify@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"