diff --git a/ui/frontend/build_src/src/components/_recipes/button.css.ts b/ui/frontend/build_src/src/components/_recipes/button.css.ts index 12b2ec69..db8d81ca 100644 --- a/ui/frontend/build_src/src/components/_recipes/button.css.ts +++ b/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})`, }, diff --git a/ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts b/ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts new file mode 100644 index 00000000..af44b88f --- /dev/null +++ b/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', +}); diff --git a/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx b/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx index a7cde332..4d4d4965 100644 --- a/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx +++ b/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() { - + diff --git a/ui/frontend/build_src/src/components/layouts/basicDisplay/basicDisplay.css.ts b/ui/frontend/build_src/src/components/layouts/basicDisplay/basicDisplay.css.ts new file mode 100644 index 00000000..96336bbf --- /dev/null +++ b/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', +// }); diff --git a/ui/frontend/build_src/src/components/layouts/basicDisplay/index.tsx b/ui/frontend/build_src/src/components/layouts/basicDisplay/index.tsx new file mode 100644 index 00000000..63c0c123 --- /dev/null +++ b/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(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 ( +
+
+ +
+ + {/*
+ +
*/} + +
+ + +
+
+ ); +} diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts b/ui/frontend/build_src/src/components/organisms/completedImages/completedImages.css.ts similarity index 63% rename from ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts rename to ui/frontend/build_src/src/components/organisms/completedImages/completedImages.css.ts index feda7757..c5d98bc1 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts +++ b/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, }); diff --git a/ui/frontend/build_src/src/components/organisms/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/completedImages/index.tsx new file mode 100644 index 00000000..afb3f4ba --- /dev/null +++ b/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 ( +
+ {/* */} + {/* */} + +
+ {/* Adjust the dom do we dont do this check twice */} + {images != null && images.length > 0 && ( + + )} +
    + {images?.map((image, index) => { + if (void 0 === image) { + console.warn(`image ${index} is undefined`); + return null; + } + + return ( +
  • + +
    • + ); + })} +
+
+ {/* */} +
+ ); +} diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/currentDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/currentDisplay/currentDisplay.css.ts similarity index 100% rename from ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/currentDisplay.css.ts rename to ui/frontend/build_src/src/components/organisms/currentDisplay/currentDisplay.css.ts diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/imageDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/imageDisplay.css.ts similarity index 92% rename from ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/imageDisplay.css.ts rename to ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/imageDisplay.css.ts index a519cdeb..ad84a309 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/imageDisplay.css.ts +++ b/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%', diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/index.tsx similarity index 90% rename from ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/index.tsx rename to ui/frontend/build_src/src/components/organisms/currentDisplay/imageDisplay/index.tsx index 17019f45..9dc32ff2 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/index.tsx +++ b/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 { CompletedImagesType } from "../../../../../stores/imageDisplayStore"; +import { useImageCreate } from "../../../../stores/imageCreateStore"; +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) { diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/currentDisplay/index.tsx similarity index 86% rename from ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx rename to ui/frontend/build_src/src/components/organisms/currentDisplay/index.tsx index c1f0e68f..458deac6 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx +++ b/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 { useImageDisplay } from "../../../../stores/imageDisplayStore"; +import { FetchingStates, useImageFetching } from "../../../stores/imageFetchingStore"; +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 ( diff --git a/ui/frontend/build_src/src/components/organisms/currentInfo/currentInfo.css.ts b/ui/frontend/build_src/src/components/organisms/currentInfo/currentInfo.css.ts new file mode 100644 index 00000000..167d8c2d --- /dev/null +++ b/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', + }, +]) diff --git a/ui/frontend/build_src/src/components/organisms/currentInfo/index.tsx b/ui/frontend/build_src/src/components/organisms/currentInfo/index.tsx new file mode 100644 index 00000000..bb131621 --- /dev/null +++ b/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
current info
; +} \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx deleted file mode 100644 index 9de34a32..00000000 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx +++ /dev/null @@ -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 ( - <> - - - -
- {/* Adjust the dom do we dont do this check twice */} - {images != null && images.length > 0 && ( - - )} -
    - {images?.map((image, index) => { - if (void 0 === image) { - console.warn(`image ${index} is undefined`); - return null; - } - - return ( -
  • - -
    • - ); - })} -
-
- - - ); -} diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentInfo/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/currentInfo/index.tsx deleted file mode 100644 index fa3286c2..00000000 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentInfo/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -export default function CurrentInfo() { - return
; -} \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts deleted file mode 100644 index ddfe8d35..00000000 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts +++ /dev/null @@ -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', -// }); diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx deleted file mode 100644 index 74c2e39a..00000000 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ /dev/null @@ -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 ( -
- - {/*
*/} - - {/*
*/} - - {/*
*/} - - {/*
*/} -
- ); -} diff --git a/ui/frontend/build_src/src/pages/Home/home.css.ts b/ui/frontend/build_src/src/pages/Home/home.css.ts index b9ed3d56..b3904240 100644 --- a/ui/frontend/build_src/src/pages/Home/home.css.ts +++ b/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", diff --git a/ui/frontend/build_src/src/pages/Home/index.tsx b/ui/frontend/build_src/src/pages/Home/index.tsx index cdba61a5..811e832d 100644 --- a/ui/frontend/build_src/src/pages/Home/index.tsx +++ b/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() {
- +