* 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);
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]):focus,
@ -342,6 +351,10 @@ a:hover {
/* adjust checkboxes for mobile. Make them a little bigger, easier to click */
@media only screen and (max-width: 740px) {
.squire-box {
min-height: calc(100vh - 120px);
}
.ui.button.shrinking {
font-size: 0.85714286rem;
margin: 0 3px;

View File

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

View File

@ -113,7 +113,7 @@
<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 -->
<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">
<div class="ui basic segment">
<simple-attachment-note
v-on:close="images = false"
:note-id="noteid"
:squire-editor="editor">
</simple-attachment-note>
@ -407,27 +406,27 @@
this.activeToDo = false
this.activeColor = null
let colors = e.path.match(/\d+/g)
if(colors && colors.length == 3){
if(e.path.indexOf('>B') > -1){
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(',')})`
}
//@ 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

View File

@ -9,7 +9,7 @@
.floating-button {
position: absolute;
right: 7px;
top: 4px;
top: 5px;
z-index: 2;
}
.floating-note-options {
@ -26,40 +26,48 @@
}
</style>
<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 -->
<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" />
<i class="search icon"></i>
</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 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"
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 very compact grid" v-if="searchTerm.indexOf(' ') != -1">
<div class="eight wide column">
<div class="ui green compact shrinking button" v-on:click="pushToNewNote()">
<div class="ui very compact grid">
<div class="five wide column">
<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
</div>
<span class="button-sub">
( Tab )
</span>
</div>
<div class="eight wide right aligned column">
<div class="ui green compact shrinking button" v-on:click="pushToQuickNote()">
<div class="six wide right aligned column">
<div class="ui mini green fluid compact shrinking button" v-on:click="pushToQuickNote()">
<i class="sticky note outline icon"></i>The Scratch Pad
</div>
<span class="button-sub">
( CTRL + ENTER )
</span>
</div>
</div>
@ -182,18 +190,34 @@
},
onKeyDown(event){
//Tab
if(event.keyCode == 9){
this.pushToNewNote()
event.preventDefault()
return false
}
//Commant + Enter
if((event.metaKey || event.ctrlKey) && event.keyCode == 13 ){
this.pushToQuickNote()
return
event.preventDefault()
return false
}
//Enter
if(event.keyCode == 13){
this.search()
return
event.preventDefault()
return false
}
},
search(){
if(this.searchTerm.length == 0){
this.clear()
return
}
this.searched = true
this.$refs.desktopSearch.focus()

View File

@ -83,7 +83,7 @@
</style>
<template>
<transition name="fade">
<!-- <transition name="fade"> -->
<div>
<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>
</transition>
<!-- </transition> -->
</template>
<script>

View File

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