From e86d02765f2f1b959ba08152b23a330e0223e9ec Mon Sep 17 00:00:00 2001 From: caranicas Date: Wed, 28 Sep 2022 18:38:47 -0400 Subject: [PATCH] properly styled buttons --- .../clearQueue/index.tsx | 7 +++--- .../makeButton/index.tsx | 23 ++++++++----------- .../makeButton/makeButton.css.ts | 4 ++-- .../stopButton/index.tsx | 5 ++-- .../creationActions/creationActions.css.ts | 16 +++++++++++++ .../basicCreation/creationActions/index.tsx | 21 +++++++++++++++++ .../creationPanel/basicCreation/index.tsx | 14 +++++++---- .../build_src/src/styles/shared.css.ts | 1 + 8 files changed, 66 insertions(+), 25 deletions(-) rename ui/frontend/build_src/src/components/{organisms/creationPanel/basicCreation => atoms}/clearQueue/index.tsx (60%) rename ui/frontend/build_src/src/components/{organisms/creationPanel/basicCreation => atoms}/makeButton/index.tsx (92%) rename ui/frontend/build_src/src/components/{organisms/creationPanel/basicCreation => atoms}/makeButton/makeButton.css.ts (56%) rename ui/frontend/build_src/src/components/{organisms/creationPanel/basicCreation => atoms}/stopButton/index.tsx (51%) create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/creationActions.css.ts create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/clearQueue/index.tsx b/ui/frontend/build_src/src/components/atoms/clearQueue/index.tsx similarity index 60% rename from ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/clearQueue/index.tsx rename to ui/frontend/build_src/src/components/atoms/clearQueue/index.tsx index 96c5d434..d57c340f 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/clearQueue/index.tsx +++ b/ui/frontend/build_src/src/components/atoms/clearQueue/index.tsx @@ -1,6 +1,7 @@ import React from "react"; -import { doStopImage } from "../../../../../api"; -import { useImageQueue } from "../../../../../stores/imageQueueStore"; +import { doStopImage } from "../../../api"; +import { useImageQueue } from "../../../stores/imageQueueStore"; +import { BrandedButton } from "../../../styles/shared.css"; export default function ClearQueue() { @@ -19,6 +20,6 @@ export default function ClearQueue() { // / disabled={!hasQueue} return ( - + ); } \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx b/ui/frontend/build_src/src/components/atoms/makeButton/index.tsx similarity index 92% rename from ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx rename to ui/frontend/build_src/src/components/atoms/makeButton/index.tsx index c0d92cbc..caf5d295 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx +++ b/ui/frontend/build_src/src/components/atoms/makeButton/index.tsx @@ -1,32 +1,32 @@ /* eslint-disable @typescript-eslint/naming-convention */ import React, { useEffect, useRef } from "react"; -import { useImageCreate } from "../../../../../stores/imageCreateStore"; -import { useImageQueue } from "../../../../../stores/imageQueueStore"; +import { useImageCreate } from "../../../stores/imageCreateStore"; +import { useImageQueue } from "../../../stores/imageQueueStore"; import { FetchingStates, useImageFetching -} from "../../../../../stores/imageFetchingStore"; +} from "../../../stores/imageFetchingStore"; -import { useImageDisplay } from "../../../../../stores/imageDisplayStore"; +import { useImageDisplay } from "../../../stores/imageDisplayStore"; import { v4 as uuidv4 } from "uuid"; -import { useRandomSeed } from "../../../../../utils"; +import { useRandomSeed } from "../../../utils"; import { ImageRequest, ImageReturnType, ImageOutput, doMakeImage, -} from "../../../../../api"; +} from "../../../api"; import { MakeButtonStyle, } from "./makeButton.css"; import { useTranslation } from "react-i18next"; -import AudioDing from "../../../../molecules/audioDing"; +import AudioDing from "../../molecules/audioDing"; const idDelim = "_batch"; @@ -62,7 +62,6 @@ export default function MakeButton() { const hackJson = (jsonStr: string, id: string) => { try { - const parsed = JSON.parse(jsonStr); const { status, request, output: outputs } = parsed as ImageReturnType; if (status === 'succeeded') { @@ -96,7 +95,6 @@ export default function MakeButton() { const { done, value } = await reader.read(); const jsonStr = decoder.decode(value); if (done) { - removeFirstInQueue(); setStatus(FetchingStates.COMPLETE); hackJson(finalJSON, id); if (isSoundEnabled) { @@ -171,7 +169,7 @@ export default function MakeButton() { } - const queueImageRequest = async (req: ImageRequest) => { + const queueImageRequest = (req: ImageRequest) => { // the actual number of request we will make const requests = []; // the number of images we will make @@ -221,12 +219,12 @@ export default function MakeButton() { } // the request that we have built const req = builtRequest(); - await queueImageRequest(req); + queueImageRequest(req); }; useEffect(() => { const makeImages = async (options: ImageRequest) => { - // potentially update the seed + removeFirstInQueue(); await startStream(id ?? "", options); } @@ -255,7 +253,6 @@ export default function MakeButton() { onClick={() => { void makeImageQueue(); }} - disabled={hasQueue} > {t("home.make-img-btn")} diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts b/ui/frontend/build_src/src/components/atoms/makeButton/makeButton.css.ts similarity index 56% rename from ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts rename to ui/frontend/build_src/src/components/atoms/makeButton/makeButton.css.ts index 1a7a068e..88078e9a 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts +++ b/ui/frontend/build_src/src/components/atoms/makeButton/makeButton.css.ts @@ -1,8 +1,8 @@ import { style } from "@vanilla-extract/css"; -import { vars } from "../../../../../styles/theme/index.css"; +import { vars } from "../../../styles/theme/index.css"; -import { BrandedButton } from "../../../../../styles/shared.css"; +import { BrandedButton } from "../../../styles/shared.css"; export const MakeButtonStyle = style([BrandedButton, { width: "100%", diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/stopButton/index.tsx b/ui/frontend/build_src/src/components/atoms/stopButton/index.tsx similarity index 51% rename from ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/stopButton/index.tsx rename to ui/frontend/build_src/src/components/atoms/stopButton/index.tsx index 2234d348..7f4f66b9 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/stopButton/index.tsx +++ b/ui/frontend/build_src/src/components/atoms/stopButton/index.tsx @@ -1,6 +1,7 @@ import React from "react"; -import { doStopImage } from "../../../../../api"; +import { doStopImage } from "../../../api"; +import { BrandedButton } from "../../../styles/shared.css"; export default function StopButton() { @@ -12,5 +13,5 @@ export default function StopButton() { } }; - return ; + return ; } diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/creationActions.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/creationActions.css.ts new file mode 100644 index 00000000..fcd59946 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/creationActions.css.ts @@ -0,0 +1,16 @@ +import { style, globalStyle } from "@vanilla-extract/css"; +import { vars } from "../../../../../styles/theme/index.css"; + +export const StopContainer = style({ + display: "flex", + width: "100%", + marginTop: vars.spacing.medium, +}); + +globalStyle(`${StopContainer} button`, { + flexGrow: 1, +}); + +globalStyle(`${StopContainer} button:first-child`, { + marginRight: vars.spacing.small, +}); diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx new file mode 100644 index 00000000..8fb3cf16 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +import MakeButton from "../../../../atoms/makeButton"; +import StopButton from "../../../../atoms/stopButton"; +import ClearQueue from "../../../../atoms/clearQueue"; + +import { + StopContainer +} from "./creationActions.css"; + +export default function CreationActions() { + return ( +
+ +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx index d93121a1..b4097453 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx @@ -6,9 +6,10 @@ import { PromptDisplay, } from "./basicCreation.css"; -import MakeButton from "./makeButton"; -import StopButton from "./stopButton"; -import ClearQueue from "./clearQueue"; +// import MakeButton from "./makeButton"; +// import StopButton from "./stopButton"; +// import ClearQueue from "./clearQueue"; +import CreationActions from "./creationActions"; import SeedImage from "./seedImage"; import ActiveTags from "./activeTags"; @@ -33,11 +34,14 @@ export default function BasicCreation() {

{t("home.editor-title")}

- + + + + {/*
-
+ */} diff --git a/ui/frontend/build_src/src/styles/shared.css.ts b/ui/frontend/build_src/src/styles/shared.css.ts index 2aa56292..ed548e7f 100644 --- a/ui/frontend/build_src/src/styles/shared.css.ts +++ b/ui/frontend/build_src/src/styles/shared.css.ts @@ -65,6 +65,7 @@ export const BrandedButton = style({ fontWeight: "bold", color: vars.colors.text.normal, padding: vars.spacing.small, + border: "0", borderRadius: vars.trim.smallBorderRadius, ":hover": {