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

Big Update:

Browse Source 
* 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
This commit is contained in:
Max G
2020-04-10 03:47:15 +00:00
parent 0b5675e000
commit c11f1b1b6f
12 changed files with 246 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/AttachmentDisplayCard.vue
View File

@@ -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

67
client/src/components/GlobalSiteMenu.vue
View File

@@ -1,12 +1,12 @@
<style scoped>
.slotholder {
height: 100vh;
width: 140px;
width: 155px;
display: block;
float: left;
}
.global-menu {
width: 140px;
width: 155px;
background: #221f2b;
margin: 0;
padding: 0;
@@ -89,6 +89,17 @@
width: 30px;
height: 30px;
}
.version-display {
position: absolute;
bottom: 0;
left: -20px;
right: 0;
height: 30px;
padding: 5px 0;
text-align: center;
color: #8c80ae;
cursor: pointer;
}
</style>
@@ -130,8 +141,8 @@
<search-input v-if="loggedIn && mobile"></search-input>
<!-- mobile create note button -->
<span v-if="loggedIn">
<span v-if="!disableNewNote" @click="createNote" class="ui large basic compact icon button">
<i class="green plus icon"></i>
<span v-if="!disableNewNote" @click="createNote" class="ui large green compact icon button">
<i class="plus icon"></i>
</span>
<span v-if="disableNewNote" class="ui large basic compact icon button">
<i class="grey plus icon"></i>
@@ -158,14 +169,18 @@
<div class="menu-section" v-if="loggedIn">
<div v-if="!disableNewNote" @click="createNote" class="menu-item menu-item menu-button">
<i class="green plus icon"></i>New Note
<div class="ui green button">
<i class="plus icon"></i>New Note
</div>
</div>
<div v-if="disableNewNote" class="menu-item menu-item menu-button">
<i class="purple plus icon"></i>Creating
<div class="ui basic button">
<i class="plus loading icon"></i>New Note
</div>
</div>
</div>
<div class="menu-section" v-if="loggedIn">
<div class="menu-section" v-if="loggedIn && $store.getters.totals && $store.getters.totals['totalNotes']">
<router-link exact-active-class="active" class="menu-item menu-button" to="/notes" v-on:click.native="emitReloadEvent()">
<i class="file outline icon"></i>Notes
<counter class="float-right" number-id="totalNotes" />
@@ -174,7 +189,6 @@
<!-- <div class="menu-item sub">Show Only <i class="caret down icon"></i></div> -->
<!-- <div v-on:click="updateFastFilters(0)" class="menu-item menu-button sub"><i class="grey linkify icon"></i>Links</div> -->
<!-- <div v-on:click="updateFastFilters(1)" class="menu-item menu-button sub"><i class="grey tags icon"></i>Tags</div> -->
</div>
</div>
@@ -187,7 +201,7 @@
<div class="menu-section" v-if="loggedIn">
<router-link v-if="loggedIn" exact-active-class="active" class="menu-item menu-button" to="/quick">
<i class="paper plane outline icon"></i>Quick
<i class="paper plane outline icon"></i>Quick Note
</router-link>
</div>
@@ -210,15 +224,24 @@
</div>
</div>
<div class="menu-section" v-if="loggedIn" data-tooltip="Click to log out" data-inverted="" data-position="right center">
<div v-if="loggedIn" v-on:click="destroyLoginToken" class="menu-item menu-button">
<div class="menu-section">
<router-link class="menu-item menu-button" exact-active-class="active" to="/help">
<i class="question circle outline icon"></i>Help
</router-link>
</div>
<div class="menu-section" v-if="loggedIn" :data-tooltip="`Logout ${this.$store.getters.getUsername}`" data-inverted="" data-position="right center">
<div v-on:click="destroyLoginToken" class="menu-item menu-button">
<i v-if="userIcon" class="user outline icon"></i>{{ usernameDisplay }}
</div>
</div>
</div>
<div v-on:click="reloadPage" class="version-display">
<i :class="`${getVersionIcon()} icon`"></i> {{ version }}
</div>
<!-- <router-link class="ui basic compact button" exact-active-class="active" to="/help">
<i class="question mark icon"></i>Help
</router-link> -->
</div>
</div>
</template>
@@ -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]
}
}
}

147
client/src/components/NoteInputPanel.vue
View File

@@ -93,47 +93,41 @@
<!-- bottom stats -->
<div class="ui basic segment">
<div class="ui grid reduced-padding">
<div class="ui grid compact">
<div class="four wide column">
<!-- Tags -->
<button class="ui compact basic fluid button shrinking" v-on:click="showTagSlideMenu = !showTagSlideMenu; modified = true">
<i class="tags icon"></i> Tags
<button class="ui compact basic fluid icon button shrinking" v-if="!isEncrypted"
v-on:click="$router.push(`/notes/open/${noteid}/menu/passwordprotect`)" data-tooltip="Add Password">
<i class="shield alternate icon"></i>
Protect
</button>
<button class="ui compact basic fluid icon button shrinking" v-if="isEncrypted && isDecrypted" v-on:click="disableEncryption" data-tooltip="Remove Password Protection">
<i class="unlock icon"></i>
Un-protect
</button>
</div>
<div class="four wide column">
<!-- Archive Button -->
<button class="ui compact basic fluid button shrinking" v-on:click="onToggleArchived">
<button class="ui compact basic fluid icon button shrinking" v-on:click="onToggleArchived" :data-tooltip="archived == 1?'Move to main list':'Move to Archive'">
<span v-if="archived == 1"><i class="green archive icon"></i> Archived</span>
<span v-if="archived != 1"><i class="archive icon"></i> Archive</span>
</button>
</div>
<div class="four wide column"><!-- Pin button -->
<button class="ui compact basic fluid button shrinking" v-on:click="onTogglePinned">
<div class="four wide column">
<!-- Pin button -->
<button class="ui compact basic fluid icon button shrinking" v-on:click="onTogglePinned" :data-tooltip="pinned == 1?'Un-pin from top':'Pin to top'">
<span v-if="pinned == 1"><i class="green pin icon"></i> Pinned</span>
<span v-if="pinned != 1"><i class="pin icon"></i> Pin</span>
</button></div>
<div class="four wide column">
<!-- files button -->
<button class="ui compact basic fluid button shrinking" v-on:click="openEditAttachment">
<button class="ui compact basic fluid icon button shrinking" v-on:click="openEditAttachment" data-tooltip="Files on note">
<i class="folder icon"></i> Files
</button>
</div>
<!-- <div class="sixteen wide column"></div> -->
<div class="eight wide column">
<button class="ui basic compact button shrinking" v-if="!isEncrypted" v-on:click="passwordEnterVisible = true">
<i class="shield alternate icon"></i>
Password Protect
</button>
<button class="ui icon basic compact button shrinking" v-if="isEncrypted && isDecrypted" v-on:click="disableEncryption">
<i class="unlock icon"></i>
Remove Password
</button>
</div>
<div class="seven wide right aligned middle aligned column">
<div class="one wide column"></div>
<div class="eight wide middle aligned column">
<span :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
Edited: {{ $helpers.timeAgo(updated) }}
</span>
@@ -151,13 +145,21 @@
</span>
<!-- Note options on the bottom of note -->
<div class="all-settings" :class="{ 'low-settings':!extraToolbarsVisible }">
<div class="all-settings">
<div class="note-menu shrink-icons-on-mobile">
<!-- Tags -->
<nm-button
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/tags`)"
icon="tags"
text="Tags"
tip="Tags"
></nm-button>
<!-- colors button -->
<nm-button
v-on:click.native="showColorPicker"
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/colors`)"
icon="paint brush"
text="Color"
tip="Note Color"
@@ -165,7 +167,7 @@
<!-- add images panel -->
<nm-button
v-on:click.native="showFilesSideMenu = !showFilesSideMenu"
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/images`)"
icon="image"
text="Images"
tip="Images"
@@ -182,7 +184,7 @@
icon="ellipsis horizontal"
text="Options"
tip="More Options"
v-on:click.native="showNoteOptions = !showNoteOptions" />
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/options`)" />
</div>
</div>
@@ -191,31 +193,31 @@
<!-- Side slide menus for colors, tags, images and other options -->
<side-slide-menu v-show="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors">
<side-slide-menu v-show="colors" v-on:close="colors = false" name="colors">
<color-picker
@changeColor="onChangeColor"
@close="onCloseColorChanger"
@close="colors = false"
:style-object="styleObject"
/>
</side-slide-menu>
<side-slide-menu v-show="showTagSlideMenu" v-on:close="showTagSlideMenu = false" name="tags" :style-object="styleObject">
<side-slide-menu v-show="tags" v-on:close="tags = false" name="tags" :style-object="styleObject">
<div class="ui basic segment">
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/>
</div>
</side-slide-menu>
<side-slide-menu v-show="showFilesSideMenu" v-on:close="showFilesSideMenu = false" name="images" :style-object="styleObject">
<side-slide-menu v-show="images" v-on:close="images = false" name="images" :style-object="styleObject">
<div class="ui basic segment">
<simple-attachment-note
v-on:close="showFilesSideMenu = false"
v-on:close="images = false"
:note-id="noteid"
:squire-editor="editor">
</simple-attachment-note>
</div>
</side-slide-menu>
<side-slide-menu v-show="showNoteOptions" v-on:close="showNoteOptions = false" name="note-options" :style-object="styleObject">
<side-slide-menu v-show="options" v-on:close="options = false" name="note-options" :style-object="styleObject">
<div class="ui basic padded segment">
<div class="ui grid">
<div class="sixteen wide column">
@@ -257,7 +259,7 @@
</div>
</side-slide-menu>
<side-slide-menu v-show="passwordEnterVisible" v-on:close="passwordEnterVisible = false" :fullShadow="true" name="encrypt note">
<side-slide-menu v-show="passwordprotect" v-on:close="passwordprotect = false" :fullShadow="true" name="encrypt note">
<div class="ui basic segment" v-if="isDecrypted && isEncrypted">
<p>Note Decrypted</p>
<div class="ui green button" v-on:click="lockNote">Lock Note</div>
@@ -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 */

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

@@ -19,13 +19,6 @@
</span>
</span>
<span class="subtext" v-if="note.shared == 2">
You Shared
<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span>
<span v-if="note.title == '' && note.subtext == '' && note.encrypted == 0">
Empty Note
</span>
@@ -46,10 +39,17 @@
v-html="note.subtext"></span>
<p v-if="note.encrypted == 1">
<div class="ui fluid basic button" v-if="note.encrypted == 1">
<i class="green lock icon"></i>
Locked
</p>
</div>
<span class="subtext" v-if="note.shared == 2">
You Shared this note
<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
Updated
</span>
</span>
<!-- Display highlights from solr results -->
<span v-if="note.note_highlights.length > 0" class="term-usage">
@@ -67,7 +67,6 @@
<!-- Toolbar on the bottom -->
<div class="tool-bar" @click.self="cardClicked">
<div class="icon-bar">
<!-- {{$helpers.timeAgo(note.updated)}} -->
<span v-if="note.pinned == 1" data-position="top left" data-tooltip="Pinned" data-inverted>
<i class="green pin icon"></i>
@@ -80,7 +79,10 @@
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
</span>
<!-- :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" -->
<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
Last Edit {{$helpers.timeAgo(note.updated)}}
</span>
<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
<i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)">
@@ -100,7 +102,7 @@
<i class="pin icon"></i>
</i>
<delete-button class="teeny-button" :note-id="note.id" />
<delete-button class="teeny-button" :note-id="note.id" />
</span>
</div>
@@ -113,7 +115,7 @@
</div>
<side-slide-menu v-if="showTagSlideMenu" v-on:close="toggleTags(false)" :full-shadow="true">
<side-slide-menu v-if="showTagSlideMenu" v-on:close="toggleTags(false)" :full-shadow="true" :skip-history="true">
<div class="ui basic segment">
<note-tag-edit :noteId="note.id" :key="'display-tags-for-note-'+note.id"/>
</div>
@@ -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 */

13
client/src/components/SideSlideMenuComponent.vue
View File

@@ -109,7 +109,7 @@
<script>
export default {
name: 'SideSlideMenu',
props: [ 'name', 'styleObject', 'fullShadow' ],
props: [ 'name', 'styleObject', 'fullShadow', 'skipHistory' ],
components: {
'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
},
@@ -145,15 +145,16 @@
//Close all other panels that are not this one
this.$nextTick( () => {
this.$bus.$emit('destroy_all_other_side_panels', this.name)
// this.$bus.$emit('destroy_all_other_side_panels', this.name)
})
},
methods: {
onClickTag(index){
console.log('yup')
},
close() {
this.$emit('close');
if(this.skipHistory != true){
this.$router.go(-1)
}
this.$emit('close'); //Close menu via event
},
}
}