edufeed-org/edufeed-web
2
0
Fork 0
mirror of https://github.com/edufeed-org/edufeed-web.git synced 2025-12-09 16:24:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

checkboxes on multi select working

Browse source
This commit is contained in:
@s.roertgen 2024-11-21 17:23:36 +01:00
parent 62f1338e59
commit a834ba5acf
2 changed files with 63 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

41
resources/public/css/output.css
View file

@ -815,6 +815,11 @@ html {
border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
}
.checkbox-warning:hover {
--tw-border-opacity: 1;
border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
}
.label a:hover {
--tw-text-opacity: 1;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
@ -1965,6 +1970,27 @@ html {
color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
}
.checkbox-warning {
--chkbg: var(--fallback-wa,oklch(var(--wa)/1));
--chkfg: var(--fallback-wac,oklch(var(--wac)/1));
--tw-border-opacity: 1;
border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
}
.checkbox-warning:focus-visible {
outline-color: var(--fallback-wa,oklch(var(--wa)/1));
}
.checkbox-warning:checked,
.checkbox-warning[aria-checked="true"] {
--tw-border-opacity: 1;
border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
--tw-bg-opacity: 1;
background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
--tw-text-opacity: 1;
color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
}
@keyframes checkmark {
0% {
background-position-y: 5px;
@ -3432,6 +3458,21 @@ details.collapse summary::-webkit-details-marker {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}
.bg-orange-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 215 170 / var(--tw-bg-opacity));
}
.bg-orange-400 {
--tw-bg-opacity: 1;
background-color: rgb(251 146 60 / var(--tw-bg-opacity));
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;

42
src/ied/views/add.cljs
View file

@ -80,21 +80,29 @@
:about {:type :skos
:schemes ["https://w3id.org/kim/hochschulfaechersystematik/scheme"]}}})
(defn concept-checkbox [concept field toggled]
[:input {:type "checkbox"
:checked (or toggled false)
:class "checkbox checkbox-warning"
:on-change (fn [] (re-frame/dispatch [::events/toggle-concept [concept field]]))}])
(defn concept-label-component
[[concept field]]
(fn []
(let [toggled-concepts @(re-frame/subscribe [::subs/toggled-concepts])
toggled (some #(= (:id %) (:id concept)) toggled-concepts)]
[:div {:class ""}
[:p
{:class (str "hover:bg-base-200 cursor-pointer" (when toggled " bg-white"))
:on-click (fn []
(re-frame/dispatch [::events/toggle-concept [concept field]]))}
(-> concept :prefLabel :de)]
(when-let [narrower (:narrower concept)]
[:div {:class "pl-2 "}
(for [child narrower]
^{:key (:id child)} [concept-label-component [child field]])])])))
[:li
(if-let [narrower (:narrower concept)]
[:details {:open false}
[:summary {:class (when toggled "bg-orange-400 text-black")}
[concept-checkbox concept field toggled]
(-> concept :prefLabel :de)]
[:ul {:tabindex "0"}
(for [child narrower]
^{:key (:id child)} [concept-label-component [child field]])]]
[:a {:class (when toggled "bg-orange-400 text-black")}
[concept-checkbox concept field toggled]
[:p {:on-click (fn [] (re-frame/dispatch [::events/toggle-concept [concept field]])) } (-> concept :prefLabel :de)]])])))
(defn skos-concept-scheme-multiselect-component
[[cs field field-title]]
@ -106,18 +114,12 @@
:role "button"
:class "btn m-1 grow w-full"}
field-title]
[:div
{:tabIndex "0",
:class
"dropdown-content card card-compact bg-base-100 z-[1] w-64 p-2 shadow"}
[:div
{:class "card-body"}
[:h3 {:class "card-title"}
field-title]
[:div {:class "dropdown-content z-[1]"}
[:ul {:class "menu bg-base-200 rounded-box w-96 "
:tabindex "0"}
(doall
(for [concept (:hasTopConcept cs)]
^{:key (:id concept)} [concept-label-component [concept field]]))
[:p "you can use any element as a dropdown."]]]])
^{:key (:id concept)} [concept-label-component [concept field]]))]]])
(defn array-fields-component [selected-md-scheme field field-title]
(let [array-items-type (get-in selected-md-scheme [field :items :type])