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 @@
+
+
+
+ {{ status }},
+
+ {{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
+
+
+
+
+
+
+
-
-
-
-
-
+
@@ -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 {
+
+ }
}
@@ -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;