From 4f499ccbf71d0ae662159515bb568826e72678a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 6 Oct 2021 04:32:11 +0200 Subject: Drive popup tabs through javascript. --- module/calp/html/vcomponent.scm | 34 ++++++++++++++++++++++ module/calp/html/view/calendar/week.scm | 51 +++++++++++++++++++++++++++------ 2 files changed, 76 insertions(+), 9 deletions(-) (limited to 'module') diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm index 09d0038b..d1cd4886 100644 --- a/module/calp/html/vcomponent.scm +++ b/module/calp/html/vcomponent.scm @@ -316,6 +316,40 @@ (input (@ (type "submit"))) ))) +;; (define-public (property-input-template) +;; (div (@ (class "")) +;; (input (@ (type "text") +;; (name "name") +;; (list "known-fields") +;; (placeholder "Nytt fält"))) +;; (select (@ (name "type")) +;; (option (@ (value "TEXT")) "Text")) +;; (span +;; (input (@ (type "text") +;; (name "value") +;; (placeholder "Värde")))))) + +;; (define (list-input-template) +;; ;; It would be better if these input-list's worked on the same +;; ;; class=bind system as the fields above. The problem with that +;; ;; is however that each input-list requires different search +;; ;; and join procedures. Currently this is bound in the JS, see +;; ;; [CATEGORIES_BIND]. +;; ;; It matches on ".input-list[data-property='categories']". +;; `(div (@ (class "input-list") +;; (data-property "categories")) +;; #; +;; ,@(awhen (prop ev 'CATEGORIES) ; +;; (map (lambda (c) ; +;; `(input (@ (size 2) ; +;; (class "unit") ; +;; (value ,c)))) ; +;; it)) + +;; (input (@ (class "unit final") +;; (size 2) +;; (type "text") +;; )))) ;; Single event in side bar (text objects) (define-public (fmt-day day) diff --git a/module/calp/html/view/calendar/week.scm b/module/calp/html/view/calendar/week.scm index 17bb3b2d..388c2f07 100644 --- a/module/calp/html/view/calendar/week.scm +++ b/module/calp/html/view/calendar/week.scm @@ -99,18 +99,51 @@ ;; onclick: "close_popup(document.getElementById(this.closest('.popup-container').id))" class: '("close-tooltip"))) - ,(tabset - `(("📅" title: "Översikt" - (vevent-description - (@ (class "vevent populate-with-uid"))) - ) + (div (@ (class "tabgroup")) + (tab-element + (@ (title "Översikt")) + (span (@ (slot "label")) "📅") + (vevent-description + (@ (slot "content") + (class "vevent populate-with-uid")))) + (tab-element + (@ (title "Redigera")) + (span (@ (slot "label")) "📅") + (vevent-edit (@ (slot "content") + (class "populate-with-uid"))) + )) - ,@(when (edit-mode) - `(("📅" title: "Redigera" - (vevent-edit (@ (class "populate-with-uid")))))) + ;; ,(tabset + ;; `(("📅" title: "Översikt" + ;; (vevent-description + ;; (@ (class "vevent populate-with-uid"))) + ;; ) - ))))) + ;; ,@(when (edit-mode) + ;; `(("📅" title: "Redigera" + ;; (vevent-edit (@ (class "populate-with-uid")))))) + ;; )) + ))) + + (template + (@ (id "tab-template")) + ;; ,((@ (calp html components) include-css) "/static/tab.css") + (div (@ (class "tab")) + (input (@ (type "radio") + ;; id + ;; (name ,tabgroup) + )) + (label (@ ; for id + ;; style= top: calc(var(--tab-size) * i) + (title ; title + )) + (slot (@ (name "label")) "??") + ) + (div (@ (class "content")) + (slot (@ (name "content")) + (span (@ (class "error")) + "CONTENT MISSING"))))) ))) ;; based on the output of fmt-single-event -- cgit v1.2.3