better layout grid

ui/frontend/build_src/src/components/_recipes/button.css.ts

@@ -101,6 +101,7 @@ export const buttonStyle = recipe({
       action: {
         backgroundColor: "transparent",
         color: `hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        textDecoration: "underline",
         ":hover": {
           color: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
         },

ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts

@@ -0,0 +1,14 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+import {
+  tabPanelStyles,
+} from "../../_recipes/tabs_headless.css";
+
+
+export const TabpanelScrollFlop = style([tabPanelStyles(), {
+  direction: 'rtl',
+}]);
+
+globalStyle(`${TabpanelScrollFlop} > *`, {
+  direction: 'ltr',
+});

ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from "react";
 import { Tab } from '@headlessui/react';
 
-import { useImageFetching } from "../../../stores/imageFetchingStore";
+
 
 import CreationPanel from "../../organisms/creationPanel";
 import QueueDisplay from "../../organisms/queueDisplay";
@@ -9,12 +9,12 @@ import QueueDisplay from "../../organisms/queueDisplay";
 import ProcessingStatus from "../../molecules/queueStatusTab";
 
 import {
-  tabPanelStyles,
   tabStyles,
 } from "../../_recipes/tabs_headless.css";
 
-
+import {
-
+  TabpanelScrollFlop
+} from "./creationTabs.css";
 
 export default function CreationTabs() {
 
@@ -48,7 +48,7 @@ export default function CreationTabs() {
 
 
       </Tab.List>
-      <Tab.Panels className={tabPanelStyles()}>
+      <Tab.Panels className={TabpanelScrollFlop}>
         <Tab.Panel>
           <CreationPanel></CreationPanel>
         </Tab.Panel>

ui/frontend/build_src/src/components/layouts/basicDisplay/basicDisplay.css.ts

@@ -0,0 +1,93 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+import { vars } from "../../../styles/theme/index.css";
+
+import {
+  tabStyles
+} from "../../_recipes/tabs_headless.css";
+
+
+export const basicDisplayLayout = style({
+  width: "100%",
+  height: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr 250px",
+  gridTemplateRows: "1fr 250px",
+  gridTemplateAreas: `
+    "content info"
+    "history history"`,
+
+  overflow: "hidden",
+
+  selectors: {
+    '&[data-hide-info]': {
+      gridTemplateColumns: "1fr",
+      gridTemplateRows: "1fr 250px",
+      // gridTemplateAreas: `
+      //   "content"
+      //   "history"`,
+    },
+    '&[data-hide-history]': {
+      gridTemplateColumns: "1fr 250px",
+      gridTemplateRows: "1fr 0px",
+      // gridTemplateAreas: `
+      //   "content info"`,
+    },
+    '&[data-hide-info][data-hide-history]': {
+      gridTemplateColumns: "1fr 0px",
+      gridTemplateRows: "1fr 0px",
+      // gridTemplateAreas: `
+      //   "content"`,
+    },
+  },
+});
+
+// globalStyle(`${basicDisplayLayout}.hideHistory`, {
+
+// });
+
+export const contentLayout = style({
+  gridArea: "content",
+});
+
+export const infoLayout = style({
+  gridArea: "info",
+  position: "relative",
+});
+
+export const historyLayout = style({
+  gridArea: "history",
+  position: "relative",
+});
+
+globalStyle(`${historyLayout} > button`, {
+  position: "absolute",
+  top: '-29px',
+});
+
+export const displayContainer = style({
+  flexGrow: 1,
+  overflow: 'auto',
+  display: "flex",
+});
+
+export const displayData = style({
+  width: '250px',
+  height: '100%',
+  backgroundColor: 'rebeccapurple',
+  position: 'relative',
+});
+
+export const DataTab = style([tabStyles(), {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+
+  // pretty sure this is a magic number
+  transformOrigin: '37% 275%',
+  transform: 'rotate(-90deg)',
+}]);
+
+
+// export const previousImages = style({
+//   minHeight: '250px',
+// });

ui/frontend/build_src/src/components/layouts/basicDisplay/index.tsx

@@ -0,0 +1,67 @@
+
+import React, { useState, useRef, useEffect } from "react";
+import { Transition } from '@headlessui/react'
+
+import CurrentDisplay from "../../organisms/currentDisplay";
+import CompletedImages from "../../organisms/completedImages";
+import CurrentInfo from "../../organisms/currentInfo";
+
+
+import {
+  tabStyles
+} from "../../_recipes/tabs_headless.css";
+
+import {
+  basicDisplayLayout,
+  contentLayout,
+  infoLayout,
+  historyLayout
+} from "./basicDisplay.css";
+
+export default function BasicDisplay() {
+
+  const [isShowingHistory, setIsShowingHistory] = useState(true)
+
+  const layoutRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+
+    if (void 0 !== layoutRef.current) {
+
+      // set the hide-history data attribute
+      if (isShowingHistory) {
+        layoutRef.current.removeAttribute('data-hide-history');
+      }
+      else {
+        // layoutRef.current.dataset.hideHistory = "true";
+        layoutRef.current.setAttribute('data-hide-history', {});
+      }
+
+    }
+  }, [layoutRef, isShowingHistory]);
+
+
+  return (
+    <div
+      ref={layoutRef}
+      className={basicDisplayLayout}
+    >
+      <div className={contentLayout}>
+        <CurrentDisplay></CurrentDisplay>
+      </div>
+
+      {/* <div className={infoLayout}>
+        <CurrentInfo ></CurrentInfo>
+      </div> */}
+
+      <div className={historyLayout}>
+        <button
+          className={tabStyles({})}
+          onClick={() => setIsShowingHistory((isShowingHistory) => !isShowingHistory)}>
+          {isShowingHistory ? "Hide History" : "Show History"}
+        </button>
+        <CompletedImages></CompletedImages>
+      </div>
+    </div>
+  );
+}

ui/frontend/build_src/src/components/organisms/completedImages/completedImages.css.ts

@@ -1,12 +1,20 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-import { vars } from "../../../../styles/theme/index.css";
+import { vars } from "../../../styles/theme/index.css";
 import {
   card as cardStyle,
-} from '../../../_recipes/card.css'
+} from '../../_recipes/card.css'
 
-export const completedImagesMain = style([cardStyle(),
+export const completedImagesMain = style({
-{
+  position: "relative",
+});
+
+// globalStyle(`${completedImagesMain} > button`, {
+//   position: "absolute",
+//   top: '-29px',
+// });
+
+export const completedImagesContent = style([cardStyle(), {
   height: "250px",
   width: "100%",
   display: "flex",
@@ -24,15 +32,15 @@ export const completedImagesList = style({
   paddingLeft: vars.spacing.none,
 });
 
-globalStyle(`${completedImagesMain} li`, {
+globalStyle(`${completedImagesContent} li`, {
   position: "relative",
 });
 
-globalStyle(`${completedImagesMain} > li:first-of-type`, {
+globalStyle(`${completedImagesContent} > li:first-of-type`, {
   marginLeft: vars.spacing.medium,
 });
 
-globalStyle(`${completedImagesMain} > li:last-of-type`, {
+globalStyle(`${completedImagesContent} > li:last-of-type`, {
   marginRight: 0,
 });
 

ui/frontend/build_src/src/components/organisms/completedImages/index.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+
+
+import { useImageDisplay } from "../../../stores/imageDisplayStore";
+
+import {
+  completedImagesMain,
+  completedImagesContent,
+  completedImagesList,
+  imageContain,
+} from "./completedImages.css";
+
+import {
+  buttonStyle
+} from "../../_recipes/button.css";
+
+import { Transition } from '@headlessui/react'
+
+
+import {
+  tabStyles
+} from "../../_recipes/tabs_headless.css";
+
+export default function CompletedImages(
+
+) {
+
+  const [isShowing, setIsShowing] = useState(false)
+
+
+  const images = useImageDisplay((state) => state.images);
+  const setCurrentImage = useImageDisplay((state) => state.setCurrentImage);
+  const clearDisplay = useImageDisplay((state) => state.clearDisplay);
+
+  const removeImagesAll = () => {
+    clearDisplay();
+  };
+
+  return (
+    <div className={completedImagesMain}>
+      {/* <button
+        className={tabStyles({})}
+        onClick={() => setIsShowing((isShowing) => !isShowing)}>
+        {isShowing ? "Hide History" : "Show History"}
+      </button> */}
+      {/* <Transition
+        show={isShowing}
+      > */}
+
+      <div className={completedImagesContent}>
+        {/* Adjust the dom do we dont do this check twice */}
+        {images != null && images.length > 0 && (
+          <button
+            className={buttonStyle()}
+            onClick={() => {
+              removeImagesAll();
+            }}
+          >
+            REMOVE ALL
+          </button>
+        )}
+        <ul className={completedImagesList}>
+          {images?.map((image, index) => {
+            if (void 0 === image) {
+              console.warn(`image ${index} is undefined`);
+              return null;
+            }
+
+            return (
+              <li key={image.id}>
+                <button
+                  className={imageContain}
+                  onClick={() => {
+                    setCurrentImage(image);
+                  }}
+                >
+                  <img src={image.data} alt={image.info.prompt} />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      {/* </Transition> */}
+    </div>
+  );
+}

ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/imageDisplay.css.ts

@@ -1,7 +1,6 @@
 import { style, globalStyle } from '@vanilla-extract/css'
 
-
+import { vars } from '../../../../styles/theme/index.css'
-import { vars } from '../../../../../styles/theme/index.css'
 
 export const imageDisplayMain = style({
   height: '100%',

ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/index.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React from "react";
-import { useImageCreate } from "../../../../../stores/imageCreateStore";
+import { useImageCreate } from "../../../../stores/imageCreateStore";
-import { CompletedImagesType } from "../../../../../stores/imageDisplayStore";
+import { CompletedImagesType } from "../../../../stores/imageDisplayStore";
 
-import GeneratedImage from "../../../../molecules/generatedImage";
+import GeneratedImage from "../../../molecules/generatedImage";
 
 import {
   imageDisplayMain,
@@ -15,7 +15,7 @@ import {
 
 import {
   buttonStyle
-} from "../../../../_recipes/button.css";
+} from "../../../_recipes/button.css";
 
 export default function ImageDisplay({ info, data }: CompletedImagesType) {
 

ui/frontend/build_src/src/components/organisms/currentDisplay/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 
-import { FetchingStates, useImageFetching } from "../../../../stores/imageFetchingStore";
+import { FetchingStates, useImageFetching } from "../../../stores/imageFetchingStore";
-import { useImageDisplay } from "../../../../stores/imageDisplayStore";
+import { useImageDisplay } from "../../../stores/imageDisplayStore";
 
-import { API_URL } from "../../../../api";
+import { API_URL } from "../../../api";
 
 import {
   currentDisplayMain,
@@ -38,7 +38,6 @@ export default function CurrentDisplay() {
   const status = useImageFetching((state) => state.status);
   const currentImage = useImageDisplay((state) => state.currentImage);
 
-
   const progressImages = useImageFetching((state) => state.progressImages);
 
   return (

ui/frontend/build_src/src/components/organisms/currentInfo/currentInfo.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css'
+
+import {
+  card as cardStyles,
+} from '../../_recipes/card.css'
+
+export const currentInfoMain = style([
+  cardStyles(
+    {
+      backing: 'dark',
+    }
+  ),
+  {
+    // display: 'flex',
+    // flexDirection: 'column',
+    // justifyContent: 'center',
+    // alignItems: 'center',
+    // height: '100%',
+    width: '250px',
+    padding: '0 0 0 0',
+  },
+])

ui/frontend/build_src/src/components/organisms/currentInfo/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { currentInfoMain } from "./currentInfo.css";
+export default function CurrentInfo() {
+  return <div className={
+    currentInfoMain
+  }> current info</div>;
+}

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx

@@ -1,86 +0,0 @@
-import React, { useState } from "react";
-
-
-import { useImageDisplay } from "../../../../stores/imageDisplayStore";
-
-import {
-  completedImagesMain,
-  completedImagesList,
-  imageContain,
-} from "./completedImages.css";
-
-import {
-  buttonStyle
-} from "../../../_recipes/button.css";
-
-import { Transition } from '@headlessui/react'
-
-
-import {
-  tabStyles
-} from "../../../_recipes/tabs_headless.css";
-
-export default function CompletedImages(
-
-) {
-
-  const [isShowing, setIsShowing] = useState(false)
-
-
-  const images = useImageDisplay((state) => state.images);
-  const setCurrentImage = useImageDisplay((state) => state.setCurrentImage);
-  const clearDisplay = useImageDisplay((state) => state.clearDisplay);
-
-  const removeImagesAll = () => {
-    clearDisplay();
-  };
-
-  return (
-    <>
-      <button
-        className={tabStyles({})}
-        onClick={() => setIsShowing((isShowing) => !isShowing)}>
-        {isShowing ? "Hide History" : "Show History"}
-      </button>
-      <Transition
-        show={isShowing}
-      >
-
-        <div className={completedImagesMain}>
-          {/* Adjust the dom do we dont do this check twice */}
-          {images != null && images.length > 0 && (
-            <button
-              className={buttonStyle()}
-              onClick={() => {
-                removeImagesAll();
-              }}
-            >
-              REMOVE ALL
-            </button>
-          )}
-          <ul className={completedImagesList}>
-            {images?.map((image, index) => {
-              if (void 0 === image) {
-                console.warn(`image ${index} is undefined`);
-                return null;
-              }
-
-              return (
-                <li key={image.id}>
-                  <button
-                    className={imageContain}
-                    onClick={() => {
-                      setCurrentImage(image);
-                    }}
-                  >
-                    <img src={image.data} alt={image.info.prompt} />
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      </Transition>
-    </>
-  );
-}

ui/frontend/build_src/src/components/organisms/displayPanel/currentInfo/index.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function CurrentInfo() {
-  return <div></div>;
-}

ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts

@@ -1,18 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { vars } from "../../../styles/theme/index.css";
-
-export const displayPanel = style({
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  paddingRight: vars.spacing.medium,
-});
-
-export const displayContainer = style({
-  flexGrow: 1,
-  overflow: 'auto',
-});
-
-// export const previousImages = style({
-//   minHeight: '250px',
-// });

ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx

@@ -1,35 +0,0 @@
-
-import React, { useState } from "react";
-
-import CurrentDisplay from "./currentDisplay";
-import CompletedImages from "./completedImages";
-
-// import {
-//   tabStyles
-// } from "../../_recipes/tabs_headless.css";
-import {
-  displayPanel,
-  // displayContainer,
-} from "./displayPanel.css";
-
-
-
-export default function DisplayPanel() {
-
-  // const [isShowing, setIsShowing] = useState(false)
-
-  return (
-    <div className={displayPanel}>
-
-      {/* <div className={displayContainer}> */}
-      <CurrentDisplay
-      ></CurrentDisplay>
-      {/* </div> */}
-
-      {/* <div className={previousImages}> */}
-      <CompletedImages
-      ></CompletedImages>
-      {/* </div> */}
-    </div>
-  );
-}

ui/frontend/build_src/src/pages/Home/home.css.ts

@@ -42,7 +42,6 @@ export const CreateLayout = style({
   flexDirection: "column",
 });
 
-
 export const DisplayLayout = style({
   gridArea: "display",
   overflow: "auto",

ui/frontend/build_src/src/pages/Home/index.tsx

@@ -16,9 +16,9 @@ import { useImageCreate } from "../../stores/imageCreateStore";
 
 // Todo - import components here
 import HeaderDisplay from "../../components/organisms/headerDisplay";
-import DisplayPanel from "../../components/organisms/displayPanel";
+import BasicDisplay from "../../components/layouts/basicDisplay";
 import FooterDisplay from "../../components/organisms/footerDisplay";
-import CreationTabs from "../../components/layouts/CreationTabs";
+import CreationTabs from "../../components/layouts/creationTabs";
 
 function Home() {
   // Get the original save directory
@@ -60,7 +60,7 @@ function Home() {
           <CreationTabs></CreationTabs>
         </nav>
         <main className={DisplayLayout}>
-          <DisplayPanel></DisplayPanel>
+          <BasicDisplay></BasicDisplay>
         </main>
       </div>
       <footer className={FooterLayout}>