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

* 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

View File

@ -40,7 +40,13 @@ div.ui.basic.segment.no-fluf-segment {
/*Make images sepia in night mode */
.night-mode img {
filter: grayscale(50%) brightness(80%) sepia(80%);
}
.night-mode i.green {
color: #877A61 !important;
}
.night-mode .green.label {
background-color: #877A61 !important;
border-color: #877A61 !important;
}
/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/

View File

@ -3,18 +3,16 @@
.popup-body {
position: fixed;
bottom: 15px;
right: 15px;
left: 15px;
min-height: 50px;
min-width: 200px;
max-width: calc(100% - 20px);
z-index: 1002;
border-top: 2px solid #21ba45;
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
border-top-right-radius: 4px;
border-top-left-radius: 4px;
color: white;
background-color: #21ba45;
}
.popup-row {
padding: 1em 5px;
@ -33,11 +31,45 @@
border-top: 1px solid #FFF;
}
.slide-in-bottom {
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-bottom {
0% {
transform: translateY(1000px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.color-fade {
animation: color-fade-animation 0.7s ease-out both;
}
@keyframes color-fade-animation {
0% {
color: black;
background-color: black;
}
50% {
color: black;
background-color: black;
}
100% {
color: white;
background-color: #21ba45;
}
}
</style>
<template>
<div class="popup-body" v-on:click="dismiss" v-if="notifications.length > 0">
<div class="popup-row" v-for="item in notifications">
<div class="popup-body slide-in-bottom" v-on:click="dismiss" v-if="notifications.length > 0">
<div class="popup-row color-fade" v-for="item in notifications">
<i class="disabled angle left icon"></i>
<span>{{ item }}</span>
<i class="disabled angle right icon"></i>

View File

@ -424,12 +424,12 @@
this.$io.emit('leave_room', this.rawTextId)
this.$bus.$off('new_file_upload')
document.removeEventListener('visibilitychange', this.checkForUpdatedNote)
this.editor.destroy()
this.$bus.$off('new_file_upload')
},
mounted: function() {

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>

View File

@ -91,6 +91,7 @@
<div class="note-card-display-area">
<note-title-display-card
v-for="note in section"
:ref="'note-'+note.id"
:onClick="openNote"
:data="note"
:currently-open="(activeNoteId1 == note.id || activeNoteId2 == note.id)"
@ -451,6 +452,8 @@
}
}
axios.post('/api/note/search', postData)
.then(results => {
@ -489,6 +492,13 @@
this.noteSections[key].splice(index, 1)
this.noteSections[key].unshift(note)
this.$nextTick( () => {
if(this.$refs['note-'+noteId] && this.$refs['note-'+noteId][0]){
this.$refs['note-'+noteId][0].justClosed()
}
})
return
}
})
@ -589,6 +599,7 @@
//Sort notes into defined sections
notes.forEach(note => {
//Show archived notes
if(note.archived == 1 && this.fastFilters.onlyArchived == 1){
this.noteSections.archived.push(note)
return
@ -615,8 +626,10 @@
this.noteSections.pinned.push(note)
return
}
//If the note is not archived, push it.
if(note.archived != 1 && this.fastFilters.onlyArchived != 1){
this.noteSections.notes.push(note)
}
})
},