github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-14 20:43:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix remove resize cursor CSS for inputs (#9590)

Browse Source 
* 🐛 Remove cursor CSS for all inputs

- Restore the default cursor for the dashboard inputs.
- Make the numeric-input component from DS to work as expected.

* 🐛 Fix remove drag-to-change behaviour from old numeric-input
This commit is contained in:
Luis de Dios 2026-05-13 15:51:24 +02:00 committed by GitHub
parent bf880467b4
commit b125c2cabb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 10 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/resources/styles/common/base.scss
View File

@ -27,14 +27,6 @@ body {
width: 100vw;
height: 100vh;
overflow: hidden;
&.cursor-drag-scrub {
cursor: ew-resize !important;
* {
cursor: ew-resize !important;
}
}
}
#app {

8
frontend/resources/styles/common/refactor/basic-rules.scss
View File

@ -378,14 +378,6 @@
border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color);
&:not(:focus-within) {
cursor: ew-resize;
input {
cursor: ew-resize;
}
}
span,
label {
@extend %input-label;

94
frontend/src/app/main/ui/components/numeric_input.cljs
View File

@ -63,11 +63,6 @@
;; Last value input by the user we need to store to save on unmount
last-value* (mf/use-var value)
;; Drag scrubbing state
drag-state* (mf/use-ref :idle)
drag-start-x* (mf/use-ref 0)
drag-start-val* (mf/use-ref 0)
parse-value
(mf/use-fn
(mf/deps min-value max-value value nillable? default integer?)
@ -222,80 +217,15 @@
(mf/use-callback
(mf/deps on-focus select-on-focus?)
(fn [event]
(when-not (= :dragging (mf/ref-val drag-state*))
(reset! last-value* (parse-value))
(let [target (dom/get-target event)]
(when on-focus
(mf/set-ref-val! dirty-ref true)
(on-focus event))
(when select-on-focus?
(dom/select-text! target)
;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect
(.addEventListener target "mouseup" dom/prevent-default #js {:once true}))))))
on-scrub-pointer-down
(mf/use-fn
(mf/deps value value-str min-value max-value default)
(fn [event]
(let [disabled? (unchecked-get props "disabled")
node (mf/ref-val ref)
is-focused (and (some? node) (dom/active? node))]
(when-not (or disabled? is-focused (= :multiple value-str))
(let [client-x (.-clientX event)
start-val (or value default 0)]
(mf/set-ref-val! drag-state* :maybe-dragging)
(mf/set-ref-val! drag-start-x* client-x)
(mf/set-ref-val! drag-start-val* start-val)
(dom/capture-pointer event))))))
on-scrub-pointer-move
(mf/use-fn
(mf/deps apply-value update-input step-value min-value max-value)
(fn [event]
(let [state (mf/ref-val drag-state*)]
(when (or (= state :maybe-dragging) (= state :dragging))
(let [client-x (.-clientX event)
start-x (mf/ref-val drag-start-x*)
delta-x (- client-x start-x)]
(when (and (= state :maybe-dragging)
(>= (js/Math.abs delta-x) 3))
(mf/set-ref-val! drag-state* :dragging)
(dom/add-class! (dom/get-body) "cursor-drag-scrub"))
(when (= (mf/ref-val drag-state*) :dragging)
(let [effective-step (cond
(.-shiftKey event) (* step-value 10)
(.-ctrlKey event) (* step-value 0.1)
:else step-value)
steps (js/Math.round (/ delta-x 1))
new-val (+ (mf/ref-val drag-start-val*)
(* steps effective-step))
new-val (cond-> new-val
(d/num? min-value) (mth/max min-value)
(d/num? max-value) (mth/min max-value))]
(update-input new-val)
(apply-value event new-val))))))))
on-scrub-pointer-up
(mf/use-fn
(mf/deps ref)
(fn [event]
(let [state (mf/ref-val drag-state*)]
(when (= state :maybe-dragging)
(mf/set-ref-val! drag-state* :idle)
(dom/release-pointer event)
(when-let [node (mf/ref-val ref)]
(dom/focus! node)))
(when (= state :dragging)
(mf/set-ref-val! drag-state* :idle)
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")
(dom/release-pointer event)))))
on-scrub-lost-pointer-capture
(mf/use-fn
(fn [_event]
(mf/set-ref-val! drag-state* :idle)
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")))
(reset! last-value* (parse-value))
(let [target (dom/get-target event)]
(when on-focus
(mf/set-ref-val! dirty-ref true)
(on-focus event))
(when select-on-focus?
(dom/select-text! target)
;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect
(.addEventListener target "mouseup" dom/prevent-default #js {:once true})))))
props (-> (obj/clone props)
(obj/unset! "selectOnFocus")
@ -310,11 +240,7 @@
(obj/set! "title" title)
(obj/set! "onKeyDown" handle-key-down)
(obj/set! "onBlur" handle-blur)
(obj/set! "onFocus" handle-focus)
(obj/set! "onPointerDown" on-scrub-pointer-down)
(obj/set! "onPointerMove" on-scrub-pointer-move)
(obj/set! "onPointerUp" on-scrub-pointer-up)
(obj/set! "onLostPointerCapture" on-scrub-lost-pointer-capture))]
(obj/set! "onFocus" handle-focus))]
(mf/with-effect [value]
(when-let [input-node (mf/ref-val ref)]

3
frontend/src/app/main/ui/ds/controls/numeric_input.cljs
View File

@ -531,7 +531,6 @@
(when (and (= state :maybe-dragging)
(>= (js/Math.abs delta-x) 3))
(mf/set-ref-val! drag-state* :dragging)
(dom/add-class! (dom/get-body) "cursor-drag-scrub")
(when (fn? on-change-start)
(on-change-start)))
(when (= (mf/ref-val drag-state*) :dragging)
@ -559,7 +558,6 @@
(dom/focus! node)))
(when (= state :dragging)
(mf/set-ref-val! drag-state* :idle)
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")
(dom/release-pointer event)
(when (fn? on-change-end)
(on-change-end)))))))
@ -571,7 +569,6 @@
(when-not is-token-applied?
(let [was-dragging (= :dragging (mf/ref-val drag-state*))]
(mf/set-ref-val! drag-state* :idle)
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")
(when (and was-dragging (fn? on-change-end))
(on-change-end))))))

10
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View File

@ -196,11 +196,6 @@
display: flex;
align-items: center;
&:not(:focus-within) {
cursor: ew-resize;
}
block-size: $sz-32;
inline-size: px2rem(60);
padding-inline-start: var(--sp-xs);
@ -260,11 +255,6 @@
margin: var(--sp-xxs) 0;
padding: 0 0 0 px2rem(6);
color: var(--color-foreground-primary);
cursor: ew-resize;
&:focus {
cursor: text;
}
&[disabled] {
opacity: 0.5;