ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
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> </script>
<style>
</style>

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

@@ -1,22 +1,20 @@
<template> <template>
<div> <div>
<div v-if="editor"> <div class="editor" v-if="editor">
<menu-bar :editor="editor" /> <menu-bar class="editor__menu" :editor="editor" />
<editor-content :editor="editor" /> <editor-content class="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> </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 <div
class="collaboration-users__item" class="collaboration-users__item"
@@ -143,6 +141,32 @@ export default {
} }
</script> </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"> <style lang="scss">
/* A list of all available users */ /* A list of all available users */
.collaboration-users { .collaboration-users {