1d891ea734
* 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
92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
<style type="text/css" scoped>
|
|
.colors {
|
|
position: fixed;
|
|
z-index: 1023;
|
|
top: 5px;
|
|
/*height: 100px;*/
|
|
width: 400px;
|
|
left: 20%;
|
|
}
|
|
.colors-container {
|
|
max-width: 370px;
|
|
}
|
|
.dot {
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 30px;
|
|
box-shadow: 0px 1px 3px 0px #3e3e3e;
|
|
margin: 7px 7px 0 0;
|
|
cursor: pointer;
|
|
}
|
|
.shade {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1022;
|
|
background-color: transparent;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
@media only screen and (max-width: 740px) {
|
|
.colors {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="colors">
|
|
<div class="ui raised segment">
|
|
<div class="colors-container">
|
|
<span
|
|
v-for="(color,index) in colors"
|
|
class="dot"
|
|
v-on:click="onColorClick(index)"
|
|
:style="`background-color: ${color};`">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="shade" v-on:click="close"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
components:{
|
|
'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
|
|
},
|
|
data: function(){
|
|
return {
|
|
hover: false,
|
|
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)'
|
|
],
|
|
}
|
|
},
|
|
beforeCreate: function(){
|
|
},
|
|
mounted: function(){
|
|
},
|
|
methods: {
|
|
close(){
|
|
this.$emit('close')
|
|
},
|
|
onColorClick(index){
|
|
|
|
this.$emit('color',this.colors[index])
|
|
this.$nextTick( () => {
|
|
this.close()
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script> |