From 861a8a48f7e8ee3d738be79a9108a7aee48b084c Mon Sep 17 00:00:00 2001 From: RJ Sheperd Date: Tue, 11 Aug 2026 12:06:16 -0700 Subject: [PATCH 1/3] BHP1-1296 Add search with no-results message to Guided workflow multi-select --- .../resources/public/css/styles.css | 10 ++ .../src/cljs/behave/components/inputs.cljs | 145 ++++++++++-------- 2 files changed, 92 insertions(+), 63 deletions(-) diff --git a/bases/behave_components/resources/public/css/styles.css b/bases/behave_components/resources/public/css/styles.css index 754f56fd..ef80814e 100644 --- a/bases/behave_components/resources/public/css/styles.css +++ b/bases/behave_components/resources/public/css/styles.css @@ -2457,6 +2457,16 @@ p { border: 1px solid var(--medblue-2); } +.multi-select__search { + padding: 0 20px 10px 20px; +} + +.multi-select__no-results { + padding: 0 20px 15px 20px; + color: var(--gray-4); + font-style: italic; +} + .multi-select__color-tags__tag, .multi-select__option__color-tag { diff --git a/bases/behave_components/src/cljs/behave/components/inputs.cljs b/bases/behave_components/src/cljs/behave/components/inputs.cljs index 73f0b761..892e72f5 100644 --- a/bases/behave_components/src/cljs/behave/components/inputs.cljs +++ b/bases/behave_components/src/cljs/behave/components/inputs.cljs @@ -336,6 +336,14 @@ :size "small" :on-click #(reset! selected-tag nil)}]])]) +(defn- matches-search? + "Whether an option's label contains `search`, case-insensitively." + [search {:keys [label]}] + (str/includes? (str/lower-case label) (str/lower-case search))) + +(defn- no-results-message [] + [:div.multi-select__no-results "No Results"]) + (defmethod multi-select-input :no-search [{:keys [input-label prompt1 prompt2 prompt3 expand-options-button-label collapse-options-button-label options filter-tags color-tags disable-multi-valued-input?]}] @@ -345,64 +353,76 @@ [label value on-deselect])) (into (sorted-set)))) show-options? (r/atom false) - selected-tag (r/atom nil)] - [:div.multi-select - (when @show-options? - [:<> - [:div.multi-select__prompt prompt1] - (when filter-tags - [filter-tag-buttons filter-tags selected-tag]) - (when (seq color-tags) - [:div.multi-select__color-tags - (for [{:keys [label color]} color-tags] - ^{:key color} - [:div {:class "multi-select__color-tags__tag" - :style {:border-color color}} - label])]) - [:div.multi-select__options - (doall - (for [{:keys [label - value - on-select - on-deselect - color-tag]} (cond->> options - (and filter-tags @selected-tag) - (filter (fn [id] (contains? (:tags id) @selected-tag))))] - ^{:key label} - (let [selection [label value on-deselect on-select]] - [multi-select-option {:selected? (contains? @selections selection) - :color-tag color-tag - :label label - :on-click #(multi-select-on-select selections selection disable-multi-valued-input?)}])))]]) - [:div.multi-select__selections - [:div.multi-select__selections__header - [:div (gstring/format "Selected %s" input-label)] - [:div.multi-select__selections__header__button (if (false? @show-options?) - [button {:label expand-options-button-label - :variant "primary" - :icon-name "plus" - :size "small" - :on-click #(reset! show-options? (not @show-options?))}] - [button {:label collapse-options-button-label - :variant "highlight" - :icon-name "arrow" - :size "small" - :on-click #(reset! show-options? (not @show-options?))}])]] - [:div.multi-select__selections__description (if (false? @show-options?) prompt2 prompt3)] - (when (false? @show-options?) - [:div.multi-select__selections__body (for [[label value on-deselect color-tag :as selection] @selections] - [:div - (cond-> {:class ["multi-select__option--selected" - (when color-tag "multi-select__option__color-tag")] - :style {} - :on-click #(do - (reset! selections (disj @selections selection)) - (when on-deselect (on-deselect value)))} - color-tag - (assoc-in [:style :border-color] (:color color-tag))) - [:div.multi-select__option__icon--minus - [icon "minus"]] - label])])]])) + selected-tag (r/atom nil) + search (r/atom "")] + (let [visible-options (cond->> options + (and filter-tags @selected-tag) + (filter #(contains? (:tags %) @selected-tag)) + + (seq @search) + (filter (partial matches-search? @search)))] + [:div.multi-select + (when @show-options? + [:<> + [:div.multi-select__prompt prompt1] + [:div.multi-select__search + [text-input {:label "Search" + :on-change #(reset! search (input-value %)) + :value-atom search}]] + (when filter-tags + [filter-tag-buttons filter-tags selected-tag]) + (when (seq color-tags) + [:div.multi-select__color-tags + (for [{:keys [label color]} color-tags] + ^{:key color} + [:div {:class "multi-select__color-tags__tag" + :style {:border-color color}} + label])]) + (if (and (seq @search) (empty? visible-options)) + [no-results-message] + [:div.multi-select__options + (doall + (for [{:keys [label + value + on-select + on-deselect + color-tag]} visible-options] + ^{:key label} + (let [selection [label value on-deselect on-select]] + [multi-select-option {:selected? (contains? @selections selection) + :color-tag color-tag + :label label + :on-click #(multi-select-on-select selections selection disable-multi-valued-input?)}])))])]) + [:div.multi-select__selections + [:div.multi-select__selections__header + [:div (gstring/format "Selected %s" input-label)] + [:div.multi-select__selections__header__button (if (false? @show-options?) + [button {:label expand-options-button-label + :variant "primary" + :icon-name "plus" + :size "small" + :on-click #(reset! show-options? (not @show-options?))}] + [button {:label collapse-options-button-label + :variant "highlight" + :icon-name "arrow" + :size "small" + :on-click #(do (reset! show-options? (not @show-options?)) + (reset! search ""))}])]] + [:div.multi-select__selections__description (if (false? @show-options?) prompt2 prompt3)] + (when (false? @show-options?) + [:div.multi-select__selections__body (for [[label value on-deselect color-tag :as selection] @selections] + [:div + (cond-> {:class ["multi-select__option--selected" + (when color-tag "multi-select__option__color-tag")] + :style {} + :on-click #(do + (reset! selections (disj @selections selection)) + (when on-deselect (on-deselect value)))} + color-tag + (assoc-in [:style :border-color] (:color color-tag))) + [:div.multi-select__option__icon--minus + [icon "minus"]] + label])])]]))) (defmethod multi-select-input :search [{:keys [input-label prompt1 expand-options-button-label collapse-options-button-label options filter-tags color-tags @@ -468,13 +488,12 @@ (multi-select-on-select selections selection disable-multi-valued-input?)) (reset! search nil)))) :on-change #(do (reset! search (input-value %)) - (reset! filtered-options (filter (fn [the-option] - (str/includes? (str/lower-case (:label the-option)) - (str/lower-case @search))) - options))) + (reset! filtered-options (filter (partial matches-search? @search) options))) :value-atom search}]] (when (and @show-options? filter-tags) [filter-tag-buttons filter-tags selected-tag]) + (when (and (seq @search) (empty? visible-options)) + [no-results-message]) (when (or (seq @search) @show-options?) ;; --searching enables the first-option highlight that previews ;; what pressing Enter will select @@ -493,4 +512,4 @@ :label label :on-click #(do (multi-select-on-select selections selection disable-multi-valued-input?) - (reset! search nil))}])))])]))) + (reset! search nil))}])))])]))) \ No newline at end of file From 1afe92c239293f9157fc7091ac658ea2f3af78f9 Mon Sep 17 00:00:00 2001 From: RJ Sheperd Date: Thu, 13 Aug 2026 11:23:28 -0700 Subject: [PATCH 2/3] BHP1-1296 - Fix CSS to show selected fuel models, pin nav to bottom --- .../resources/public/css/styles.css | 25 ++++++++++++------ .../behave/resources/public/css/app-style.css | 26 +++++++++++++++++++ 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/bases/behave_components/resources/public/css/styles.css b/bases/behave_components/resources/public/css/styles.css index ef80814e..43c48c00 100644 --- a/bases/behave_components/resources/public/css/styles.css +++ b/bases/behave_components/resources/public/css/styles.css @@ -2333,8 +2333,8 @@ p { .multi-select__options { overflow-y: scroll; - height: 230px; - margin-top: 10px; + max-height: 100px; + margin-top: 6px; margin-bottom: 7px; padding: 0px 12px 0px 12px; } @@ -2437,8 +2437,8 @@ p { .multi-select__tags { display: flex; flex-direction: row; - padding-top: 15px; - padding-bottom: 15px; + padding-top: 8px; + padding-bottom: 8px; padding-left: 20px; } @@ -2458,7 +2458,16 @@ p { } .multi-select__search { - padding: 0 20px 10px 20px; + padding: 0 20px 4px 20px; +} + +.multi-select__search .input-text__input { + height: 28px; +} + +.multi-select .multi-select__selections__body { + max-height: 72px; + overflow-y: auto; } .multi-select__no-results { @@ -2478,8 +2487,8 @@ p { } .multi-select__color-tags { - padding: 10px; - margin: 0px 20px 15px 20px; + padding: 6px; + margin: 0px 20px 8px 20px; display: flex; flex-direction: row; border: 1px solid var(--darkblue-4); @@ -2488,7 +2497,7 @@ p { .multi-select__color-tags__tag { margin-left: 10px; - padding: 10px; + padding: 6px; } /* - End Multi Select - */ diff --git a/projects/behave/resources/public/css/app-style.css b/projects/behave/resources/public/css/app-style.css index 67ce19ba..d8810fe1 100644 --- a/projects/behave/resources/public/css/app-style.css +++ b/projects/behave/resources/public/css/app-style.css @@ -280,6 +280,8 @@ body { border-radius: 8px 8px 0px 0px; background-color: var(--white); box-shadow: 0px 2px 3px var(--gray-4); + display: flex; + flex-direction: column; } .working-area--sidebar-hidden { @@ -462,6 +464,25 @@ body { background-color: var(--white); } +/* Fill the working-area panel so .wizard-navigation can pin to its bottom */ +.working-area .accordion { + flex: 1; +} + +.working-area .wizard, +.working-area .wizard-page { + display: flex; + flex-direction: column; + flex: 1; +} + +/* Guided options should grow 1:1 with the viewport */ +.multi-select > .multi-select__options { + max-height: none; + height: calc(100vh - 900px); + min-height: 100px; +} + .wizard-header { margin-bottom: 15px; } @@ -574,6 +595,11 @@ body { justify-content: space-between; padding: 10px; background-color: var(--white); + position: sticky; + bottom: 0; + z-index: 5; + border-top: 1px solid var(--gray-2); + margin-top: auto; } .wizard-navigation--next-only { From 9f60f3cbb27cc3ed5d18a9677f5563d0d89857d7 Mon Sep 17 00:00:00 2001 From: RJ Sheperd Date: Mon, 17 Aug 2026 13:37:47 -0700 Subject: [PATCH 3/3] BHP1-1296 Unify Guided / Standard multi-selects --- .../resources/public/css/styles.css | 28 +- .../src/cljs/behave/components/inputs.cljs | 274 ++++++------------ .../behave/resources/public/css/app-style.css | 2 +- .../cljs/behave/components/input_group.cljs | 23 +- 4 files changed, 112 insertions(+), 215 deletions(-) diff --git a/bases/behave_components/resources/public/css/styles.css b/bases/behave_components/resources/public/css/styles.css index 43c48c00..58f105e2 100644 --- a/bases/behave_components/resources/public/css/styles.css +++ b/bases/behave_components/resources/public/css/styles.css @@ -2321,16 +2321,16 @@ p { width: 100%; } -.multi-select--search { - width: 100%; -} - .multi-select__prompt { padding: 12px; font-size: var(--font-size-14); color: var(--gray-7); } +.multi-select__search { + padding: 0px 20px 4px 20px; +} + .multi-select__options { overflow-y: scroll; max-height: 100px; @@ -2354,10 +2354,6 @@ p { background-color: var(--gray-2); } -.multi-select-search { - margin-right: 10px; -} - .multi-select__option__icon--minus, .multi-select__option__icon--plus { position: relative; @@ -2414,13 +2410,10 @@ p { } .multi-select__selections__body { - padding: 10px 0px 0px 0px; -} - -.multi-select-search__selections__body { display: flex; flex-direction: row; flex-wrap: wrap; + gap: 0px 10px; padding: 10px 0px 0px 0px; } @@ -2428,8 +2421,7 @@ p { top: 0px; } -.multi-select .button--selected, -.multi-select--search .button--selected { +.multi-select .button--selected { color: var(--white); background-color: var(--medblue-2); } @@ -2457,14 +2449,6 @@ p { border: 1px solid var(--medblue-2); } -.multi-select__search { - padding: 0 20px 4px 20px; -} - -.multi-select__search .input-text__input { - height: 28px; -} - .multi-select .multi-select__selections__body { max-height: 72px; overflow-y: auto; diff --git a/bases/behave_components/src/cljs/behave/components/inputs.cljs b/bases/behave_components/src/cljs/behave/components/inputs.cljs index 892e72f5..e099619c 100644 --- a/bases/behave_components/src/cljs/behave/components/inputs.cljs +++ b/bases/behave_components/src/cljs/behave/components/inputs.cljs @@ -272,47 +272,25 @@ [icon (if selected? "minus" "plus")]] label]) -(defn- multi-select-on-select - [selections-atom selection disable-multi-valued-input?] - (let [[_label value on-deselect on-select] selection] - (if (contains? @selections-atom selection) - (do - (reset! selections-atom (disj @selections-atom selection)) - (when on-deselect (on-deselect value))) - (if disable-multi-valued-input? - (do - (when on-deselect (doseq [[_ value on-deselect] @selections-atom] (on-deselect value))) - (when on-select (on-select value)) - (reset! selections-atom (into (sorted-set) [selection]))) - (do - (when on-select (on-select value)) - (reset! selections-atom (conj @selections-atom selection))))))) +(def ^:private empty-selections + "Empty set of selected options, ordered by label." + (sorted-set-by #(compare (:label %1) (:label %2)))) -(defmulti multi-select-input - "Creates a multi-select input component with the following options: - - `input-label`: text to display as the label for the input. - - `prompt1`: text to display instructions - - `prompt2`: text to display when showing selected inputs - - `prompt3`: text to display when selected inputs are hidden - - `expand-options-button-label`: text to display on the button to expand options - - `collapse-options-button-label`: text to display on the button that collapses options - - `options`: vector of maps with keys: - - `:selected?` - whether the option has been selected - - `:label` - label of the option - - `:value` - value of the option - - `:tags` - a collection of keywords or numbers - - `:color-tag` - a map with at least the key `:color` representing a hex color. - - [Optional] `filter-tags`: vector of maps with keys: - - `:label` - label of the tag - - `:id` - id of the tag (keyword or number) - - [Optional] `search` - if set to true, the component will use search box to filter options. This will replace the use of `filter-tags` - - [Optional] `color-tags`: - - `:label` - label of the option - - `:color` - color of the tag" - (fn [{:keys [search]}] - (if (true? search) - :search - :no-search))) +(defn- multi-select-on-select + "Toggles `opt` in `selections-atom`, invoking its `on-select`/`on-deselect`. + With `disable-multi-valued-input?`, selecting deselects all other options." + [selections-atom {:keys [value on-select on-deselect] :as opt} disable-multi-valued-input?] + (if (contains? @selections-atom opt) + (do + (swap! selections-atom disj opt) + (when on-deselect (on-deselect value))) + (do + (when disable-multi-valued-input? + (doseq [{:keys [value on-deselect]} @selections-atom] + (when on-deselect (on-deselect value))) + (reset! selections-atom empty-selections)) + (when on-select (on-select value)) + (swap! selections-atom conj opt)))) (defn- filter-tag-buttons "Tag buttons that narrow the options list. A clicked tag stays active @@ -344,106 +322,58 @@ (defn- no-results-message [] [:div.multi-select__no-results "No Results"]) -(defmethod multi-select-input :no-search +(defn- selected-option-chip + "Chip for a selected option; clicking it deselects the option." + [{:keys [label color-tag on-click]}] + [:div (cond-> {:class ["multi-select__option--selected" + (when color-tag "multi-select__option__color-tag")] + :style {} + :on-click on-click} + color-tag + (assoc-in [:style :border-color] (:color color-tag))) + [:div.multi-select__option__icon--minus + [icon "minus"]] + label]) + +(defn multi-select-input + "Creates a multi-select input component with the following options: + - `input-label`: text to display as the label for the input. + - `prompt1`: text to display instructions + - `expand-options-button-label`: text to display on the button to expand options + - `collapse-options-button-label`: text to display on the button that collapses options + - `options`: vector of maps with keys: + - `:selected?` - whether the option has been selected + - `:label` - label of the option + - `:value` - value of the option + - `:tags` - a collection of keywords or numbers + - `:color-tag` - a map with at least the key `:color` representing a hex color. + - [Optional] `prompt2`: description shown while options are collapsed + - [Optional] `prompt3`: description shown while options are expanded + - [Optional] `filter-tags`: vector of maps with keys: + - `:label` - label of the tag + - `:id` - id of the tag (keyword or number) + - [Optional] `color-tags`: + - `:label` - label of the option + - `:color` - color of the tag" [{:keys [input-label prompt1 prompt2 prompt3 expand-options-button-label - collapse-options-button-label options filter-tags color-tags disable-multi-valued-input?]}] - (r/with-let [selections (r/atom (->> options - (filter #(true? (:selected? %))) - (map (fn [{:keys [label value on-deselect]}] - [label value on-deselect])) - (into (sorted-set)))) + collapse-options-button-label options filter-tags color-tags + disable-multi-valued-input?]}] + (r/with-let [selections (r/atom (into empty-selections + (filter #(true? (:selected? %)) options))) show-options? (r/atom false) - selected-tag (r/atom nil) - search (r/atom "")] + selected-tag (r/atom nil) + search (r/atom "")] (let [visible-options (cond->> options (and filter-tags @selected-tag) (filter #(contains? (:tags %) @selected-tag)) (seq @search) - (filter (partial matches-search? @search)))] + (filter (partial matches-search? @search))) + select-option! (fn [opt] + (multi-select-on-select selections opt disable-multi-valued-input?) + (reset! search ""))] [:div.multi-select - (when @show-options? - [:<> - [:div.multi-select__prompt prompt1] - [:div.multi-select__search - [text-input {:label "Search" - :on-change #(reset! search (input-value %)) - :value-atom search}]] - (when filter-tags - [filter-tag-buttons filter-tags selected-tag]) - (when (seq color-tags) - [:div.multi-select__color-tags - (for [{:keys [label color]} color-tags] - ^{:key color} - [:div {:class "multi-select__color-tags__tag" - :style {:border-color color}} - label])]) - (if (and (seq @search) (empty? visible-options)) - [no-results-message] - [:div.multi-select__options - (doall - (for [{:keys [label - value - on-select - on-deselect - color-tag]} visible-options] - ^{:key label} - (let [selection [label value on-deselect on-select]] - [multi-select-option {:selected? (contains? @selections selection) - :color-tag color-tag - :label label - :on-click #(multi-select-on-select selections selection disable-multi-valued-input?)}])))])]) - [:div.multi-select__selections - [:div.multi-select__selections__header - [:div (gstring/format "Selected %s" input-label)] - [:div.multi-select__selections__header__button (if (false? @show-options?) - [button {:label expand-options-button-label - :variant "primary" - :icon-name "plus" - :size "small" - :on-click #(reset! show-options? (not @show-options?))}] - [button {:label collapse-options-button-label - :variant "highlight" - :icon-name "arrow" - :size "small" - :on-click #(do (reset! show-options? (not @show-options?)) - (reset! search ""))}])]] - [:div.multi-select__selections__description (if (false? @show-options?) prompt2 prompt3)] - (when (false? @show-options?) - [:div.multi-select__selections__body (for [[label value on-deselect color-tag :as selection] @selections] - [:div - (cond-> {:class ["multi-select__option--selected" - (when color-tag "multi-select__option__color-tag")] - :style {} - :on-click #(do - (reset! selections (disj @selections selection)) - (when on-deselect (on-deselect value)))} - color-tag - (assoc-in [:style :border-color] (:color color-tag))) - [:div.multi-select__option__icon--minus - [icon "minus"]] - label])])]]))) - -(defmethod multi-select-input :search - [{:keys [input-label prompt1 expand-options-button-label collapse-options-button-label options filter-tags color-tags - disable-multi-valued-input?]}] - (r/with-let [selections (r/atom (->> options - (filter #(true? (:selected? %))) - (map (fn [{:keys [label value on-deselect]}] - [label value on-deselect])) - (into (sorted-set)))) - show-options? (r/atom false) - search (r/atom "") - filtered-options (r/atom options) - selected-tag (r/atom nil)] - (let [visible-options (cond->> (if (and @show-options? (not (seq @search))) - options - @filtered-options) - (and filter-tags @selected-tag) - (filter #(contains? (:tags %) @selected-tag)))] - [:div.multi-select--search - [:div.multi-select__prompt - prompt1] + [:div.multi-select__prompt prompt1] (when (seq color-tags) [:div.multi-select__color-tags (for [{:keys [label color]} color-tags] @@ -454,62 +384,46 @@ [:div.multi-select__selections [:div.multi-select__selections__header [:div (gstring/format "Selected %s" input-label)] - [:div.multi-select__selections__header__button (if @show-options? - [button {:label collapse-options-button-label - :variant "secondary" - :icon-name "minus" - :size "small" - :on-click #(do (reset! show-options? (not @show-options?)) - (reset! search nil))}] - [button {:label expand-options-button-label - :variant "primary" - :icon-name "plus" - :size "small" - :on-click #(reset! show-options? (not @show-options?))}])]] - [:div.multi-select-search__selections__body - (for [[label value on-deselect color-tag :as selection] @selections] - [:div - (cond-> {:class ["multi-select-search" - "multi-select__option--selected" - (when color-tag "multi-select__option__color-tag")] - :style {} - :on-click #(do - (reset! selections (disj @selections selection)) - (when on-deselect (on-deselect value)))} - color-tag - (assoc-in [:style :border-color] (:color color-tag))) - [:div.multi-select__option__icon--minus - [icon "minus"]] - label])] + [:div.multi-select__selections__header__button + (if @show-options? + [button {:label collapse-options-button-label + :variant "secondary" + :icon-name "minus" + :size "small" + :on-click #(do (reset! show-options? false) + (reset! search ""))}] + [button {:label expand-options-button-label + :variant "primary" + :icon-name "plus" + :size "small" + :on-click #(reset! show-options? true)}])]] + (when-let [description (if @show-options? prompt3 prompt2)] + [:div.multi-select__selections__description description]) + [:div.multi-select__selections__body + (doall + (for [{:keys [label color-tag] :as opt} @selections] + ^{:key label} + [selected-option-chip {:label label + :color-tag color-tag + :on-click #(select-option! opt)}]))] [text-input {:label "Search" - :on-key-press (on-enter (fn [] - (when-let [{:keys [label value on-deselect on-select]} (first visible-options)] - (let [selection [label value on-deselect on-select]] - (multi-select-on-select selections selection disable-multi-valued-input?)) - (reset! search nil)))) - :on-change #(do (reset! search (input-value %)) - (reset! filtered-options (filter (partial matches-search? @search) options))) + :on-key-press (on-enter #(when-let [opt (first visible-options)] + (select-option! opt))) + :on-change #(reset! search (input-value %)) :value-atom search}]] (when (and @show-options? filter-tags) [filter-tag-buttons filter-tags selected-tag]) (when (and (seq @search) (empty? visible-options)) [no-results-message]) (when (or (seq @search) @show-options?) - ;; --searching enables the first-option highlight that previews - ;; what pressing Enter will select + ;; --searching enables the first-option highlight that previews + ;; what pressing Enter will select [:div {:class ["multi-select__options" (when (seq @search) "multi-select__options--searching")]} (doall - (for [{:keys [label - value - on-select - on-deselect - color-tag]} visible-options] + (for [{:keys [label color-tag] :as opt} visible-options] ^{:key label} - (let [selection [label value on-deselect on-select]] - [multi-select-option {:selected? (contains? @selections selection) - :color-tag color-tag - :label label - :on-click #(do - (multi-select-on-select selections selection disable-multi-valued-input?) - (reset! search nil))}])))])]))) \ No newline at end of file + [multi-select-option {:selected? (contains? @selections opt) + :color-tag color-tag + :label label + :on-click #(select-option! opt)}]))])]))) \ No newline at end of file diff --git a/projects/behave/resources/public/css/app-style.css b/projects/behave/resources/public/css/app-style.css index d8810fe1..8e9b2216 100644 --- a/projects/behave/resources/public/css/app-style.css +++ b/projects/behave/resources/public/css/app-style.css @@ -477,7 +477,7 @@ body { } /* Guided options should grow 1:1 with the viewport */ -.multi-select > .multi-select__options { +.wizard-input--guided .multi-select > .multi-select__options { max-height: none; height: calc(100vh - 900px); min-height: 100px; diff --git a/projects/behave/src/cljs/behave/components/input_group.cljs b/projects/behave/src/cljs/behave/components/input_group.cljs index 5ad54660..5cb906e4 100644 --- a/projects/behave/src/cljs/behave/components/input_group.cljs +++ b/projects/behave/src/cljs/behave/components/input_group.cljs @@ -1,12 +1,12 @@ (ns behave.components.input-group (:require [behave.components.core :as c] [behave.components.unit-selector :refer [unit-display]] - [goog.string :as gstring] [behave.translate :refer [kebab]])) @@ -127,7 +127,7 @@ (defmethod wizard-input :discrete [variable {:keys [ws-uuid]} group-uuid repeat-id repeat-group?] (r/with-let [{gv-uuid :bp/uuid help-key :group-variable/help-key - v-list :variable/list} variable + v-list :variable/list} variable selected (rf/subscribe [:worksheet/input-value ws-uuid group-uuid repeat-id gv-uuid]) default-option (rf/subscribe [:wizard/default-option ws-uuid gv-uuid]) disabled-options (rf/subscribe [:wizard/disabled-options ws-uuid gv-uuid]) @@ -194,17 +194,16 @@ (let [*disable-multi-valued-input? (rf/subscribe [:wizard/disable-multi-valued-input? ws-uuid gv-uuid]) *variable-name (rf/subscribe [:wizard/gv-uuid->default-variable-name gv-uuid])] [:div.wizard-input - {:on-click on-focus-click + {:class (when workflow (str "wizard-input--" (name workflow))) + :on-click on-focus-click :on-focus on-focus-click} [c/multi-select-input (cond-> {:input-label @*variable-name :disable-multi-valued-input? @*disable-multi-valued-input? - :search (= workflow :standard) :options (doall (map ->option options))} (= workflow :standard) - (merge {:search true - :prompt1 (gstring/format @( (rf/subscribe [:worksheet/group-repeat-ids ws-uuid group-uuid]) - (deref) - (sort)) - next-repeat-id (or (some->> repeat-ids seq (apply max) inc) - 0)] + group-uuid :bp/uuid} group + repeat-ids (-> (rf/subscribe [:worksheet/group-repeat-ids ws-uuid group-uuid]) + (deref) + (sort)) + next-repeat-id (or (some->> repeat-ids seq (apply max) inc) + 0)] [:<> (map-indexed (fn [index repeat-id]