* 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
parent
2b8f70b5fa
commit
9efe21476f
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ html {
|
||||
|
||||
div.ui.basic.segment.no-fluf-segment {
|
||||
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;
|
||||
|
||||
@ -257,7 +257,7 @@
|
||||
},
|
||||
data: function(){
|
||||
return {
|
||||
version: '1.0.3',
|
||||
version: '1.0.4',
|
||||
username: '',
|
||||
collapsed: false,
|
||||
mobile: false,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
94
client/src/components/TextColorTooltipComponent.vue
Normal 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>
|
||||
@ -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)
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user