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

* Tags can now be toggled by clicking

Browse Source 
* Side slide component now respects note colors
This commit is contained in:
Max G
2020-02-10 22:21:06 +00:00
parent 7f93925f74
commit acf72ca67e
3 changed files with 58 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/NoteInputPanel.vue
View File

@@ -118,13 +118,13 @@
/>
</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">
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
</div>
</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">
<simple-attachment-note
v-on:close="showFilesSideMenu = false"
@@ -134,7 +134,7 @@
</div>
</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 grid">
<div class="sixteen wide column">

41
client/src/components/NoteTagEdit.vue
View File

@@ -13,7 +13,7 @@
<div class="sixteen wide column">
<h3>All Tags</h3>
<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) }}
</div>
</div>
@@ -42,7 +42,7 @@
v-on:focus="onFocus"
/>
<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>
</div>
</div>
@@ -98,6 +98,7 @@
return true
}
}
return false
},
getTagTextById(id){
let tag = this.getTagById(id)
@@ -171,9 +172,38 @@
}
}, 300)
},
onClickTag(index){
onSuggestionClick(index){
this.newTagInput = this.suggestions[index].text
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(){
@@ -228,6 +258,8 @@
},
removeTag(tagId){
console.log(tagId)
let postData = {
'tagId':tagId,
'noteId':this.noteId
@@ -255,9 +287,6 @@
/* note tag edit area */
.full-tag-area {
color: var(--text_color);
background-color: var(--background_color);
/*padding: 15px;*/
/*border: 1px solid;*/
border-color: var(--border_color);

24
client/src/components/SideSlideMenuComponent.vue
View File

@@ -8,13 +8,16 @@
z-index: 400;
overflow: hidden;
height: 100%;
color: var(--text_color);
background-color: var(--background_color);
}
.slide-content {
box-sizing: border-box;
/*padding: 1em 1.5em;*/
height: calc(100% - 43px);
border-right: 1px solid var(--menu-border);
background-color: var(--background_color);
/*background-color: var(--background_color);*/
overflow-x: scroll;
}
.slide-shadow {
@@ -71,7 +74,7 @@
<transition name="modal-fade">
<div>
<div class="slide-container">
<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">
<!-- content of the editor -->
<div class="slide-content">
@@ -94,13 +97,15 @@
<script>
export default {
name: 'SideSlideMenu',
props: [ 'name' ],
props: [ 'name', 'styleObject' ],
components: {
'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
},
data () {
return {
items: []
items: [],
bgColor: null,
textColor: null,
}
},
beforeMount(){
@@ -116,6 +121,17 @@
},
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
this.$nextTick( () => {
this.$bus.$emit('destroy_all_other_side_panels', this.name)