* Made dispay of last edit smaller on note title display card

* Made note menu buttons look better on mobile
* Moved around some note menu buttons
* Added a color picker with a rip off of google colors
* Added a remove formatting button
* Hide pin and archive icons, they appear green on hover, in the buttons
* Further simplified display card logic, now it just adds an end tag and returns the data
* Changed highlight text color to show colors (works on chrome...)
This commit is contained in:
Max G 2020-04-15 06:28:58 +00:00
parent a44bca204c
commit 71f909fb76
8 changed files with 176 additions and 37 deletions

View File

@ -44,7 +44,7 @@ helpers.timeAgo = (time) => {
if (typeof format[2] == 'string') { if (typeof format[2] == 'string') {
return format[list_choice] return format[list_choice]
} else { } else {
return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token return Math.floor(seconds / format[2]) + ' ' + format[1]// + ' ' + token
} }
} }
} }

View File

@ -33,7 +33,7 @@ html {
div.ui.basic.segment.no-fluf-segment { div.ui.basic.segment.no-fluf-segment {
margin-top: 0px; margin-top: 0px;
} }
/* Night mode modifiers */ /* Night mode modifiers */
@ -182,6 +182,11 @@ a:hover {
/* Shrink button text for mobile */ /* Shrink button text for mobile */
@media only screen and (max-width: 740px) { @media only screen and (max-width: 740px) {
.note-menu > .nm-button {
font-size: 1.4em;
padding: 10px 1px;
min-width: 40px;
}
.note-menu .nm-button span { .note-menu .nm-button span {
font-size: 0.7em; font-size: 0.7em;
line-height: 0.4em; line-height: 0.4em;
@ -238,6 +243,11 @@ a:hover {
/*border-bottom: 1px solid #ccc;*/ /*border-bottom: 1px solid #ccc;*/
scrollbar-width: none; scrollbar-width: none;
} }
.squire-box::selection,
.squire-box::-moz-selection {
background: #cce2ffa6;
color: inherit;
}
/*Makes the first line real big */ /*Makes the first line real big */
.squire-box:focus { .squire-box:focus {
outline: none; outline: none;

View File

@ -257,7 +257,7 @@
}, },
data: function(){ data: function(){
return { return {
version: '1.0.3', version: '1.0.4',
username: '', username: '',
collapsed: false, collapsed: false,
mobile: false, mobile: false,

View File

@ -21,20 +21,22 @@
<nm-button tip="Close" bottom-tip="true" v-on:click.native="close" icon="close" /> <nm-button tip="Close" bottom-tip="true" v-on:click.native="close" icon="close" />
<nm-button tip="Numbered List" bottom-tip="true" v-on:click.native="toggleList('ol')" icon="list ol" /> <nm-button tip="Text Color" bottom-tip="true" icon="palette icon" v-on:click.native="colorpicker = true" />
<nm-button tip="Task List" bottom-tip="true" v-on:click.native="toggleList('ul')" icon="tasks" />
<nm-button tip="Bold" bottom-tip="true" v-on:click.native="toggleBold()" icon="bold" /> <nm-button tip="Bold" bottom-tip="true" v-on:click.native="toggleBold()" icon="bold" />
<nm-button tip="Quote" bottom-tip="true" v-on:click.native="toggleItalic()" icon="quote left" /> <nm-button tip="Quote" bottom-tip="true" v-on:click.native="toggleItalic()" icon="quote left" />
<nm-button tip="Title" bottom-tip="true" v-on:click.native="modifyFont('1.4em')" icon="text height" /> <nm-button tip="Big Text" bottom-tip="true" v-on:click.native="modifyFont('1.4em')" icon="text height" />
<nm-button tip="Indent" bottom-tip="true" v-on:click.native="editor.increaseQuoteLevel()" icon="indent" /> <nm-button tip="Indent" bottom-tip="true" v-on:click.native="editor.increaseQuoteLevel()" icon="indent" />
<nm-button tip="Outdent" bottom-tip="true" v-on:click.native="editor.decreaseQuoteLevel()" icon="outdent" /> <nm-button tip="Outdent" bottom-tip="true" v-on:click.native="editor.decreaseQuoteLevel()" icon="outdent" />
<nm-button tip="Remove Formatting" bottom-tip="true" v-on:click.native="removeFormatting()" icon="remove format icon" />
<nm-button v-on:click.native="undoCustom()" icon="undo" bottom-tip="true" tip="Undo" text="Undo" />
<nm-button tip="Users on Note" bottom-tip="true" v-if="usersOnNote > 1" icon="green user circle" /> <nm-button tip="Users on Note" bottom-tip="true" v-if="usersOnNote > 1" icon="green user circle" />
</div> </div>
@ -149,13 +151,9 @@
<div class="note-menu shrink-icons-on-mobile"> <div class="note-menu shrink-icons-on-mobile">
<!-- Tags --> <nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" />
<nm-button
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/tags`)" <nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" />
icon="tags"
text="Tags"
tip="Tags"
></nm-button>
<!-- colors button --> <!-- colors button -->
<nm-button <nm-button
@ -165,6 +163,14 @@
tip="Note Color" tip="Note Color"
></nm-button> ></nm-button>
<!-- Tags -->
<nm-button
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/tags`)"
icon="tags"
text="Tags"
tip="Tags"
></nm-button>
<!-- add images panel --> <!-- add images panel -->
<nm-button <nm-button
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/images`)" v-on:click.native="$router.push(`/notes/open/${noteid}/menu/images`)"
@ -178,8 +184,6 @@
class="nm-button" class="nm-button"
:noteId="noteid" /> :noteId="noteid" />
<nm-button v-on:click.native="undoCustom()" icon="undo" tip="Undo" text="Undo" />
<nm-button <nm-button
icon="ellipsis horizontal" icon="ellipsis horizontal"
text="Options" text="Options"
@ -191,6 +195,13 @@
</div> </div>
<!-- color picker -->
<color-tooltip
v-if="colorpicker"
v-on:color="color => modifyColor(color)"
v-on:close="colorpicker = false"
/>
<!-- Side slide menus for colors, tags, images and other options --> <!-- Side slide menus for colors, tags, images and other options -->
<side-slide-menu v-show="colors" v-on:close="colors = false" name="colors"> <side-slide-menu v-show="colors" v-on:close="colors = false" name="colors">
@ -331,6 +342,7 @@
'simple-attachment-note': () => import('@/components/SimpleAttachmentNoteComponent.vue'), 'simple-attachment-note': () => import('@/components/SimpleAttachmentNoteComponent.vue'),
'share-note-component': () => import('@/components/ShareNoteComponent.vue'), 'share-note-component': () => import('@/components/ShareNoteComponent.vue'),
'color-tooltip':require('@/components/TextColorTooltipComponent.vue').default,
'nm-button':require('@/components/NoteMenuButtonComponent.vue').default 'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
}, },
data(){ data(){
@ -377,6 +389,7 @@
colors: false, colors: false,
images: false, images: false,
options: false, options: false,
colorpicker: false,
//Encryption options //Encryption options
passwordHint: '', passwordHint: '',
@ -565,6 +578,10 @@
this.editor.setSelection(squireRange) this.editor.setSelection(squireRange)
} }
}, },
removeFormatting(){
this.selectLineIfNoSelect()
this.editor.removeAllFormatting()
},
modifyFont(inSize){ modifyFont(inSize){
this.selectLineIfNoSelect() this.selectLineIfNoSelect()
@ -577,6 +594,12 @@
this.editor.setFontSize(inSize) this.editor.setFontSize(inSize)
} }
}, },
modifyColor(color){
this.selectLineIfNoSelect()
//Set color of font
this.editor.setTextColour(color)
},
toggleList(type){ toggleList(type){
//Undo list if its already a lits //Undo list if its already a lits

View File

@ -68,22 +68,23 @@
<div class="tool-bar" @click.self="cardClicked"> <div class="tool-bar" @click.self="cardClicked">
<div class="icon-bar"> <div class="icon-bar">
<span v-if="note.pinned == 1" data-position="top left" data-tooltip="Pinned" data-inverted> <!-- <span v-if="note.pinned == 1" data-position="top left" data-tooltip="Pinned" data-inverted>
<i class="green pin icon"></i> <i class="green pin icon"></i>
</span> </span>
<span v-if="note.archived == 1" data-position="top left" data-tooltip="Archived" data-inverted> <span v-if="note.archived == 1" data-position="top left" data-tooltip="Archived" data-inverted>
<i class="green archive icon"></i> <i class="green archive icon"></i>
</span> </span> -->
<span v-if="note.tags"> <span class="tags" v-if="note.tags">
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span> <span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
<br>
</span> </span>
<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }"> <span data-tooltip="Edited" class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
Last Edit {{$helpers.timeAgo(note.updated)}} {{$helpers.timeAgo(note.updated)}}
</span> </span>
<span class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }"> <span class="teeny-buttons" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
<i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)"> <i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)">
<i class="tags icon"></i> <i class="tags icon"></i>
@ -93,13 +94,13 @@
data-tooltip="Archive" data-tooltip="Archive"
:data-tooltip="note.archived ? 'Un-Archive':'Archive' " :data-tooltip="note.archived ? 'Un-Archive':'Archive' "
data-inverted v-on:click="archiveNote"> data-inverted v-on:click="archiveNote">
<i class="archive icon"></i> <i class="archive icon" :class="{'green':note.archived}"></i>
</i> </i>
<i class="teeny-button" <i class="teeny-button"
:data-tooltip="note.pinned ? 'Un-Pin':'Pin' " :data-tooltip="note.pinned ? 'Un-Pin':'Pin' "
data-inverted v-on:click="pinNote"> data-inverted v-on:click="pinNote">
<i class="pin icon"></i> <i class="pin icon" :class="{'green':note.pinned}"></i>
</i> </i>
<delete-button class="teeny-button" :note-id="note.id" /> <delete-button class="teeny-button" :note-id="note.id" />
@ -289,6 +290,21 @@
</script> </script>
<style type="text/css"> <style type="text/css">
.teeny-buttons {
float: right;
width: 65%;
text-align: right;
}
.time-ago-display {
width: 35%;
float: left;
text-align: center;
}
.tags {
width: 100%;
display: inline-block;
}
.teeny-button { .teeny-button {
border: 1px solid var(--border_color); border: 1px solid var(--border_color);
border-radius: 5px; border-radius: 5px;
@ -381,7 +397,7 @@
} }
.icon-bar { .icon-bar {
display: inline-block; display: inline-block;
padding: 0 10px 0; padding: 5px 10px 0;
opacity: 1; opacity: 1;
width: 100%; width: 100%;
} }
@ -442,11 +458,6 @@
align-self: flex-end; align-self: flex-end;
flex-grow: 0; flex-grow: 0;
} }
.time-ago-display {
display: inline-block;
width: 100%;
text-align: right;
}
.one-column .note-title-display-card { .one-column .note-title-display-card {

View File

@ -0,0 +1,94 @@
<style type="text/css" scoped>
.colors {
position: absolute;
z-index: 1005;
top: 42px;
/*height: 100px;*/
width: 415px;
left: 0;
}
.colors-container {
max-width: 400px;
}
.dot {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 30px;
box-shadow: 0px 1px 3px 0px #3e3e3e;
margin: 7px 7px 0 0;
cursor: pointer;
}
.shade {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1004;
background-color: transparent;
width: 100vw;
height: 100vh;
cursor: pointer;
}
@media only screen and (max-width: 740px) {
.colors {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
}
}
</style>
<template>
<div>
<div class="colors">
<div class="ui raised segment">
<div class="colors-container">
<span
v-for="(color,index) in colors"
class="dot"
v-on:click="onColorClick(index)"
:style="`background-color: ${color};`">
</span>
</div>
</div>
</div>
<div class="shade" v-on:click="close"></div>
</div>
</template>
<script>
export default {
components:{
'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
},
data: function(){
return {
hover: false,
colors: [null,'rgb(67,67,67)','rgb(102,102,102)','rgb(153,153,153)','rgb(183,183,183)','rgb(204,204,204)','rgb(217,217,217)','rgb(239,239,239)','rgb(243,243,243)','rgb(255,255,255)','rgb(152,0,0)','rgb(255,0,0)','rgb(255,153,0)','rgb(255,255,0)','rgb(0,255,0)','rgb(0,255,255)','rgb(74,134,232)','rgb(0,0,255)','rgb(153,0,255)','rgb(255,0,255)','rgb(230,184,175)','rgb(244,204,204)','rgb(252,229,205)','rgb(255,242,204)','rgb(217,234,211)','rgb(208,224,227)','rgb(201,218,248)','rgb(207,226,243)','rgb(217,210,233)','rgb(234,209,220)','rgb(221,126,107)','rgb(234,153,153)','rgb(249,203,156)','rgb(255,229,153)','rgb(182,215,168)','rgb(162,196,201)','rgb(164,194,244)','rgb(159,197,232)','rgb(180,167,214)','rgb(213,166,189)','rgb(204,65,37)','rgb(224,102,102)','rgb(246,178,107)','rgb(255,217,102)','rgb(147,196,125)','rgb(118,165,175)','rgb(109,158,235)','rgb(111,168,220)','rgb(142,124,195)','rgb(194,123,160)','rgb(166,28,0)','rgb(204,0,0)','rgb(230,145,56)','rgb(241,194,50)','rgb(106,168,79)','rgb(69,129,142)','rgb(60,120,216)','rgb(61,133,198)','rgb(103,78,167)','rgb(166,77,121)','rgb(133,32,12)','rgb(153,0,0)','rgb(180,95,6)','rgb(191,144,0)','rgb(56,118,29)','rgb(19,79,92)','rgb(17,85,204)','rgb(11,83,148)','rgb(53,28,117)','rgb(116,27,71)','rgb(91,15,0)','rgb(102,0,0)','rgb(120,63,4)','rgb(127,96,0)','rgb(39,78,19)','rgb(12,52,61)','rgb(28,69,135)','rgb(7,55,99)','rgb(32,18,77)','rgb(76,17,48)'
],
}
},
beforeCreate: function(){
},
mounted: function(){
},
methods: {
close(){
this.$emit('close')
},
onColorClick(index){
this.$emit('color',this.colors[index])
this.$nextTick( () => {
this.close()
})
},
}
}
</script>

View File

@ -67,7 +67,7 @@ ProcessText.deduceNoteTitle = (inTitle, inString) => {
} }
//Remove inline styles that may be added by editor //Remove inline styles that may be added by editor
inString = inString.replace(/style=".*?"/g,'') // inString = inString.replace(/style=".*?"/g,'')
const tagFreeLength = ProcessText.removeHtml(inString).length const tagFreeLength = ProcessText.removeHtml(inString).length
@ -77,14 +77,15 @@ ProcessText.deduceNoteTitle = (inTitle, inString) => {
// Still needs, links to open in a new window. // Still needs, links to open in a new window.
sub = ProcessText.stripDoubleBlankLines(inString) sub = ProcessText.stripDoubleBlankLines(inString)
if(tagFreeLength > 200){ // if(tagFreeLength > 200){
sub += '... <i class="green caret down icon"></i>' // sub += '... <i class="green caret down icon"></i>'
} // }
inString += '</end>'
return {title, sub} return {title, sub}
//Emergency ending tag if truncated. This will help regex find all the lines //Emergency ending tag if truncated. This will help regex find all the lines
inString += '</end>'
//Match full line and closing tag or just closing tag //Match full line and closing tag or just closing tag
let lines = inString.match(/[<[a-zA-Z0-9]+>(.*?)<\/[a-zA-Z0-9]+>|<\/[a-zA-Z0-9>]+?>/gms) let lines = inString.match(/[<[a-zA-Z0-9]+>(.*?)<\/[a-zA-Z0-9]+>|<\/[a-zA-Z0-9>]+?>/gms)

View File

@ -591,7 +591,7 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
let searchParams = [userId] let searchParams = [userId]
let noteSearchQuery = ` let noteSearchQuery = `
SELECT note.id, SELECT note.id,
SUBSTRING(note_raw_text.text, 1, 300) as text, SUBSTRING(note_raw_text.text, 1, 500) as text,
note_raw_text.title as title, note_raw_text.title as title,
note_raw_text.updated as updated, note_raw_text.updated as updated,
opened, opened,