Skip to content

Commit

Permalink
[Editor] Change the resize cursors to bidirectional variants
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Snuffleupagus committed Aug 6, 2023
1 parent de1f31a commit 8bd45cb
Showing 1 changed file with 16 additions and 32 deletions.
48 changes: 16 additions & 32 deletions web/annotation_editor_layer_builder.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 8bd45cb

Please sign in to comment.