Ab sofort ist der Login auf der Weboberfläche von git.fh-muenster.de bevorzugt über FH Muenster SSO möglich.

Commit 03c54ca7 authored by Bruno Burke's avatar Bruno Burke 😁

fix new components field/control in devcards ui-showcase and date/time/input-range components

parent 09f71b0b
Pipeline #45348 passed with stages
in 1 minute and 46 seconds
......@@ -3,6 +3,7 @@
[clojure.string :refer [lower-case split]]
[lernmeister.components.bulma.common :refer [icon]]
[lernmeister.components.bulma.form.control :refer [control]]
[lernmeister.components.bulma.form.field :refer [field]]
[oops.core :refer [oget]]))
(defn radiobutton
......@@ -67,7 +68,7 @@
(defn input-range
[{:keys [field-class input-class input-size label-icon
placeholder value on-change label
disabled tooltip autocomplete
disabled tooltip autocomplete icons expanded?
min max]}]
(let [id (gensym "input-range")]
(reagent/create-class
......@@ -75,8 +76,31 @@
(fn [{:keys [field-class input-class input-size label-icon
placeholder value on-change label
disabled tooltip autocomplete
min max]}]
[:div.columns
min max]}]
[field {:addons? true}
[control {:icons icons
:expanded? expanded?}
[:input.input
{:type "range"
:value value
:on-change #(on-change
(-> % .-target .-value js/parseInt))
:min min
:max max
:id (str id "slider")}]]
[control {}
[:div.control
[:input.input {:type "number"
:value value
:min min
:max max
:placeholder (or placeholder "")
:disabled disabled
:on-change #(on-change
(-> % .-target .-value js/parseInt))
:id (str id "number")}]]
]]
#_[:div.columns
[:div.column.is-three-quarters
[:div.field
[:label.label {:for (str id "slider")}
......
(ns lernmeister.components.bulma.datetime)
(ns lernmeister.components.bulma.datetime
(:require [lernmeister.components.bulma.form.control :refer [control]]
[clojure.string :refer [lower-case split]])
)
(defn parseDate [date]
(if (not-empty date)
......@@ -80,12 +83,9 @@
label disabled tooltip autocomplete]}]
(fn [{:keys [field-class icon input-class input-size
label-icon value placeholder on-change
label disabled tooltip autocomplete]}]
[:div.field
[:label.label
label]
[:div.control
label disabled tooltip autocomplete icons expanded?]}]
[control {:icons icons
:expanded? expanded?}
[:input {:type :date
:disabled disabled
:value (when value
......@@ -93,7 +93,7 @@
:on-change #(on-change
(-> %
.-target
.-valueAsDate))}]]]))
.-valueAsDate))}]]))
#_(defn datepicker
[{:keys [field-class icon input-class input-size
......@@ -148,18 +148,15 @@
label disabled tooltip autocomplete]}]
(fn [{:keys [field-class icon input-class input-size
label-icon value placeholder on-change
label disabled tooltip autocomplete]}]
[:div.field
[:label.label
label]
[:div.control
label disabled tooltip autocomplete icons expanded?]}]
[control {:icons icons
:expanded? expanded?}
[:input {:type :time
:value value
:on-change #(on-change
(-> %
.-target
.-value))}]]]))
.-value))}]]))
#_(defn timepicker
[{:keys [field-class icon input-class input-size
......
......@@ -22,84 +22,84 @@
(defcard-rg horizontal-form-example
(fn [state]
[:<>
[ui/horizontal-field
{:label "From"
:normal? true}
[ui/field
[ui/input-text
{:expanded? true
:icons "fa-user"
:placeholder "Name"}]]
[ui/field
[ui/input-text
{:expanded? true
:type :email
:placeholder "Email"
:icons [{:position :left
:size :small
:style :solid
:id :fa-envelope}
{:position :right
:size :small
:style :solid
:id :fa-check}]}]]
]
[ui/horizontal-field
{:label ""}
[ui/field {:expanded? true
:help "Do not enter the first zero"}
[ui/field {:addons? true}
[ui/button {:static true}
"+44"]
[ui/input-text {:expanded? true
:placeholder "phone number"}]
[:<>
[ui/horizontal-field
{:label "From"
:normal? true}
[ui/field
[ui/input-text
{:expanded? true
:icons "fa-user"
:placeholder "Name"}]]
[ui/field
[ui/input-text
{:expanded? true
:type :email
:placeholder "Email"
:icons [{:position :left
:size :small
:style :solid
:id :fa-envelope}
{:position :right
:size :small
:style :solid
:id :fa-check}]}]]
]
[ui/horizontal-field
{:label ""}
[ui/field {:expanded? true
:help "Do not enter the first zero"}
[ui/field {:addons? true}
[ui/button {:static true}
"+44"]
[ui/input-text {:expanded? true
:placeholder "phone number"}]
]
]
]
[ui/horizontal-field
{:normal? true
:label "Department"}
[ui/field {:narrow? true}
[ui/select
{:options
[{:label "Business Development" :key :business}
{:label "Marketing" :key :marketing}
{:label "Sales" :key :sales}]}]]]
[ui/horizontal-field
{:label "Already a member?"}
[ui/field {:narrow? true}
[ui/radiobutton
{:label "Yes"}]
[ui/radiobutton
{:label "No"}]
]]
[ui/horizontal-field
{:label "Subject"
:normal? true}
[ui/field
{:help "This field is required"}
[ui/input-text
{:placeholder "e.g. Partnership opportunity"}]]
]
]
]
[ui/horizontal-field
{:normal? true
:label "Department"}
[ui/field {:narrow? true}
[ui/select
{:options
[{:label "Business Development" :key :business}
{:label "Marketing" :key :marketing}
{:label "Sales" :key :sales}]}]]]
[ui/horizontal-field
{:label "Already a member?"}
[ui/field {:narrow? true}
[ui/radiobutton
{:label "Yes"}]
[ui/radiobutton
{:label "No"}]
]]
[ui/horizontal-field
{:label "Subject"
:normal? true}
[ui/field
{:help "This field is required"}
[ui/input-text
{:placeholder "e.g. Partnership opportunity"}]]
]
[ui/horizontal-field
{:label "Question"
:normal? true}
[ui/field
[ui/textarea
{:placeholder "Explain how we can help you"}]]
]
[ui/horizontal-field
{:label " "}
[ui/field
[ui/button {} "Send message"]]
]
])
[ui/horizontal-field
{:label "Question"
:normal? true}
[ui/field
[ui/textarea
{:placeholder "Explain how we can help you"}]]
]
[ui/horizontal-field
{:label " "}
[ui/field
[ui/button {} "Send message"]]
]
])
)
......@@ -115,37 +115,37 @@
(defcard-rg chips-card
(fn []
[ui/chips
{:tags (reagent/cursor data [:tags])
:placeholder "PLATZHALTER"
:label "Tags"}]))
[ui/field {:label "Tags"}
[ui/chips
{:tags (reagent/cursor data [:tags])
:placeholder "PLATZHALTER"}]]))
(defcard "## Datepicker")
(defonce dateinput (reagent/atom (js/Date.)))
(defcard-rg input-datepicker
(fn []
[:div
[ui/datepicker
{:label "Startdatum"
:placeholder "Datum"
:value (if-let [date @dateinput]
date)
:on-change #(do
(js/console.log %)
(reset! dateinput
%
#_(fn [date]
(doto (or date ( js/Date.))
(.setMonth (.getMonth %))
(.setDate (.getDate %))
(.setFullYear (.getFullYear %)))))
%)}
]]
[ui/field {:label "Startdatum"}
[ui/datepicker
{:placeholder "Datum"
:value (if-let [date @dateinput]
date)
:on-change #(do
(js/console.log %)
(reset! dateinput
%
#_(fn [date]
(doto (or date ( js/Date.))
(.setMonth (.getMonth %))
(.setDate (.getDate %))
(.setFullYear (.getFullYear %)))))
%)}
]]]
))
(defcard-rg selected-date
(fn []
[:p
[:p
(str @dateinput)]
))
......@@ -154,15 +154,15 @@
(defcard-rg input-datepicker
(fn []
[:div
[ui/timepicker
{:label "Startzeit"
:placeholder "Zeit"
:value (when-let [time @timeinput]
time)
:on-change #(do
(reset! timeinput
%))}
]]
[ui/field {:label "Startzeit"}
[ui/timepicker
{:placeholder "Zeit"
:value (when-let [time @timeinput]
time)
:on-change #(do
(reset! timeinput
%))}
]]]
))
(defcard-rg selected-time
......@@ -182,39 +182,49 @@
:title "ABC"
:footer [:<> [:button.button {:on-click #(swap! visible? not)} "ok"]]
}
[:div.content
[:p "Dies ist ein test."]]]
[:div.content
[:p "Dies ist ein test."]]]
[:button.button {:on-click #(swap! visible? not)} "Anzeigen" @visible?])
])))
])))
(defcard "## Input Text")
(defonce textinput (reagent/atom ""))
(defcard-rg input-text-card-with-tooltip
(fn []
[ui/input-text
{:label "Input"
:value @textinput
:tooltip {:position "bottom"
:label "Tooltip Test"}
:autocomplete {:options {"kg" nil}}
:on-change #(reset! textinput %)}]))
[ui/field {:label "Input"}
[ui/input-text
{:label "Input"
:value @textinput
:tooltip {:position "bottom"
:label "Tooltip Test"}
:autocomplete {:options {"kg" nil}}
:on-change #(reset! textinput %)}]]))
(defcard-rg input-text-card-with-icon
(fn []
[ui/input-text
{:label-icon "fa-book"
:label "Input"
:value @textinput
:on-change #(reset! textinput %)}]))
[ui/field {:label "Input"}
[ui/input-text
{:icons [{:position :left
:size :small
:style :solid
:id :fa-book}]
:label "Input"
:value @textinput
:on-change #(reset! textinput %)}]]))
(defcard-rg input-range
(fn []
[ui/input-range
{:label-icon "fa-book"
:label "Input"
:value @(reagent/cursor data [:range])
:on-change #(reset! (reagent/cursor data [:range]) %)}]))
[ui/field {:label "Input"}
[ui/input-range
{:icons [{:position :left
:size :small
:style :solid
:id :fa-book}]
:expanded? true
:label "Input"
:value @(reagent/cursor data [:range])
:on-change #(reset! (reagent/cursor data [:range]) %)}]]))
(defcard "## Cardpanel")
......@@ -228,9 +238,9 @@
{:footer-items
[[:a.footer-item "senden"] [:a.footer-item "lll"]]}
[:div [:p.flow-text "Dies ist ein Flow-Text in einer Card"]
[:p.flow-text "Dies ist ein Flow-Text in einer Card"]
[:p.flow-text "Dies ist ein Flow-Text in einer Card"]
[:p.flow-text "Dies ist ein Flow-Text in einer Card"]]])
[:p.flow-text "Dies ist ein Flow-Text in einer Card"]
[:p.flow-text "Dies ist ein Flow-Text in einer Card"]
[:p.flow-text "Dies ist ein Flow-Text in einer Card"]]])
(defcard-rg menu
(let [sidenav-id "sidenav-id"
......@@ -283,22 +293,24 @@
(defcard-rg select
(fn [state]
[:div
[ui/field {:label "Normal Select"}
[ui/select*
{:cursor state
:options options
:label "Normal Select"}]])
:label "Normal Select"}]]])
selection
{:inspect-data true})
(defcard-rg select-multiple
(fn [state]
[:div
[ui/field {:label "Multiple Select"}
[ui/select*
{:choose-option-label "Wähle ein oder mehrere Elemente 🤩"
:cursor state
:options options
:multiple true
:label "Multiple Select"}]])
:label "Multiple Select"}]]])
selection2
{:inspect-data true})
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment