Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

Remove TinyMce Added Squire

Browse Source
This commit is contained in:
Max G
2020-02-01 22:21:22 +00:00
parent f99d6ed430
commit 2828cc9462
91 changed files with 6538 additions and 10672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
client/src/components/ColorPicker.vue
View File

@@ -1,34 +1,68 @@
<template>
<div>
<div class="color-picker" :style="{ 'background-color':allStyles['noteBackground'], 'color':allStyles['noteText']}">
<div class="ui grid">
<div class="five wide column">
<p>Note Color</p>
<div v-for="color in colors"
class="color-button"
:style="{ backgroundColor:color }"
v-on:click="chosenColor(color)"
></div>
</div>
<div class="six 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 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 class="ui compact fluid button" v-on:click="clearStyles">Clear All Styles</div>
</div>
<div class="five wide column">
<p>Icon Color</p>
<div v-for="color in colors"
class="color-button"
:style="{ backgroundColor:color }"
v-on:click="chooseIconColor(color)"
></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>
@@ -55,9 +89,33 @@
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
@@ -99,33 +157,55 @@
}
</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: absolute;
position: fixed;
/*height: 100px;*/
top: 37px;
top: 0;
right: 0;
left: 30%;
bottom: 0;
padding: 10px;
border-radius: 5px;
left: -63px;
z-index: 300;
border: 1px solid;
z-index: 500;
border-left: 1px solid;
border-color: var(--border_color) !important;
width: 750px;
overflow-x: scroll;
}
.icon-button {
height: 30px;
width: 30px;
height: 40px;
width: 14.2%;
display: inline-block;
cursor: pointer;
font-size: 1.3em;
}
.color-button {
height: 20px;
width: 20px;
display: inline-block;
height: 50px;
width: 20%;
display: block;
cursor: pointer;
float: left;
}
</style>