From e7d80fcfa91f92c712110d58151df0f8f1e6ed86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 21 Nov 2021 16:08:08 +0100 Subject: Rework popup components. Previously popups were driven through some CSS hacks, which used labels with specific positioning, and z-index changes. This never really worked, and led the rest of the tree to be unmanagable. This commit replaces that system with a simpler one, which is being driven by javascript. This also allowed a much simpler tree, which allowed us to - make the popups rezisable (with a resize anchor) - move the window handle to above (configurable) - Add and remove tabs without having manually reflow where all labels are --- module/calp/html/view/calendar/week.scm | 153 +++++++++++++++++--------------- 1 file changed, 83 insertions(+), 70 deletions(-) (limited to 'module/calp/html/view') diff --git a/module/calp/html/view/calendar/week.scm b/module/calp/html/view/calendar/week.scm index e13a0ae3..b228991b 100644 --- a/module/calp/html/view/calendar/week.scm +++ b/module/calp/html/view/calendar/week.scm @@ -2,6 +2,7 @@ :use-module (calp util) :use-module (srfi srfi-1) :use-module (srfi srfi-41) + :use-module (rnrs records syntactic) :use-module (datetime) :use-module (calp html view calendar shared) :use-module (calp html config) @@ -14,9 +15,8 @@ events-between)) :use-module ((calp html vcomponent) :select (make-block) ) - :use-module ((calp html components) - :select (btn tabset ; form with-label - )) + ;; :use-module ((calp html components) + ;; :select ()) :use-module ((vcomponent group) :select (group-stream get-groups-between)) ) @@ -86,73 +86,86 @@ ,(vevent-edit-rrule-template)) ;; Based on popup:s output - (template - (@ (id "popup-template")) - (div (@ ; (id ,id) - (class "popup-container") - (onclick "event.stopPropagation()")) - (div (@ (class "popup")) - (nav (@ (class "popup-control")) - ,(btn "×" - title: "Stäng" - onclick: "" - class: '("close-button")) - ,(btn "🗑" - title: "Ta bort" - class: '("remove-button") - onclick: "")) - - (div (@ (class "tabgroup")) - (tab-element - (@ (label-title "Översikt") - (label "📅")) - (vevent-description - (@(class "vevent populate-with-uid")))) - (tab-element - (@ (label-title "Redigera") - (label "🖊")) - (vevent-edit (@ (class "populate-with-uid")))) - (tab-element - (@ (label-tile "Upprepningar") - (label "↺")) - (vevent-edit-rrule (@ (class "populate-with-uid")))) - ,@(when (debug) - `((tab-element - (@ (label-title "Debug") - (label "🐸")) - (vevent-dl (@ (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))) - (div (@ (class "content")) - (slot (@ (name "content")) - (span (@ (class "error")) - "CONTENT MISSING"))))) - ))) + (template (@ (id "popup-template")) + ,(popup-template))))) + + +(define-record-type tab + (fields title label body)) + +(define (popup-template) + + ;; the XXX-n and YYY-n id:s aren't actually used, but mearly show how things + ;; are supposed to be linked together. + ;; Each instance of XXX should be replaced with THE SAME unique id, + ;; and each instance of YYY shoud be replaced with another, but unique id. + ;; n is a serial number, where a tab and its label MUST have the same number. + + (define* (build-tab + tabdata key: + (selected "false") + (tabindex "-1")) + `(button (@ (role "tab") + (aria-selected ,selected) + (tabindex ,tabindex) + (aria-controls "XXX-n") + (id "YYY-n") + (title ,(tab-title tabdata))) + ,(tab-label tabdata))) + + (define tabs + (append + (list + (make-tab "Översikt" "📅" + '(vevent-description + (@ (class "vevent populate-with-uid")))) + (make-tab "Redigera" "🖊" + '(vevent-edit (@ (class "populate-with-uid")))) + (make-tab "Upprepningar" "↺" + '(vevent-edit-rrule (@ (class "populate-with-uid"))))) + + (when (debug) + (list + (make-tab "Debug" "🐸" + '(vevent-dl (@ (class "populate-with-uid")))) + )))) + + + ;; becomes the direct child of + `(div (@ (class "popup-root window") + (onclick "event.stopPropagation()")) + + (nav (@ (class "popup-control")) + (button (@ (class "close-button") + (title "Stäng") + (aria-label "Close")) + "×") + (button (@ (class "remove-button") + (title "Ta Bort")) + "🗑")) + + (main (@ (class "tabgroup window-body")) + (menu (@ (role "tablist") + (aria-label "Simple Tabs")) + ,@(cons (build-tab (car tabs) + selected: "true" + tabindex: "0") + (map build-tab (cdr tabs)))) + ;; content + (article (@ (id "XXX-n") + (role "tabpanel") + (tabindex "0") + (aria-labeledby "YYY-n")) + ,(tab-body (car tabs))) + ,@(map (lambda (tab) + `(article (@ (id "XXX-n") + (role "tabpanel") + (tabindex "0") + (hidden) + (aria-labeledby "YYY-n")) + ,(tab-body tab))) + (cdr tabs)) + ))) (define (week-day-select args) `(select (@ ,@args) -- cgit v1.2.3