Merge branch 'html-popup-tabs'

Firefox decided to work again. It might just be my system that it
slightly unstable?

2 files changed, 82 insertions, 5 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index 3e9f71e6..5b06fe01 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -142,6 +142,18 @@
       (div ,body))))
 
 
+(define (tabset elements)
+  (define tabgroup (symbol->string (gensym "tabgroup")))
+
+  `(div (@ (class "tabgroup"))
+        ,@(for (i (key body)) in (enumerate elements)
+               (define id (symbol->string (gensym "tab")))
+               `(div (@ (class "tab"))
+                     (input (@ (type "radio") (id ,id) (name ,tabgroup)
+                               ,@(when (zero? i) '((checked)))))
+                     (label (@ (for ,id) (style "top: " ,(* 6 i) "ex")) ,key)
+                     (div (@ (class "content")) ,body)))))
+
 (define (popup ev id)
   `(div (@ (class "popup-container") (id ,id))
         (div (@ (class "popup"))
@@ -156,7 +168,11 @@
                         title: "Ladda ner"
                         href: (string-append "/calendar/" (prop ev 'UID) ".ics")))
 
-             ,(fmt-single-event ev))))
+             ,(tabset
+               `(("📅" ,(fmt-single-event ev))
+                 ;; TODO only on debug/edit?
+                 ("</>" (script (@ (type "application/calendar+xml"))
+                                 ,((@ (output xcal) vcomponent->sxcal) ev))))))))
 
 
 
@@ -202,9 +218,6 @@
                                   (eq? 'TENTATIVE (prop ev 'PARTSTAT)))
                          " tentative"))
                     (data-tipped-options ,(format #f "inline: '~a'" popup-id)))))
-            ,(when (debug)
-               `(script (@ (type "application/calendar+xml"))
-                        ,((@ (output xcal) vcomponent->sxcal) ev)))
             ,(when (prop ev 'RRULE)
                `(span (@ (class "repeating")) "↺"))
             ,((get-config 'summary-filter) ev (prop ev 'SUMMARY))
diff --git a/static/style.css b/static/style.css
index 9b680a52..14ab1e53 100644
--- a/static/style.css
+++ b/static/style.css
@@ -636,7 +636,7 @@ along with their colors.
     background-color: #dedede;
     color: black;
 
-    overflow-y: auto;
+    /* overflow-y: auto; */
     max-width: 60ch;
     max-height: 60ch;
     min-width: 40ch;
@@ -686,5 +686,69 @@ along with their colors.
     left: -1em;
 }
 
+/* Tabs
+----------------------------------------
+*/
+
+.tabgroup {
+    position: relative;
+    width: 100%;
+}
+
+.tab label {
+    position: absolute;
+
+    left: 100%;
+    top: 0;
+    display: block;
+
+    max-height: 5ex;
+    min-height: 5ex;
+    min-width: 5ex;
+    max-width: 5ex;
+
+    border: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
+    background-color: #aeaeae;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.tab [type=radio] { display: none; }
+
+.tab .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: orange;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+}
+
+.tpd-content-wrapper {
+    overflow: visible;
+}
+
+
+.tab [type=radio]:checked ~ label {
+    z-index: 1;
+    /* to align all tab */
+    border-left: 3px solid transparent;
+    background-color: #dedede;
+}
+
+.tab [type=radio]:checked ~ label ~ .content {
+	z-index: 1;
+}
+
+script[type="application/calendar+xml"] {
+    display: block;
+    font-family: monospace;
+    font-size: xx-small;
+}
+
 /* vim:expandtab:softtabstop=4:shiftwidth=4:
  */