* Tags can now be toggled by clicking

* Side slide component now respects note colors
This commit is contained in:
Max G 2020-02-10 22:21:06 +00:00
parent 623d094d7b
commit 9b7fc679e8
3 changed files with 58 additions and 13 deletions

View File

@ -118,13 +118,13 @@
/> />
</side-slide-menu> </side-slide-menu>
<side-slide-menu v-if="showTagSlideMenu" v-on:close="showTagSlideMenu = false" name="tags"> <side-slide-menu v-if="showTagSlideMenu" v-on:close="showTagSlideMenu = false" name="tags" :style-object="styleObject">
<div class="ui basic segment"> <div class="ui basic segment">
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/> <note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
</div> </div>
</side-slide-menu> </side-slide-menu>
<side-slide-menu v-if="showFilesSideMenu" v-on:close="showFilesSideMenu = false" name="images"> <side-slide-menu v-if="showFilesSideMenu" v-on:close="showFilesSideMenu = false" name="images" :style-object="styleObject">
<div class="ui basic segment"> <div class="ui basic segment">
<simple-attachment-note <simple-attachment-note
v-on:close="showFilesSideMenu = false" v-on:close="showFilesSideMenu = false"
@ -134,7 +134,7 @@
</div> </div>
</side-slide-menu> </side-slide-menu>
<side-slide-menu v-if="showNoteOptions" v-on:close="showNoteOptions = false" name="note-options"> <side-slide-menu v-if="showNoteOptions" v-on:close="showNoteOptions = false" name="note-options" :style-object="styleObject">
<div class="ui basic padded segment"> <div class="ui basic padded segment">
<div class="ui grid"> <div class="ui grid">
<div class="sixteen wide column"> <div class="sixteen wide column">

View File

@ -13,7 +13,7 @@
<div class="sixteen wide column"> <div class="sixteen wide column">
<h3>All Tags</h3> <h3>All Tags</h3>
<div v-if="allTags.length > 0"> <div v-if="allTags.length > 0">
<div class="ui icon large label" v-for="tag in allTags" :class="{ 'green':isTagOnNote(tag.id) }"> <div class="ui icon large label clickable" v-for="tag in allTags" :class="{ 'green':isTagOnNote(tag.id) }" v-on:click="toggleTag(tag.text, tag.id, tag.entryId)">
{{ ucWords(tag.text) }} {{ ucWords(tag.text) }}
</div> </div>
</div> </div>
@ -42,7 +42,7 @@
v-on:focus="onFocus" v-on:focus="onFocus"
/> />
<div class="suggestion-box" v-if="suggestions.length > 0"> <div class="suggestion-box" v-if="suggestions.length > 0">
<div class="suggestion-item" v-for="(item, index) in suggestions" :class="{ 'active':(index == selection) }" v-on:click="onClickTag(index)"> <div class="suggestion-item" v-for="(item, index) in suggestions" :class="{ 'active':(index == selection) }" v-on:click="onSuggestionClick(index)">
{{ucWords(item.text)}} <span class="suggestion-tip" v-if="index == selection">Press Enter to add</span> {{ucWords(item.text)}} <span class="suggestion-tip" v-if="index == selection">Press Enter to add</span>
</div> </div>
</div> </div>
@ -98,6 +98,7 @@
return true return true
} }
} }
return false
}, },
getTagTextById(id){ getTagTextById(id){
let tag = this.getTagById(id) let tag = this.getTagById(id)
@ -171,9 +172,38 @@
} }
}, 300) }, 300)
}, },
onClickTag(index){ onSuggestionClick(index){
this.newTagInput = this.suggestions[index].text this.newTagInput = this.suggestions[index].text
this.addTag() this.addTag()
},
toggleTag(tagText, id){
//remove tag
if(this.isTagOnNote(id)){
//Find database ID for tag
let entryId = null
this.noteTagIds.forEach(tag => {
if(tag.tagId == id){
entryId = tag.entryId
return
}
})
//Submit database entry to be removed
if(entryId){
this.removeTag(entryId)
}
return
}
//Add Tag
this.newTagInput = tagText
this.addTag()
return
}, },
addTag(){ addTag(){
@ -228,6 +258,8 @@
}, },
removeTag(tagId){ removeTag(tagId){
console.log(tagId)
let postData = { let postData = {
'tagId':tagId, 'tagId':tagId,
'noteId':this.noteId 'noteId':this.noteId
@ -255,9 +287,6 @@
/* note tag edit area */ /* note tag edit area */
.full-tag-area { .full-tag-area {
color: var(--text_color);
background-color: var(--background_color);
/*padding: 15px;*/ /*padding: 15px;*/
/*border: 1px solid;*/ /*border: 1px solid;*/
border-color: var(--border_color); border-color: var(--border_color);

View File

@ -8,13 +8,16 @@
z-index: 400; z-index: 400;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
color: var(--text_color);
background-color: var(--background_color);
} }
.slide-content { .slide-content {
box-sizing: border-box; box-sizing: border-box;
/*padding: 1em 1.5em;*/ /*padding: 1em 1.5em;*/
height: calc(100% - 43px); height: calc(100% - 43px);
border-right: 1px solid var(--menu-border); border-right: 1px solid var(--menu-border);
background-color: var(--background_color); /*background-color: var(--background_color);*/
overflow-x: scroll; overflow-x: scroll;
} }
.slide-shadow { .slide-shadow {
@ -71,7 +74,7 @@
<transition name="modal-fade"> <transition name="modal-fade">
<div> <div>
<div class="slide-container"> <div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">
<!-- content of the editor --> <!-- content of the editor -->
<div class="slide-content"> <div class="slide-content">
@ -94,13 +97,15 @@
<script> <script>
export default { export default {
name: 'SideSlideMenu', name: 'SideSlideMenu',
props: [ 'name' ], props: [ 'name', 'styleObject' ],
components: { components: {
'nm-button':require('@/components/NoteMenuButtonComponent.vue').default 'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
}, },
data () { data () {
return { return {
items: [] items: [],
bgColor: null,
textColor: null,
} }
}, },
beforeMount(){ beforeMount(){
@ -115,6 +120,17 @@
beforeDestroy(){ beforeDestroy(){
}, },
mounted(){ mounted(){
//If note style object is set, use that on the slide menu
if(this.styleObject && this.styleObject.noteText){
this.textColor = this.styleObject.noteText
}
if(this.styleObject && this.styleObject.noteBackground){
this.bgColor = this.styleObject.noteBackground
console.log(this.bgColor)
}
//Close all other panels that are not this one //Close all other panels that are not this one
this.$nextTick( () => { this.$nextTick( () => {