Commit 9f7bdd90 authored by Brouwers, A.S.'s avatar Brouwers, A.S. Committed by Tim Honcoop
Browse files

Move palette options to colors.js, add tooltips & descriptions

parent 2c3371ab
......@@ -14,18 +14,54 @@ export default {
darkGreen: hexToRgba("#188e1a", 100),
darkRed: hexToRgba("#a5281a", 100),
// Page colors
selectedPalette: "def",
// Page colors for selected palette
course: hexToRgba("#20a8d8", 90),
quiz: hexToRgba("#188e1a", 90),
video: hexToRgba("#db902e", 90),
assignment: hexToRgba("#a5281a", 90),
compareCourse: hexToRgba("#333333", 90),
setColors: function (colors) {
this.course = colors.course;
this.quiz = colors.quiz;
this.video = colors.video;
this.assignment = colors.assignment;
this.compareCourse = colors.compareCourse;
palettes: {
def: {
description: "Default",
colors: {
course: hexToRgba("#20a8d8", 90),
quiz: hexToRgba("#188e1a", 90),
video: hexToRgba("#db902e", 90),
assignment: hexToRgba("#a5281a", 90),
compareCourse: hexToRgba("#333333", 90),
},
},
cb1: {
description: "Color blind palette 1",
colors: {
course: hexToRgba("#377eb8", 90),
quiz: hexToRgba("#4daf4a", 90),
video: hexToRgba("#ff7f00", 90),
assignment: hexToRgba("#e41a1c", 90),
compareCourse: hexToRgba("#984ea3", 90),
},
},
cb2: {
description: "Color blind palette 2",
colors: {
course: hexToRgba("#1f78b4", 90),
quiz: hexToRgba("#b2df8a", 90),
video: hexToRgba("#fb9a99", 90),
assignment: hexToRgba("#a6cee3", 90),
compareCourse: hexToRgba("#33a02c", 90),
},
},
},
setColors: function (key) {
this.selectedPalette = key;
this.course = this.palettes[key].course;
this.quiz = this.palettes[key].quiz;
this.video = this.palettes[key].video;
this.assignment = this.palettes[key].assignment;
this.compareCourse = this.palettes[key].compareCourse;
},
}
......@@ -26,6 +26,7 @@ export default new Vuex.Store({
toDate: null,
},
tooltips: true,
palette: "def",
warnings: true,
gradeval: 0.7,
passingval: 0.7,
......@@ -67,6 +68,9 @@ export default new Vuex.Store({
setTooltips(state, tooltips) {
state.tooltips = tooltips;
},
setPalette(state, palette) {
state.palette = palette;
},
setWarnings(state, warnings) {
state.warnings = warnings;
},
......
......@@ -153,14 +153,27 @@
</td>
<td>
<b-form-radio-group stacked v-model="selectedPalette">
<b-form-radio v-for="(pal, index) in palettes" v-bind:key="index" :value="pal">
<div class="palette-container">
<div
class="palette-item"
v-for="col in pal"
v-bind:key="col"
v-bind:style="{backgroundColor:col}"
></div>
<b-form-radio
v-for="(pal, indexPal) in palettes"
v-bind:key="indexPal"
:value="indexPal"
>
<div class="flex">
<div class="palette-container">
<div
class="palette-item"
v-for="(col, indexCol) in pal.colors"
v-bind:key="indexCol"
v-bind:style="{backgroundColor:col}"
v-bind:id="indexPal + indexCol"
>
<b-tooltip
:target="indexPal + indexCol"
v-if="hoverEnable"
>{{ camelToText(indexCol) }}</b-tooltip>
</div>
</div>
<span class="palette-name">{{ pal.description }}</span>
</div>
</b-form-radio>
</b-form-radio-group>
......@@ -268,30 +281,8 @@ export default {
showAlertEmail: false,
showAlertPassword: false,
square: "fa fa-square",
selectedPalette: "def",
palettes: {
def: {
course: hexToRgba("#20a8d8", 90),
quiz: hexToRgba("#188e1a", 90),
video: hexToRgba("#db902e", 90),
assignment: hexToRgba("#a5281a", 90),
compareCourse: hexToRgba("#333333", 90),
},
cb1: {
course: hexToRgba("#377eb8", 90),
quiz: hexToRgba("#4daf4a", 90),
video: hexToRgba("#ff7f00", 90),
assignment: hexToRgba("#e41a1c", 90),
compareCourse: hexToRgba("#984ea3", 90),
},
cb2: {
course: hexToRgba("#1f78b4", 90),
quiz: hexToRgba("#b2df8a", 90),
video: hexToRgba("#fb9a99", 90),
assignment: hexToRgba("#a6cee3", 90),
compareCourse: hexToRgba("#33a02c", 90),
},
},
selectedPalette: colors.selectedPalette,
palettes: colors.palettes,
};
},
methods: {
......@@ -304,8 +295,13 @@ export default {
this.$store.commit("setWatchVal", this.watchval);
this.$store.commit("setDislikeVal", this.dislikeval);
colors.setColors(this.palettes[this.selectedPalette]);
colors.setColors(this.selectedPalette);
this.showAlertGeneral = true;
},
camelToText(text) {
var result = text.replace(/([A-Z]|[1-9])/g, " $1");
return result.charAt(0).toUpperCase() + result.slice(1);
},
},
components: {
vueSlider,
......@@ -335,9 +331,21 @@ table {
.palette-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 7.5rem;
align-items: center;
border-radius: 5px;
overflow: hidden;
margin-bottom: 0.25rem;
}
.flex {
display: flex;
flex-direction: row;
}
.palette-name {
margin-left: 0.75rem;
}
.palette-item {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment