mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 14:13:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improve collab styling

Browse Source
This commit is contained in:
Philipp Kühn 2020-12-02 18:40:01 +01:00
parent d0d66e23aa
commit e9c649813b
2 changed files with 81 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@ -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 {

2
docs/src/variables.scss
View File

@ -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;