mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 15:49:23 +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 15:40:42 +01:00
parent ae3e36e2ce
commit 041f377c97
2 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
View File

@ -134,7 +134,3 @@ export default {
},
}
</script>
<style>
</style>

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

@ -1,22 +1,20 @@
<template>
<div>
<div v-if="editor">
<menu-bar :editor="editor" />
<editor-content :editor="editor" />
<br>
<button @click="setName">
Set Name
</button>
<button @click="updateCurrentUser({ name: getRandomName() })">
Random Name
</button>
<button @click="updateCurrentUser({ color: getRandomColor() })">
Random Color
</button>
<div class="editor" v-if="editor">
<menu-bar class="editor__menu" :editor="editor" />
<editor-content class="editor__content" :editor="editor" />
</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__item"
@ -143,6 +141,32 @@ export default {
}
</script>
<style lang="scss" scoped>
.editor {
background-color: white;
border: 1px solid rgba(black, 0.1);
border-radius: 0.5rem;
margin-bottom: 1rem;
&__menu {
display: flex;
flex-wrap: wrap;
padding: 0.25rem;
border-bottom: 1px solid rgba(black, 0.1);
}
&__content {
padding: 1rem;
max-height: 30rem;
overflow: auto;
&::-webkit-scrollbar-thumb {
background-color: rgba(black, 0.1);
}
}
}
</style>
<style lang="scss">
/* A list of all available users */
.collaboration-users {