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

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/Helpers.js
View File

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

14
client/src/assets/semantic-helper.css
View File

@@ -32,8 +32,8 @@ html {
}
div.ui.basic.segment.no-fluf-segment {
margin-top: 0px;
}
margin-top: 0px;
}
/* Night mode modifiers */
@@ -182,6 +182,11 @@ a:hover {
/* Shrink button text for mobile */
@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 {
font-size: 0.7em;
line-height: 0.4em;
@@ -238,6 +243,11 @@ a:hover {
/*border-bottom: 1px solid #ccc;*/
scrollbar-width: none;
}
.squire-box::selection,
.squire-box::-moz-selection {
background: #cce2ffa6;
color: inherit;
}
/*Makes the first line real big */
.squire-box:focus {
outline: none;

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

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

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

@@ -21,20 +21,22 @@
<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="Task List" bottom-tip="true" v-on:click.native="toggleList('ul')" icon="tasks" />
<nm-button tip="Text Color" bottom-tip="true" icon="palette icon" v-on:click.native="colorpicker = true" />
<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="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="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" />
</div>
@@ -149,13 +151,9 @@
<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>
<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" />
<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" />
<!-- colors button -->
<nm-button
@@ -165,6 +163,14 @@
tip="Note Color"
></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 -->
<nm-button
v-on:click.native="$router.push(`/notes/open/${noteid}/menu/images`)"
@@ -178,8 +184,6 @@
class="nm-button"
:noteId="noteid" />
<nm-button v-on:click.native="undoCustom()" icon="undo" tip="Undo" text="Undo" />
<nm-button
icon="ellipsis horizontal"
text="Options"
@@ -191,6 +195,13 @@
</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-menu v-show="colors" v-on:close="colors = false" name="colors">
@@ -331,6 +342,7 @@
'simple-attachment-note': () => import('@/components/SimpleAttachmentNoteComponent.vue'),
'share-note-component': () => import('@/components/ShareNoteComponent.vue'),
'color-tooltip':require('@/components/TextColorTooltipComponent.vue').default,
'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
},
data(){
@@ -377,6 +389,7 @@
colors: false,
images: false,
options: false,
colorpicker: false,
//Encryption options
passwordHint: '',
@@ -565,6 +578,10 @@
this.editor.setSelection(squireRange)
}
},
removeFormatting(){
this.selectLineIfNoSelect()
this.editor.removeAllFormatting()
},
modifyFont(inSize){
this.selectLineIfNoSelect()
@@ -577,6 +594,12 @@
this.editor.setFontSize(inSize)
}
},
modifyColor(color){
this.selectLineIfNoSelect()
//Set color of font
this.editor.setTextColour(color)
},
toggleList(type){
//Undo list if its already a lits

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

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

94
client/src/components/TextColorTooltipComponent.vue Normal file
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>

11
server/helpers/ProcessText.js
View File

@@ -67,7 +67,7 @@ ProcessText.deduceNoteTitle = (inTitle, inString) => {
}
//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
@@ -77,14 +77,15 @@ ProcessText.deduceNoteTitle = (inTitle, inString) => {
// Still needs, links to open in a new window.
sub = ProcessText.stripDoubleBlankLines(inString)
if(tagFreeLength > 200){
sub += '... <i class="green caret down icon"></i>'
}
// if(tagFreeLength > 200){
// sub += '... <i class="green caret down icon"></i>'
// }
inString += '</end>'
return {title, sub}
//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
let lines = inString.match(/[<[a-zA-Z0-9]+>(.*?)<\/[a-zA-Z0-9]+>|<\/[a-zA-Z0-9>]+?>/gms)

2
server/models/Note.js
View File

@@ -591,7 +591,7 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
let searchParams = [userId]
let noteSearchQuery = `
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.updated as updated,
opened,