Compare commits
No commits in common. "596e57eaf0678cc27ca91900b0c4f6be3560f2ea" and "71f909fb76987d1cfd59b6c20c03a6ad39bfc83d" have entirely different histories.
596e57eaf0
...
71f909fb76
@ -3,7 +3,7 @@
|
||||
<div
|
||||
id="InputNotes"
|
||||
class="master-note-edit"
|
||||
@keyup.esc="close()"
|
||||
@keyup.esc="close"
|
||||
:class="[{ 'size-down':(sizeDown == true), 'full-focus':(fullFocusEditor) }, 'position-'+position ]"
|
||||
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
|
||||
>
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<div class="note-menu">
|
||||
|
||||
<nm-button tip="Close" bottom-tip="true" v-on:click.native="close()" icon="close" />
|
||||
<nm-button tip="Close" bottom-tip="true" v-on:click.native="close" icon="close" />
|
||||
|
||||
<nm-button tip="Text Color" bottom-tip="true" icon="palette icon" v-on:click.native="colorpicker = true" />
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
|
||||
<nm-button tip="Remove Formatting" bottom-tip="true" v-on:click.native="removeFormatting()" icon="remove format icon" />
|
||||
|
||||
<nm-button v-on:click.native="undoCustom()" icon="undo" bottom-tip="true" tip="Undo" />
|
||||
<nm-button v-on:click.native="undoCustom()" icon="undo" bottom-tip="true" tip="Undo" text="Undo" />
|
||||
|
||||
<nm-button tip="Users on Note" bottom-tip="true" v-if="usersOnNote > 1" icon="green user circle" />
|
||||
|
||||
@ -151,9 +151,9 @@
|
||||
|
||||
<div class="note-menu shrink-icons-on-mobile">
|
||||
|
||||
<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" text="Check" />
|
||||
<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" />
|
||||
|
||||
<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" text="List"/>
|
||||
<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" />
|
||||
|
||||
<!-- colors button -->
|
||||
<nm-button
|
||||
|
||||
@ -514,18 +514,18 @@
|
||||
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
|
||||
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
|
||||
/*Initial state, no BG*/
|
||||
background-size: 0 4px, 4px 0, 0 4px, 4px 0;
|
||||
background-size: 0 3px, 3px 0, 0 3px, 3px 0;
|
||||
}
|
||||
10% {
|
||||
15% {
|
||||
/*Middre state, some filled */
|
||||
background-size: 100% 4px, 4px 0, 100% 4px, 4px 0;
|
||||
}
|
||||
20% {
|
||||
/*final state, all filled */
|
||||
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
|
||||
background-size: 100% 3px, 3px 0, 100% 3px, 3px 0;
|
||||
}
|
||||
30% {
|
||||
background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
|
||||
/*final state, all filled */
|
||||
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
|
||||
}
|
||||
45% {
|
||||
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
|
||||
background-image:
|
||||
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
|
||||
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */
|
||||
@ -547,7 +547,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 0, 0 100%, 100% 0, 0 100%;
|
||||
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
||||
animation: bgin 4s cubic-bezier(0.19, 1, 0.22, 1) 1;
|
||||
animation: bgin 2s cubic-bezier(0.19, 1, 0.22, 1) 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,109 +0,0 @@
|
||||
<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>
|
||||
@ -4,11 +4,11 @@
|
||||
z-index: 1005;
|
||||
top: 42px;
|
||||
/*height: 100px;*/
|
||||
/*width: 415px;*/
|
||||
width: 415px;
|
||||
left: 0;
|
||||
}
|
||||
.colors-container {
|
||||
max-width: 370px;
|
||||
max-width: 400px;
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
@ -29,10 +29,12 @@
|
||||
background-color: transparent;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media only screen and (max-width: 740px) {
|
||||
.colors {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
@ -30,13 +30,6 @@
|
||||
<!-- <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">
|
||||
@ -65,6 +58,16 @@
|
||||
<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">
|
||||
|
||||
@ -141,8 +144,7 @@
|
||||
'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,
|
||||
'tag-display':require('@/components/TagDisplayComponent.vue').default,
|
||||
'counter':require('@/components/AnimatedCounterComponent.vue').default
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -215,11 +217,10 @@
|
||||
this.$store.dispatch('fetchAndUpdateUserTotals')
|
||||
|
||||
this.$bus.$on('close_active_note', ({position, noteId, modified}) => {
|
||||
|
||||
this.closeNote(position)
|
||||
this.$store.dispatch('fetchAndUpdateUserTotals')
|
||||
if(modified){
|
||||
this.updateSingleNote(parseInt(noteId))
|
||||
this.updateSingleNote(noteId)
|
||||
}
|
||||
})
|
||||
|
||||
@ -661,6 +662,12 @@
|
||||
})
|
||||
|
||||
},
|
||||
ucWords(str){
|
||||
return (str + '')
|
||||
.replace(/^(.)|\s+(.)/g, function ($1) {
|
||||
return $1.toUpperCase()
|
||||
})
|
||||
},
|
||||
reset(){
|
||||
this.showClear = false
|
||||
this.searchTerm = ''
|
||||
|
||||
Loading…
Reference in New Issue
Block a user