* 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
parent
35605e54d9
commit
aa4de83de6
@ -37,11 +37,17 @@ div.ui.basic.segment.no-fluf-segment {
|
||||
|
||||
/* Night mode modifiers */
|
||||
|
||||
/*Make images sepia in night mode */
|
||||
.night-mode img {
|
||||
filter: grayscale(50%) brightness(80%) sepia(80%);
|
||||
|
||||
}
|
||||
/*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*/
|
||||
body {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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() {
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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
|
||||
}
|
||||
|
||||
this.noteSections.notes.push(note)
|
||||
//If the note is not archived, push it.
|
||||
if(note.archived != 1 && this.fastFilters.onlyArchived != 1){
|
||||
this.noteSections.notes.push(note)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user