github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-01-13 21:23:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(cursor): cursor text being hidden when at start of line

Browse source 
Addiotionally, the cursor's font was not defined and therefore was styled in the browser's default font

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Erik Michelson 2023-03-24 17:57:42 +01:00
parent 3dbc07d25a
commit 336e621bc4
2 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/remote-cursor-marker.ts
View file

@ -18,7 +18,8 @@ export class RemoteCursorMarker implements LayerMarker {
private top: number,
private height: number,
private name: string,
private styleIndex: number
private styleIndex: number,
private viewWidth: number
) {}
draw(): HTMLElement {
@ -37,7 +38,11 @@ export class RemoteCursorMarker implements LayerMarker {
element.style.top = `${this.top}px`
element.style.height = `${this.height}px`
element.style.setProperty('--name', `"${this.name}"`)
element.className = `${styles.cursor} ${createCursorCssClass(this.styleIndex)}`
const cursorOnRightSide = this.left > this.viewWidth / 2
const cursorOnDownSide = this.top < 20
element.className = `${styles.cursor} ${createCursorCssClass(this.styleIndex)} ${
cursorOnRightSide ? styles.right : ''
} ${cursorOnDownSide ? styles.down : ''}`
}
eq(other: RemoteCursorMarker): boolean {
@ -66,7 +71,8 @@ export class RemoteCursorMarker implements LayerMarker {
absolutePosition.top - baseTop,
absolutePosition.bottom - absolutePosition.top,
displayName,
styleIndex
styleIndex,
rect.width
)
]
}

26
frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/style.module.scss
View file

@ -6,33 +6,51 @@
.cursorLayer {
--color: #868686;
.cursor {
border-left: 2px solid var(--color);
box-sizing: content-box;
& {
@import "../../../../../../global-styles/variables.module.scss";
font-family: $font-family-base;
}
&:hover {
&:before {
opacity: 1
}
}
&:before {
content: var(--name);
font-size: 0.8em;
background: var(--color);
position: absolute;
top: -1.2em;
right: 2px;
bottom: 1.5em;
color: white;
padding: 2px 5px;
height: 20px;
padding: 0 5px;
opacity: 0;
transition: opacity 0.1s;
white-space: nowrap;
left: -2px;
}
&.down:before {
bottom: auto;
top: 1.5em;
}
&.right:before {
left: auto;
right: 0;
}
}
}
.selectionLayer {
--color: #868686;
.cursor {
background-color: var(--color);
opacity: 0.5;