Compare commits

...

2 Commits

Author SHA1 Message Date
Max G
596e57eaf0 * Tags Dropbown Beta...kinda crappy 2020-04-15 21:54:36 +00:00
Max G
d91b0735fd * Little Bug Fixes All Around 2020-04-15 20:44:24 +00:00
5 changed files with 136 additions and 36 deletions

View File

@ -3,7 +3,7 @@
<div <div
id="InputNotes" id="InputNotes"
class="master-note-edit" class="master-note-edit"
@keyup.esc="close" @keyup.esc="close()"
:class="[{ 'size-down':(sizeDown == true), 'full-focus':(fullFocusEditor) }, 'position-'+position ]" :class="[{ 'size-down':(sizeDown == true), 'full-focus':(fullFocusEditor) }, 'position-'+position ]"
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
> >
@ -19,7 +19,7 @@
<div class="note-menu"> <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" /> <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 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" text="Undo" /> <nm-button v-on:click.native="undoCustom()" icon="undo" bottom-tip="true" tip="Undo" />
<nm-button tip="Users on Note" bottom-tip="true" v-if="usersOnNote > 1" icon="green user circle" /> <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"> <div class="note-menu shrink-icons-on-mobile">
<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" /> <nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" text="Check" />
<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" /> <nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" text="List"/>
<!-- colors button --> <!-- colors button -->
<nm-button <nm-button

View File

@ -514,18 +514,18 @@
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/ linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */ linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
/*Initial state, no BG*/ /*Initial state, no BG*/
background-size: 0 3px, 3px 0, 0 3px, 3px 0; background-size: 0 4px, 4px 0, 0 4px, 4px 0;
} }
15% { 10% {
/*Middre state, some filled */ /*Middre state, some filled */
background-size: 100% 3px, 3px 0, 100% 3px, 3px 0; 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%;
} }
30% { 30% {
/*final state, all filled */ background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
45% {
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
background-image: background-image:
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */ linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */ linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */
@ -547,7 +547,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 0, 0 100%, 100% 0, 0 100%; background-size: 100% 0, 0 100%, 100% 0, 0 100%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-position: 0 0, 100% 0, 100% 100%, 0 100%;
animation: bgin 2s cubic-bezier(0.19, 1, 0.22, 1) 1; animation: bgin 4s cubic-bezier(0.19, 1, 0.22, 1) 1;
} }
</style> </style>

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>

View File

@ -4,11 +4,11 @@
z-index: 1005; z-index: 1005;
top: 42px; top: 42px;
/*height: 100px;*/ /*height: 100px;*/
width: 415px; /*width: 415px;*/
left: 0; left: 0;
} }
.colors-container { .colors-container {
max-width: 400px; max-width: 370px;
} }
.dot { .dot {
display: inline-block; display: inline-block;
@ -29,12 +29,10 @@
background-color: transparent; background-color: transparent;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
cursor: pointer;
} }
@media only screen and (max-width: 740px) { @media only screen and (max-width: 740px) {
.colors { .colors {
position: fixed; position: fixed;
width: 100%;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;

View File

@ -30,6 +30,13 @@
<!-- <span>{{ $store.getters.totals['encryptedNotes'] }}</span> --> <!-- <span>{{ $store.getters.totals['encryptedNotes'] }}</span> -->
</div> </div>
<tag-display
v-if="commonTags.length > 0"
:tags="commonTags"
:active-tags="searchTags"
v-on:tagClick="tagId => toggleTagFilter(tagId)"
/>
</div> </div>
<div class="six wide column" v-if="!$store.getters.getIsUserOnMobile"> <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['onlyShowSharedNotes'] == 1">Shared Notes</h2>
<h2 v-if="fastFilters['onlyShowEncrypted'] == 1">Password Protected 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 --> <!-- Note title card display -->
<div class="sixteen wide column"> <div class="sixteen wide column">
@ -144,7 +141,8 @@
'fast-filters': require('@/components/FastFilters.vue').default, 'fast-filters': require('@/components/FastFilters.vue').default,
'search-input': require('@/components/SearchInput.vue').default, 'search-input': require('@/components/SearchInput.vue').default,
'attachment-display': require('@/components/AttachmentDisplayCard').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 () { data () {
return { return {
@ -217,10 +215,11 @@
this.$store.dispatch('fetchAndUpdateUserTotals') this.$store.dispatch('fetchAndUpdateUserTotals')
this.$bus.$on('close_active_note', ({position, noteId, modified}) => { this.$bus.$on('close_active_note', ({position, noteId, modified}) => {
this.closeNote(position) this.closeNote(position)
this.$store.dispatch('fetchAndUpdateUserTotals') this.$store.dispatch('fetchAndUpdateUserTotals')
if(modified){ if(modified){
this.updateSingleNote(noteId) this.updateSingleNote(parseInt(noteId))
} }
}) })
@ -662,12 +661,6 @@
}) })
}, },
ucWords(str){
return (str + '')
.replace(/^(.)|\s+(.)/g, function ($1) {
return $1.toUpperCase()
})
},
reset(){ reset(){
this.showClear = false this.showClear = false
this.searchTerm = '' this.searchTerm = ''