Merge pull request #561 from Thorium-Sim/config-ux

fix: Config UX improvements.
Thorium-Sim · Feb 20, 2023 · 3d7a21e · 3d7a21e
2 parents 149f2d1 + 4eb8cb0
commit 3d7a21e
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 38 deletions.
diff --git a/client/src/components/ui/InfoTip.tsx b/client/src/components/ui/InfoTip.tsx
@@ -2,16 +2,18 @@ import {
   autoPlacement,
   useFloating,
   getOverflowAncestors,
+  shift,
 } from "@floating-ui/react-dom";
 import React, {ReactNode, useEffect, useLayoutEffect, useState} from "react";
 import {FaInfoCircle} from "react-icons/fa";
 import Button from "@thorium/ui/Button";
 import useOnClickOutside from "client/src/hooks/useClickOutside";
+import {Portal} from "@headlessui/react";
 
 const InfoTip = ({children}: {children: ReactNode}) => {
   const {x, y, reference, floating, strategy, refs, update} = useFloating({
     placement: "left",
-    middleware: [autoPlacement()],
+    middleware: [autoPlacement(), shift()],
   });
   const [visible, setVisible] = useState(false);
   // Update on scroll and resize for all relevant nodes
@@ -57,20 +59,21 @@ const InfoTip = ({children}: {children: ReactNode}) => {
       >
         <FaInfoCircle className="inline-block text-primary text-base cursor-pointer" />
       </Button>
-
-      <div
-        ref={floating}
-        style={{
-          position: strategy,
-          top: y ?? "",
-          left: x ?? "",
-        }}
-        className={`max-w-xs w-max z-10 border-transparent shadow-lg bg-opacity-90 bg-black rounded-lg p-2 ${
-          visible ? "block" : "hidden"
-        }`}
-      >
-        {children}
-      </div>
+      <Portal>
+        <div
+          ref={floating}
+          style={{
+            position: strategy,
+            top: y ?? "",
+            left: x ?? "",
+          }}
+          className={`max-w-xs w-max z-10 border-transparent shadow-lg bg-opacity-90 bg-black text-white rounded-lg p-2 ${
+            visible ? "block" : "hidden"
+          }`}
+        >
+          {children}
+        </div>
+      </Portal>
     </>
   );
 };

diff --git a/client/src/components/ui/PanZoom/index.tsx b/client/src/components/ui/PanZoom/index.tsx
@@ -1028,8 +1028,6 @@ class PanZoom extends React.Component<Props, State> {
         <div
           ref={this.dragContainer}
           style={{
-            width: "100%",
-            height: "100%",
             display: "inline-block",
             transformOrigin: "0 0 0",
             transform,

diff --git a/client/src/components/ui/UploadWell.tsx b/client/src/components/ui/UploadWell.tsx
@@ -44,7 +44,7 @@ const UploadWell: React.FC<{
   return (
     <label
       {...props}
-      className={`max-w-64 w-full aspect-square ${
+      className={`max-w-64 h-full w-full aspect-square ${
         disabled ? "" : dragging ? "cursor-[copy]" : "cursor-pointer"
       } shadow-inner rounded-lg ${
         dragging ? "bg-white/50" : "bg-black/50"

diff --git a/client/src/pages/Config/ShipSystems/SystemConfigs/reactor.tsx b/client/src/pages/Config/ShipSystems/SystemConfigs/reactor.tsx
@@ -29,7 +29,7 @@ export default function ReactorsConfig() {
     <fieldset key={key} className="flex-1 overflow-y-auto">
       <div className="flex flex-wrap">
         <div className="flex-1 pr-4">
-          <div className="pb-2 flex items-center">
+          <div className="pb-2 flex items-start">
             <Input
               labelHidden={false}
               inputMode="numeric"
@@ -83,7 +83,7 @@ export default function ReactorsConfig() {
               </p>
             </InfoTip>
           </div>
-          <div className="pb-2 flex items-center">
+          <div className="pb-2 flex items-start">
             <Input
               labelHidden={false}
               inputMode="numeric"
@@ -130,7 +130,7 @@ export default function ReactorsConfig() {
               </p>
             </InfoTip>
           </div>
-          <div className="pb-2 flex items-center">
+          <div className="pb-2 flex items-start">
             <Input
               labelHidden={false}
               inputMode="numeric"

diff --git a/client/src/pages/Config/Ships/Assets.tsx b/client/src/pages/Config/Ships/Assets.tsx
@@ -13,7 +13,7 @@ export function Assets() {
   const ship = ships.find(d => d.name === shipId);
   const [, render] = useReducer(() => ({}), {});
   return (
-    <div className="grid grid-cols-2 grid-rows-2 gap-4 overflow-y-auto">
+    <div className="h-full grid grid-cols-2 grid-rows-2 gap-4 ">
       <div className="max-w-md">
         <h3 className="text-lg font-bold flex items-center">
           Logo{" "}
@@ -37,7 +37,7 @@ export function Assets() {
             <img
               src={`${ship.assets.logo}?${new Date().getTime()}`}
               alt="Ship Logo"
-              className="w-10/12 h-10/12 object-cover"
+              className="w-5/6 h-5/6 object-contain aspect-square"
             />
           )}
         </UploadWell>
@@ -49,7 +49,9 @@ export function Assets() {
             Models should be in .glb format. Top and side views are
             automatically generated from the model.
             {/* TODO November 1 2021 - Write a page about how to create 3D models */}
-            <Link to="/docs">Read about how to create compatible models.</Link>
+            <Link to="/docs" className="text-purple-300">
+              Read about how to create compatible models.
+            </Link>
           </InfoTip>
         </h3>
         <UploadWell
@@ -110,7 +112,7 @@ export function Assets() {
             <img
               src={`${ship.assets.vanity}?${new Date().getTime()}`}
               alt="Ship Vanity View"
-              className="w-10/12 h-10/12 object-cover"
+              className="w-5/6 h-5/6 object-contain aspect-square"
             />
           )}
         </UploadWell>
@@ -122,7 +124,7 @@ export function Assets() {
             <img
               src={`${ship.assets.sideView}?${new Date().getTime()}`}
               alt="Ship Side View"
-              className="w-10/12 h-10/12 object-cover"
+              className="w-5/6 h-5/6 object-contain aspect-square"
             />
           )}
         </UploadWell>
@@ -134,7 +136,7 @@ export function Assets() {
             <img
               src={`${ship.assets.topView}?${new Date().getTime()}`}
               alt="Ship Top View"
-              className="w-10/12 h-10/12 object-cover"
+              className="w-5/6 h-5/6 object-contain aspect-square"
             />
           )}
         </UploadWell>

diff --git a/client/src/pages/Config/Ships/SettingsList.tsx b/client/src/pages/Config/Ships/SettingsList.tsx
@@ -1,4 +1,4 @@
-import {Link, useParams} from "react-router-dom";
+import {Link, useMatch} from "react-router-dom";
 
 const links = {
   basic: "Basic",
@@ -10,10 +10,10 @@ const links = {
 };
 
 export function SettingsList() {
-  const params = useParams();
-  const setting = params["*"]?.split("/")[1];
+  const setting = useMatch("config/:pluginId/ships/:shipId/:setting")?.params
+    .setting;
   return (
-    <div className="mb-2 w-72">
+    <div className="mb-2 w-72 overflow-y-auto">
       {Object.entries(links).map(([key, value]) => (
         <Link
           key={key}

diff --git a/client/src/pages/Config/Ships/ShipLayout.tsx b/client/src/pages/Config/Ships/ShipLayout.tsx
@@ -20,7 +20,7 @@ export const ShipLayout = () => {
   if (!pathname.endsWith(shipId)) {
     return (
       <>
-        <div>
+        <div className="h-full flex flex-col">
           <SettingsList />
           <Button
             className="w-full btn-outline btn-error"

diff --git a/client/src/pages/Config/Ships/ShipMap/DeckConfig.tsx b/client/src/pages/Config/Ships/ShipMap/DeckConfig.tsx
@@ -112,7 +112,7 @@ export function DeckConfig() {
           setSelectedNodeId(null);
           setSelectedEdgeId(null);
         }}
-        style={{width: "100%", outline: "none", flex: 1}}
+        style={{outline: "none", flex: 1}}
         className="text-purple-400 border-2 border-white/10 rounded-lg bg-gray-800 overflow-hidden"
         maxZoom={8}
         minZoom={0.5}

diff --git a/client/src/pages/Config/Ships/ShipMap/index.tsx b/client/src/pages/Config/Ships/ShipMap/index.tsx
@@ -95,8 +95,8 @@ export function ShipMap() {
 
   return (
     <>
-      <div className="w-72">
-        <ul className="mb-2 relative">
+      <div className="w-72 flex flex-col">
+        <ul className="mb-2 relative overflow-y-auto">
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}

diff --git a/client/src/pages/Config/Ships/Systems.tsx b/client/src/pages/Config/Ships/Systems.tsx
@@ -28,7 +28,7 @@ export function Systems() {
   const navigate = useNavigate();
   return (
     <>
-      <div className="w-72">
+      <div className="w-72 flex flex-col">
         {/* TODO April 27 2022 - Figure out some way to define and determine the maximum number of
         one type of system that can be assigned to a ship. Ex. only one impulse engine should be assignable. */}
         <h3 className="text-2xl font-bold">Available Systems</h3>
@@ -90,7 +90,7 @@ export function Systems() {
           </Button>
         )}
       </div>
-      <div className="w-72">
+      <div className="w-72 flex flex-col">
         <h3 className="text-2xl font-bold">Assigned Systems</h3>
         <SearchableList
           showSearchLabel={false}

diff --git a/client/src/pages/Config/index.tsx b/client/src/pages/Config/index.tsx
@@ -34,7 +34,7 @@ export default function ConfigRoutes() {
           </Routes>
         </Suspense>
       </div>
-      <div className="w-full h-full bg-black/60 fixed top-0 z-0"></div>
+      <div className="w-full h-full bg-black/60 fixed backdrop-filter backdrop-blur top-0 z-0"></div>
     </>
   );
 }