mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 22:36:14 +08:00
Code Issues Actions 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"> <div class="editor" v-if="editor">
<menu-bar class="editor__menu" :editor="editor" /> <menu-bar class="editor__menu" :editor="editor" />
<editor-content class="editor__content" :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> </div>
<button @click="setName"> <!-- <div class="collaboration-users">
Set Name
</button>
<button @click="updateCurrentUser({ name: getRandomName() })">
Random Name
</button>
<button @click="updateCurrentUser({ color: getRandomColor() })">
Random Color
</button>
<div class="collaboration-users">
<div <div
class="collaboration-users__item" class="collaboration-users__item"
:style="`background-color: ${otherUser.color}`" :style="`background-color: ${otherUser.color}`"
@ -24,14 +33,7 @@
> >
{{ otherUser.name }} {{ otherUser.name }}
</div> </div>
</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> </template>
@ -170,6 +172,45 @@ export default {
background-color: rgba(black, 0.1); 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> </style>
@ -188,30 +229,29 @@ export default {
} }
} }
/* Some information about the status */ // .collaboration-status {
.collaboration-status { // border-radius: 5px;
border-radius: 5px; // margin-top: 1rem;
margin-top: 1rem; // color: #616161;
color: #616161;
&::before { // &::before {
content: ' '; // content: ' ';
display: inline-block; // display: inline-block;
width: 0.5rem; // width: 0.5rem;
height: 0.5rem; // height: 0.5rem;
background: #ccc; // background: #ccc;
border-radius: 50%; // border-radius: 50%;
margin-right: 0.5rem; // margin-right: 0.5rem;
} // }
&--connecting::before { // &--connecting::before {
background: #fd9170; // background: #fd9170;
} // }
&--connected::before { // &--connected::before {
background: #9DEF8F; // background: #9DEF8F;
} // }
} // }
/* Give a remote user a caret */ /* Give a remote user a caret */
.collaboration-cursor__caret { .collaboration-cursor__caret {

2
docs/src/variables.scss
View File

@ -4,7 +4,7 @@ $colorText: rgba($colorWhite, 0.75);
$colorGrey: #616161; $colorGrey: #616161;
$colorPurple: #A975FF; $colorPurple: #A975FF;
$colorRed: #FB5151; $colorRed: #FB5151;
$colorOrange: #fd9170; $colorOrange: #FD9170;
$colorYellow: #FFCB6B; $colorYellow: #FFCB6B;
$colorBlue: #68CEF8; $colorBlue: #68CEF8;
$colorTeal: #80cbc4; $colorTeal: #80cbc4;