refactor Components, add newRoom.vue/userSearch.vue/popup.vue/overlay.vue/imageViewer.vue, some design changes
parent
c0d9de4fcf
commit
18bb86a7a9
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div class="viewer" ref="images">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Viewer from 'viewerjs';
|
||||||
|
import 'viewerjs/dist/viewer.css';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'imageViewer',
|
||||||
|
props: {
|
||||||
|
options: Object
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
new Viewer(this.$refs.images, this.options||{
|
||||||
|
inline: false,
|
||||||
|
navbar: false,
|
||||||
|
button: true,
|
||||||
|
toolbar: {
|
||||||
|
reset: {show: 1, size: 'large'},
|
||||||
|
zoomIn: {show: 1, size: 'large'},
|
||||||
|
zoomOut: {show: 1, size: 'large'},
|
||||||
|
rotateLeft: {show: 1, size: 'large'},
|
||||||
|
rotateRight: {show: 1, size: 'large'}
|
||||||
|
},
|
||||||
|
zoomRatio: 0.25,
|
||||||
|
minZoomRatio: 0.5,
|
||||||
|
maxZoomRatio: 10,
|
||||||
|
toggleOnDblclick: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.viewer{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="this.$slots.default" class="overlay">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'overlay'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.overlay{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #111d;
|
||||||
|
user-select: none;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="popup">
|
||||||
|
<div class="scrollContainer" ref="scrollContainer">
|
||||||
|
<div class="content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<icon v-if="onClose" class="closeBtn" @click.native="onClose(false)" ic="./sym/ic_close_white.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import icon from '@/components/layout/icon';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'popup',
|
||||||
|
components: {
|
||||||
|
icon
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
onClose: Function
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
calcMaxHeight(){
|
||||||
|
this.$refs.scrollContainer.style.maxHeight = `calc(${this.$el.parentElement.clientHeight}px - 4rem`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.calcMaxHeight();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.popup{
|
||||||
|
position: relative;
|
||||||
|
top: 5rem;
|
||||||
|
width: calc(100% - 4rem);
|
||||||
|
max-width: 30rem;
|
||||||
|
min-height: 10rem;
|
||||||
|
background-color: #1d1d1d;
|
||||||
|
box-shadow: 6px 6px 20px #111;
|
||||||
|
border-radius: 1rem;
|
||||||
|
z-index: 30;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.scrollContainer{
|
||||||
|
position: relative;
|
||||||
|
max-height: 30rem;
|
||||||
|
top: 0;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
padding: 0 1rem 0 1rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.popup{
|
||||||
|
transform: unset;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.scrollContainer{
|
||||||
|
max-height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-height: 40rem) {
|
||||||
|
.popup{
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.scrollContainer{
|
||||||
|
max-height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.closeBtn{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #0000;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
position: relative;
|
||||||
|
padding: 1rem 0 1rem 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
<template>
|
||||||
|
<popup :on-close="callback">
|
||||||
|
<h2>{{title}}</h2>
|
||||||
|
<p>{{question}}</p>
|
||||||
|
<textbtn :text="action" @click.native="callback(true)"/>
|
||||||
|
<textbtn text="Cancel" @click.native="callback(false)" class="outline"/>
|
||||||
|
</popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import textbtn from '@/components/layout/textbtn';
|
||||||
|
import popup from '@/components/layout/popup';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'popupQuestion',
|
||||||
|
components: {
|
||||||
|
textbtn,
|
||||||
|
popup
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
title: String,
|
||||||
|
question: String,
|
||||||
|
callback: Function,
|
||||||
|
action: {
|
||||||
|
type: String,
|
||||||
|
default: 'Apply'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<button class="btn">
|
||||||
|
<div class="btnText">{{text}}</div>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "textbtn",
|
||||||
|
props:{
|
||||||
|
text: String,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.btn{
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
height: 2.5rem;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
background-color: var(--primary);
|
||||||
|
box-shadow: var(--shadow100);
|
||||||
|
border-radius: 1rem;
|
||||||
|
margin: 0.2rem;
|
||||||
|
}
|
||||||
|
.btn.primary{
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
.btn.underline{
|
||||||
|
background-color: unset;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.btn.rounded{
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
}
|
||||||
|
.btn.outline{
|
||||||
|
background-color: unset;
|
||||||
|
box-shadow: none;
|
||||||
|
text-decoration: underline;
|
||||||
|
border: #fff solid 1px;
|
||||||
|
}
|
||||||
|
.btn.squared{
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.btnText {
|
||||||
|
position: relative;
|
||||||
|
font-size: 1rem;
|
||||||
|
color:#fff;
|
||||||
|
font-family:Arial, "lucida console", sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<popup :on-close="callback">
|
||||||
|
<h2>New room</h2>
|
||||||
|
<input v-model="name" type="text" placeholder="Room name">
|
||||||
|
<select v-model="access">
|
||||||
|
<option>private</option>
|
||||||
|
<option>public</option>
|
||||||
|
</select><br>
|
||||||
|
<textarea v-model="description" placeholder="Room description"></textarea><br>
|
||||||
|
<h3>Add User</h3>
|
||||||
|
<user-search :filter="prop=>!users.find(temp=>temp===prop)" :callback="addUser" class="userSearch"/>
|
||||||
|
<h3 v-if="users.length">User</h3>
|
||||||
|
<div>
|
||||||
|
<user-list-element
|
||||||
|
v-for="user in users"
|
||||||
|
:user="user" :key="user.userId"
|
||||||
|
@click.native="removeUser(user)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<textbtn :text="action" @click.native="createRoom({name, users, description, access}).then(callback)"/>
|
||||||
|
<textbtn text="Cancel" @click.native="callback(false)" class="outline"/>
|
||||||
|
<overlay v-if="loading"><throbber text="loading"/></overlay>
|
||||||
|
</popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import textbtn from '@/components/layout/textbtn';
|
||||||
|
import popup from '@/components/layout/popup';
|
||||||
|
import userListElement from '@/components/matrix/userListElement';
|
||||||
|
import UserSearch from '@/components/matrix/userSearch';
|
||||||
|
import overlay from '@/components/layout/overlay';
|
||||||
|
import throbber from '@/components/layout/throbber';
|
||||||
|
import {createRoom} from '@/lib/matrixUtils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'popupQuestion',
|
||||||
|
components: {
|
||||||
|
UserSearch,
|
||||||
|
textbtn,
|
||||||
|
popup,
|
||||||
|
userListElement,
|
||||||
|
overlay,
|
||||||
|
throbber
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
props: Object,
|
||||||
|
callback: Function,
|
||||||
|
action: {
|
||||||
|
type: String,
|
||||||
|
default: 'Apply'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
name: this.props.name,
|
||||||
|
description: this.props.description,
|
||||||
|
users: [],
|
||||||
|
loading: false,
|
||||||
|
access: 'private'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
addUser(user){
|
||||||
|
if (this.users.find(tmp => tmp === user)) return;
|
||||||
|
this.users.push(user);
|
||||||
|
this.userSearch = '';
|
||||||
|
},
|
||||||
|
removeUser(user){
|
||||||
|
this.users = this.users.filter(tmp => tmp !== user);
|
||||||
|
},
|
||||||
|
async createRoom(props){
|
||||||
|
this.loading = true;
|
||||||
|
return await createRoom(props);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
textarea{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.userSearch{
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div class="userSearch">
|
||||||
|
<div v-if="userSearch" class="box">
|
||||||
|
<div class="results">
|
||||||
|
<user-list-element
|
||||||
|
v-for="user in matrix.client.getUsers()
|
||||||
|
.filter(prop=>matchResults(prop.displayName, userSearch)||matchResults(prop.userId, userSearch))
|
||||||
|
.filter(filter)
|
||||||
|
.slice(0,16)"
|
||||||
|
:user="user" :key="user.userId"
|
||||||
|
@click.native="callback(user); userSearch='';"
|
||||||
|
:compact="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="filler"></div>
|
||||||
|
</div>
|
||||||
|
<input v-model="userSearch" type="text" placeholder="search" class="input">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import userListElement from '@/components/matrix/userListElement';
|
||||||
|
import {matrix} from '@/main';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'userSearch',
|
||||||
|
components:{
|
||||||
|
userListElement
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
callback: Function,
|
||||||
|
filter: Function
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
matchResults(prop, search){
|
||||||
|
return prop.toLowerCase().includes(search.toLowerCase().trim());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
matrix,
|
||||||
|
userSearch: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.userSearch{
|
||||||
|
position: relative;
|
||||||
|
background-color: #1d1d1d;
|
||||||
|
height: 2.2rem;
|
||||||
|
width: 14rem;
|
||||||
|
margin: 0.2rem;
|
||||||
|
}
|
||||||
|
.input{
|
||||||
|
position: absolute;
|
||||||
|
width: 13rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.filler{
|
||||||
|
height: 2.5rem;
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
position: absolute;
|
||||||
|
bottom: -0.4rem;
|
||||||
|
left: -0.4rem;
|
||||||
|
background-color: var(--grey500);
|
||||||
|
box-shadow: var(--shadow200);
|
||||||
|
width: calc(100% + 0.8rem);
|
||||||
|
border-radius: 0.6rem;
|
||||||
|
}
|
||||||
|
.results{
|
||||||
|
max-height: 10.5rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="questionBox">
|
|
||||||
<p class="text">{{question}}</p>
|
|
||||||
<textbtn text="yes" @click.native="callback(true)"/>
|
|
||||||
<textbtn text="no" @click.native="callback(false)"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import textbtn from '@/components/textbtn';
|
|
||||||
export default {
|
|
||||||
name: 'popupQuestion',
|
|
||||||
components: {textbtn},
|
|
||||||
props:{
|
|
||||||
question: String,
|
|
||||||
callback: Function
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.questionBox{
|
|
||||||
position: absolute;
|
|
||||||
width: auto;
|
|
||||||
background-color: #1d1d1d;
|
|
||||||
box-shadow: 6px 6px 10px #111;
|
|
||||||
border-radius: 1.5rem;
|
|
||||||
.text{
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button class="btn">
|
|
||||||
<div class="btnText">{{text}}</div>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "textbtn",
|
|
||||||
props:{
|
|
||||||
text: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.btn{
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
height: 2.5rem;
|
|
||||||
padding-left: 2rem;
|
|
||||||
padding-right: 2rem;
|
|
||||||
background-color: #00BCD4;
|
|
||||||
box-shadow: 3px 3px 10px #222;
|
|
||||||
border-radius: 1.25rem;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
|
||||||
.btnText {
|
|
||||||
position: relative;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color:#fff;
|
|
||||||
font-family:Arial, "lucida console", sans-serif;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="overlay">
|
|
||||||
<throbber :text="text" class="throbber"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import throbber from "@/components/throbber";
|
|
||||||
export default {
|
|
||||||
name: "throbberOverlay",
|
|
||||||
components:{
|
|
||||||
throbber
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
text: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.throbber{
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
.overlay{
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #111d;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue