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

* More aggressive dark theme styles, changing default icon colors and notification colors

Browse Source 
* Better sortig of archived notes which clicking archived
* Scroll to closed note and show animation on save
* Better notification styles, more obvious
This commit is contained in:
Max G
2020-03-30 05:31:09 +00:00
parent 5975ab6d68
commit 9309ea0821
5 changed files with 145 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
client/src/components/NoteTitleDisplayCard.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="note-title-display-card"
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
:class="{'currently-open':currentlyOpen}"
:class="{'currently-open':currentlyOpen, 'bgboy':triggerClosedAnimation}"
>
@@ -164,17 +164,25 @@
openEditAttachment(){
this.$router.push('/attachments/note/'+this.note.id)
},
pinNote(){
pinNote(){ //togglePinned() <- old name
let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
axios.post('/api/note/setpinned', postData)
.then(data => {
this.$bus.$emit('update_single_note', this.note.id)
})
},
archiveNote(){
archiveNote(){ //toggleArchived() <- old name
let postData = {'archived': !this.note.archived, 'noteId':this.note.id}
axios.post('/api/note/setarchived', postData)
.then(data => {
//Show message so no one worries where note went
let message = 'Moved to Archive'
if(postData.archived != 1){
message = 'Move to main list'
}
this.$bus.$emit('notification', message)
this.$bus.$emit('update_single_note', this.note.id)
})
},
@@ -187,6 +195,27 @@
}
},
justClosed(){
//Scroll note into view
this.$el.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center'
})
//After scroll, trigger green outline animation
setTimeout(() => {
this.triggerClosedAnimation = true
setTimeout(()=>{
//After 3 seconds, hide it
this.justClosed = false
}, 3000)
}, 500)
},
},
data () {
return {
@@ -197,6 +226,7 @@
iconColor: null,
beenClicked: false,
showTagSlideMenu: false,
triggerClosedAnimation: false, //Show just closed animation
}
},
computed: {
@@ -444,4 +474,50 @@
margin: 0px -5px 10px -5px;
}
}
/*Animations for cool border effects*/
@keyframes bgin {
0% {
background-image:
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 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 2px, 2px 0, 0 2px, 2px 0;
}
15% {
/*Middre state, some filled */
background-size: 100% 2px, 2px 0, 100% 2px, 2px 0;
}
30% {
/*final state, all filled */
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
45% {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 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 */
linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
}
100% {
background-image:
linear-gradient(to right, transparent 50%, transparent 100%), /* TopLeft to Right */
linear-gradient(to bottom, transparent 50%, transparent 100%), /* TopRight to Bottom */
linear-gradient(to right, transparent 50%, transparent 100%), /* BottomLeft to Right*/
linear-gradient(to bottom, transparent 50%, transparent 100%); /* TopLeft to Bottom */
}
}
.bgboy {
overflow: hidden;
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 2s cubic-bezier(0.19, 1, 0.22, 1) 1;
}
</style>