b0c487404c
* Force logout of user with authorization error * Wrong site blocker doesn't trigger on the solid scribe domain * Added log out button to main side bar making it easier to find * Improved icon set for notes * Colored notes display better on mobile, fixed text color based on color brightness * Moved terms of use link to the bottom of a few pages * Updated feature sections on home page, make them clearer and easier to process * Tweaked color themes * Deleted links no longer show up in search * Updated search to use multiple key words * Updated tests to do a multi word search * Tweaked a bunch of styles to look better on chrome and browsers
166 lines
6.6 KiB
Vue
166 lines
6.6 KiB
Vue
<template>
|
|
|
|
|
|
<div :style="{ 'background-color':allStyles['noteBackground'], 'color':allStyles['noteText']}">
|
|
<div class="ui basic segment">
|
|
<div class="ui grid">
|
|
|
|
<div class="ui sixteen wide center aligned column">
|
|
<div class="ui fluid button" v-on:click="clearStyles">
|
|
<i class="refresh icon"></i>
|
|
Clear All Styles
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="sixteen wide column">
|
|
<br>
|
|
<p>Note Color</p>
|
|
<div v-for="color in colors"
|
|
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>
|
|
|
|
</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: [null,
|
|
'rgb(67,67,67)','rgb(102,102,102)','rgb(153,153,153)','rgb(183,183,183)','rgb(204,204,204)','rgb(217,217,217)','rgb(239,239,239)','rgb(243,243,243)','rgb(255,255,255)','rgb(152,0,0)','rgb(255,0,0)','rgb(255,153,0)','rgb(255,255,0)','rgb(0,255,0)','rgb(0,255,255)','rgb(74,134,232)','rgb(0,0,255)','rgb(153,0,255)','rgb(255,0,255)','rgb(230,184,175)','rgb(244,204,204)','rgb(252,229,205)','rgb(255,242,204)','rgb(217,234,211)','rgb(208,224,227)','rgb(201,218,248)','rgb(207,226,243)','rgb(217,210,233)','rgb(234,209,220)','rgb(221,126,107)','rgb(234,153,153)','rgb(249,203,156)','rgb(255,229,153)','rgb(182,215,168)','rgb(162,196,201)','rgb(164,194,244)','rgb(159,197,232)','rgb(180,167,214)','rgb(213,166,189)','rgb(204,65,37)','rgb(224,102,102)','rgb(246,178,107)','rgb(255,217,102)','rgb(147,196,125)','rgb(118,165,175)','rgb(109,158,235)','rgb(111,168,220)','rgb(142,124,195)','rgb(194,123,160)','rgb(166,28,0)','rgb(204,0,0)','rgb(230,145,56)','rgb(241,194,50)','rgb(106,168,79)','rgb(69,129,142)','rgb(60,120,216)','rgb(61,133,198)','rgb(103,78,167)','rgb(166,77,121)','rgb(133,32,12)','rgb(153,0,0)','rgb(180,95,6)','rgb(191,144,0)','rgb(56,118,29)','rgb(19,79,92)','rgb(17,85,204)','rgb(11,83,148)','rgb(53,28,117)','rgb(116,27,71)','rgb(91,15,0)','rgb(102,0,0)','rgb(120,63,4)','rgb(127,96,0)','rgb(39,78,19)','rgb(12,52,61)','rgb(28,69,135)','rgb(7,55,99)','rgb(32,18,77)','rgb(76,17,48)'],
|
|
icons: ['cat','crow','dog','dove','dragon','feather','feather alternate','fish','frog','hippo','horse','horse head','kiwi bird','otter','paw','spider','video','headphones','motorcycle','truck','monster truck','campground','cloud sun','drumstick bite','football ball','fruit-apple','hiking','mountain','tractor','tree','wind','wine bottle','coffee','flask','glass cheers','glass martini','beer','toilet paper','gift','globe','hand holding heart','comment','graduation cap','hat cowboy','hat wizard','mitten','user tie','laptop code','microchip','shield alternate','mouse','plug','power off','satellite','hammer','wrench','bell','eye','marker','paperclip','atom','award','theater masks','music','grin alternate','grin tongue squint outline','laugh wink','fire','fire alternate','poop','sun','money bill alternate','piggy bank','heart outline','heartbeat','running','walking','bacon','bone','bread slice','candy cane','carrot','cheese','cloud meatball','cookie','egg','hamburger','hotdog','ice cream','lemon','lemon outline','pepper hot','pizza slice','seedling','stroopwafel','leaf','book dead','broom','cloud moon','ghost','mask','skull crossbones','certificate','check','check circle','joint','cannabis','bong','gem','futbol','brain','dna','hand spock','hand spock outline','meteor','moon','moon outline','robot','rocket','satellite dish','space shuttle','user astronaut','fingerprint','thumbs up','thumbs down']
|
|
}
|
|
},
|
|
watch:{
|
|
styleObject: function(updatedStyles){
|
|
this.allStyles = updatedStyles
|
|
}
|
|
},
|
|
mounted(){
|
|
this.allStyles = this.styleObject
|
|
},
|
|
methods: {
|
|
getReducedColors(){
|
|
|
|
let reduced = []
|
|
|
|
this.colors.forEach((color,i) => {
|
|
if(i < 20 || i > 69){
|
|
reduced.push(color)
|
|
}
|
|
})
|
|
|
|
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
|
|
|
|
if(inColor == null){
|
|
this.$emit('changeColor', this.allStyles)
|
|
return
|
|
}
|
|
|
|
//Automatically select note text color
|
|
|
|
//If you are using hex colors, use this
|
|
// 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;
|
|
|
|
const set = inColor.match(/\d+/g)
|
|
const r = parseInt(set[0])
|
|
const g = parseInt(set[1])
|
|
const b = parseInt(set[2])
|
|
|
|
//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>
|
|
.icon-button {
|
|
height: 40px;
|
|
width: calc(10% - 7px);
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
font-size: 1.3em;
|
|
}
|
|
.color-button {
|
|
display: inline-block;
|
|
width: calc(10% - 7px);
|
|
height: 30px;
|
|
border-radius: 30px;
|
|
box-shadow: 0px 1px 3px 0px #3e3e3e;
|
|
margin: 7px 7px 0 0;
|
|
cursor: pointer;
|
|
}
|
|
</style> |