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

Commit 67e8ef61 authored by Bruno Burke's avatar Bruno Burke 😁

first test with new field/control/icon components

parent b6a69968
Pipeline #45177 passed with stages
in 1 minute and 58 seconds
(ns lernmeister.components.bulma.common)
(ns lernmeister.components.bulma.common
(:require [clojure.string :refer [join]]))
(defn icon [ligature & {:keys [class]}]
(defn icon [{:keys [class size position id]}]
;;;TODO check if this makes sense. Use ligature as key to force 'font awesome' to re-render
(let [id (gensym "icon")]
(fn [ligature & {:keys [class]}]
^{:key (str id "-" ligature)}
[:span.icon {:class class}
[:i.fas {:class (str ligature)}]])))
(let [component-id (gensym "icon")]
(fn [{:keys [class i-class size position style id]
:or {style :fas}}]
^{:key (str component-id)}
[:span.icon {:class (join " "
[class
(case position
:left "is-left"
:right "is-right"
"")
(case size
:small "is-small"
"")])}
[:i {:class
(join " " [i-class
(case style
:solid "fas"
:regular "far"
:light "fal"
:brand "fab"
"")
(name style)
(when id
(name id))])}]])))
......@@ -2,6 +2,7 @@
(:require [reagent.core :as reagent]
[clojure.string :refer [lower-case split]]
[lernmeister.components.bulma.common :refer [icon]]
[lernmeister.components.bulma.form.control :refer [control]]
[oops.core :refer [oget]]))
(defn radiobutton
......@@ -22,7 +23,7 @@
(defn input-text
[{:keys [field-class input-class input-size label-icon
placeholder value on-change label
placeholder value on-change label icons expanded?
disabled tooltip autocomplete]}]
(let [id (gensym "input-text")]
(reagent/create-class
......@@ -39,13 +40,13 @@
on-change))}))))
:reagent-render
(fn [{:keys [field-class input-class input-size label-icon
placeholder value on-change label
placeholder value on-change label icons expanded?
disabled tooltip autocomplete]}]
[:div.field {:class field-class}
(when label
[:<> ;;:div.field {:class field-class}
#_(when label
[:label.label {:for id} label])
[:div.control {:class (when label-icon
"has-icons-left")}
[control {:icons icons
:expanded? expanded?}
[:input.input (merge {:id id
:type "text"
:class input-class
......@@ -59,7 +60,7 @@
(when tooltip
{:data-position (:position tooltip)
:data-tooltip (:label tooltip)}))]
(when label-icon
#_(when label-icon
[icon label-icon
:class "is-left"])]])})))
......
(ns lernmeister.components.bulma.form.button)
(defn button [{:keys [static?]} & content]
[:a.button {}
content])
(ns lernmeister.components.bulma.form.control
(:require [lernmeister.components.bulma.common :refer [icon]]
[clojure.string :refer [join]]))
(defn control-icons [icons]
(if (string? icons)
[icon {:i-class icons
:position :left}]
[:<>
(for [i icons]
^{:key (hash i)}
[icon i])]))
(defn get-control-icon-classes [icons]
(str
(if (string? icons)
"has-icons-left")
(when (vector? icons)
(join " " [(when (some #(= (:position %) :left) icons)
"has-icons-left")
(when (some #(= (:position %) :right) icons)
"has-icons-right")]))))
(defn control [{:keys [expanded? icons]} content]
[:p.control {:class
(str
(get-control-icon-classes icons)
(when expanded?
" is-expanded"))}
content
[control-icons icons]
]
)
(ns lernmeister.components.bulma.form.field)
(defn field [{:keys [field-class label grouped? addons?]} & content]
[:div.field {:class (str field-class
(when grouped?
"is-grouped")
(when addons?
"has-addons"))}
(when label
[:label.label
label])
(into [:<>] content)])
(defn field
([content]
[field {} content])
([{:keys [field-class label grouped? addons? expanded?]} & content]
[:div.field {:class (str field-class
(when grouped?
" is-grouped")
(when addons?
" has-addons")
(when expanded?
" is-expanded"))}
(when label
[:label.label
label])
(into [:<>] content)]))
(defn horizontal-field [{:keys [field-class label]} & content]
[:div.field {:class field-class}
(defn horizontal-field [{:keys [field-class label normal?]} & content]
[:div.field.is-horizontal {:class field-class}
(when label
[:div.field-label
[:div.field-label {:class (when normal?
"is-normal")}
label])
[:div.field-body
(into [:<>] content)]])
......@@ -9,7 +9,9 @@
[lernmeister.components.bulma.card :as bulma-card]
[lernmeister.components.bulma.tag :as bulma-tag]
[lernmeister.components.bulma.datetime :as bulma-datetime]
[lernmeister.components.bulma.select :as bulma-select]))
[lernmeister.components.bulma.select :as bulma-select]
[lernmeister.components.bulma.form.field :as bulma-field]
[lernmeister.components.bulma.form.button :as bulma-button]))
(def icon bulma-common/icon)
(def card bulma-card/card)
......@@ -39,3 +41,6 @@
(def timepicker bulma-datetime/timepicker)
(def switch bulma/switch)
(def indeterminate-progress bulma/indeterminate-progress)
(def field bulma-field/field)
(def horizontal-field bulma-field/horizontal-field)
(def button bulma-button/button)
......@@ -19,6 +19,48 @@
(defcard "#UI Components")
(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
:helper "Do not enter the first zero"}
[ui/field {:addons? true}
[ui/button {:static true}
"+44"]
[ui/input-text {:expanded? true
:placeholder "phone number"}]
]
]
]
])
)
(defcard "## Chips")
(defonce tags (reagent/atom #{"a" "b" "c"}))
......
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