* Small hack to fix images not closing window on mobile

* Made note active text modifier buttons better
* Fixed Colored notes being to big on mobile
This commit is contained in:
Max G 2020-05-22 07:08:45 +00:00
parent 06a140e0d4
commit 8e5e06be9b
6 changed files with 84 additions and 48 deletions

View File

@ -68,6 +68,15 @@ body {
background-color: var(--background_color); background-color: var(--background_color);
border-color: var(--border_color); border-color: var(--border_color);
} }
.button-sub {
display: inline-block;
width: 100%;
font-size: 0.9em;
color: white;
opacity: 0.8;
padding: 4px 0 0 0;
text-align: center;
}
.ui.form input:not([type]), .ui.form input:not([type]),
.ui.form input:not([type]):focus, .ui.form input:not([type]):focus,
@ -342,6 +351,10 @@ a:hover {
/* adjust checkboxes for mobile. Make them a little bigger, easier to click */ /* adjust checkboxes for mobile. Make them a little bigger, easier to click */
@media only screen and (max-width: 740px) { @media only screen and (max-width: 740px) {
.squire-box {
min-height: calc(100vh - 120px);
}
.ui.button.shrinking { .ui.button.shrinking {
font-size: 0.85714286rem; font-size: 0.85714286rem;
margin: 0 3px; margin: 0 3px;

View File

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

View File

@ -113,7 +113,7 @@
<div class="bottom-edit-menu"></div> <div class="bottom-edit-menu"></div>
<div class="input-container-wrapper" :class="{ 'side-menu-open':sideMenuOpen, 'size-down':(sizeDown == true),}" :style="{ 'background-color':styleObject['noteBackground'] }"> <div class="input-container-wrapper" :class="{ 'side-menu-open':sideMenuOpen, 'size-down':(sizeDown == true),}">
<!-- Squire box grows --> <!-- Squire box grows -->
<div class="note-wrapper" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"> <div class="note-wrapper" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
@ -170,7 +170,6 @@
<side-slide-menu v-if="images" v-on:close="images = false" name="images" :style-object="styleObject"> <side-slide-menu v-if="images" v-on:close="images = false" name="images" :style-object="styleObject">
<div class="ui basic segment"> <div class="ui basic segment">
<simple-attachment-note <simple-attachment-note
v-on:close="images = false"
:note-id="noteid" :note-id="noteid"
:squire-editor="editor"> :squire-editor="editor">
</simple-attachment-note> </simple-attachment-note>
@ -407,27 +406,27 @@
this.activeToDo = false this.activeToDo = false
this.activeColor = null this.activeColor = null
let colors = e.path.match(/\d+/g) if(e.path.indexOf('>B') > -1){
if(colors && colors.length == 3){ this.activeBold = true
}
if(e.path.indexOf('>I') > -1){
this.activeQuote = true
}
if(e.path.indexOf('fontSize') > -1){
this.activeTitle = true
}
if(e.path.indexOf('OL>LI') > -1){
this.activeList = true
}
if(e.path.indexOf('UL>LI') > -1){
this.activeToDo = true
}
const colorIndex = e.path.indexOf('color=')
if(colorIndex > -1){
//Get all digigs after color index, then limit to 3
let colors = e.path.substring(colorIndex).match(/\d+/g).slice(0,3)
this.activeColor=`rgb(${colors.join(',')})` this.activeColor=`rgb(${colors.join(',')})`
} }
//@ TODO - Update this to match all elements, like color and bold
// index of and then the specific thing might more indexOf('B'), indexOf('I'), etc
let element = e.path.split('>').pop()
switch (element) {
case 'B': this.activeBold = true; break;
case 'I': this.activeQuote = true; break;
case 'SPAN.size[fontSize=1.4em]': this.activeTitle = true; break;
}
let parent = e.path.split('>').shift()
switch (parent) {
case 'OL': this.activeList = true; break;
case 'UL': this.activeToDo = true; break;
}
}) })
//Click Event - Open links when clicked in editor or toggle checks //Click Event - Open links when clicked in editor or toggle checks

View File

@ -9,7 +9,7 @@
.floating-button { .floating-button {
position: absolute; position: absolute;
right: 7px; right: 7px;
top: 4px; top: 5px;
z-index: 2; z-index: 2;
} }
.floating-note-options { .floating-note-options {
@ -26,40 +26,48 @@
} }
</style> </style>
<template> <template>
<span v-on:mouseenter="extraMenuHover = true" v-on:mouseleave="extraMenuHover = false"> <span>
<div class="ui form"> <div class="ui form" v-on:mouseenter="extraMenuHover = true" v-on:mouseleave="extraMenuHover = false">
<!-- normal search menu --> <!-- normal search menu -->
<div class="ui left icon fluid input"> <div class="ui left icon fluid input">
<input ref="desktopSearch" v-on:blur="focused = false" v-on:focus="focused = true" v-model="searchTerm" @keydown="onKeyDown" @keyup="onKeyUp" placeholder="Search or Start Typing New Note" /> <input ref="desktopSearch" v-on:blur="focused = false" v-on:focus="focused = true" v-model="searchTerm" @keydown="onKeyDown" @keyup="onKeyUp" placeholder="Search or Start Typing New Note" />
<i class="search icon"></i> <i class="search icon"></i>
</div> </div>
<div class="floating-button" v-if="searchTerm.length > 0 && !searched && searchTerm.indexOf(' ') == -1">
<div class="ui green compact button" v-on:click="search()">Search</div> <div class="floating-button" v-if="searchTerm.length > 0">
<i class="big link grey close icon" v-on:click="clear()"></i>
</div> </div>
<div class="floating-button" v-if="searchTerm.length > 0 && searched">
<div class="ui grey compact button" v-on:click="clear()">Clear</div>
</div>
<div class="floating-button" v-if="!searched && searchTerm.length > 0 && searchTerm.indexOf(' ') != -1">
<div class="ui grey compact button" v-on:click="searchTerm = ''">Clear</div>
</div>
<div class="floating-note-options" <div class="floating-note-options"
v-if="(searchTerm.indexOf(' ') != -1 || tagSuggestions.length > 0) && (extraMenuHover)"> v-if="(searchTerm.length > 0 || tagSuggestions.length > 0) && (extraMenuHover)">
<div class="ui segment"> <div class="ui segment">
<div class="ui very compact grid" v-if="searchTerm.indexOf(' ') != -1"> <div class="ui very compact grid">
<div class="eight wide column"> <div class="five wide column">
<div class="ui green compact shrinking button" v-on:click="pushToNewNote()"> <div class="ui mini green fluid compact shrinking button" v-on:click="search()">
<i class="search icon"></i>Search
</div>
<span class="button-sub">
( Enter )
</span>
</div>
<div class="five wide middle aligned column">
<div class="ui mini green fluid compact shrinking button" v-on:click="pushToNewNote()">
<i class="plus icon"></i>A New Note <i class="plus icon"></i>A New Note
</div> </div>
<span class="button-sub">
( Tab )
</span>
</div> </div>
<div class="eight wide right aligned column"> <div class="six wide right aligned column">
<div class="ui green compact shrinking button" v-on:click="pushToQuickNote()"> <div class="ui mini green fluid compact shrinking button" v-on:click="pushToQuickNote()">
<i class="sticky note outline icon"></i>The Scratch Pad <i class="sticky note outline icon"></i>The Scratch Pad
</div> </div>
<span class="button-sub">
( CTRL + ENTER )
</span>
</div> </div>
</div> </div>
@ -182,18 +190,34 @@
}, },
onKeyDown(event){ onKeyDown(event){
//Commant + Enter //Tab
if((event.metaKey || event.ctrlKey) && event.keyCode == 13 ){ if(event.keyCode == 9){
this.pushToQuickNote() this.pushToNewNote()
return event.preventDefault()
return false
} }
//Commant + Enter
if((event.metaKey || event.ctrlKey) && event.keyCode == 13 ){
this.pushToQuickNote()
event.preventDefault()
return false
}
//Enter
if(event.keyCode == 13){ if(event.keyCode == 13){
this.search() this.search()
return event.preventDefault()
return false
} }
}, },
search(){ search(){
if(this.searchTerm.length == 0){
this.clear()
return
}
this.searched = true this.searched = true
this.$refs.desktopSearch.focus() this.$refs.desktopSearch.focus()

View File

@ -83,7 +83,7 @@
</style> </style>
<template> <template>
<transition name="fade"> <!-- <transition name="fade"> -->
<div> <div>
<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}"> <div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">
@ -103,7 +103,7 @@
<div class="slide-shadow" :class="{'full-shadow':fullShadow}" v-on:click="close"></div> <div class="slide-shadow" :class="{'full-shadow':fullShadow}" v-on:click="close"></div>
</div> </div>
</transition> <!-- </transition> -->
</template> </template>
<script> <script>

View File

@ -112,7 +112,7 @@
this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode}) this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode})
if(this.$store.getters.getIsUserOnMobile){ if(this.$store.getters.getIsUserOnMobile){
this.close() window.history.back();
} }
}, },
close() { close() {