hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-23 03:22:19 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Improved collaborative cursor hover experience (#5376)

Browse Source 
Signed-off-by: Omkar Dange <aumkardange@gmail.com>
This commit is contained in:
Aumkar 2024-04-17 02:38:12 +05:30 committed by GitHub
parent 8e9b23747f
commit 0b3cd8162c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/text-editor/src/components/editor/collaboration.ts
View File

@ -22,12 +22,16 @@ export const renderCursor = (user: CollaborationUser): HTMLElement => {
const color = getPlatformColor(user.color, false) const color = getPlatformColor(user.color, false)
const cursor = document.createElement('span') const cursor = document.createElement('span')
cursor.classList.add('collaboration-cursor')
cursor.classList.add('collaboration-cursor__caret')
cursor.setAttribute('style', `border-color: ${color}`) cursor.setAttribute('style', `border-color: ${color}`)
cursor.addEventListener('mousemove', () => { const caret = document.createElement('div')
showTooltip(undefined, cursor, 'top', CollaborationUserPopup, { user }) caret.classList.add('collaboration-cursor__caret')
caret.setAttribute('style', `border-color: ${color}`)
cursor.appendChild(caret)
caret.addEventListener('mousemove', () => {
showTooltip(undefined, caret, 'top', CollaborationUserPopup, { user })
}) })
return cursor return cursor

16
packages/theme/styles/_text-editor.scss
View File

@ -145,13 +145,25 @@
} }
/* Give a remote user a caret */ /* Give a remote user a caret */
.collaboration-cursor__caret { .collaboration-cursor {
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-right: 1px solid transparent; border-right: 1px solid transparent;
margin-left: -1px; margin-left: -1px;
margin-right: -1px; margin-right: -1px;
position: relative; position: relative;
word-break: normal; word-break: normal;
cursor: text;
}
.collaboration-cursor__caret {
display: flex;
justify-content: center;
cursor: text;
height: 110%;
width: 8px;
top: -2px;
left: -4px;
position: absolute;
&::after { &::after {
content: ''; content: '';
@ -160,8 +172,6 @@
border-style: solid; border-style: solid;
width: 0; width: 0;
height: 0; height: 0;
top: -2px;
left: -4px;
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top-width: 4px; border-top-width: 4px;