Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Editor] Change the resize cursors to bidirectional variants

Browse Source 
When resizing an editor we're currently using unidirectional cursors, please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Given that editors can (generally) be resized to become either smaller or larger, it seems overall more appropriate to use bidirectional cursors to make this clearer to the user.

Note that as mentioned in the MDN article some environments, which seems to apply to e.g. Windows 11, doesn't differentiate between the two cursor formats and simply use bidirectional ones unconditionally.

One additional benefit of these changes is that the relevant CSS rules become slightly more compact.
This commit is contained in:
Jonas Jenwald 2023-08-06 19:14:06 +02:00
parent de1f31aae8
commit 8bd45cb260
1 changed files with 16 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/annotation_editor_layer_builder.css
View File

@ -207,81 +207,65 @@
}
.annotationEditorLayer .resizer.topLeft {
cursor: nw-resize;
cursor: nwse-resize;
top: var(--resizer-shift);
left: var(--resizer-shift);
}
.annotationEditorLayer .resizer.topMiddle {
cursor: n-resize;
cursor: ns-resize;
top: var(--resizer-shift);
left: calc(50% + var(--resizer-shift));
}
.annotationEditorLayer .resizer.topRight {
cursor: ne-resize;
cursor: nesw-resize;
top: var(--resizer-shift);
right: var(--resizer-shift);
}
.annotationEditorLayer .resizer.middleRight {
cursor: e-resize;
cursor: ew-resize;
top: calc(50% + var(--resizer-shift));
right: var(--resizer-shift);
}
.annotationEditorLayer .resizer.bottomRight {
cursor: se-resize;
cursor: nwse-resize;
bottom: var(--resizer-shift);
right: var(--resizer-shift);
}
.annotationEditorLayer .resizer.bottomMiddle {
cursor: s-resize;
cursor: ns-resize;
bottom: var(--resizer-shift);
left: calc(50% + var(--resizer-shift));
}
.annotationEditorLayer .resizer.bottomLeft {
cursor: sw-resize;
cursor: nesw-resize;
bottom: var(--resizer-shift);
left: var(--resizer-shift);
}
.annotationEditorLayer .resizer.middleLeft {
cursor: w-resize;
cursor: ew-resize;
top: calc(50% + var(--resizer-shift));
left: var(--resizer-shift);
}
.annotationEditorLayer.resizingTopLeft {
cursor: nw-resize;
.annotationEditorLayer:is(.resizingTopLeft, .resizingBottomRight) {
cursor: nwse-resize;
}
.annotationEditorLayer.resizingTopMiddle {
cursor: n-resize;
.annotationEditorLayer:is(.resizingTopMiddle, .resizingBottomMiddle) {
cursor: ns-resize;
}
.annotationEditorLayer.resizingTopRight {
cursor: ne-resize;
.annotationEditorLayer:is(.resizingTopRight, .resizingBottomLeft) {
cursor: nesw-resize;
}
.annotationEditorLayer.resizingMiddleRight {
cursor: e-resize;
}
.annotationEditorLayer.resizingBottomRight {
cursor: se-resize;
}
.annotationEditorLayer.resizingBottomMiddle {
cursor: s-resize;
}
.annotationEditorLayer.resizingBottomLeft {
cursor: sw-resize;
}
.annotationEditorLayer.resizingMiddleLeft {
cursor: w-resize;
.annotationEditorLayer:is(.resizingMiddleRight, .resizingMiddleLeft) {
cursor: ew-resize;
}