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

* Tags Dropbown Beta...kinda crappy

Browse Source
This commit is contained in:
Max G 2020-04-15 21:54:36 +00:00
parent 3d2c9868fd
commit e296775a31
2 changed files with 118 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
client/src/components/TagDisplayComponent.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<div class="ui basic button shrinking">
<!-- Dropdown Button -->
<span v-if="activeTags.length == 0" v-on:click="menuOpen = true">
<i class="green tags icon"></i>
Tags
<i class="caret down icon"></i>
</span>
<!-- Remove Tag button -->
<span v-if="activeTags.length > 0" v-on:click="toggleActive()">
<i class="green tag icon"></i>
{{ getActiveTag() }}
<i class="caret right icon"></i>
</span>
<!-- hidden dropdown menu -->
<div class="dropdown-menu" v-if="menuOpen">
<div class="ui raised segment">
<div class="ui clickable basic label" v-for="tag in tags">
<span v-on:click="onClick(tag.id)">
{{ ucWords(tag.text) }}
<span class="detail">{{tag.usages}}</span>
</span>
</div>
</div>
</div>
<div class="shade" v-if="menuOpen" v-on:click="menuOpen = false"></div>
</div>
</template>
<script>
export default {
name: 'TagDisplay',
props: [ 'tags', 'activeTags' ],
components: {
},
methods:{
toggleActive(){
this.menuOpen = false
const current = this.activeTags[0]
this.onClick( current )
},
onClick(tagId){
this.menuOpen = false
this.$emit('tagClick', tagId)
},
ucWords(str){
return (str + '')
.replace(/^(.)|\s+(.)/g, function ($1) {
return $1.toUpperCase()
})
},
getActiveTag(){
let text = 'Tags'
if(this.activeTags.length == 0){
return text
}
this.tags.forEach(tag => {
if( this.activeTags.includes(tag.id) ){
text = this.ucWords(tag.text)
}
})
return text
},
},
data () {
return {
menuOpen: false,
}
},
beforeMount(){
}
}
</script>
<style type="text/css">
.dropdown-menu {
position: absolute;
/*width: 70vw;*/
z-index: 1005;
left: 0;
right: 0;
max-width: 600px;
text-align: left;
}
.dropdown-menu .label {
margin: 0 5px 5px 0;
}
.shade {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1004;
background-color: transparent;
width: 100vw;
height: 100vh;
}
</style>

26
client/src/pages/NotesPage.vue
View File

@ -30,6 +30,13 @@
<!-- <span>{{ $store.getters.totals['encryptedNotes'] }}</span> -->
</div>
<tag-display
v-if="commonTags.length > 0"
:tags="commonTags"
:active-tags="searchTags"
v-on:tagClick="tagId => toggleTagFilter(tagId)"
/>
</div>
<div class="six wide column" v-if="!$store.getters.getIsUserOnMobile">
@ -58,16 +65,6 @@
<h2 v-if="fastFilters['onlyShowSharedNotes'] == 1">Shared Notes</h2>
<h2 v-if="fastFilters['onlyShowEncrypted'] == 1">Password Protected Notes</h2>
<!-- tags section -->
<div v-if="commonTags.length > 0" class="sixteen wide column">
<h4 class="ui tiny dividing header"><i class="green tags icon"></i>Tags</h4>
<span v-for="tag in commonTags" @click="toggleTagFilter(tag.id)">
<span class="ui clickable basic label" :class="{ 'green':(searchTags.includes(tag.id)) }">
{{ucWords(tag.text)}} <span class="detail">{{tag.usages}}</span>
</span>
</span>
</div>
<!-- Note title card display -->
<div class="sixteen wide column">
@ -144,7 +141,8 @@
'fast-filters': require('@/components/FastFilters.vue').default,
'search-input': require('@/components/SearchInput.vue').default,
'attachment-display': require('@/components/AttachmentDisplayCard').default,
'counter':require('@/components/AnimatedCounterComponent.vue').default
'counter':require('@/components/AnimatedCounterComponent.vue').default,
'tag-display':require('@/components/TagDisplayComponent.vue').default,
},
data () {
return {
@ -663,12 +661,6 @@
})
},
ucWords(str){
return (str + '')
.replace(/^(.)|\s+(.)/g, function ($1) {
return $1.toUpperCase()
})
},
reset(){
this.showClear = false
this.searchTerm = ''