Compare commits
3 Commits
99b69c234f
...
984ac6ccff
| Author | SHA1 | Date | |
|---|---|---|---|
|
984ac6ccff | ||
|
|
f63c0c0d60 | ||
|
|
a478cbe11c |
@ -199,12 +199,16 @@ a:hover {
|
||||
/* squire text styles */
|
||||
.squire-box {
|
||||
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;
|
||||
padding: 10px 15px 10px;
|
||||
background: transparent;
|
||||
/*background: transparent;*/
|
||||
overflow-x: scroll;
|
||||
/*color: var(--text_color);*/
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
word-wrap: break-word;
|
||||
@ -225,17 +229,18 @@ a:hover {
|
||||
.squire-box a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.note-card-text i,
|
||||
/* .note-card-text i,
|
||||
.squire-box i {
|
||||
padding: 0.5em 0.99em;
|
||||
border: 1px solid #CCC;
|
||||
margin: 1px;
|
||||
border-radius: 9px;
|
||||
display: inline-block;
|
||||
}
|
||||
}*/
|
||||
.squire-box p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.note-card-text blockquote,
|
||||
.squire-box blockquote {
|
||||
margin: 0;
|
||||
padding: 0.8em;
|
||||
@ -245,6 +250,7 @@ a:hover {
|
||||
max-width:100%;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
.squire-box img {
|
||||
max-width:100%;
|
||||
|
||||
@ -4,10 +4,12 @@
|
||||
id="InputNotes"
|
||||
class="master-note-edit"
|
||||
@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']}"
|
||||
>
|
||||
|
||||
<div class="input-container-wrapper">
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<div v-if="loading" class="loading-note">
|
||||
<div class="ui active dimmer">
|
||||
@ -34,11 +36,28 @@
|
||||
<nm-button v-if="usersOnNote > 1" icon="green user circle" />
|
||||
|
||||
<nm-button icon="ellipsis horizontal" v-on:click.native="showNoteOptions = !showNoteOptions" />
|
||||
|
||||
</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 -->
|
||||
<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
|
||||
<div class="ui green button">{{statusText}}</div>
|
||||
@ -108,7 +127,9 @@
|
||||
</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">
|
||||
<color-picker
|
||||
@ -211,6 +232,8 @@
|
||||
modified: false,
|
||||
noteText: '',
|
||||
rawTextId: 0,
|
||||
created: '',
|
||||
updated: '',
|
||||
shareUsername: null,
|
||||
diffNoteText: '',
|
||||
statusText: 'Saved',
|
||||
@ -299,6 +322,11 @@
|
||||
this.editor = new Squire( this.$refs.squirebox, {blockTag: 'p' })
|
||||
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
|
||||
this.editor.addEventListener('click', e => {
|
||||
|
||||
@ -693,10 +721,12 @@
|
||||
this.rawTextId = response.data.rawTextId
|
||||
this.shareUsername = response.data.shareUsername
|
||||
|
||||
this.created = response.data.created
|
||||
this.updated = response.data.updated
|
||||
|
||||
vm.noteText = response.data.text
|
||||
vm.diffNoteText = response.data.text
|
||||
|
||||
vm.updated = response.data.updated
|
||||
vm.lastNoteHash = vm.hashString(response.data.text)
|
||||
//Set up note colors
|
||||
if(response.data.color){
|
||||
@ -1031,23 +1061,52 @@
|
||||
<style type="text/css" scoped>
|
||||
|
||||
/* 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 */
|
||||
.all-settings {
|
||||
/*border-top: 1px solid #534c68;*/
|
||||
background: #221f2b;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
/*position: absolute;*/
|
||||
/*bottom: 40px;*/
|
||||
/*right: 0;*/
|
||||
/*left: 0;*/
|
||||
z-index: 99;
|
||||
/*border: 1px solid;*/
|
||||
/*background-color: var(--background_color);*/
|
||||
/*border-color: var(--border_color);*/
|
||||
box-sizing: border-box;
|
||||
/*box-sizing: border-box;*/
|
||||
/*border-radius: 7px;*/
|
||||
/*box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);*/
|
||||
/*padding: 1.2em 0 0;*/
|
||||
flex-grow: 0;
|
||||
}
|
||||
.low-settings {
|
||||
bottom: 0px;
|
||||
@ -1060,6 +1119,7 @@
|
||||
/*End Settings manager styles */
|
||||
|
||||
|
||||
|
||||
/* container styles change based on mobile and number of open screens */
|
||||
.master-note-edit {
|
||||
position: fixed;
|
||||
@ -1070,9 +1130,9 @@
|
||||
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
|
||||
z-index: 1001;
|
||||
/*overflow-x: scroll;*/
|
||||
}
|
||||
.padded-bottom {
|
||||
padding-bottom: 20px;
|
||||
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.loading-note {
|
||||
position: absolute;
|
||||
@ -1104,6 +1164,14 @@
|
||||
left: 0%;
|
||||
right: 50%;
|
||||
}
|
||||
.master-note-edit.position-3 {
|
||||
display: inline-block;
|
||||
position: inherit;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.size-down {
|
||||
animation: size-down 0.5s ease;
|
||||
|
||||
@ -3,17 +3,10 @@
|
||||
:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
|
||||
:class="{'currently-open':currentlyOpen}"
|
||||
>
|
||||
<!-- fade-in-fwd -->
|
||||
<div v-if="noteIcon" class="badge">
|
||||
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
|
||||
</div>
|
||||
|
||||
<div class="ui grid max-height">
|
||||
|
||||
<!-- Show title and snippet below it -->
|
||||
<div class="top aligned row" @click.self="cardClicked">
|
||||
|
||||
<div class="sixteen wide column overflow-hidden note-card-text" @click="cardClicked">
|
||||
<div class="overflow-hidden note-card-text" @click="cardClicked">
|
||||
|
||||
<span class="subtext" v-if="note.shareUsername">
|
||||
Shared by {{ note.shareUsername }}
|
||||
@ -33,39 +26,43 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span v-if="note.title == '' && note.subtext == ''">
|
||||
Empty Note
|
||||
</span>
|
||||
|
||||
<span v-if="noteIcon" class="badge">
|
||||
<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
|
||||
</span>
|
||||
|
||||
<!-- Title display -->
|
||||
<div v-if="note.title.length > 0"
|
||||
<span v-if="note.title.length > 0"
|
||||
data-test-id="title"
|
||||
:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }"
|
||||
v-html="note.title"></div>
|
||||
class="big-text"
|
||||
v-html="note.title"></span>
|
||||
|
||||
<!-- Sub text display -->
|
||||
<div v-if="note.subtext.length > 0 && !isShowingSearchResults()"
|
||||
<span v-if="note.subtext.length > 0 && !isShowingSearchResults()"
|
||||
data-test-id="subtext"
|
||||
:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }"
|
||||
v-html="note.subtext"></div>
|
||||
class="small-text"
|
||||
v-html="note.subtext"></span>
|
||||
|
||||
<!-- Display highlights from solr results -->
|
||||
<div v-if="note.note_highlights.length > 0" class="term-usage">
|
||||
<div
|
||||
<span v-if="note.note_highlights.length > 0" class="term-usage">
|
||||
<span
|
||||
class="usage-row"
|
||||
v-for="highlight in note.note_highlights"
|
||||
:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
|
||||
v-html="cleanHighlight(highlight)"></div>
|
||||
</div>
|
||||
v-html="cleanHighlight(highlight)"></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Toolbar on the bottom -->
|
||||
<div class="bottom aligned row" @click.self="cardClicked">
|
||||
<div class="sixteen wide column">
|
||||
<div class="ui grid reduced-padding">
|
||||
<div class="tool-bar" @click.self="cardClicked">
|
||||
|
||||
<div class="thirteen wide column clickable icon-bar" @click="cardClicked">
|
||||
<div class="icon-bar" @click="cardClicked">
|
||||
<!-- {{$helpers.timeAgo(note.updated)}} -->
|
||||
<span v-if="note.tags">
|
||||
<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
|
||||
@ -76,19 +73,17 @@
|
||||
<span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted="">
|
||||
<i class="green archive icon"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="three wide right aligned column">
|
||||
<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
|
||||
|
||||
<delete-button class="float-right" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="getThumbs.length > 0">
|
||||
<div v-if="getThumbs.length > 0">
|
||||
<div class="tiny-thumb-box" v-on:click="openEditAttachment">
|
||||
<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -105,6 +100,7 @@
|
||||
},
|
||||
methods:{
|
||||
cardClicked(){
|
||||
// console.log(this.note)
|
||||
this.beenClicked = true
|
||||
this.onClick(this.note.id)
|
||||
},
|
||||
@ -204,7 +200,7 @@
|
||||
}
|
||||
.big-text, .big-text > p, .big-text > h1, .big-text > h2 {
|
||||
/*font-size: 1.3em !important;*/
|
||||
font-size: 16px !important;
|
||||
font-size: 17px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.big-text > p, .big-text > h1, .big-text > h2 {
|
||||
@ -240,7 +236,7 @@
|
||||
/*box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);*/
|
||||
box-shadow: 0 0px 5px 1px rgba(34,36,38,0);
|
||||
margin: 5px;
|
||||
padding: 0.7em 1em;
|
||||
/*padding: 0.7em 1em;*/
|
||||
border-radius: .28571429rem;
|
||||
border: 1px solid;
|
||||
border-color: var(--border_color);
|
||||
@ -252,13 +248,18 @@
|
||||
|
||||
line-height: 1.8rem;
|
||||
letter-spacing: 0.02rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.icon-bar {
|
||||
opacity: 0.8;
|
||||
display: inline-block;
|
||||
padding: 0 10px 0;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
/*margin-top: -2.2rem;*/
|
||||
}
|
||||
.hover-hide {
|
||||
@ -303,6 +304,20 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.note-card-text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
align-self: flex-start;
|
||||
flex-grow: 1;
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
.tool-bar {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
align-self: flex-end;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
|
||||
.one-column .note-title-display-card {
|
||||
/*margin-right: 65%;*/
|
||||
@ -337,9 +352,8 @@
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 6px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Tweak mobile display to show only one column */
|
||||
|
||||
@ -44,6 +44,12 @@
|
||||
|
||||
</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['withTags'] == 1">Notes with Tags</h2>
|
||||
<h2 v-if="fastFilters['onlyArchived'] == 1">Archived Notes</h2>
|
||||
|
||||
@ -51,8 +51,8 @@ export default new Vuex.Store({
|
||||
let themeColors = {
|
||||
'background_color': '#fff',
|
||||
'text_color': '#3d3d3d',
|
||||
'outline_color': 'rgba(34,36,38,.15)',
|
||||
'border_color': 'rgba(34,36,38,.20)',
|
||||
'outline_color': 'rgba(34,36,38,0.15)',
|
||||
'border_color': 'rgba(34,36,38,0.20)',
|
||||
}
|
||||
//Night mode colors
|
||||
if(state.nightMode){
|
||||
@ -60,7 +60,7 @@ export default new Vuex.Store({
|
||||
'background_color': '#000',
|
||||
'text_color': '#a98457',
|
||||
'outline_color': '#a98457',
|
||||
'border_color': '#a98457',
|
||||
'border_color': 'rgba(255, 255, 255, 0.31)',
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,6 +14,18 @@ ProcessText.removeHtml = (string) => {
|
||||
.trim()
|
||||
}
|
||||
|
||||
|
||||
//Remove Empty HTML lines from a string
|
||||
ProcessText.stripBlankHtmlLines = (string) => {
|
||||
|
||||
if(string == undefined || string == null || string.length == 0){
|
||||
return ''
|
||||
}
|
||||
|
||||
//Blank lines look like this -> <p><br></p>
|
||||
return string.replace(/\<p\>\<br\>\<\/p\>/g,'')
|
||||
}
|
||||
|
||||
ProcessText.getUrlsFromString = (string) => {
|
||||
const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm
|
||||
return string.match(urlPattern)
|
||||
@ -40,7 +52,19 @@ ProcessText.deduceNoteTitle = (inString) => {
|
||||
|
||||
//Remove inline styles that may be added by editor
|
||||
inString = inString.replace(/style=".*?"/g,'')
|
||||
// inString = inString.replace('</a>','')
|
||||
|
||||
const tagFreeLength = ProcessText.removeHtml(inString).length
|
||||
|
||||
if(tagFreeLength < 100){
|
||||
title = ProcessText.stripBlankHtmlLines(inString)
|
||||
return {title, sub}
|
||||
}
|
||||
|
||||
//Primare Case - Short notes
|
||||
if(tagFreeLength < 300){
|
||||
sub = ProcessText.stripBlankHtmlLines(inString)
|
||||
return {title, sub}
|
||||
}
|
||||
|
||||
//Emergency ending tag if truncated. This will help regex find all the lines
|
||||
inString += '</end>'
|
||||
@ -60,7 +84,7 @@ ProcessText.deduceNoteTitle = (inString) => {
|
||||
const endTags = ['</o','</l','</u']
|
||||
|
||||
let totalLines = Math.min(lines.length, 6)
|
||||
let charLimit = 250
|
||||
let charLimit = 400
|
||||
let listStart = false
|
||||
let noTitleJustList = false
|
||||
|
||||
@ -144,7 +168,7 @@ ProcessText.deduceNoteTitle = (inString) => {
|
||||
cleanCutString = cutString
|
||||
}
|
||||
|
||||
finalLines.push(cleanCutString + '...')
|
||||
finalLines.push(cleanCutString + '... <i class="green caret down icon"></i>')
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
@ -331,6 +331,7 @@ Note.get = (userId, noteId) => {
|
||||
SELECT
|
||||
note_raw_text.text,
|
||||
note_raw_text.updated as updated,
|
||||
note.created,
|
||||
note.pinned,
|
||||
note.archived,
|
||||
note.color,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user