From 5fb2449daf2d58721f6633bebc72b93694f55968 Mon Sep 17 00:00:00 2001
From: techcrafter <techcrafter07@gmail.com>
Date: Sat, 7 Nov 2020 20:09:26 +0100
Subject: [PATCH] Information-Popup 0.0

---
 package-lock.json                  | 160 ++++++++++++++---------------
 public/sym/placeholder.png         | Bin 0 -> 4355 bytes
 src/components/chatInformation.vue | 119 +++++++++++++++++++--
 3 files changed, 188 insertions(+), 91 deletions(-)
 create mode 100644 public/sym/placeholder.png

diff --git a/package-lock.json b/package-lock.json
index 5a76166..ec9fe12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1744,6 +1744,16 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1770,6 +1780,34 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1791,6 +1829,25 @@
             "path-exists": "^4.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1855,6 +1912,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1871,6 +1938,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-rc.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.0.tgz",
+          "integrity": "sha512-S4F7jhBQFuJbLtyjfrMYl4gBFhMACHtkZ+rJuH6/hvgxeAEAPBY5aVKn1+LuVE9+U1RGGQ9Nq/7DSR72spf0PQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -10940,87 +11019,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.9",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.9.tgz",
-      "integrity": "sha512-mu9pg6554GbXDSO8LlxkQM6qUJzUkb/A0FJc9LgRqnU9MCnhzEXwCt1Zx5NObvFpzs2mH2dH/uUCDwL8Qaz9sA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
diff --git a/public/sym/placeholder.png b/public/sym/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..750b84c6be54d0bccb7cda486d3ea3feb06d1fb0
GIT binary patch
literal 4355
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Lg@u)cg^iV!m5q&!os*A~lY@g(h?kd(
zPgF=uOjJljL|jTyMqEN(Qba^nT~=O6Syfe4Oh!{jLq%IrMOEeh0S0akrqwJ!V+9%h
zA7PLNG9Z8f23VO`*q9kPfRg3{K#Q3e*}0jSSwYSK0!AigRu(}a!{CVrg+)XajRS*1
z3X3L*IVPGkK2%aRa@xqY=>IJS4v=blhJOuUJ)^{E2#kinXb8|c1Q>Ve#O{`Su{}2M
zzQBFsQ)cGoGUqjJ+__V1vpBi9@XV*)-m}Na7Cu^*7xkaPx-|GT4<3IoZ{|6vd1~F+
z&|_5^*JVHL{A&_Cd)16)zkX5cvsN}C?@eBO4Bm5j@ln6eBnqi%?({iwB-CfYBTJQ(
z?T?-RX!m^l@yF5uw_8|i_&4r;|Bxs7<5JhIv~;($wB)_=6Bh4yqVdj>%ev30?=c}x
z)PZC(|DrjcXKBCcd$%H8_G<FAb({&fZDiWVek1n#hc?5zVYXQhrmdg&(8Sd+E>J4e
z|JUDz*Dcw+4QEeST$C5zRwQ!vw&k;q>pp)cA7B8wa|76&yVg`)J*b1*c!ux;zq$AQ
z6F6qQ>iF6inHjl)#k$*tR~cX3`GRRh*P^6k8~@<b*Zo>gz5H<1;1A>X<w|?Q{LLTD
zf7!qNUh>`#jPcBG^nU+vmUy>XZfk)z9(zPT*d2Pmzs0cc)yCK1EPrPGXD~aJdw2fF
z&a>f5_Uf9t28sq-KB{_@Q1fZ_my~N+yJMbpCD-h^;&XN0%IhJ|Cx{rlv7SC-cbRc?
zZ{VYUVo6HMChkFgs%<Zx?@hDXdex_PzrhTyAM%Oi_YX-NFOB%Rx+wyWW7ao*6R-WF
z*i#<bAGJgEOnU977-x+Wi{0j2*Zq<8yUKf2{TI=+S0~l&pRHTY7dSQkw076}P$|Pz
z9anjn+GN{{K8xoa|MobfVt?z5j*hdk0h|`oWEao-I^)&#P{VJ34ke(P-+<dCXihd4
z%ky2iTg0!$FLN3zk2T-ZXL@)0-yU1>v7XydP;i#j0!DSA!zIP{H~WX}TG_w-nJ{Xo
zZoq93T13fKvN?u@$4!lVbR~P<e}+R(%~mYCuP$<|E$8OG6Fb`EEltjzE}VDeKf|Yc
zSiH-?Z`%><E17#Mv!kQ4Z^f7L2eqyD>p7B1P0X)P7;$ad^<~w0vBfdp|0$MrX>Ruk
zba4rmS|q>ZNT{%|prL)H5-_Gq9T@oSJL~p+fBT<7_6AvzY_UmO<f)~v*{Ycx^LC#3
zViM@PE2&FKX~tE7zYGlQ^N;M0um1L*q3;cO+2)4->zCh7ePE#2nQDP$Z)ZJvI%`XI
z-<qGB_w7~fsO<RRcqyWNMt_Se*&OHZOE&Tw%5&6Y?<{&-T=X_7^y<3ev@qnHFLVHR
z+F`Zf`{Ej&bLQ*0ti_++oi@@kI+fY=EOS=6jgRFnp=;OnUMNvryS9443-9Qt?~WIy
zZQJ^;d7*A@_FZ<Ts9V=}@wIH-y1qn~Gdnx(g%x4tvXN?@Zti&*i_(hERnGJ~_C7fD
zb=acfvx3I<JumUNl2JHRG&pwGvRN-*ceZjzd_9$Uwp#ttykF{O^*8sgP(F3%r{h<a
z%INtTb_@Eoi=VPz5qz3gv*1^g&D!%*<OAHN?)=pJisRFEyMS6pxv=M__=(cee(s%h
z*{+hD8y9B&XUJM^mw(g#*Rr%#uV$@URea|B-Cwu^byQ|F1V%$(Gz91v0{s7P0s!fv
B9_|1D

literal 0
HcmV?d00001

diff --git a/src/components/chatInformation.vue b/src/components/chatInformation.vue
index a665ec5..4959961 100644
--- a/src/components/chatInformation.vue
+++ b/src/components/chatInformation.vue
@@ -1,7 +1,31 @@
 <template>
-  <div id="chatInformation" class="chatInformation">
+  <div class="chatInformation">
     <h1>open chat</h1>
     <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
+    <div id="box">
+      <div class="informationBox">
+      <div class="picBoxBig"><div class="placeholderBig"><p>O P</p></div></div>
+      <div class="roomInformation">
+        <div class="roomName">Open Chat room</div>
+        <div class="users">2 members</div>
+      </div>
+      </div>
+      <div id="textMembers">Members</div>
+      <div class="contentBox">
+        <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
+        <div class="information">
+          <div class="userName">TechCrafter07</div>
+          <div class="status">Online</div>
+        </div>
+      </div>
+      <div class="contentBox">
+        <div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
+        <div class="information">
+          <div class="userName">Alban</div>
+          <div class="status">Online</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -21,21 +45,12 @@ export default {
   transform: translate(-50%, 0);
   top: 5rem;
   width: calc(100% - 8rem);
-  max-width: 30rem;
   height: calc(100% - 10rem);
   background-color: #1d1d1d;
   box-shadow: 6px 6px 20px #111;
   border-radius: 1rem;
   text-align: center;
 }
-.closeBtn{
-  position: absolute;
-  top: 0;
-  right: 0;
-  background-color: #0000;
-  box-shadow: none;
-}
-
 @media (max-width: 30rem) {
   .chatInformation{
     transform: unset;
@@ -45,4 +60,88 @@ export default {
     height: 100%;
   }
 }
+.closeBtn{
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: #0000;
+  box-shadow: none;
+}
+#box{
+  position: relative;
+  width: calc(100% - 2rem);
+  background-color: #2d2d2d;
+  padding: 0.001rem 1rem 1rem;
+  overflow: auto;
+  max-height: calc(100% - 8rem);
+}
+.informationBox{
+  margin-top: 0.2rem;
+  height: 5rem;
+  padding: 0.2rem;
+  border-bottom: 2px solid #9c9c9c;
+}
+.picBoxBig{
+  text-align: center;
+  background-color: #42b983 ;
+  width: 5rem;
+  height:5rem;
+  border-radius: 5rem;
+}
+.placeholderBig{
+  padding-top: 1rem;
+  margin-bottom: 1rem;
+}
+.roomInformation{
+  position: relative;
+  text-align: left;
+  margin-top: -4rem;
+  margin-left: 5.7rem;
+}
+.roomName{
+  color: white;
+  font-size: 1.8rem;
+}
+.users {
+  font-size: 1.2rem;
+  color: #9c9c9c;
+}
+#textMembers{
+  font-size: 1.5rem;
+  text-align: left;
+  margin-left: 0.2rem;
+  margin-top: 0.3rem;
+  margin-bottom: 0.2rem;
+}
+.contentBox{
+  margin-top: 0.2rem;
+  height: 3.2rem;
+  border-bottom: 2px solid #9c9c9c ;
+  padding: 0.2rem;
+  max-height: 48px;
+}
+.picBox{
+  text-align: center;
+  background-color: #00BCD4;
+  width: 3rem;
+  height:3rem;
+  border-radius: 2rem;
+}
+.picPlaceholder{
+  padding-top: 0.001rem;
+  margin-bottom: 1rem;
+}
+.information{
+  position: relative;
+  text-align: left;
+  margin-top: -2.4rem;
+  margin-left: 3.7rem;
+}
+.userName{
+  color: white;
+}
+.status{
+  font-size: 0.8rem;
+  color: #9c9c9c;
+}
 </style>
\ No newline at end of file