211 lines
7.6 KiB
Vue
211 lines
7.6 KiB
Vue
<template>
|
|
<div>
|
|
|
|
|
|
<div class="color-picker" :style="{ 'background-color':allStyles['noteBackground'], 'color':allStyles['noteText']}">
|
|
|
|
<div class="floating-buttons">
|
|
<div class="ui basic segment">
|
|
<div class="ui fluid buttons">
|
|
<div class="ui compact button" v-on:click="closeThisBitch">
|
|
<i class="close icon"></i>
|
|
Close
|
|
</div>
|
|
<div class="ui compact button" v-on:click="clearStyles">
|
|
<i class="refresh icon"></i>
|
|
Clear All Styles
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui basic segment">
|
|
<div class="ui grid">
|
|
|
|
<div class="row">
|
|
<div class="sixteen wide column">
|
|
<br>
|
|
<p>Note Color</p>
|
|
<div v-for="color in getReducedColors()"
|
|
class="color-button"
|
|
:style="{ backgroundColor:color }"
|
|
v-on:click="chosenColor(color)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="sixteen wide column">
|
|
<p>Note Icon
|
|
<span v-if="allStyles.noteIcon" >
|
|
<i :class="`large ${allStyles.noteIcon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
|
|
</span>
|
|
</p>
|
|
<div v-for="icon in icons" class="icon-button" v-on:click="chosenIcon(icon)" >
|
|
<i :class="`large ${icon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="sixteen wide column">
|
|
<p>Icon Color</p>
|
|
<div v-for="color in getReducedColors()"
|
|
class="color-button"
|
|
:style="{ backgroundColor:color }"
|
|
v-on:click="chooseIconColor(color)"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="shade-boy" v-on:click="closeThisBitch"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'ColorPicker',
|
|
props: [ 'location', 'styleObject' ],
|
|
data () {
|
|
return {
|
|
allStyles:{ 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null },
|
|
blankStyle:{ 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null },
|
|
colors: [
|
|
"#ffebee","#ffcdd2","#ef9a9a","#e57373","#ef5350","#f44336","#e53935","#d32f2f","#c62828","#b71c1c","#fce4ec","#f8bbd0","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#e3f2fd","#bbdefb","#90caf9","#64b5f6","#42a5f5","#2196f3","#1e88e5","#1976d2","#1565c0","#0d47a1","#e1f5fe","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b","#e0f7fa","#b2ebf2","#80deea","#4dd0e1","#26c6da","#00bcd4","#00acc1","#0097a7","#00838f","#006064","#e0f2f1","#b2dfdb","#80cbc4","#4db6ac","#26a69a","#009688","#00897b","#00796b","#00695c","#004d40","#e8f5e9","#c8e6c9","#a5d6a7","#81c784","#66bb6a","#4caf50","#43a047","#388e3c","#2e7d32","#1b5e20","#f1f8e9","#dcedc8","#c5e1a5","#aed581","#9ccc65","#8bc34a","#7cb342","#689f38","#558b2f","#33691e","#f9fbe7","#f0f4c3","#e6ee9c","#dce775","#d4e157","#cddc39","#c0ca33","#afb42b","#9e9d24","#827717","#fffde7","#fff9c4","#fff59d","#fff176","#ffee58","#ffeb3b","#fdd835","#fbc02d","#f9a825","#f57f17","#fff8e1","#ffecb3","#ffe082","#ffd54f","#ffca28","#ffc107","#ffb300","#ffa000","#ff8f00","#ff6f00","#fff3e0","#ffe0b2","#ffcc80","#ffb74d","#ffa726","#ff9800","#fb8c00","#f57c00","#ef6c00","#e65100","#fbe9e7","#ffccbc","#ffab91","#ff8a65","#ff7043","#ff5722","#f4511e","#e64a19","#d84315","#bf360c","#efebe9","#d7ccc8","#bcaaa4","#a1887f","#8d6e63","#795548","#6d4c41","#5d4037","#4e342e","#3e2723","#fafafa","#f5f5f5","#eeeeee","#e0e0e0","#bdbdbd","#9e9e9e","#757575","#616161","#424242","#212121","#eceff1","#cfd8dc","#b0bec5","#90a4ae","#78909c","#607d8b","#546e7a","#455a64","#37474f","#263238","#ffffff","#000000"],
|
|
icons: ['ambulance','anchor','balance scale','bath','bed','beer','bell','bell slash','bell slash outline','bicycle','binoculars','birthday cake','blind','bomb','book','bookmark','briefcase','building','car','coffee','crosshairs','dollar sign','eye','eye slash','fighter jet','fire','fire extinguisher','flag','flag checkered','flask','gamepad','gavel','gift','glass martini','globe','graduation cap','h square','heart','heart outline','heartbeat','home','hospital','hospital outline','image','image outline','images','images outline','industry','info','info circle','key','leaf','lemon','lemon outline','life ring','life ring outline','lightbulb','lightbulb outline','location arrow','low vision','magnet','male','map','map outline','map marker','map marker alternate','map pin','map signs','medkit','money bill alternate','money bill alternate outline','motorcycle','music','newspaper','newspaper outline','paw','phone','phone square','phone volume','plane','plug','plus','plus square','plus square outline','print','recycle','road','rocket','search','search minus','search plus','ship','shopping bag','shopping basket','shopping cart','shower','street view','subway','suitcase','tag','tags','taxi','thumbtack','ticket alternate','tint','train','tree','trophy','truck','tty','umbrella','university','utensil spoon','utensils','wheelchair','wifi','wrench']
|
|
}
|
|
},
|
|
watch:{
|
|
styleObject: function(updatedStyles){
|
|
this.allStyles = updatedStyles
|
|
}
|
|
},
|
|
mounted(){
|
|
this.allStyles = this.styleObject
|
|
},
|
|
methods: {
|
|
getReducedColors(){
|
|
|
|
let reduced = []
|
|
|
|
this.colors.forEach((color,i) => {
|
|
|
|
if(i%20 <= 10){
|
|
return
|
|
}
|
|
|
|
let mod = (i % 10)+1 //1 - 10
|
|
let lines = [3, 5, 8, 9, 10]
|
|
if(lines.includes(mod)){
|
|
reduced.push(color)
|
|
}
|
|
})
|
|
|
|
reduced.push("#000")
|
|
|
|
return reduced
|
|
},
|
|
clearStyles(){
|
|
this.$emit('changeColor', this.blankStyle)
|
|
},
|
|
closeThisBitch(){
|
|
this.$emit('close')
|
|
},
|
|
chosenColor(inColor){
|
|
|
|
//Set not background to color that was chosen
|
|
this.allStyles.noteBackground = inColor
|
|
|
|
//Automatically select note text color
|
|
|
|
// Convert hex color to RGB - http://gist.github.com/983661
|
|
let color = +("0x" + inColor.slice(1).replace(inColor.length < 5 && /./g, '$&$&'));
|
|
|
|
let r = color >> 16;
|
|
let g = color >> 8 & 255;
|
|
let b = color & 255;
|
|
|
|
//Convert RGB to HSP
|
|
const hsp = Math.sqrt( 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b) );
|
|
|
|
//If it has a BG color, default to sold black text
|
|
this.allStyles.noteText = '#000'
|
|
if(hsp < 127.5){
|
|
this.allStyles.noteText = '#FFF' //If color is dark, we need brighter text
|
|
}
|
|
|
|
this.$emit('changeColor', this.allStyles)
|
|
},
|
|
chosenIcon(inIcon){
|
|
|
|
this.allStyles.noteIcon = inIcon
|
|
|
|
this.$emit('changeColor', this.allStyles)
|
|
},
|
|
chooseIconColor(inColor){
|
|
|
|
this.allStyles.iconColor = inColor
|
|
|
|
this.$emit('changeColor', this.allStyles)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/css" scoped>
|
|
.shade-boy {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 250;
|
|
cursor: pointer;
|
|
}
|
|
.floating-buttons {
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 444;
|
|
right: 20px;
|
|
left: calc(30% + 10px)
|
|
}
|
|
.color-picker {
|
|
color: var(--text_color);
|
|
background-color: var(--background_color);
|
|
|
|
position: fixed;
|
|
|
|
/*height: 100px;*/
|
|
top: 0;
|
|
right: 0;
|
|
left: 30%;
|
|
bottom: 0;
|
|
|
|
padding: 10px;
|
|
|
|
z-index: 500;
|
|
border-left: 1px solid;
|
|
border-color: var(--border_color) !important;
|
|
|
|
overflow-x: scroll;
|
|
|
|
}
|
|
.icon-button {
|
|
height: 40px;
|
|
width: 14.2%;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
font-size: 1.3em;
|
|
}
|
|
.color-button {
|
|
height: 50px;
|
|
width: 20%;
|
|
display: block;
|
|
cursor: pointer;
|
|
float: left;
|
|
}
|
|
</style> |