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]
[:<>
......
......@@ -4,8 +4,6 @@
[lernmeister.components.content-elements.core :as ce-core]
[lernmeister.components.content-elements.blockly.blocks :as bblock]
[lernmeister.components.content-elements.blockly.show :refer [blockly-component]]
[cljsjs.codemirror]
[cljsjs.codemirror.mode.python]
[lernmeister.components.ui :as ui]
[oops.core :refer [oget]]))
......@@ -39,31 +37,31 @@
[ui/collapsible
{:elements
(doall
(for [bc bblock/categories]
(let [bcname (:name bc)
expanded? (get @expaned_categories bcname)]
^{:key (str "block-category-" bcname)}
{:label bcname
:content
[:ul
(doall
(for [b (:blocks bc)
;;:when (js/Blockly.Blocks.hasOwnProperty (str (:id b)))
(for [bc bblock/categories]
(let [bcname (:name bc)
expanded? (get @expaned_categories bcname)]
^{:key (str "block-category-" bcname)}
{:label bcname
:content
[:ul
(doall
(for [b (:blocks bc)
;;:when (js/Blockly.Blocks.hasOwnProperty (str (:id b)))
]
(let [id (:id b)
checked? ((set @blocks) (:id b))]
^{:key (str "block-category-" bcname "-" id "-" checked?)}
[:li
[ui/checkbox
{:checked? checked?
:on-change #(if checked?
(swap! blocks disj id)
(swap! blocks (comp set conj) id))
:label id}]
]
(let [id (:id b)
checked? ((set @blocks) (:id b))]
^{:key (str "block-category-" bcname "-" id "-" checked?)}
[:li
[ui/checkbox
:checked? checked?
:on-change #(if checked?
(swap! blocks disj id)
(swap! blocks (comp set conj) id))
:label id]
]
)))
]
}
)))
]
}
)))
}]
]
......@@ -77,41 +75,41 @@
[:h2.subtitle "Workspace"]
[:div.form-group
[ui/checkbox
:on-change #(swap! workspace-settings update :toolbox-categories not)
:checked? (:toolbox-categories @workspace-settings)
:label "Toolbox Kategorien"][:br]
{:on-change #(swap! workspace-settings update :toolbox-categories not)
:checked? (:toolbox-categories @workspace-settings)
:label "Toolbox Kategorien"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :collapse not)
:checked? (:collapse @workspace-settings)
:label "Collapse"][:br]
{:on-change #(swap! workspace-settings update :collapse not)
:checked? (:collapse @workspace-settings)
:label "Collapse"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :trashcan not)
:checked? (:trashcan @workspace-settings)
:label "Mülleimer"][:br]
{:on-change #(swap! workspace-settings update :trashcan not)
:checked? (:trashcan @workspace-settings)
:label "Mülleimer"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :scrollbars not)
:checked? (:scrollbars @workspace-settings)
:label "Scrollbars"][:br]
{:on-change #(swap! workspace-settings update :scrollbars not)
:checked? (:scrollbars @workspace-settings)
:label "Scrollbars"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :sounds not)
:checked? (:sounds @workspace-settings)
:label "Sounds"][:br]
{:on-change #(swap! workspace-settings update :sounds not)
:checked? (:sounds @workspace-settings)
:label "Sounds"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :grid not)
:checked? (:grid @workspace-settings)
:label "Grid"][:br]
{:on-change #(swap! workspace-settings update :grid not)
:checked? (:grid @workspace-settings)
:label "Grid"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :zoom not)
:checked? (:zoom @workspace-settings)
:label "Zoom"][:br]
{:on-change #(swap! workspace-settings update :zoom not)
:checked? (:zoom @workspace-settings)
:label "Zoom"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :functions not)
:checked? (:functions @workspace-settings)
:label "Functions"][:br]
{:on-change #(swap! workspace-settings update :functions not)
:checked? (:functions @workspace-settings)
:label "Functions"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :variables not)
:checked? (:variables @workspace-settings)
:label "Variables"]
{:on-change #(swap! workspace-settings update :variables not)
:checked? (:variables @workspace-settings)
:label "Variables"}]
]
]
)
......@@ -142,7 +140,7 @@
))))))}]
[:div.buttons
[:a.button.is-primary {:on-click #(do
(swap! prepare? not))}
(swap! prepare? not))}
[:span.icon [:i.fas.fa-times]]
[:span "Verwerfen"]]
[:a.button.is-success {:on-click #(do
......
......@@ -2,12 +2,11 @@
(:require [reagent.core :as reagent]
[lernmeister.components.exercise-types.programming.spec :refer [programming-languages]]
[lernmeister.components.content-elements.core :as ce-core]
[cljsjs.codemirror]
[cljsjs.codemirror.mode.python]
[lernmeister.components.content-elements.code.show :refer [code-editor]]
[lernmeister.components.ui :as ui]))
(defn code-editor [code]
#_(defn code-editor [code]
(let [cm-atom (atom nil)
id (str (gensym) "_code_editor")]
(reagent/create-class
......@@ -34,12 +33,15 @@
(swap! element assoc :language (first (map :key programming-languages))))
(let [{:keys [id code language]} @element]
[:div.content
[ui/field {:label "Programmiersprachen"}
[ui/select
{:label "Programmiersprachen"
:value (or language "")
{:value (or language "")
:options programming-languages
:on-change #(swap! element assoc :language %)}]
[:div.field
[:label.label {:for "value"} "Code"]
[code-editor (reagent/cursor element [:code])]]])))
:on-change #(swap! element assoc :language %)}]]
[ui/field {:label "Code"}
[code-editor
{:code (get-in @element [:code])
:language (:language @element)
:on-change #(swap! element assoc :code %)}]
]])))
(ns lernmeister.components.content-elements.code.show
(:require [reagent.core :as reagent]
[reagent.dom :as rdom]
[lernmeister.components.content-elements.core :as ce-core]
[lernmeister.components.common :as common]
[lernmeister.components.ui :as ui]))