From a3fa4b0f3c55bf44725489bc03803d7130b0f84c Mon Sep 17 00:00:00 2001 From: Max G Date: Fri, 10 Apr 2020 03:47:15 +0000 Subject: [PATCH] Big Update: * Menus open and close based on URL, allowing for back button on note menus to close Minor Updates: * Made night mode buttons green * Widend the global menu * Added a version display * Made the create note button real big * Made the creane note button more visible on mobile * Hide the note button if there are no notes * Changed quick menu item to "Quick Note" * Added reload option if version is clicked * Moved around menu buttons at the bottom of the note * Moved tags back into the main footer on note * Disabled hiding of toolbar on mobile when editor focused * Updated locked note display on main title card * Put last edit on note display * Tweaked display styles to be more minimal, added fade-in on hover * Added solid scribe to all title displays on the site * Reactivated help page and put some good help on it...decent help * Increased max upload size for files to 5MB * Shortened text on title display cards to make them all the same size --- client/src/assets/semantic-helper.css | 3 + .../src/components/AttachmentDisplayCard.vue | 1 + client/src/components/GlobalSiteMenu.vue | 67 ++++++-- client/src/components/NoteInputPanel.vue | 147 +++++++++--------- .../src/components/NoteTitleDisplayCard.vue | 71 +++++---- .../src/components/SideSlideMenuComponent.vue | 13 +- client/src/main.js | 2 +- client/src/pages/HelpPage.vue | 42 ++--- client/src/pages/NotesPage.vue | 66 ++++---- client/src/router/index.js | 14 +- server/index.js | 2 +- server/models/Note.js | 2 +- 12 files changed, 246 insertions(+), 184 deletions(-) diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css index 763b895..c33c7b8 100644 --- a/client/src/assets/semantic-helper.css +++ b/client/src/assets/semantic-helper.css @@ -48,6 +48,9 @@ div.ui.basic.segment.no-fluf-segment { background-color: #877A61 !important; border-color: #877A61 !important; } + .night-mode .green.button { + background-color: #534428 !important; + } /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/ body { diff --git a/client/src/components/AttachmentDisplayCard.vue b/client/src/components/AttachmentDisplayCard.vue index c99563c..3805ac7 100644 --- a/client/src/components/AttachmentDisplayCard.vue +++ b/client/src/components/AttachmentDisplayCard.vue @@ -181,6 +181,7 @@ openNote(){ const noteId = this.item.note_id this.$router.push('/notes/open/'+noteId) + this.$bus.$emit('open_note', noteId) }, openEditAttachments(){ const noteId = this.item.note_id diff --git a/client/src/components/GlobalSiteMenu.vue b/client/src/components/GlobalSiteMenu.vue index fc3abb9..f3ee6be 100644 --- a/client/src/components/GlobalSiteMenu.vue +++ b/client/src/components/GlobalSiteMenu.vue @@ -1,12 +1,12 @@ @@ -130,8 +141,8 @@ - - + + @@ -158,14 +169,18 @@
- New Note +
+ New Note +
- Creating +
+ New Note +
-
+
Notes @@ -174,7 +189,6 @@ -
@@ -187,7 +201,7 @@
- Quick + Quick Note
@@ -210,15 +224,24 @@ -
-
+
+ + Help + +
+ +
+
{{ usernameDisplay }}
-
+
+ + + +
+ {{ version }} +
-
@@ -234,6 +257,7 @@ }, data: function(){ return { + version: '1.0.2', username: '', collapsed: false, mobile: false, @@ -272,6 +296,10 @@ this.userIcon = false } + if(name.length > 16){ + this.userIcon = false + } + return this.ucWords(name.substring(0, 16)) }, }, @@ -346,6 +374,15 @@ filter[options[index]] = 1 this.$bus.$emit('update_fast_filters', filter) + }, + reloadPage(){ + location.reload(true) + }, + getVersionIcon(){ + const icons = ['cat','crow','dog','dove','dragon','fish','frog','hippo','horse','kiwi bird','otter','spider'] + const index = ( parseInt(this.version.replace(/\./g,'')) % (icons.length)) + return icons[index] + } } } diff --git a/client/src/components/NoteInputPanel.vue b/client/src/components/NoteInputPanel.vue index f94f17d..e4fea23 100644 --- a/client/src/components/NoteInputPanel.vue +++ b/client/src/components/NoteInputPanel.vue @@ -93,47 +93,41 @@
-
+
- - +
-
-
-
-
- - -
- - - -
-
+
+
Edited: {{ $helpers.timeAgo(updated) }} @@ -151,13 +145,21 @@ -
+
+ + + + v-on:click.native="$router.push(`/notes/open/${noteid}/menu/options`)" />
@@ -191,31 +193,31 @@ - + - +
- +
- +
@@ -257,7 +259,7 @@
- +

Note Decrypted

Lock Note
@@ -319,7 +321,7 @@ export default { name: 'InputNotes', - props: [ 'noteid', 'position' ], + props: [ 'noteid', 'position', 'openMenu', 'urlData' ], components:{ 'note-tag-edit': () => import('@/components/NoteTagEdit.vue'), 'color-picker': () => import('@/components/ColorPicker.vue'), @@ -371,11 +373,10 @@ // pastFocusedNode: null, usersOnNote: 0, - extraToolbarsVisible: true, - showTagSlideMenu: false, - colorPickerVisible: false, - showFilesSideMenu: false, - showNoteOptions: false, + tags: false, + colors: false, + images: false, + options: false, //Encryption options passwordHint: '', @@ -384,7 +385,7 @@ hashedPass: '', //sha-256 password hash, sends to server for decryption isEncrypted: false, isDecrypted: false, - passwordEnterVisible: false, + passwordprotect: false, decryptAttempts: 0, lockedOut: false, autoLockTimeout: null, @@ -404,6 +405,30 @@ this.currentNoteId = newVal this.loadNote(this.currentNoteId) + }, + urlData(newVal, oldVal){ + + //Handle changes in URL to + + if(newVal.id == undefined || newVal.id != this.noteid){ + this.close() + } + + //Reset all note menus on URL change + this.colors = false + this.tags = false + this.passwordprotect = false + this.options = false + this.images = false + + //If a menu value is set, open it + if(newVal.openMenu){ + //Only modify menu boolean if its defined + if(typeof this[newVal.openMenu] == 'boolean'){ + + this[newVal.openMenu] = true + } + } } }, beforeMount(){ @@ -518,13 +543,11 @@ //Show and hide additional toolbars this.editor.addEventListener('focus', e => { - if(this.$store.getters.getIsUserOnMobile){ - this.extraToolbarsVisible = false - } + //Add events here if you like }) this.editor.addEventListener('blur', e => { + this.save() - this.extraToolbarsVisible = true }) }, //If nothing is selected, select the entire line @@ -598,7 +621,7 @@ //Close menu if user is on mobile, then sort list if(this.$store.getters.getIsUserOnMobile){ - this.showNoteOptions = false + this.options = false } //Fetch the container @@ -615,7 +638,7 @@ //Close menu if user is on mobile, then sort list if(this.$store.getters.getIsUserOnMobile){ - this.showNoteOptions = false + this.options = false } //Fetch the container @@ -671,7 +694,7 @@ //Close menu if user is on mobile, then sort list if(this.$store.getters.getIsUserOnMobile){ - this.showNoteOptions = false + this.options = false } //Fetch the container @@ -735,7 +758,7 @@ //Close menu if user is on mobile, then sort list if(this.$store.getters.getIsUserOnMobile){ - this.showNoteOptions = false + this.options = false } //Fetch the container @@ -791,11 +814,6 @@ return this.editor.getHTML() }, - showColorPicker(event){ - - this.colorPickerVisible = !this.colorPickerVisible - this.colorPickerLocation = {'x':event.clientX, 'y':event.clientY} - }, openEditAttachment(){ this.$router.push('/attachments/note/'+this.currentNoteId) @@ -822,10 +840,6 @@ this.lastNoteHash = 0 this.save() }, - onCloseColorChanger(){ - - this.colorPickerVisible = false - }, onChangeColor(newStyleObject){ //Set new style object for note, page will use some styles, styles will be saved to database @@ -1136,8 +1150,6 @@ this.updated = Math.round((+new Date)/1000) this.modified = true - console.log('Saved') - //Update last saved note hash this.lastNoteHash = this.hashString( currentNoteText ) this.startAutolockTimer() @@ -1198,9 +1210,6 @@ }, close(){ - // this.loading = true - // this.loadingMessage = 'Save and Close' - this.save().then( result => { this.sizeDown = true @@ -1241,7 +1250,7 @@ this.isDecrypted = false this.password = '' this.hashedPass = '' - this.passwordEnterVisible = false + this.passwordprotect = false this.setText('') }) }, @@ -1258,7 +1267,7 @@ this.lastNoteHash = 0 this.password = '' this.passwordConfirm = '' - this.passwordEnterVisible = false + this.passwordprotect = false this.save() .then(results => { @@ -1273,7 +1282,7 @@ this.password = '' this.passwordConfirm = '' this.hashedPass = '' - this.passwordEnterVisible = false + this.passwordprotect = false //Reload Note this.save() @@ -1364,14 +1373,6 @@ /*padding: 1.2em 0 0;*/ flex-grow: 0; } - .low-settings { - bottom: 0px; - cursor: pointer; - height: 1.4em; - padding-top: 1.5em; - overflow: hidden; - border: 1px solid #534c68; - } /*End Settings manager styles */ diff --git a/client/src/components/NoteTitleDisplayCard.vue b/client/src/components/NoteTitleDisplayCard.vue index bb89e4e..874d7e4 100644 --- a/client/src/components/NoteTitleDisplayCard.vue +++ b/client/src/components/NoteTitleDisplayCard.vue @@ -19,13 +19,6 @@ - - You Shared - - Updated - - - Empty Note @@ -46,10 +39,17 @@ v-html="note.subtext"> -

+

Locked -

+
+ + + You Shared this note + + Updated + + @@ -67,7 +67,6 @@
- @@ -80,7 +79,10 @@ {{ tag }} - + + Last Edit {{$helpers.timeAgo(note.updated)}} + + @@ -100,7 +102,7 @@ - +
@@ -113,7 +115,7 @@
- +
@@ -210,7 +212,7 @@ this.triggerClosedAnimation = true setTimeout(()=>{ //After 3 seconds, hide it - this.justClosed = false + this.triggerClosedAnimation = false }, 3000) }, 500) @@ -298,6 +300,11 @@ } /*Strict font sizes for card display*/ + .small-text { + max-height: 261px; + overflow: hidden; + display: inline-block; + } .small-text, .small-text > p, .small-text > h1, .small-text > h2 { /*font-size: 1.0em !important;*/ font-size: 15px !important; @@ -342,16 +349,21 @@ .note-title-display-card { position: relative; - /*box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);*/ + /*box-shadow: 0 1px 3px 0 rgba(34,36,38,.15);*/ /*box-shadow: 0 0px 5px 1px rgba(34,36,38,0);*/ - box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); + /*box-shadow: 0 1px 3px 0 rgba(34,36,38,.15);*/ + box-shadow: 0px 1px 2px 1px rgba(210, 211, 211, 0.46); + transition: box-shadow ease 0.3s; margin: 5px; /*padding: 0.7em 1em;*/ border-radius: .28571429rem; - border: 1px solid; - border-color: var(--border_color); + border: 1px solid transparent; + /*border-color: var(--border_color);*/ /*width: calc(33.333% - 10px);*/ width: calc(25% - 10px); + max-width: 300px; + min-width: 190px; + min-height: 130px; /*transition: box-shadow 0.3s;*/ box-sizing: border-box; cursor: pointer; @@ -360,20 +372,20 @@ letter-spacing: 0.02rem; display: flex; flex-direction: column; + text-align: left; } .note-title-display-card:hover { - /*box-shadow: 0 3px 6px -0 rgba(34,36,38,.50);*/ - /*box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3);*/ + box-shadow: 0px 2px 2px 1px rgba(210, 211, 211, 0.8); } .icon-bar { display: inline-block; padding: 0 10px 0; opacity: 1; width: 100%; - /*margin-top: -2.2rem;*/ } .hover-hide { opacity: 0.0; + transition: opacity ease 0.6s; } .little-tag { font-size: 0.7em; @@ -428,12 +440,16 @@ align-self: flex-end; flex-grow: 0; } + .time-ago-display { + display: inline-block; + width: 100%; + text-align: right; + } .one-column .note-title-display-card { - /*margin-right: 65%;*/ - /*width: 33%;*/ width: 100%; + max-width: none; } .overflow-hidden { overflow: hidden; @@ -472,6 +488,7 @@ .note-title-display-card { width: calc(100% + 10px); margin: 0px -5px 10px -5px; + max-width: none; } } @@ -484,18 +501,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 2px, 2px 0, 0 2px, 2px 0; + background-size: 0 3px, 3px 0, 0 3px, 3px 0; } 15% { /*Middre state, some filled */ - background-size: 100% 2px, 2px 0, 100% 2px, 2px 0; + background-size: 100% 3px, 3px 0, 100% 3px, 3px 0; } 30% { /*final state, all filled */ - background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; + background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; } 45% { - background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; + 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 */ diff --git a/client/src/components/SideSlideMenuComponent.vue b/client/src/components/SideSlideMenuComponent.vue index c6f7fc6..6bfe344 100644 --- a/client/src/components/SideSlideMenuComponent.vue +++ b/client/src/components/SideSlideMenuComponent.vue @@ -109,7 +109,7 @@