From e9c649813b83b1f2b25700add6e1e4da7f508087 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 2 Dec 2020 18:40:01 +0100
Subject: [PATCH] improve collab styling

---
 .../Examples/CollaborativeEditing/index.vue   | 120 ++++++++++++------
 docs/src/variables.scss                       |   2 +-
 2 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index a5cbfa3c..e8949c89 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -3,19 +3,28 @@
     <div class="editor" v-if="editor">
       <menu-bar class="editor__menu" :editor="editor" />
       <editor-content class="editor__content" :editor="editor" />
+      <div class="editor__users">
+        <div :class="`editor__status editor__status--${status}`">
+          <template v-if="status">
+            {{ status }},
+          </template>
+          {{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
+        </div>
+        <div class="editor__actions">
+          <button @click="setName">
+            Set Name
+          </button>
+          <button @click="updateCurrentUser({ name: getRandomName() })">
+            Random Name
+          </button>
+          <button @click="updateCurrentUser({ color: getRandomColor() })">
+            Random Color
+          </button>
+        </div>
+      </div>
     </div>
 
-    <button @click="setName">
-      Set Name
-    </button>
-    <button @click="updateCurrentUser({ name: getRandomName() })">
-      Random Name
-    </button>
-    <button @click="updateCurrentUser({ color: getRandomColor() })">
-      Random Color
-    </button>
-
-    <div class="collaboration-users">
+    <!-- <div class="collaboration-users">
       <div
         class="collaboration-users__item"
         :style="`background-color: ${otherUser.color}`"
@@ -24,14 +33,7 @@
       >
         {{ otherUser.name }}
       </div>
-    </div>
-
-    <div :class="`collaboration-status collaboration-status--${status}`">
-      <template v-if="status">
-        {{ status }},
-      </template>
-      {{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -170,6 +172,45 @@ export default {
       background-color: rgba(black, 0.1);
     }
   }
+
+  &__users {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.25rem 1rem;
+    border-top: 1px solid rgba(black, 0.1);
+  }
+
+  /* Some information about the status */
+  &__status {
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 5px;
+    margin-top: 1rem;
+    color: rgba(black, 0.5);
+
+    &::before {
+      content: ' ';
+      display: inline-block;
+      width: 0.5rem;
+      height: 0.5rem;
+      background: rgba(black, 0.5);
+      border-radius: 50%;
+      margin-right: 0.5rem;
+    }
+
+    &--connecting::before {
+      background: #FD9170;
+    }
+
+    &--connected::before {
+      background: #9DEF8F;
+    }
+  }
+
+  &__actions {
+
+  }
 }
 </style>
 
@@ -188,30 +229,29 @@ export default {
   }
 }
 
-/* Some information about the status */
-.collaboration-status {
-  border-radius: 5px;
-  margin-top: 1rem;
-  color: #616161;
+// .collaboration-status {
+//   border-radius: 5px;
+//   margin-top: 1rem;
+//   color: #616161;
 
-  &::before {
-    content: ' ';
-    display: inline-block;
-    width: 0.5rem;
-    height: 0.5rem;
-    background: #ccc;
-    border-radius: 50%;
-    margin-right: 0.5rem;
-  }
+//   &::before {
+//     content: ' ';
+//     display: inline-block;
+//     width: 0.5rem;
+//     height: 0.5rem;
+//     background: #ccc;
+//     border-radius: 50%;
+//     margin-right: 0.5rem;
+//   }
 
-  &--connecting::before {
-    background: #fd9170;
-  }
+//   &--connecting::before {
+//     background: #fd9170;
+//   }
 
-  &--connected::before {
-    background: #9DEF8F;
-  }
-}
+//   &--connected::before {
+//     background: #9DEF8F;
+//   }
+// }
 
 /* Give a remote user a caret */
 .collaboration-cursor__caret {
diff --git a/docs/src/variables.scss b/docs/src/variables.scss
index 27db5a61..e2ec6e9b 100644
--- a/docs/src/variables.scss
+++ b/docs/src/variables.scss
@@ -4,7 +4,7 @@ $colorText: rgba($colorWhite, 0.75);
 $colorGrey: #616161;
 $colorPurple: #A975FF;
 $colorRed: #FB5151;
-$colorOrange: #fd9170;
+$colorOrange: #FD9170;
 $colorYellow: #FFCB6B;
 $colorBlue: #68CEF8;
 $colorTeal: #80cbc4;