fix(ui,map): with css anchor positioning the toolbar can really be fl…

…oating, also fixed up some colors for chrome
updraft0 · Jun 11, 2024 · a4ee8ce · a4ee8ce
1 parent e5eadbc
commit a4ee8ce
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 18 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -8,6 +8,13 @@
 
     <!-- TODO link this from somewhere else? -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/tabler-icons.min.css">
+
+    <!-- polyfill css anchor positioning -->
+    <script type="module">
+      if (!("anchorName" in document.documentElement.style)) {
+        import("https://unpkg.com/@oddbird/css-anchor-positioning");
+      }
+    </script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/ui/src/main/css/app.css b/ui/src/main/css/app.css
@@ -27,6 +27,7 @@
 
 button {
     padding: 0;
+    color: $gray-lightest;
 }
 
 :root {
@@ -44,12 +45,33 @@ button {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-text-size-adjust: 100%;
+
+    scrollbar-color: $gray-darker $gray-dark;
 }
 
 table {
     border-collapse: collapse;
 }
 
+input, textarea, select, button {
+    color: $gray-lightest;
+    background-color: $gray-darker;
+}
+
+span, div, i, p, h1, h2, h3, label {
+    color: $gray-lightest;
+    user-select: none;
+}
+
+/* dialogs TODO move elsewhere */
+
+
+h2.dialog-header {
+    font-size: 1.2em;
+    margin: 0;
+    text-align: center;
+}
+
 /* character */
 
 
@@ -135,6 +157,8 @@ $box-height:    40px;
     background-color: $gray-darker;
 
     margin-left: 2px;
+
+    anchor-name: --map-parent;
 }
 
 /* TODO removed as wasn't sure this is needed!? */
@@ -499,8 +523,21 @@ img.type-icon-16-round {
 }
 
 dialog.system-rename-dialog {
-    width: 20%;
-    min-width: 200px;
+    width: 15em;
+    user-select: none;
+
+    & div.dialog-header {
+        & h2 {
+            font-size: 1.2em;
+            margin: 0;
+        }
+        text-align: center;
+        color: $gray-lightest;
+    }
+
+    & input {
+        width: 100%;
+    }
 }
 
 input.input-system-name {
@@ -545,8 +582,11 @@ input.input-system-name {
     flex-direction: column;
     width: 1.6em;
     /* float + relative position to receive mouse events */
-    float: left;
-    position: relative;
+    /*float: left;*/
+    position: absolute;
+
+    left: anchor(--map-parent left);
+
     opacity: 85%;
 
     & button {
@@ -708,4 +748,4 @@ dialog {
         outline: 1px solid $orange;
     }
 
-}
+}
diff --git a/ui/src/main/css/views/map-system-signature-view.css b/ui/src/main/css/views/map-system-signature-view.css
@@ -185,11 +185,6 @@
     }
 
     & tr.signature-toolbar {
-        & td > * {
-            margin-left: 2px;
-            margin-right: 2px;
-        }
-
         & td span {
             color: $gray-lighter;
             align-self: center;
@@ -284,7 +279,7 @@
 }
 
 dialog.system-add-signature {
-    width: 300px;
+    width: 300px; /* FIXME */
 
     & div.add-signature-line {
         display: flex;
@@ -308,6 +303,13 @@ dialog.system-add-signature {
         text-align: center;
     }
 
+    & input.signature-id:disabled {
+        user-select: none;
+        border: 1px $gray-light;
+        background-color: $gray;
+        font-weight: bold;
+    }
+
     & select.signature-group {
         font-size: 0.8rem;
     }
@@ -323,12 +325,18 @@ dialog.system-paste-signatures {
     width: 50em;
 
     & textarea.signature-paste {
-        width: 100%;
+        padding: 0;
+        min-width: 100%;
+        max-width: 100%;
         /*height: fit-content;*/
         max-height: 50vh;
         min-height: 10em;
     }
 
+    & span.validation-error {
+        color: $yellow;
+    }
+
     & table.signature-list {
         margin-top: 5px;
         user-select: none;

diff --git a/ui/src/main/scala/controltower/page/map/view/PasteSignaturesView.scala b/ui/src/main/scala/controltower/page/map/view/PasteSignaturesView.scala
@@ -67,13 +67,15 @@ class PasteSignaturesView(
       textArea(
         cls         := "signature-paste",
         placeholder := "Paste signatures here...",
+        // TODO: figure out why onMountFocus does not work
+        onMountCallback(ctx => scala.scalajs.js.timers.setTimeout(50)(ctx.thisNode.ref.focus())),
         onInput.mapToValue --> signatures
       ),
       div(
         cls := "display-signatures",
         child <-- signaturesParsed.signal
           .foldEither(
-            errText => span(errText),
+            errText => span(cls := "validation-error", errText),
             tableOfUpdates
           )
       )

diff --git a/ui/src/main/scala/controltower/page/map/view/SystemSignatureView.scala b/ui/src/main/scala/controltower/page/map/view/SystemSignatureView.scala
@@ -83,6 +83,7 @@ private inline def sigView(
             cls := "signature-toolbar",
             span("Signatures"),
             select(
+              cls := "signature-filter",
               modSeq(SignatureFilter.values.map(_.selectOption).toSeq),
               controlled(
                 value <-- currentFilter.signal.map(_.toString),
@@ -202,7 +203,11 @@ private inline def sigView(
               cls    := "sig-destructive",
               cls    := "ti",
               cls    := "ti-clear-all",
-              disabled <-- mapRole.map(!RoleController.canEditSignatures(_)).combineWith(isConnected).map(_ || !_),
+              disabled <-- mapRole
+                .map(!RoleController.canEditSignatures(_))
+                .combineWith(isConnected)
+                .map(_ || !_)
+                .map(v => v || mss.signatures.isEmpty),
               onClick.stopPropagation.mapToUnit --> (_ =>
                 Modal.showConfirmation(
                   "Remove all signatures?",
@@ -256,7 +261,7 @@ private inline def sigView(
           },
           solarSystem,
           static,
-          isEditingDisabled = mapRole.map(!RoleController.canEditSignatures(_))
+          isEditingDisabled = mapRole.map(!RoleController.canEditSignatures(_)).combineWith(isConnected).map(_ || !_)
         )
       )
     )
@@ -343,6 +348,7 @@ private def signatureRow(
     )
 
   def wormholeTargetSelect(w: MapSystemSignature.Wormhole) =
+    // TODO: current approach prevents filtering out connections that are already targeted - rethink
     val current = Var(w.connectionId.flatMap(cId => connections.find(_.id == cId)).getOrElse(ConnectionTarget.Unknown))
     val dropdown = OptionDropdown(
       connections.prepended(ConnectionTarget.Unknown).toIndexedSeq,
@@ -649,12 +655,12 @@ private def pasteSignaturesView(
   div(
     cls := "system-paste-signatures-view",
     cls := "dialog-view",
-    div(cls := "dialog-header", "Paste system signatures"),
+    h2(cls := "dialog-header", "Paste system signatures"),
     addAll.view,
     div(
       cls := "add-signature-line",
       hideIfEmptyOpt(validationError.signal),
-      child.maybe <-- validationError.signal.map(_.map(span(_)))
+      child.maybe <-- validationError.signal.map(_.map(s => span(cls := "validation-error", s)))
     ),
     div(
       cls := "dialog-submit",

diff --git a/ui/src/main/scala/controltower/page/map/view/SystemView.scala b/ui/src/main/scala/controltower/page/map/view/SystemView.scala
@@ -270,7 +270,7 @@ private def systemRenameView(systemId: Long, name: String, actions: WriteBus[Map
   val nameVar = Var(name)
   div(
     cls := "system-rename-view",
-    div(cls := "dialog-header", "Rename System"),
+    h2(cls := "dialog-header", "Rename System"),
     systemNameInput(
       nameVar,
       autoFocus := true,