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

* Added theme colors to form fields

Browse Source 
* Added some basic table styles for inserting some shitty tables
* Made popup notification styles look better and work better on mobile
* Quick note now opens a note and not some weird page
* Menu collapses when page is small, behaves like mobile menu
* Added terms and conditions to help and login forms
* Added password change functionality
* Better styles for shared page
* Added some tests for changing password
This commit is contained in:
Max G
2020-07-14 05:31:02 +00:00
parent 06b8f0ad6a
commit a8a966866c
16 changed files with 423 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
client/src/components/GlobalNotificationComponent.vue
View File

@@ -2,30 +2,31 @@
.popup-body {
position: fixed;
bottom: 15px;
top: 15px;
left: 15px;
min-height: 50px;
min-width: 200px;
max-width: calc(100% - 20px);
max-width: calc(100% - 30px);
z-index: 1002;
border-top: 2px solid #21ba45;
box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-radius: 4px;
color: white;
background-color: var(--main-accent);
}
.popup-row {
padding: 1em 5px;
cursor: pointer;
white-space: nowrap;
}
.popup-row > span {
width: calc(100% - 50px);
/*width: calc(100% - 50px);*/
display: inline-block;
text-align: center;
text-align: left;
box-sizing: border-box;
padding: 0 10px 0;
font-size: 1.25em;
border-radius: 4px;
}
.popup-row + .popup-row {
border-top: 1px solid #FFF;
@@ -36,12 +37,10 @@
}
@keyframes slide-in-bottom {
0% {
transform: translateY(1000px);
opacity: 0;
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@@ -63,14 +62,46 @@
}
}
.meter {
height: 2px;
display: inline-block;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
overflow: hidden;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.meter span {
display: block;
height: 100%;
}
.progress {
background-color: white;
animation: progressBar 3s linear;
animation-fill-mode: both;
}
@keyframes progressBar {
0% { width: 0; }
100% { width: 100%; }
}
</style>
<template>
<div class="popup-body slide-in-bottom" v-on:click="dismiss" v-if="notifications.length > 0">
<div class="popup-row color-fade" v-for="item in notifications">
<span>{{ item }}</span>
<div class="popup-row" v-for="item in notifications">
<div class="meter">
<span><span class="progress"></span></span>
</div>
<span><i class="small info circle icon"></i>{{ item }}</span>
</div>
</div>
</template>
@@ -94,9 +125,9 @@
},
mounted(){
// this.$bus.$emit('notification', 'Password Protection Removed')
// this.$bus.$emit('notification', 'Password Protection Removed')
// this.$bus.$emit('notification', 'Password Protection Removed')
// this.$bus.$emit('notification', 'Password Protection Removed Login did not succeed')
// this.$bus.$emit('notification', 'Password Protection Removed your life is exposed to the internet')
// this.$bus.$emit('notification', 'Password Protection Removed everyone can see everything')
},
methods: {
@@ -105,7 +136,7 @@
clearTimeout(this.totalTimeout)
this.totalTimeout = setTimeout(() => {
this.dismiss()
}, 4000)
}, 3000)
},
dismiss(){
this.notifications = []

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

@@ -133,9 +133,23 @@
<div class="mobile-button"></div>
<router-link v-if="loggedIn" to="/quick" class="mobile-button" exact-active-class="active">
<!-- open straight to note -->
<router-link
v-if="loggedIn && $store.getters.totals && $store.getters.totals['quickNote']"
exact-active-class="active"
class="mobile-button"
:to="`/notes/open/${$store.getters.totals['quickNote']}`">
<i class="green sticky note outline icon"></i>
</router-link>
<!-- create new and redirect to new note id -->
<a
v-if="loggedIn && $store.getters.totals && !$store.getters.totals['quickNote']"
v-on:click="newQuickNote()"
exact-active-class="active"
class="mobile-button">
<i class="green sticky note outline icon"></i>
</a>
<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/notes" v-on:click.native="emitReloadEvent()">
<logo class="logo-display" color="var(--main-accent)" />
@@ -167,10 +181,8 @@
<div class="global-menu" v-if="!collapsed" v-on:click="menuClicked">
<div class="menu-section" v-on:click="collapseMenu">
<!-- <div class="menu-item menu-button" > -->
<i class="white angle left icon"></i>
<logo class="menu-logo-display" color="var(--main-accent)" />
<!-- </div> -->
<i class="white angle left icon"></i>
<logo class="menu-logo-display" color="var(--main-accent)" />
</div>
<div class="menu-section" v-if="loggedIn">
@@ -216,9 +228,26 @@
</div>
<div class="menu-section" v-if="loggedIn">
<router-link v-if="loggedIn" exact-active-class="active" class="menu-item menu-button" to="/quick">
<!-- open straight to note -->
<router-link
v-if="loggedIn && $store.getters.totals && $store.getters.totals['quickNote']"
exact-active-class="active"
class="menu-item menu-button"
:to="`/notes/open/${$store.getters.totals['quickNote']}`">
<i class="sticky note outline icon"></i>Scratch Pad
</router-link>
<!-- create new and redirect to new note id -->
<a
v-if="loggedIn && $store.getters.totals && !$store.getters.totals['quickNote']"
v-on:click="newQuickNote()"
exact-active-class="active"
class="menu-item menu-button">
<i class="sticky note outline icon"></i>Scratch Pad
</a>
</div>
<div class="menu-section" v-if="!loggedIn">
@@ -244,7 +273,7 @@
<div class="menu-section">
<router-link class="menu-item menu-button" exact-active-class="active" to="/help">
<i class="question circle outline icon"></i>Help / Terms
<i class="question circle outline icon"></i>Help | Terms
</router-link>
</div>
@@ -304,6 +333,8 @@
this.$store.dispatch('fetchAndUpdateUserTotals')
this.version = localStorage.getItem('currentVersion')
}
this.resizeEventHandler() //Trigger resize event
},
computed: {
@@ -329,16 +360,29 @@
},
},
methods: {
newQuickNote(){
axios.post('/api/quick-note/get')
.then( ({data}) => {
console.log(data)
this.$router.push({'path':'/notes/open/'+data.noteId})
})
},
resizeEventHandler(e) {
clearTimeout(this.resizeDebounce)
this.resizeDebounce = setTimeout(() => {
this.mobile = false
this.menuOpen = false
this.collapsed = false
if(window.innerWidth < 700){
this.collapsed = true
this.mobile = true
}
}, 100)
},

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

@@ -69,10 +69,6 @@
<i class="grip lines icon"></i>
</div>
<div class="edit-button" v-on:click="insertTable(4,4)" data-tooltip="Insert Table" data-position="bottom center" data-inverted>
<i class="book dead icon"></i>
</div>
<div class="edit-button" v-on:click="removeFormatting()" data-tooltip="Remove Formatting" data-position="bottom center" data-inverted>
<i class="remove format icon"></i>
</div>
@@ -276,7 +272,14 @@
<!-- create table option -->
<side-slide-menu v-if="table" v-on:close="table = false; fetchNoteTags()" name="table" :style-object="styleObject">
<div class="ui basic segment">
Create a table
<h2>Insert Table</h2>
<div class="table-tic-table">
<div v-for="i in 10">
<div v-for="j in 10" class="tabletic" v-on:click="insertTable(i,j)">
</div>
</div>
</div>
</div>
</side-slide-menu>

1
client/src/components/ShareNoteComponent.vue
View File

@@ -12,6 +12,7 @@
<ul>
<li>Shared notes can be read and edited by you and all shared users.</li>
<li>Shared notes can only be shared by the creator of the note.</li>
<li>If you turn off sharing, no one else can read the note.</li>
</ul>
</div>