Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 16:00:19 -05:00
Code Issues Activity

🐛 Fix layout problem for editable selects

Browse source
This commit is contained in:
alonso.torres 2021-03-29 18:27:02 +02:00 committed by Andrey Antukh
parent cd7ad03cf0
commit 3ebc94ab8e
3 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -65,6 +65,7 @@
- Fix SVG not showing properties at code [Taiga #1437](https://tree.taiga.io/project/penpot/issue/1437)
- Fix shadows when exporting groups [Taiga #1495](https://tree.taiga.io/project/penpot/issue/1495)
- Fix drag-select when renaming layer text [Taiga #1307](https://tree.taiga.io/project/penpot/issue/1307)
- Fix layout problem for editable selects [Taiga #1488](https://tree.taiga.io/project/penpot/issue/1488)
### :arrow_up: Deps updates

14
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -420,6 +420,10 @@
position: absolute;
right: 0;
padding-right: 4px;
height: 100%;
display: flex;
align-items: center;
}
&.input-option {
@ -438,6 +442,11 @@
}
}
.custom-select-dropdown {
top: unset;
margin-bottom: 0;
}
&:hover {
border: 1px solid $color-gray-40;
}
@ -778,8 +787,8 @@
margin-left: 0.5rem;
& .custom-select-dropdown {
width: 56px;
min-width: 56px;
width: 5rem;
min-width: 5rem;
max-height: 10rem;
}
}
@ -1004,7 +1013,6 @@
cursor: pointer;
max-height: 16rem;
min-width: 6rem;
margin-top: 25px;
left: initial;
top: 0;
}

33
frontend/src/app/main/ui/components/editable_select.cljs
View file

@ -13,16 +13,19 @@
[app.common.uuid :as uuid]
[app.common.data :as d]
[app.util.dom :as dom]
[app.util.timers :as timers]
[app.main.ui.icons :as i]
[app.main.ui.components.dropdown :refer [dropdown]]))
(mf/defc editable-select [{:keys [value type options class on-change placeholder]}]
(let [state (mf/use-state {:id (uuid/next)
:is-open? false
:current-value value})
:current-value value
:top nil
:left nil
:bottom nil})
open-dropdown #(swap! state assoc :is-open? true)
close-dropdown #(swap! state assoc :is-open? false)
select-item (fn [value]
(fn [event]
(swap! state assoc :current-value value)
@ -38,7 +41,23 @@
(let [value (-> event dom/get-target dom/get-value)
value (or (d/parse-integer value) value)]
(swap! state assoc :current-value value)
(when on-change (on-change value))))]
(when on-change (on-change value))))
on-node-load
(fn [node]
;; There is a problem when changing the state in this callback that
;; produces the dropdown to close in the same event
(timers/schedule
#(when-let [bounds (when node (dom/get-bounding-rect node))]
(let [{window-height :height} (dom/get-window-size)
{:keys [left top height]} bounds
bottom (when (< (- window-height top) 300) (- window-height top))
top (when (>= (- window-height top) 300) (+ top height))]
(swap! state
assoc
:left left
:top top
:bottom bottom)))))]
(mf/use-effect
(mf/deps value)
@ -49,7 +68,8 @@
#(reset! state {:is-open? false
:current-value value}))
[:div.editable-select {:class class}
[:div.editable-select {:class class
:ref on-node-load}
[:input.input-text {:value (or (-> @state :current-value value->label) "")
:on-change handle-change-input
:placeholder placeholder
@ -58,7 +78,10 @@
[:& dropdown {:show (get @state :is-open? false)
:on-close close-dropdown}
[:ul.custom-select-dropdown
[:ul.custom-select-dropdown {:style {:position "fixed"
:top (:top @state)
:left (:left @state)
:bottom (:bottom @state)}}
(for [[index item] (map-indexed vector options)]
(cond
(= :separator item) [:hr {:key (str (:id @state) "-" index)}]