From da2ce1a53e75b469ffd4517ad43fc53a27797632 Mon Sep 17 00:00:00 2001 From: Kimo Knowles Date: Wed, 11 Sep 2024 01:24:33 +0200 Subject: [PATCH] [nested-grid] Consume as much vertical flex space as possible --- CHANGELOG.md | 8 +- src/re_com/nested_grid.cljs | 252 ++++++++++++++++++------------------ 2 files changed, 136 insertions(+), 124 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 79bec1ac..39db3203 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,14 @@ ## N.N.N (YYYY-MM-DD) -> Committed but unreleased changes are put here, at the top. Older releases are detailed chronologically below. +> Committed but unreleased changes are put here, at the top. Older releases are detailed chronologically below. +## 2.21.28 (2024-09-09) + +#### Changed + +- `nested-grid` - now maximizes its vertical flex space by default. + ## 2.21.27 (2024-09-05) diff --git a/src/re_com/nested_grid.cljs b/src/re_com/nested_grid.cljs index 2047ec33..9cb1a28a 100644 --- a/src/re_com/nested_grid.cljs +++ b/src/re_com/nested_grid.cljs @@ -894,131 +894,138 @@ :drag drag :dimension :column :path path})])]) - row-header-cells (for [path row-paths - :let [edge (cond-> #{} - (start-branch? path row-paths) (conj :top) - (end-branch? path row-paths) (conj :bottom) - (= 1 (count path)) (conj :left) - (= (count path) row-depth) (conj :right)) - state {:edge edge - :row-path path - :path path - :header-spec (last path) - :show? show?} - props (merge {:theme (update theme :user-variables - conj (theme/with-state state)) - :selection? selection?} - state)]] - ^{:key [::row (or path (gensym))]} - [:div {:style {:grid-row-start (path->grid-line-name path) - :grid-row-end (str "span " (cond-> path - :do (header-cross-span showing-row-paths) - :do dec - (not show?) dec)) - :grid-column-start (count path) - :grid-column-end (str "span " (cond-> path - :do (header-main-span showing-row-paths) - (not show?) dec)) - :position "relative"}} - (u/part row-header-wrapper - (merge props {:children [(u/part row-header props :default row-header-part)]}) - :default row-header-wrapper-part) - (when (and resize-rows? show?) - [resize-button {:mouse-down-x mouse-down-x - :last-mouse-x last-mouse-x - :mouse-x mouse-x - :resize-handler resize-handler - :resize-columns? resize-columns? - :on-resize resize-column! - :drag drag - :dimension :row - :path path}])]) - header-spacer-cells (for [y (range column-depth) - x (range row-depth) - :let [props {:theme theme - :x x - :y y - :header-spacer header-spacer - :edge (cond-> #{} - (zero? y) (conj :top) - (zero? x) (conj :left) - (= y (dec column-depth)) (conj :bottom) - (= x (dec row-depth)) (conj :right))}]] - (u/part header-spacer-wrapper props :default header-spacer-wrapper-part)) - cells (if-not theme-cells? - (for [row-path showing-row-paths - column-path showing-column-paths - :let [value (when cell-value (cell-value {:column-path column-path :row-path row-path}))]] - [cell {:style {:grid-column (path->grid-line-name column-path) - :grid-row (path->grid-line-name row-path)} - :row-path row-path - :column-path column-path - :value value}]) - (for [row-path showing-row-paths - column-path showing-column-paths - :let [edge (cond-> #{} - (= column-path (first showing-column-paths)) (conj :left) - (= column-path (last showing-column-paths)) (conj :right) - (= row-path (first showing-row-paths)) (conj :top) - (= row-path (last showing-row-paths)) (conj :bottom) - (cell-section-left? column-path) (conj :column-section-left) - (cell-section-right? column-path) (conj :column-section-right)) - value (when cell-value (cell-value {:column-path column-path - :row-path row-path})) - state {:edge edge - :column-path column-path - :row-path row-path - :value value} - theme (update theme :user-variables - conj (theme/with-state state)) - props (merge {:cell cell - :theme theme} - state) - cell-props (merge {:value value - :theme theme} - state)]] - (u/part cell-wrapper - (merge props {:children [(u/part cell cell-props :default cell-part)]}) - :default cell-wrapper-part))) - zebra-stripes (for [i (filter even? (range 1 (inc (count row-paths))))] - ^{:key [::zebra-stripe i]} - [:div - (themed ::zebra-stripe - {:style - {:grid-column-start 1 - :grid-column-end "end" - :grid-row i - :background-color "#999" - :opacity 0.05 - :z-index 2 - :pointer-events "none"}})]) - box-selector [selection-part - {:drag drag - :grid-columns cell-grid-columns - :grid-rows cell-grid-rows - :selection? selection? - :mouse-x mouse-x - :mouse-y mouse-y - :mouse-down-x mouse-down-x - :mouse-down-y mouse-down-y - :selection-grid-spec selection-grid-spec}] + row-header-cells (for [path row-paths + :let [edge (cond-> #{} + (start-branch? path row-paths) (conj :top) + (end-branch? path row-paths) (conj :bottom) + (= 1 (count path)) (conj :left) + (= (count path) row-depth) (conj :right)) + state {:edge edge + :row-path path + :path path + :header-spec (last path) + :show? show?} + props (merge {:theme (update theme :user-variables + conj (theme/with-state state)) + :selection? selection?} + state)]] + ^{:key [::row (or path (gensym))]} + [:div {:style {:grid-row-start (path->grid-line-name path) + :grid-row-end (str "span " (cond-> path + :do (header-cross-span showing-row-paths) + :do dec + (not show?) dec)) + :grid-column-start (count path) + :grid-column-end (str "span " (cond-> path + :do (header-main-span showing-row-paths) + (not show?) dec)) + :position "relative"}} + (u/part row-header-wrapper + (merge props {:children [(u/part row-header props :default row-header-part)]}) + :default row-header-wrapper-part) + (when (and resize-rows? show?) + [resize-button {:mouse-down-x mouse-down-x + :last-mouse-x last-mouse-x + :mouse-x mouse-x + :resize-handler resize-handler + :resize-columns? resize-columns? + :on-resize resize-column! + :drag drag + :dimension :row + :path path}])]) + header-spacer-cells (for [y (range column-depth) + x (range row-depth) + :let [props {:theme theme + :x x + :y y + :header-spacer header-spacer + :edge (cond-> #{} + (zero? y) (conj :top) + (zero? x) (conj :left) + (= y (dec column-depth)) (conj :bottom) + (= x (dec row-depth)) (conj :right))}]] + (u/part header-spacer-wrapper props :default header-spacer-wrapper-part)) + cells (if-not theme-cells? + (for [row-path showing-row-paths + column-path showing-column-paths + :let [value (when cell-value (cell-value {:column-path column-path :row-path row-path}))]] + [cell {:style {:grid-column (path->grid-line-name column-path) + :grid-row (path->grid-line-name row-path)} + :row-path row-path + :column-path column-path + :value value}]) + (for [row-path showing-row-paths + column-path showing-column-paths + :let [edge (cond-> #{} + (= column-path (first showing-column-paths)) (conj :left) + (= column-path (last showing-column-paths)) (conj :right) + (= row-path (first showing-row-paths)) (conj :top) + (= row-path (last showing-row-paths)) (conj :bottom) + (cell-section-left? column-path) (conj :column-section-left) + (cell-section-right? column-path) (conj :column-section-right)) + value (when cell-value (cell-value {:column-path column-path + :row-path row-path})) + state {:edge edge + :column-path column-path + :row-path row-path + :value value} + theme (update theme :user-variables + conj (theme/with-state state)) + props (merge {:cell cell + :theme theme} + state) + cell-props (merge {:value value + :theme theme} + state)]] + (u/part cell-wrapper + (merge props {:children [(u/part cell cell-props :default cell-part)]}) + :default cell-wrapper-part))) + zebra-stripes (for [i (filter even? (range 1 (inc (count row-paths))))] + ^{:key [::zebra-stripe i]} + [:div + (themed ::zebra-stripe + {:style + {:grid-column-start 1 + :grid-column-end "end" + :grid-row i + :background-color "#999" + :opacity 0.05 + :z-index 2 + :pointer-events "none"}})]) + box-selector [selection-part + {:drag drag + :grid-columns cell-grid-columns + :grid-rows cell-grid-rows + :selection? selection? + :mouse-x mouse-x + :mouse-y mouse-y + :mouse-down-x mouse-down-x + :mouse-down-y mouse-down-y + :selection-grid-spec selection-grid-spec}] ;; FIXME This changes on different browsers - do we need to get it dynamically? ;; FIXME We should use :scrollbar-gutter (chrome>=94) - native-scrollbar-width 10 - native-width (apply + - native-scrollbar-width - showing-column-widths) - native-height (apply + - native-scrollbar-width - showing-row-heights)] - [:div - (themed ::wrapper {}) + native-scrollbar-width 10 + native-width (apply + + native-scrollbar-width + showing-column-widths) + native-height (apply + + native-scrollbar-width + showing-row-heights) + column-header-grid-height (apply + max-column-heights) + content-height (apply + (when show-export-button? 25) column-header-grid-height showing-row-heights)] + + [:<> + #_(themed ::wrapper {:style {:flex "1 1 0px"}}) [:div {:on-mouse-enter #(reset! hover? true) :on-mouse-leave #(reset! hover? false) :style - {:max-width max-width - :overflow :hidden - :display "grid" + {:max-width max-width + :overflow :hidden + :display :grid + + :min-height column-header-grid-height + :max-height content-height + :flex 1 :grid-template-columns (grid-template [(px (apply + max-row-widths)) (if-not max-width (str "minmax(0, " (+ 2 native-width) "px)") @@ -1030,9 +1037,8 @@ "px" ""))))))]) :grid-template-rows (grid-template (into (if show-export-button? ["25px"] ["0px"]) - [showing-column-widths - (px (apply + max-column-heights)) - (px (+ native-height 4))]))}} + [(px (apply + max-column-heights)) + "1fr"]))}} [:div] control-panel (into [:div (themed ::header-spacer-grid-container