Minor Style Tweaks

* Changed the way the note menus display
* Added a blank note indicator text
* Added date created and date updated text to bottom of note

fixes #18
fixes #5
This commit is contained in:
Max G 2020-02-26 05:35:43 +00:00
parent 99b69c234f
commit a478cbe11c
5 changed files with 100 additions and 16 deletions

View File

@ -199,12 +199,16 @@ a:hover {
/* squire text styles */ /* squire text styles */
.squire-box { .squire-box {
border: none; border: none;
height: calc(100% - 69px); /*height: calc(100% - 69px);*/
min-height: calc(100% - 0px);
background-color: rgba(255,200,0,0.0);
/*margin-bottom: 15px;*/
box-sizing: border-box; box-sizing: border-box;
padding: 10px 15px 10px; padding: 10px 15px 10px;
background: transparent; /*background: transparent;*/
overflow-x: scroll; overflow-x: scroll;
/*color: var(--text_color);*/
font-size: 1.2em; font-size: 1.2em;
line-height: 1.5em; line-height: 1.5em;
word-wrap: break-word; word-wrap: break-word;

View File

@ -4,10 +4,12 @@
id="InputNotes" id="InputNotes"
class="master-note-edit" class="master-note-edit"
@keyup.esc="close" @keyup.esc="close"
:class="[{'size-down':(sizeDown == true), 'padded-bottom':extraToolbarsVisible }, 'position-'+position ]" :class="[{ 'size-down':(sizeDown == true) }, 'position-'+position ]"
:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
> >
<div class="input-container-wrapper">
<!-- Loading indicator --> <!-- Loading indicator -->
<div v-if="loading" class="loading-note"> <div v-if="loading" class="loading-note">
<div class="ui active dimmer"> <div class="ui active dimmer">
@ -34,10 +36,27 @@
<nm-button v-if="usersOnNote > 1" icon="green user circle" /> <nm-button v-if="usersOnNote > 1" icon="green user circle" />
<nm-button icon="ellipsis horizontal" v-on:click.native="showNoteOptions = !showNoteOptions" /> <nm-button icon="ellipsis horizontal" v-on:click.native="showNoteOptions = !showNoteOptions" />
</div> </div>
<div id="squire-id" class="squire-box" ref="squirebox"></div> <!-- Squire box grows -->
<div class="note-wrapper">
<div id="squire-id" class="squire-box" ref="squirebox"></div>
<!-- bottom stats -->
<div class="ui basic segment">
<div class="ui grid">
<div class="sixteen wide column">
<div class="ui basic compact button">
Status: {{ statusText }}
</div>
<div class="ui basic compact button" :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
Last Change: {{ $helpers.timeAgo(updated) }}
</div>
</div>
</div>
</div>
</div>
<!-- && this.$store.getters.getIsUserOnMobile --> <!-- && this.$store.getters.getIsUserOnMobile -->
<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile"> <span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
@ -108,7 +127,9 @@
</div> </div>
</div> </div>
<!-- Side slide menus for colors, tags and images --> </div>
<!-- Side slide menus for colors, tags, images and other options -->
<side-slide-menu v-if="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors"> <side-slide-menu v-if="colorPickerVisible" v-on:close="colorPickerVisible = false" name="colors">
<color-picker <color-picker
@ -211,6 +232,8 @@
modified: false, modified: false,
noteText: '', noteText: '',
rawTextId: 0, rawTextId: 0,
created: '',
updated: '',
shareUsername: null, shareUsername: null,
diffNoteText: '', diffNoteText: '',
statusText: 'Saved', statusText: 'Saved',
@ -299,6 +322,11 @@
this.editor = new Squire( this.$refs.squirebox, {blockTag: 'p' }) this.editor = new Squire( this.$refs.squirebox, {blockTag: 'p' })
this.setText(this.noteText) this.setText(this.noteText)
//focus on open, not on mobile, thats annoying
if(!this.$store.getters.getIsUserOnMobile){
this.editor.focus()
}
//Click Event - Open links when clicked in editor or toggle checks //Click Event - Open links when clicked in editor or toggle checks
this.editor.addEventListener('click', e => { this.editor.addEventListener('click', e => {
@ -693,10 +721,12 @@
this.rawTextId = response.data.rawTextId this.rawTextId = response.data.rawTextId
this.shareUsername = response.data.shareUsername this.shareUsername = response.data.shareUsername
this.created = response.data.created
this.updated = response.data.updated
vm.noteText = response.data.text vm.noteText = response.data.text
vm.diffNoteText = response.data.text vm.diffNoteText = response.data.text
vm.updated = response.data.updated
vm.lastNoteHash = vm.hashString(response.data.text) vm.lastNoteHash = vm.hashString(response.data.text)
//Set up note colors //Set up note colors
if(response.data.color){ if(response.data.color){
@ -1031,23 +1061,52 @@
<style type="text/css" scoped> <style type="text/css" scoped>
/* squire styles */ /* squire styles */
.input-container-wrapper {
display: block;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/*Three main elements nested in panel */
.note-menu {
/*position: absolute;*/
top: 0;/*
left: 0;
right: 0;*/
flex-grow: 0;
}
.note-wrapper {
flex-grow: 1;
overflow: scroll;
}
/*Settings manager styles */ /*Settings manager styles */
.all-settings { .all-settings {
/*border-top: 1px solid #534c68;*/ /*border-top: 1px solid #534c68;*/
background: #221f2b; background: #221f2b;
position: absolute; /*position: absolute;*/
bottom: 0; /*bottom: 40px;*/
right: 0; /*right: 0;*/
left: 0; /*left: 0;*/
z-index: 99; z-index: 99;
/*border: 1px solid;*/ /*border: 1px solid;*/
/*background-color: var(--background_color);*/ /*background-color: var(--background_color);*/
/*border-color: var(--border_color);*/ /*border-color: var(--border_color);*/
box-sizing: border-box; /*box-sizing: border-box;*/
/*border-radius: 7px;*/ /*border-radius: 7px;*/
/*box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);*/ /*box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);*/
/*padding: 1.2em 0 0;*/ /*padding: 1.2em 0 0;*/
flex-grow: 0;
} }
.low-settings { .low-settings {
bottom: 0px; bottom: 0px;
@ -1060,6 +1119,7 @@
/*End Settings manager styles */ /*End Settings manager styles */
/* container styles change based on mobile and number of open screens */ /* container styles change based on mobile and number of open screens */
.master-note-edit { .master-note-edit {
position: fixed; position: fixed;
@ -1070,9 +1130,9 @@
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1); box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
z-index: 1001; z-index: 1001;
/*overflow-x: scroll;*/ /*overflow-x: scroll;*/
}
.padded-bottom { overflow-y: scroll;
padding-bottom: 20px; overflow-x: hidden;
} }
.loading-note { .loading-note {
position: absolute; position: absolute;
@ -1104,6 +1164,14 @@
left: 0%; left: 0%;
right: 50%; right: 50%;
} }
.master-note-edit.position-3 {
display: inline-block;
position: inherit;
width: 100%;
min-height: 200px;
height: auto;
box-shadow: none;
}
.size-down { .size-down {
animation: size-down 0.5s ease; animation: size-down 0.5s ease;

View File

@ -33,6 +33,10 @@
</span> </span>
</span> </span>
<div v-if="note.title == '' && note.subtext == ''">
Empty Note
</div>
<!-- Title display --> <!-- Title display -->
<div v-if="note.title.length > 0" <div v-if="note.title.length > 0"
@ -105,6 +109,7 @@
}, },
methods:{ methods:{
cardClicked(){ cardClicked(){
// console.log(this.note)
this.beenClicked = true this.beenClicked = true
this.onClick(this.note.id) this.onClick(this.note.id)
}, },

View File

@ -44,6 +44,12 @@
</div> </div>
<!-- <div class="one wide column"></div>
<div class="fourteen wide column">
<input-notes :noteid="3153" :position="3" ref="note3" />
</div>
<div class="one wide column"></div> -->
<h2 v-if="fastFilters['withLinks'] == 1">Notes with Links</h2> <h2 v-if="fastFilters['withLinks'] == 1">Notes with Links</h2>
<h2 v-if="fastFilters['withTags'] == 1">Notes with Tags</h2> <h2 v-if="fastFilters['withTags'] == 1">Notes with Tags</h2>
<h2 v-if="fastFilters['onlyArchived'] == 1">Archived Notes</h2> <h2 v-if="fastFilters['onlyArchived'] == 1">Archived Notes</h2>

View File

@ -331,6 +331,7 @@ Note.get = (userId, noteId) => {
SELECT SELECT
note_raw_text.text, note_raw_text.text,
note_raw_text.updated as updated, note_raw_text.updated as updated,
note.created,
note.pinned, note.pinned,
note.archived, note.archived,
note.color, note.color,