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

1 files changed, 101 insertions, 117 deletions

diff --git a/static/style.scss b/static/style.scss
index 9833a77a..64098283 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -24,7 +24,10 @@ html, body {
     /* main the graphical portion
        of both the wide and the table
        view */
-    main {
+    > main {
+        /* these allow the main area to shrink, so that all areas will fit the
+           screen. It will however not shrink the elements, leading to our
+           (desired) scrollbar */
         min-width: 0;  /* for wide */
         min-height: 0; /* for tall */
 
@@ -742,7 +745,7 @@ vevent-block, .event {
 .error {
     border: 3px solid red;
     background-color: pink;
-    
+
     pre {
         padding: 1em;
     }
@@ -766,157 +769,126 @@ popup-element {
     &.visible {
         display: block;
     }
-}
 
-.popup {
-    display: flex;
-    background-color: #dedede;
-    color: black;
-    font-size: 80%;
+    main {
+        resize: both;
+        overflow: auto;
 
-    /* overflow-y: auto; */
-    max-width: 60ch;
-    max-height: 60ch;
-    min-width: 60ch;
-    min-height: 30ch;
+        min-height: calc(var(--tabcount) * #{$tablabel-margin + $tablabel-height});
 
-    select {
-        max-width: 100%;
-    }
+        /* some form of sensible minimi and default size for the popup (s main area). */
+        min-width: 150px;
+        width: 350px;
+        height: 250px;
 
-    input {
-        white-space: initial;
-        border: 1px solid gray;
-        max-width: 100%;
-    }
-
-    .eventtext {
-        /* makes the text in the popup scroll, but not the sidebar */
-        overflow-y: auto;
-        padding: 1em;
-        word-break: break-word;
-
-        table {
-            word-break: initial;
-            font-size: 65%;
+        article {
+            padding: 1em;
         }
     }
+}
 
-    .location {
-        font-style: initial;
-    }
+.popup-control {
+    cursor: grab;
+    background-color: var(--color);
 
-    .category {
-        display: inline-block;
-        margin-right: 1ex;
-    }
+    display: flex;
 
-    .popup-control {
-        display: flex;
+    @if $popup-style == "left" {
         flex-direction: column;
+        padding: 1.2ex;
+    } @else {
+        flex-direction: row-reverse;
+        padding: 1ex;
+    }
 
-        /* not needed, but the icons aren't text
-       and should therefor not be copied */
-        user-select: none;
-
-        cursor: grab;
-        background-color: var(--color);
-        /* Transition for background color 
-         * Matches that of '.event'.
-         * TODO break out to common place */
-        transition: 0.3s;
-
-        .btn {
-            max-width: 2em;
-            max-height: 2em;
-            margin: 1em;
 
-            display: flex;
-            align-items: center;
-            justify-content: center;
+    button {
+        display: block;
+        background: $blue;
+        color: white;
+        border: none;
+        box-shadow: $btn-height $btn-height gray;
 
-            font-size: 150%;
+        &:active {
+            transform: translate($btn-height, $btn-height);
+            box-shadow: none;
         }
 
+        @if $popup-style == "left" {
+            width: 9mm;
+            height: 9mm;
+            margin-bottom: 2mm;
+        } @else {
+            width: 7mm;
+            height: 7mm;
+            margin-left: 1mm;
+        }
     }
 }
 
+.popup-root {
+    background-color: #dedede;
+    color: black;
 
-#bar {
-    width: calc(100% + 2em);
-    height: 4px;
-    background: blue;
-    border-color: blue;
-    left: -1em;
-}
+    display: flex;
 
-/* Tabs
-----------------------------------------
-*/
+    @if $popup-style == "left" {
+        flex-direction: row;
+    } @else {
+        flex-direction: column;
+    }
 
-.tabgroup {
-    position: relative;
-    width: 100%;
-    resize: both;
-    --tab-size: 6ex;
-}
 
-.tab {
-    > label {
+    [role="tablist"] {
+        display: flex;
+        flex-direction: column;
         position: absolute;
-        top: calc(var(--tab-size) * var(--tab-index));
-
         left: 100%;
-        /*top: 0; */
-        display: block;
+        margin: 0;
+        padding: 0;
 
-        max-height: 5ex;
-        min-height: 5ex;
+        [role="tab"] {
+            height: $tablabel-height;
+            margin-bottom: $tablabel-margin;
 
-        min-width: 5ex;
-        width: 5ex;
+            width: 5ex;
+            &:hover {
+                width: 10ex;
+            }
 
-        transition: width 0.1s ease-in-out;
-        &:hover {
-            width: 10ex;
+            transition: width 0.1s ease-in-out;
+            border: 1px solid #ccc;
+            border-radius: 0 5px 5px 0;
+            background-color: #aeaeae;
         }
 
-        border: 1px solid #ccc;
-        border-radius: 0 5px 5px 0;
-        background-color: #aeaeae;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    [type=radio] {
-        display: none;
-        &:checked ~ label {
-            z-index: 100;
-            /* to align all tab */
-            border-left: 3px solid transparent;
+        [aria-selected="true"] {
+            border-left: none;
             background-color: #dedede;
-
-            ~ .content {
-                z-index: 100;
-            }
         }
     }
+}
 
-    .content {
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: #dedede;
-        right: 0;
-        bottom: 0;
-        overflow: auto;
+vevent-edit {
 
-        min-width: 100%;
-        min-height: 100%;
+    select {
+        max-width: 100%;
+    }
+
+    input {
+        white-space: initial;
+        border: 1px solid gray;
+        max-width: 100%;
     }
 
+    .eventtext {
+        word-break: break-word;
+
+        table {
+            word-break: initial;
+            font-size: 65%;
+        }
+    }
 
     .edit-form {
         label {
@@ -936,10 +908,22 @@ popup-element {
         .timeinput {
         }
     }
+}
+
+vevent-dl {
+    font-size: 80%;
+}
 
 
+#bar {
+    width: calc(100% + 2em);
+    height: 4px;
+    background: blue;
+    border-color: blue;
+    left: -1em;
 }
 
+
 .plusminuschecked label {
     color: black;
 }