From 18bb86a7a9efdccaa50ad886faf1c0508fa3b1a7 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Tue, 8 Jun 2021 22:06:00 +0200
Subject: [PATCH] refactor Components, add
 newRoom.vue/userSearch.vue/popup.vue/overlay.vue/imageViewer.vue, some design
 changes

---
 package.json                                  |   1 +
 src/App.vue                                   |   2 +-
 src/{views => components/chat}/chat.vue       |  12 +--
 src/components/{ => chat}/chatInformation.vue |  52 +++++----
 src/components/{ => chat}/event.vue           |   4 +-
 src/components/{ => chat}/eventContent.vue    |  30 +++---
 src/components/{ => chat}/newMessage.vue      |  10 +-
 src/components/{ => chat}/replyEvent.vue      |   0
 src/components/{ => chat}/timeline.vue        |   4 +-
 src/components/{ => chat}/topBanner.vue       |  14 +--
 src/components/{ => layout}/error.vue         |   0
 src/components/{ => layout}/fileUpload.vue    |   2 +-
 src/components/{ => layout}/icon.vue          |   0
 src/components/layout/imageViewer.vue         |  41 +++++++
 src/components/layout/overlay.vue             |  24 +++++
 src/components/layout/popup.vue               |  91 ++++++++++++++++
 src/components/layout/popupQuestion.vue       |  33 ++++++
 src/components/{ => layout}/soundRecorder.vue |   2 +-
 src/components/layout/textbtn.vue             |  55 ++++++++++
 src/components/{ => layout}/throbber.vue      |   3 +
 src/components/{ => matrix}/avatar.vue        |   0
 src/components/matrix/newRoom.vue             |  86 +++++++++++++++
 .../{ => matrix}/roomListElement.vue          |  24 +++--
 .../{ => matrix}/userListElement.vue          |  37 +++++--
 src/components/matrix/userSearch.vue          |  78 ++++++++++++++
 src/components/popupQuestion.vue              |  34 ------
 src/components/textbtn.vue                    |  34 ------
 src/components/throbberOverlay.vue            |  36 -------
 src/lib/getMxc.js                             |   6 ++
 src/lib/matrixUtils.js                        |  12 +++
 src/router/index.js                           |   6 --
 src/views/admin.vue                           |  20 ++--
 src/views/login.vue                           |  20 ++--
 src/views/rooms.vue                           | 102 +++++++++++-------
 34 files changed, 618 insertions(+), 257 deletions(-)
 rename src/{views => components/chat}/chat.vue (92%)
 rename src/components/{ => chat}/chatInformation.vue (60%)
 rename src/components/{ => chat}/event.vue (96%)
 rename src/components/{ => chat}/eventContent.vue (85%)
 rename src/components/{ => chat}/newMessage.vue (96%)
 rename src/components/{ => chat}/replyEvent.vue (100%)
 rename src/components/{ => chat}/timeline.vue (96%)
 rename src/components/{ => chat}/topBanner.vue (80%)
 rename src/components/{ => layout}/error.vue (100%)
 rename src/components/{ => layout}/fileUpload.vue (94%)
 rename src/components/{ => layout}/icon.vue (100%)
 create mode 100644 src/components/layout/imageViewer.vue
 create mode 100644 src/components/layout/overlay.vue
 create mode 100644 src/components/layout/popup.vue
 create mode 100644 src/components/layout/popupQuestion.vue
 rename src/components/{ => layout}/soundRecorder.vue (97%)
 create mode 100644 src/components/layout/textbtn.vue
 rename src/components/{ => layout}/throbber.vue (89%)
 rename src/components/{ => matrix}/avatar.vue (100%)
 create mode 100644 src/components/matrix/newRoom.vue
 rename src/components/{ => matrix}/roomListElement.vue (79%)
 rename src/components/{ => matrix}/userListElement.vue (61%)
 create mode 100644 src/components/matrix/userSearch.vue
 delete mode 100644 src/components/popupQuestion.vue
 delete mode 100644 src/components/textbtn.vue
 delete mode 100644 src/components/throbberOverlay.vue

diff --git a/package.json b/package.json
index 79d8baa..eac8b39 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "sass": "^1.29.0",
     "superagent": "^6.1.0",
     "v-emoji-picker": "^2.3.1",
+    "viewerjs": "*",
     "vue": "^2.6.11",
     "ws": "^7.3.1"
   },
diff --git a/src/App.vue b/src/App.vue
index fdb670e..58d50b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import error from "@/components/error.vue";
+import error from '@/components/layout/error.vue';
 
 export default {
   name: 'App',
diff --git a/src/views/chat.vue b/src/components/chat/chat.vue
similarity index 92%
rename from src/views/chat.vue
rename to src/components/chat/chat.vue
index faeaee0..12f99e3 100644
--- a/src/views/chat.vue
+++ b/src/components/chat/chat.vue
@@ -22,14 +22,14 @@
 </template>
 
 <script>
-import newMessage from '@/components/newMessage.vue';
-import topBanner from '@/components/topBanner.vue';
-import Icon from '@/components/icon';
-import {matrix} from '@/main';
+import newMessage from '@/components/chat/newMessage.vue';
+import topBanner from '@/components/chat/topBanner.vue';
+import Icon from '@/components/layout/icon';
+import {matrix} from '@/main.js';
 import splitArray from '@/lib/splitArray.js'
-import timeline from '@/components/timeline';
+import timeline from '@/components/chat/timeline';
 import scrollHandler from '@/lib/scrollHandler';
-import {getUser} from "@/lib/matrixUtils";
+import {getUser} from '@/lib/matrixUtils';
 
 export default {
   name: 'chat',
diff --git a/src/components/chatInformation.vue b/src/components/chat/chatInformation.vue
similarity index 60%
rename from src/components/chatInformation.vue
rename to src/components/chat/chatInformation.vue
index 72f317b..5237767 100644
--- a/src/components/chatInformation.vue
+++ b/src/components/chat/chatInformation.vue
@@ -1,39 +1,34 @@
 <template>
-  <div class="chatInfo">
-    <div class="box">
-      <div class="scrollContainer">
-        <div class="topContainer">
-          <avatar
-            class="roomImage"
-            :mxcURL="getMxcFromRoom(room)"
-            :fallback="room.roomId"
-            :size="5"
-          />
-          <div class="info">
-            <div class="roomName">{{room.name}}</div>
-            <div class="users">{{members.length}} members</div>
-          </div>
-        </div>
-        <user-list-element v-for="member in members.slice(0,20)" :key="member" :user="getUser(member)"/>
-        <p v-if="members.length>20">and {{members.length-20}} other members</p>
+  <popup :on-close="closeChatInfo" class="popup">
+    <div class="topContainer">
+      <avatar
+        class="roomImage"
+        :mxcURL="getMxcFromChat(room)"
+        :fallback="room.roomId"
+        :size="5"
+      />
+      <div class="info">
+        <div class="roomName">{{room.name}}</div>
+        <div class="users">{{members.length}} members</div>
       </div>
     </div>
-    <icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white.svg" />
-  </div>
+    <user-list-element v-for="member in members.slice(0,20)" :key="member" :user="getUser(member)"/>
+    <p v-if="members.length>20">and {{members.length-20}} other members</p>
+  </popup>
 </template>
 <script>
-import icon from './icon.vue';
-import UserListElement from "@/components/userListElement";
-import avatar from "@/components/avatar";
-import {getMxcFromRoom} from "@/lib/getMxc";
-import {getUser} from "@/lib/matrixUtils";
+import UserListElement from '@/components/matrix/userListElement';
+import avatar from '@/components/matrix/avatar';
+import {getMxcFromChat} from '@/lib/getMxc';
+import {getUser} from '@/lib/matrixUtils';
+import popup from '@/components/layout/popup';
 
 export default {
-  name: "chatInformation",
+  name: 'chatInformation',
   components:{
     avatar,
     UserListElement,
-    icon,
+    popup
   },
   props:{
     room: {},
@@ -44,7 +39,7 @@ export default {
       return Object.keys(this.room.currentState.members)
     },
     getUser,
-    getMxcFromRoom
+    getMxcFromChat
   },
   data(){
     return{
@@ -84,6 +79,9 @@ export default {
     height: 100%;
   }
 }
+.popup{
+  min-height: calc(100% - 10rem);
+}
 .closeBtn{
   position: absolute;
   top: 0;
diff --git a/src/components/event.vue b/src/components/chat/event.vue
similarity index 96%
rename from src/components/event.vue
rename to src/components/chat/event.vue
index 3f9d8a2..bfd960e 100644
--- a/src/components/event.vue
+++ b/src/components/chat/event.vue
@@ -19,8 +19,8 @@ import {calcUserName} from '@/lib/matrixUtils';
 import {parseMessage} from '@/lib/eventUtils';
 import {getTime} from '@/lib/getTimeStrings';
 import {getMediaUrl} from '@/lib/getMxc';
-import ReplyEvent from '@/components/replyEvent';
-import EventContent from '@/components/eventContent';
+import ReplyEvent from '@/components/chat/replyEvent';
+import EventContent from '@/components/chat/eventContent';
 
 export default {
   name: 'message',
diff --git a/src/components/eventContent.vue b/src/components/chat/eventContent.vue
similarity index 85%
rename from src/components/eventContent.vue
rename to src/components/chat/eventContent.vue
index 0330528..81f4352 100644
--- a/src/components/eventContent.vue
+++ b/src/components/chat/eventContent.vue
@@ -1,26 +1,18 @@
 <template>
   <div v-if="content.msgtype==='m.text'" v-html="parseMessage(content.body)" :class="getEmojiClass(content)"/>
   <div v-else-if="content.msgtype==='m.notice'" class="notice" v-html="parseMessage(content.body)"/>
-  <div v-else-if="content.msgtype==='m.image'" class="image">
-    <img :src="getSource(content.url)" :alt="content.body" :class="`${compact?'compact':''}`"/><br>
+  <image-viewer v-else-if="content.msgtype==='m.image'" :alt="content.body" class="image" :class="compact?'compact':''">
+    <img :src="getSource(content.url)" :alt="content.body" :class="compact?'compact':''"/><br>
     {{content.body}}
-  </div>
+  </image-viewer>
   <div v-else-if="content.msgtype==='m.file'" :class="`file ${compact?'compact':''}`">
     <a :href="getSource(content.url)" target="_blank">
-    <div class="fileContent">
-      <icon
-        title="file"
-        ic="./sym/ic_attach_file_white.svg"
-        class="download"
-      />
-      <div class="filename">
-          {{content.filename || getSource(content.url)}}
+      <div class="fileContent">
+        <icon title="file" ic="./sym/ic_attach_file_white.svg" class="download"/>
+        <div class="filename">{{content.filename || getSource(content.url)}}</div>
       </div>
-    </div>
     </a>
-    <div class="text">
-      {{content.body}}
-    </div>
+    <div class="text">{{content.body}}</div>
   </div>
   <div v-else-if="content.msgtype==='m.audio'" :class="`audio ${compact?'compact':''}`">
     <audio controls :class="`${compact?'compact':''}`">
@@ -43,11 +35,15 @@
 <script>
 import {getMediaUrl} from '@/lib/getMxc';
 import {parseMessage} from '@/lib/eventUtils';
-import Icon from '@/components/icon';
+import Icon from '@/components/layout/icon';
+import imageViewer from '@/components/layout/imageViewer';
 
 export default {
   name: 'eventContent',
-  components: {Icon},
+  components: {
+    Icon,
+    imageViewer
+  },
   props: {
     content: Object,
     compact: {
diff --git a/src/components/newMessage.vue b/src/components/chat/newMessage.vue
similarity index 96%
rename from src/components/newMessage.vue
rename to src/components/chat/newMessage.vue
index 5e82434..a45f0b9 100644
--- a/src/components/newMessage.vue
+++ b/src/components/chat/newMessage.vue
@@ -47,15 +47,15 @@
 </template>
 
 <script>
-import icon from '@/components/icon.vue';
+import icon from '@/components/layout/icon.vue';
 import {matrix} from '@/main.js';
 import {parseMessage} from '@/lib/eventUtils';
 import {calcUserName} from '@/lib/matrixUtils';
-import ReplyEvent from '@/components/replyEvent';
+import ReplyEvent from '@/components/chat/replyEvent';
 import {VEmojiPicker} from 'v-emoji-picker';
-import EventContent from '@/components/eventContent';
-import SoundRecorder from '@/components/soundRecorder';
-import FileUpload from '@/components/fileUpload';
+import EventContent from '@/components/chat/eventContent';
+import SoundRecorder from '@/components/layout/soundRecorder';
+import FileUpload from '@/components/layout/fileUpload';
 import {readFileBlob} from '@/lib/readFileBlob';
 
 export default {
diff --git a/src/components/replyEvent.vue b/src/components/chat/replyEvent.vue
similarity index 100%
rename from src/components/replyEvent.vue
rename to src/components/chat/replyEvent.vue
diff --git a/src/components/timeline.vue b/src/components/chat/timeline.vue
similarity index 96%
rename from src/components/timeline.vue
rename to src/components/chat/timeline.vue
index f559dc7..1d3293d 100644
--- a/src/components/timeline.vue
+++ b/src/components/chat/timeline.vue
@@ -40,8 +40,8 @@
 </template>
 
 <script>
-import event from '@/components/event';
-import avatar from '@/components/avatar';
+import event from '@/components/chat/event';
+import avatar from '@/components/matrix/avatar';
 import splitArray from '@/lib/splitArray';
 import {getDate, getTime} from '@/lib/getTimeStrings';
 import {getUser, calcUserName} from '@/lib/matrixUtils';
diff --git a/src/components/topBanner.vue b/src/components/chat/topBanner.vue
similarity index 80%
rename from src/components/topBanner.vue
rename to src/components/chat/topBanner.vue
index 35ada17..ee8930d 100644
--- a/src/components/topBanner.vue
+++ b/src/components/chat/topBanner.vue
@@ -3,7 +3,7 @@
     <div>
       <icon @click.native="closeChat()" class="topIcon" ic="./sym/ic_arrow_back_white.svg" />
       <div @click="openChatInfo()" class="container">
-        <avatar class="topIcon avatar" :mxcURL="getMxcFromRoom(room)" :fallback="room.roomId" :size="3"/>
+        <avatar class="topIcon avatar" :mxcURL="getMxcFromChat(room)" :fallback="room.roomId" :size="3"/>
         <div class="chatName">{{room.name}}</div>
         <div class="info">{{Object.keys(room.currentState.members).length}} members</div>
       </div>
@@ -11,13 +11,12 @@
   </div>
 </template>
 <script>
-import icon from '@/components/icon.vue';
-import avatar from "@/components/avatar";
-import {getMxcFromRoom} from "@/lib/getMxc";
-
+import icon from '@/components/layout/icon.vue';
+import avatar from '@/components/matrix/avatar';
+import {getMxcFromChat} from '@/lib/getMxc';
 
 export default {
-  name: "topBanner",
+  name: 'topBanner',
   components:{
     icon,
     avatar
@@ -28,7 +27,7 @@ export default {
     openChatInfo: Function
   },
   methods: {
-    getMxcFromRoom
+    getMxcFromChat
   }
 }
 </script>
@@ -40,6 +39,7 @@ export default {
   width: 100%;
   height: 3.5rem;
   background-color: #1d1d1d;
+  cursor: pointer;
 }
 .topIcon{
   position: absolute;
diff --git a/src/components/error.vue b/src/components/layout/error.vue
similarity index 100%
rename from src/components/error.vue
rename to src/components/layout/error.vue
diff --git a/src/components/fileUpload.vue b/src/components/layout/fileUpload.vue
similarity index 94%
rename from src/components/fileUpload.vue
rename to src/components/layout/fileUpload.vue
index 5c32d3f..2569d00 100644
--- a/src/components/fileUpload.vue
+++ b/src/components/layout/fileUpload.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import icon from '@/components/icon';
+import icon from '@/components/layout/icon';
 import {readFileBlob} from '@/lib/readFileBlob';
 
 export default {
diff --git a/src/components/icon.vue b/src/components/layout/icon.vue
similarity index 100%
rename from src/components/icon.vue
rename to src/components/layout/icon.vue
diff --git a/src/components/layout/imageViewer.vue b/src/components/layout/imageViewer.vue
new file mode 100644
index 0000000..28af901
--- /dev/null
+++ b/src/components/layout/imageViewer.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/layout/overlay.vue b/src/components/layout/overlay.vue
new file mode 100644
index 0000000..95b82ff
--- /dev/null
+++ b/src/components/layout/overlay.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/layout/popup.vue b/src/components/layout/popup.vue
new file mode 100644
index 0000000..516705a
--- /dev/null
+++ b/src/components/layout/popup.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/layout/popupQuestion.vue b/src/components/layout/popupQuestion.vue
new file mode 100644
index 0000000..7f88487
--- /dev/null
+++ b/src/components/layout/popupQuestion.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/soundRecorder.vue b/src/components/layout/soundRecorder.vue
similarity index 97%
rename from src/components/soundRecorder.vue
rename to src/components/layout/soundRecorder.vue
index 52bef27..a3a9b16 100644
--- a/src/components/soundRecorder.vue
+++ b/src/components/layout/soundRecorder.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import icon from '@/components/icon';
+import icon from '@/components/layout/icon';
 import Recorder from 'recorder-js';
 const audioContext =  new (window.AudioContext || window.webkitAudioContext)();
 
diff --git a/src/components/layout/textbtn.vue b/src/components/layout/textbtn.vue
new file mode 100644
index 0000000..a2af07e
--- /dev/null
+++ b/src/components/layout/textbtn.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/throbber.vue b/src/components/layout/throbber.vue
similarity index 89%
rename from src/components/throbber.vue
rename to src/components/layout/throbber.vue
index 69f19e0..cb167f2 100644
--- a/src/components/throbber.vue
+++ b/src/components/layout/throbber.vue
@@ -17,6 +17,9 @@ export default {
 <style scoped lang="scss">
   .box{
     position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     height: 8rem;
     width: 8rem;
     background-color: #1d1d1d;
diff --git a/src/components/avatar.vue b/src/components/matrix/avatar.vue
similarity index 100%
rename from src/components/avatar.vue
rename to src/components/matrix/avatar.vue
diff --git a/src/components/matrix/newRoom.vue b/src/components/matrix/newRoom.vue
new file mode 100644
index 0000000..060f9be
--- /dev/null
+++ b/src/components/matrix/newRoom.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/roomListElement.vue b/src/components/matrix/roomListElement.vue
similarity index 79%
rename from src/components/roomListElement.vue
rename to src/components/matrix/roomListElement.vue
index d2ddd6a..4016b5b 100644
--- a/src/components/roomListElement.vue
+++ b/src/components/matrix/roomListElement.vue
@@ -2,20 +2,20 @@
   <div class="roomListElement" :title="room.name">
     <div class="imageContainer">
       <avatar
-          class="roomImage"
-          :mxcURL="getMxcFromRoom(room)"
-          :fallback="room.roomId"
-          :size="3"
+        class="roomImage"
+        :mxcURL="getMxcFromChat(room)"
+        :fallback="room.roomId"
+        :size="3"
       />
     </div>
     <div class="roomListName">{{room.name}}</div>
-    <div class="status">{{getPreviewString(room)}}</div>
+    <div class="status">{{previewString}}</div>
   </div>
 </template>
 
 <script>
-import avatar from '@/components/avatar';
-import {getMxcFromRoom} from '@/lib/getMxc';
+import avatar from '@/components/matrix/avatar';
+import {getMxcFromChat} from '@/lib/getMxc';
 import {getTime} from '@/lib/getTimeStrings';
 import {calcUserName} from '@/lib/matrixUtils';
 
@@ -37,8 +37,16 @@ export default {
       return room.timeline[room.timeline.length-1]
         && room.timeline[room.timeline.length-1].event;
     },
+    getMxcFromChat,
     calcUserName,
-    getMxcFromRoom
+  },
+  data(){
+    return {
+      previewString: 'loading'
+    }
+  },
+  created() {
+    this.previewString = this.getPreviewString(this.room);
   }
 }
 </script>
diff --git a/src/components/userListElement.vue b/src/components/matrix/userListElement.vue
similarity index 61%
rename from src/components/userListElement.vue
rename to src/components/matrix/userListElement.vue
index 831662a..85bfc89 100644
--- a/src/components/userListElement.vue
+++ b/src/components/matrix/userListElement.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="userListElement" :title="user.userId">
-    <div class="imageContainer">
+  <div :class="compact?'userListElement compact':'userListElement'" :title="user.userId">
+    <div :class="compact?'imageContainer compact':'imageContainer'">
       <avatar
-        class="userImage"
+        :class="compact?'userImage compact':'userImage'"
         :mxcURL="user.avatarUrl"
         :fallback="user.userId"
-        :size="3"
+        :size="compact?1.5:3"
       />
       <div v-if="user.currentlyActive" class="online"></div>
     </div>
-    <div class="userListName">{{user.displayName || user.userId}}</div>
-    <div class="status">{{user.presence}}</div>
+    <div :class="compact?'userListName compact':'userListName'">{{user.displayName || user.userId}}</div>
+    <div v-if="!compact" class="status">{{user.presence}}</div>
   </div>
 </template>
 
 <script>
-import avatar from '@/components/avatar';
+import avatar from '@/components/matrix/avatar';
 
 export default {
   name: 'userListElement',
@@ -23,7 +23,11 @@ export default {
     avatar
   },
   props:{
-    user: Object
+    user: Object,
+    compact: {
+      type: Boolean,
+      default: false
+    }
   }
 }
 </script>
@@ -50,11 +54,11 @@ export default {
       position: absolute;
       bottom: 0;
       right: 0;
-      height: 0.6rem;
-      width: 0.6rem;
+      height: 0.5rem;
+      width: 0.5rem;
       background-color: #42b983;
       border-radius: 50%;
-      border: 0.2rem solid #222;
+      border: 2px solid #222;
     }
   }
   .userListName{
@@ -81,4 +85,15 @@ export default {
 .userListElement:hover{
   background-color: #4444;
 }
+.userListElement.compact{
+  height: 1.5rem;
+}
+.imageContainer.compact{
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.userListName.compact{
+  left: 2.5rem;
+  font-size: 1rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/matrix/userSearch.vue b/src/components/matrix/userSearch.vue
new file mode 100644
index 0000000..7bb841d
--- /dev/null
+++ b/src/components/matrix/userSearch.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/popupQuestion.vue b/src/components/popupQuestion.vue
deleted file mode 100644
index a643d45..0000000
--- a/src/components/popupQuestion.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/components/textbtn.vue b/src/components/textbtn.vue
deleted file mode 100644
index 1a3b97d..0000000
--- a/src/components/textbtn.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/components/throbberOverlay.vue b/src/components/throbberOverlay.vue
deleted file mode 100644
index eeb511b..0000000
--- a/src/components/throbberOverlay.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/lib/getMxc.js b/src/lib/getMxc.js
index 5d25704..c2e404a 100644
--- a/src/lib/getMxc.js
+++ b/src/lib/getMxc.js
@@ -18,6 +18,12 @@ export function getMxcFromRoomId(roomId){
   return getMxcFromRoom(matrix.client.getRoom(roomId));
 }
 
+export function getMxcFromChat(room){
+  return Object.keys(room.currentState.members).length===2
+    ?getMxcFromUserId(Object.keys(room.currentState.members).filter(tmp=>tmp!==matrix.user)[0])
+    :getMxcFromRoom(room);
+}
+
 export function getPreviewUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
   return matrix.client.mxcUrlToHttp(mxcUrl, size, size, resizeMethod);
 }
diff --git a/src/lib/matrixUtils.js b/src/lib/matrixUtils.js
index 070115b..46575d4 100644
--- a/src/lib/matrixUtils.js
+++ b/src/lib/matrixUtils.js
@@ -15,4 +15,16 @@ export function isValidUserId(id){
 }
 export function isValidRoomId(id){
   return id.match(/^(#|!)[a-zA-Z0-9_.+-]+:[a-z0-9.-]+\.[a-z]+$/);
+}
+export async function createRoom({name = '', users = [], description = undefined, access = 'private'}){
+  if (users.length === 0) return;
+  return matrix.client.createRoom({name}).then(async room => {
+    await Promise.all(users.map(async user => await matrix.client.invite(room.room_id, user.userId)));
+    if (description) await matrix.client.setRoomTopic(room.room_id, description);
+    await matrix.client.setGuestAccess(room.room_id, access === 'public'
+      ?{allowJoin: true, allowRead: true}
+      :{allowJoin: false, allowRead: false}
+    );
+    return matrix.client.getRoom(room.room_id);
+  });
 }
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index b42bd93..6c09f04 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,5 @@
 import VueRouter from 'vue-router';
 import login from '@/views/login';
-import chat from '@/views/chat';
 import rooms from '@/views/rooms';
 import admin from '@/views/admin';
 
@@ -16,11 +15,6 @@ export const router = new VueRouter({
       name: 'login',
       component: login
     },
-    {
-      path: '/chat/*',
-      name: 'chat',
-      component: chat
-    },
     {
       path: '/rooms/*',
       name: 'room',
diff --git a/src/views/admin.vue b/src/views/admin.vue
index b92b138..111f24a 100644
--- a/src/views/admin.vue
+++ b/src/views/admin.vue
@@ -33,23 +33,25 @@
       </div>
       <textbtn @click.native="updateUser()" text="update user"/>
     </div>
-    <throbber-overlay v-if="loading" :text="loading"/>
+    <overlay v-if="loading"><throbber :text="loading"/></overlay>
   </div>
 </template>
 
 <script>
-import {matrix} from "@/main";
-import {AdminAPI} from "@/lib/AdminAPI";
-import icon from "@/components/icon";
-import textbtn from "@/components/textbtn";
-import ThrobberOverlay from "@/components/throbberOverlay";
+import {matrix} from '@/main';
+import {AdminAPI} from '@/lib/AdminAPI';
+import icon from '@/components/layout/icon';
+import textbtn from '@/components/layout/textbtn';
+import overlay from '@/components/layout/overlay';
+import throbber from '@/components/layout/throbber';
 
 export default {
-  name: "admin",
+  name: 'admin',
   components:{
-    ThrobberOverlay,
     icon,
-    textbtn
+    textbtn,
+    overlay,
+    throbber
   },
   data(){
     return{
diff --git a/src/views/login.vue b/src/views/login.vue
index ba7009c..c6fb729 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -7,30 +7,32 @@
         <input v-model="password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
         <input v-model="homeServer" class="input" name="homeserver" placeholder="https://matrix.org"><br>
         <div v-if="loginError" class="info">{{loginError}}</div>
-        <textbtn type="submit" text="login" />
+        <textbtn type="submit" text="login" class="rounded"/>
       </form>
       <div v-else>
         <p>you are already logged in</p>
         <textbtn @click.native="$router.push('rooms')" text="chat" />
-        <textbtn @click.native="logout()" text="logout" />
+        <textbtn @click.native="logout()" text="logout" class="outline"/>
       </div>
     </div>
-    <throbber-overlay v-if="loading" :text="loading" class="throbber"/>
+    <overlay v-if="loading"><throbber :text="loading"/></overlay>
   </div>
 </template>
 
 <script>
-import textbtn from '@/components/textbtn';
+import textbtn from '@/components/layout/textbtn';
 import {matrix} from '@/main.js';
-import ThrobberOverlay from '@/components/throbberOverlay';
 import {isValidUserId} from '@/lib/matrixUtils';
 import {DataStore} from '@/lib/DataStore';
+import Overlay from '@/components/layout/overlay';
+import Throbber from '@/components/layout/throbber';
 const store = new DataStore();
 
 export default {
   name: 'login.vue',
   components: {
-    ThrobberOverlay,
+    Throbber,
+    Overlay,
     textbtn
   },
   methods: {
@@ -113,12 +115,6 @@ input:focus{
   height: min-content;
   width: 100%;
 }
-.throbber{
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 
 @media (max-width: 35rem) {
   input {
diff --git a/src/views/rooms.vue b/src/views/rooms.vue
index 0cb9c64..3112d24 100644
--- a/src/views/rooms.vue
+++ b/src/views/rooms.vue
@@ -1,37 +1,44 @@
 <template>
-  <div v-if="matrix.loading">
-    <throbber-overlay text="loading"/>
-  </div>
+  <overlay v-if="matrix.loading"><throbber text="loading" class="center"/></overlay>
   <div v-else>
     <div id="roomList" class="roomList">
       <h1 class="wideElement">[chat]</h1><h1 class="smallElement">[c]</h1>
       <input v-model="search" class="input wideElement" type="text" maxlength="50" placeholder="search">
-      <p class="wideElement">rooms ↴</p>
+      <p class="wideElement">- rooms -</p>
       <room-list-element
-        v-for="room in Object.assign([], matrix.client.getRooms())
-          .sort(obj => obj.timeline[obj.timeline.length-1].event.origin_server_ts)
+        v-for="room in matrix.client.getRooms()
           .filter(prop=>matchResults(prop.name, search)||prop.roomId===search)"
         :key="room.roomId" @click.native="openChat(room)"
         :room="room"
         class="roomListElement"
       />
       <div v-if="search">
-        <p class="wideElement">users ↴</p><p class="smallElement">—</p>
+        <p class="wideElement">- users -</p><p class="smallElement">—</p>
         <user-list-element
           v-for="user in matrix.client.getUsers()
             .filter(prop=>matchResults(prop.displayName, search)||matchResults(prop.userId, search))
             .slice(0,10)"
           :user="user" :key="user.userId"
-          @click.native="setQuestion(`create private chat with '${user.displayName}'?`,()=>createRoom({user}))"
+          @click.native="setQuestion({
+            title:'New Chat',
+            question:`Create private chat with '${user.displayName}'?`,
+            callback:()=>createRoom({users:[user], access: 'private'}).then(openChat)
+          })"
         />
-        <p class="wideElement">suggestions ↴</p><p class="smallElement">…</p>
+        <p class="wideElement">- suggestions -</p><p class="smallElement">…</p>
         <div class="wideElement">
-          <p v-if="isValidUserId(search)">create chat: {{search}} ➤</p>
+          <p v-if="isValidUserId(search)" class="suggestion">create chat: {{search}} ➤</p>
           <p v-if="isValidRoomId(search)"
-             @click="setQuestion(`join room '${search}'?`, ()=>joinRoom(search))"
+            class="suggestion"
+            @click="setQuestion({
+              title:'Join room',
+              question:`Join '${search}'?`,
+              callback:()=>joinRoom(search)
+            })"
           >join room: {{search}} ➤</p>
           <p v-if="search.match(/^[a-zA-Z0-9_.+-]+$/)"
-            @click="setQuestion(`create room '${search}'?`,()=>createRoom({name: search}))"
+            @click="setShowCreateRoom({name: search}, openChat)"
+            class="suggestion"
           >create room: {{search}} ➤</p>
         </div>
       </div>
@@ -45,32 +52,40 @@
       :open-chat-info="()=>showChatInfo=true"
     />
     <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
-    <chatInformation v-if="showRoom && showChatInfo" :room="getCurrentRoom()" :close-chat-info="()=>showChatInfo=false"/>
-    <popup-question v-if="popup.question" :callback="popup.callback" :question="popup.question" class="center"/>
+    <overlay>
+      <chatInformation v-if="showRoom && showChatInfo" :room="getCurrentRoom()" :close-chat-info="()=>showChatInfo=false" class="center"/>
+      <new-room v-if="showCreateRoom.props" :callback="showCreateRoom.callback" :props="showCreateRoom.props" class="center"/>
+      <popup-question v-if="popup.question" :callback="popup.callback" :question="popup.question" :title="popup.title" class="center"/>
+    </overlay>
   </div>
 </template>
 
 <script>
-import chat from '@/views/chat.vue';
-import chatInformation from '@/components/chatInformation';
+import chat from '@/components/chat/chat.vue';
+import chatInformation from '@/components/chat/chatInformation';
 import {matrix} from '@/main';
-import ThrobberOverlay from '@/components/throbberOverlay';
 import {getMxcFromRoom} from '@/lib/getMxc';
-import roomListElement from '@/components/roomListElement';
+import roomListElement from '@/components/matrix/roomListElement';
 import {getRoom, getUser} from '@/lib/matrixUtils';
 import {isValidUserId, isValidRoomId} from '@/lib/matrixUtils';
-import userListElement from '@/components/userListElement';
-import PopupQuestion from '@/components/popupQuestion';
+import userListElement from '@/components/matrix/userListElement';
+import PopupQuestion from '@/components/layout/popupQuestion';
+import newRoom from '@/components/matrix/newRoom';
+import Overlay from '@/components/layout/overlay';
+import Throbber from '@/components/layout/throbber';
+import {createRoom} from '@/lib/matrixUtils';
 
 export default {
   name: 'rooms',
   components:{
+    Throbber,
+    Overlay,
     PopupQuestion,
     userListElement,
-    ThrobberOverlay,
     chat,
     chatInformation,
-    roomListElement
+    roomListElement,
+    newRoom
   },
   methods:{
     openChat(room){
@@ -89,11 +104,12 @@ export default {
     matchResults(prop, search){
       return prop.toLowerCase().includes(search.toLowerCase().trim());
     },
-    setQuestion(question, callback){
+    setQuestion({title, question, callback}){
       this.popup = {
         question,
+        title,
         callback:(res)=>{
-          this.popup = false;
+          this.popup = {};
           if (res) callback();
         }
       }
@@ -103,18 +119,21 @@ export default {
         this.openChat(getRoom(room.room_id));
       });
     },
-    async createRoom({name = '', user = undefined}){
-      return this.matrix.client.createRoom({name}).then(room => {
-        if (user) this.matrix.client.invite(room.room_id, user.userId);
-        this.openChat(getRoom(room.room_id));
-        return room;
-      });
+    setShowCreateRoom(props, callback=()=>{}){
+      this.createRoom = {
+        props,
+        callback:(res)=>{
+          this.createRoom = {};
+          if (res) callback(res);
+        }
+      }
     },
     getMxcFromRoom,
     getRoom,
     getUser,
     isValidUserId,
-    isValidRoomId
+    isValidRoomId,
+    createRoom
   },
   data(){
     return {
@@ -122,10 +141,8 @@ export default {
       showChatInfo: false,
       showRoom: true,
       search: '',
-      popup:{
-        question: '',
-        callback: ()=>{}
-      }
+      popup:{},
+      showCreateRoom:{}
     }
   },
   mounted() {
@@ -171,7 +188,10 @@ export default {
   text-align: center;
 }
 input{
-  width: calc(100% - 5.2rem);
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  width: calc(100% - 4rem);
 }
 .wideElement{
   display: block;
@@ -180,11 +200,17 @@ input{
   display: none;
 }
 .center{
-  position: fixed;
+  position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
-  z-index: 50;
+}
+.suggestion{
+  cursor: pointer;
+  text-decoration: underline;
+}
+.suggestion:hover{
+  background-color: #4444;
 }
 
 @media (max-width: 48rem) and (min-width: 30rem) {