Commit b8b95d59 authored by Joachim Schunk's avatar Joachim Schunk

Merge branch 'bulma-css' into 28-create-new-multistep-calculation-exercise-type

parents b39b6732 749c2a52
Pipeline #45409 passed with stages
in 1 minute and 35 seconds
......@@ -9,7 +9,7 @@
"devDependencies": {
"sortablejs": "^1.7.0",
"materialize-css": "^1.0.0",
"codemirror": "^5.29.0",
"codemirror": "^5.56.0",
"mathjs": "^6.0.2",
"tinymce": "^5.2.1",
"quill": "^1.3.5",
......
......@@ -13,10 +13,8 @@
[clj-http "3.10.1"]
[wwsoftware/clj-helper "0.0.3.2"]
[cljs-ajax "0.8.0"]
[cljsjs/codemirror "5.44.0-1"]
[cheshire "5.10.0"] ;;; clj-http json support
[devcards "0.2.7" :exclusions [cljsjs/react]]
[cljsjs/react-json-view "1.19.1-0"]]
[devcards "0.2.7" :exclusions [cljsjs/react]]]
:aliases {"fig" ["trampoline" "run" "-m" "figwheel.main"]
"build-dev" ["trampoline" "run" "-m" "figwheel.main" "-b" "dev" "-r"]}
......
......@@ -13,6 +13,11 @@
<script src="node_modules/sortablejs/Sortable.js"></script>
<script src="node_modules/codemirror/lib/codemirror.js"></script>
<script src="node_modules/codemirror/mode/python/python.js"></script>
<script src="node_modules/codemirror/mode/clojure/clojure.js"></script>
<script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="node_modules/codemirror/mode/clike/clike.js"></script>
<script src="node_modules/codemirror/mode/commonlisp/commonlisp.js"></script>
<script src="node_modules/codemirror/mode/scheme/scheme.js"></script>
<script src="node_modules/katex/dist/katex.js"></script>
<script src="node_modules/katex/dist/contrib/auto-render.min.js"></script>
<link rel="stylesheet" href="node_modules/katex/dist/katex.css">
......
......@@ -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
......@@ -68,7 +69,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
......@@ -76,8 +77,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")}
......@@ -114,7 +138,9 @@
(reagent/create-class
{:reagent-render
(fn [{:keys [name disabled? on-change checked? label]}]
[:label.checkbox.black-text {:for id}
[:label.checkbox.black-text
{:for id
:disabled disabled?}
[:input {:type "checkbox"
:id id
:name name
......
(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
......
(ns lernmeister.components.bulma.form.button
(:require [lernmeister.components.bulma.form.control :refer [control]]))
(defn button [{:keys [expanded? static? icons class]} & content]
(defn button [{:keys [expanded? static? icons on-click]} & content]
[control {:expanded? expanded?
:icons icons}
(into [:a.button {:class (str class (when static? " is-static"))}]
content)])
[:a.button
(merge
{:class (when static? " is-static")}
(when on-click
{:on-click on-click}))
content]])
(ns lernmeister.components.bulma.select
(:require [reagent.core :as reagent]
[lernmeister.components.bulma.form.control :refer [control]]))
[lernmeister.components.bulma.common
:as common]
[lernmeister.components.bulma.form.control
:refer [control]]))
(defn get-key [option]
(or (:key option) (first option)))
(defn get-title [option]
(or (:title option) (:label option) (second option)))
(defn dropdown-select [params]
(fn [{:keys [value on-change options label multiple icons
expanded? choose-option-label]}]
(reagent/with-let [active? (reagent/atom nil)
id (gensym "select")]
[:div.dropdown {:class (str (when @active?
" is-active"))
:style (when expanded?
{:width "100%"})
}
(let [selected-option (some
#(when (= value
(keyword (get-key %)))
%)
options)]
[:div.dropdown-trigger
{:on-blur #(reset! active? false)
:style (when expanded?
{:width "100%"})}
[:button.button
{:style (when expanded?
{:width "100%"
:justify-content :left})
:on-click #(swap! active? not)}
[:span (or (get-title selected-option) choose-option-label "Bitte wählen")]
[common/icon {:style :solid
;;:id :fa-angle-down
:class "is-small"}]
]
])
[:div.dropdown-menu
[:div.dropdown-content
(when options
(doall
(for [o options]
(let [key (get-key o)
title (get-title o)]
[:a.dropdown-item
{:key (str id "-" key)
:on-mouse-down #(on-change (keyword key))}
title]))))
]
]]
)))
(defn native-select [params]
(fn [{:keys [value on-change options label disabled multiple
choose-option-label icons expanded?] :as params}]
(reagent/with-let [id (gensym "select")]
[:select
{:id id
:disabled disabled
:multiple multiple
:value (if multiple
(or value [])
(or value ""))
:on-change (fn [event]
(let [value (-> event
.-target
.-value)]
(when on-change
(on-change
(if multiple
(set (map (fn [o]
(keyword (.-value o)))
(-> event
.-target
.-selectedOptions
array-seq)))
(keyword value))))))}
[:option {:value ""
:disabled true}
(or choose-option-label "Bitte wählen")]
(when options
(doall
(for [o options]
(let [key (or (:key o) (first o))
title (or (:title o) (:label o) (second o))]
[:option {:value (name key)
:key (str id "-" key)}
title]))))]
)
))
(defn select
[{:keys [value on-change options label multiple icons
expanded? fullwidth?
choose-option-label]}]
expanded? choose-option-label node-type]}]
(let [id (gensym "select")
instance (reagent/atom nil)
change-fn (reagent/atom on-change)]
......@@ -14,7 +106,7 @@
{:display-name "input-select-component"
:reagent-render
(fn [{:keys [value on-change options label disabled multiple
choose-option-label icons expanded? fullwidth?]}]
choose-option-label icons expanded? node-type] :as params}]
[:<>
[control {:icons icons
:expanded? expanded?}
......@@ -22,46 +114,17 @@
{:class (str
(when multiple
" is-multiple")
(when fullwidth?
(when expanded?
" is-fullwidth"))
}
[:select
{:id id
:disabled disabled
:multiple multiple
:value (if multiple
(or value [])
(or value ""))
:on-change (fn [event]
(js/console.log multiple)
(let [value (-> event
.-target
.-value)]
(when on-change
(on-change
(if multiple
(set (map (fn [o]
(keyword (.-value o)))
(-> event
.-target
.-selectedOptions
array-seq)))
(keyword value))))))}
[:option {:value ""
:disabled true}
(or choose-option-label "Bitte wählen")]
(when options
(doall
(for [o options]
(let [key (or (:key o) (first o))
title (or (:title o) (:label o) (second o))]
[:option {:value (name key)
:key (str id "-" key)}
title]))))]]]])})))
}
(case node-type
:dropdown [dropdown-select params]
[native-select params])]]])})))
(defn select*
[{:keys [cursor options label multiple
choose-option-label on-change]}]
choose-option-label on-change
expanded? node-type]}]
(let [id (gensym "select")
instance (reagent/atom nil)
get-element #(js/document.querySelector (str "#" id))]
......@@ -69,12 +132,15 @@
{:display-name "select*-component"
:reagent-render
(fn [{:keys [cursor options label multiple
choose-option-label on-change]}]
choose-option-label on-change
expanded? node-type]}]
[select
{:value @cursor
:options options
:label label
:multiple multiple
:expanded? expanded?
:node-type node-type
:choose-option-label choose-option-label
:on-change (fn [value]
(reset! cursor value)
......
(ns lernmeister.components.bulma.tag
(:require [reagent.core :as reagent]))
(:require [reagent.core :as reagent]
[lernmeister.components.bulma.core :refer [input-text]]
))
(defn tags-editor
[{:keys [tags label placeholder prefix-icon]}]
......
......@@ -125,13 +125,17 @@
(defn component-error [error]
[:div.container
[:p.red
[:img.secondary-content {:src the-scream}]
[:i.material-icons.black.yellow-text "warning"]
" SCHWERWIEGENDER FEHLER "
[:i.material-icons.black.yellow-text "warning"]
[:br]
(str error)]])
[:div.columns.has-background-danger
[:div.column.is-one-fifth
[:img.secondary-content {:src the-scream}]
]
[:div.column.is-four-fifth
[:span.icon [:i.fas.fa-exclamation-triangle]]
[:span "SCHWERWIEGENDER FEHLER"]
[:span.icon [:i.fas.fa-exclamation-triangle]][:hr ]
[:span (str error)]
]
]])
(defn styles [style-urls]
[:<>
......
......@@ -35,11 +35,11 @@
:component-did-mount
(fn []
#_(reset! editor (new js/Quill (str "#" id)
(clj->js
{:placeholder "Hier können Sie Text einfügen."
:theme "snow"
:modules {:clipboard true}
})))
(clj->js
{:placeholder "Hier können Sie Text einfügen."
:theme "snow"
:modules {:clipboard true}
})))
(.dangerouslyPasteHTML (.-clipboard @editor) (:value @element))
;;(.setContents @editor (:value @element))
(.on @editor "editor-change"
......@@ -140,17 +140,17 @@
[:label.active {:for "value"} "URL"][:br]]])))
#_(def content-element-forms (atom {:section add-element-dialog-section
:image add-element-dialog-image
:audio add-element-dialog-audio
:code code/dialog
:html add-element-dialog-html
:text add-element-dialog-text
:line add-element-dialog-line
:heading add-element-dialog-heading
:exercise add-element-dialog-exercise}))
:image add-element-dialog-image
:audio add-element-dialog-audio
:code code/dialog
:html add-element-dialog-html
:text add-element-dialog-text
:line add-element-dialog-line
:heading add-element-dialog-heading
:exercise add-element-dialog-exercise}))
#_(defn add-content-element-form [element-type form]
(swap! content-element-forms assoc element-type form))
(swap! content-element-forms assoc element-type form))
(defn get-content-element-form [element]
(ce-core/get-editor (keyword (:type element)))
......@@ -183,10 +183,11 @@
[:div.card-content
[:div.columns.is-multiline
[:div.column.is-12
[ui/select*
{:cursor (reagent/cursor element [:type])
:options content-types
:label "Typ"}]]
[ui/field {:label "Typ"}
[ui/select*
{:cursor (reagent/cursor element [:type])
:options content-types
:expanded? true}]]]
(if-let [add-dialog (get-method ce-core/edit (:type @element))]
^{:key (str dialog-id (:type @element))}
[:div.column.is-12
......@@ -197,15 +198,15 @@
{:on-click #(reset! edit-mode? nil)}
[ui/icon "fa-window-close"]
[:span "Abbrechen"]]
[:a.card-footer-item
{:on-click
#(do
(swap! content add-content-element @element @edit-mode?)
(reset! edit-mode? nil)
(when on-change
(on-change content)))}
[ui/icon "fa-plus"]
[:span "Hinzufügen"]]]])})))
[:a.card-footer-item
{:on-click
#(do
(swap! content add-content-element @element @edit-mode?)
(reset! edit-mode? nil)
(when on-change
(on-change content)))}
[ui/icon "fa-plus"]
[:span "Hinzufügen"]]]])})))
(defn element-settings-dialog [state content-element edit-fn page-settings & {:keys [data-receivers content-types]}]
(let [element (reagent/atom content-element)
......@@ -217,29 +218,29 @@
:reagent-render
(fn [edit-mode? content-element edit-fn page-settings & {:keys [data-receivers content-types]}]
(let [delement @element]
[:div.card
[:div.card-content
[:p "Sichtbar in Stufen:"]
(for [i (range (:multistage-steps page-settings))]
^{:key (str "settings-checkbox-" i)}
[:span [ui/checkbox
:label (str i)
:checked? (not (get-in delement [:hidden-stages i]))
:on-change #(swap! element update-in [:hidden-stages i] not)]
[:br]
]
)
]
[:div.card-action.right-align
[:div
[:a.btn.waves-effect.waves-green.btn-flat {:on-click #(reset! state nil)}
[:i.material-icons.left "close"] "Abbrechen"]
[:a.btn.waves-effect.waves-green.btn-flat
{:on-click
#(do
(edit-fn @element)
(reset! state nil))} [:i.material-icons.left "check"]
"Speichern"]]]]))})))
[:div.card
[:div.card-content
[:p "Sichtbar in Stufen:"]
(for [i (range (:multistage-steps page-settings))]
^{:key (str "settings-checkbox-" i)}
[:span [ui/checkbox
:label (str i)
:checked? (not (get-in delement [:hidden-stages i]))
:on-change #(swap! element update-in [:hidden-stages i] not)]
[:br]
]
)
]
[:div.card-action.right-align
[:div
[:a.btn.waves-effect.waves-green.btn-flat {:on-click #(reset! state nil)}
[:i.material-icons.left "close"] "Abbrechen"]
[:a.btn.waves-effect.waves-green.btn-flat
{:on-click
#(do
(edit-fn @element)
(reset! state nil))} [:i.material-icons.left "check"]
"Speichern"]]]]))})))
(defn edit-element-dialog [state content-element edit-fn & {:keys [data-receivers content-types]}]
(let [element (reagent/atom content-element)
......@@ -261,7 +262,7 @@
(if-let [element-editor (or
(get-method ce-core/edit (:type @element))
(get-method ce-core/edit (keyword (:type @element))))
]
]
^{:key (hash element-editor)}
[ce-core/edit
element
......@@ -273,13 +274,13 @@
{:on-click #(reset! state nil)}
[ui/icon "fa-window-close"]
[:span "Abbrechen"]]
[:a.card-footer-item
{:on-click
#(do
(edit-fn @element)
(reset! state nil))}
[ui/icon "fa-plus"]
[:span "Speichern"]]]])})))
[:a.card-footer-item
{:on-click
#(do
(edit-fn @element)
(reset! state nil))}
[ui/icon "fa-plus"]
[:span "Speichern"]]]])})))
(defn add-ce-button [add-mode? content index & {:keys [data-receivers content-types on-change]}]
......@@ -326,90 +327,90 @@
:content-types content-types
:on-change on-change]
[:div.page-element {:style {:border "solid lightgray 1px"
:padding "5px"}}
(case (get @states index)
:settings
[element-settings-dialog (reagent/cursor states [index]) pe #(do
(swap! content assoc index %)
(when on-change
(on-change content)))
page-settings
:data-receivers data-receivers
:content-types content-types]
:edit
[edit-element-dialog (reagent/cursor states [index]) pe #(do
(swap! content assoc index %)
(when on-change
(on-change content)))
:data-receivers data-receivers
:content-types content-types]
:padding "5px"}}
(case (get @states index)
:settings
[element-settings-dialog (reagent/cursor states [index]) pe #(do