mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-05-29 22:29:30 +02:00
Merge pull request #28 from caranicas/beta-react-style-clean-pt2
Beta react style clean pt2
This commit is contained in:
caranicas
GitHub
commit
40a48954c3
@ -9,6 +9,7 @@ module.exports = {
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
plugins: ["react"],
|
||||
extends: [
|
||||
@ -21,6 +22,7 @@ module.exports = {
|
||||
// general things turned off for now
|
||||
"prefer-const": "off",
|
||||
"no-debugger": "warn",
|
||||
"eol-last": "off",
|
||||
|
||||
"comma-dangle": ["off", "always-multiline"],
|
||||
"no-void": ["off"],
|
||||
@ -60,9 +62,10 @@ module.exports = {
|
||||
"@typescript-eslint/no-unnecessary-type-assertion": "off",
|
||||
"@typescript-eslint/space-before-function-paren": "off",
|
||||
|
||||
// i18n stuff no string literal works
|
||||
"i18next/no-literal-string": "warn",
|
||||
// i18n stuff no string literal works but turned off for now
|
||||
"i18next/no-literal-string": "off",
|
||||
// still need to figure out how to get this to work
|
||||
// it should error if we dont haev all the keys in the translation file
|
||||
"i18n-json/identical-keys": [
|
||||
"error",
|
||||
{
|
||||
|
||||
@ -10,259 +10,5 @@
|
||||
<!-- The react app entry point. Currently no ui just poc importing and logging -->
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
|
||||
<!-- ORIGINAL CODE BELOW FOR REFENCE -->
|
||||
|
||||
<!-- KEEP FOR NOW -->
|
||||
<!-- THE STYLES ARE BEING USED IN THE REACT APP -->
|
||||
<!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
|
||||
<style>
|
||||
/* label {
|
||||
font-size: 10pt;
|
||||
}
|
||||
#prompt {
|
||||
width: 100%;
|
||||
height: 50pt;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
#prompt {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
.image_preview_container {
|
||||
display: none;
|
||||
margin-top: 10pt;
|
||||
}
|
||||
.image_clear_btn {
|
||||
position: absolute;
|
||||
transform: translateX(-50%) translateY(-35%);
|
||||
background: black;
|
||||
color: white;
|
||||
border: 2pt solid #ccc;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
border-radius: 8pt;
|
||||
width: 16pt;
|
||||
height: 16pt;
|
||||
font-family: Verdana;
|
||||
font-size: 8pt;
|
||||
}
|
||||
#editor-settings-entries {
|
||||
font-size: 9pt;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
#editor-settings-entries li {
|
||||
padding-bottom: 3pt;
|
||||
}
|
||||
#guidance_scale {
|
||||
transform: translateY(30%);
|
||||
} */
|
||||
#outputMsg {
|
||||
font-size: small;
|
||||
}
|
||||
#footer {
|
||||
font-size: small;
|
||||
padding-left: 10pt;
|
||||
background: none;
|
||||
}
|
||||
#footer-legal {
|
||||
font-size: 8pt;
|
||||
}
|
||||
.imgSeedLabel {
|
||||
position: absolute;
|
||||
transform: translateX(-100%);
|
||||
margin-top: 5pt;
|
||||
margin-left: -5pt;
|
||||
font-size: 10pt;
|
||||
|
||||
background-color: #333;
|
||||
opacity: 0.8;
|
||||
color: #ddd;
|
||||
border-radius: 3pt;
|
||||
padding: 1pt 3pt;
|
||||
}
|
||||
.imgUseBtn {
|
||||
position: absolute;
|
||||
transform: translateX(-100%);
|
||||
margin-top: 30pt;
|
||||
margin-left: -5pt;
|
||||
}
|
||||
.imgSaveBtn {
|
||||
position: absolute;
|
||||
transform: translateX(-100%);
|
||||
margin-top: 55pt;
|
||||
margin-left: -5pt;
|
||||
}
|
||||
.imgItem {
|
||||
display: inline;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.imgItemInfo {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 75%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
#container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#meta small {
|
||||
font-size: 11pt;
|
||||
}
|
||||
#editor {
|
||||
padding: 5px;
|
||||
}
|
||||
#editor label {
|
||||
font-weight: bold;
|
||||
}
|
||||
#preview {
|
||||
padding: 5px;
|
||||
}
|
||||
#editor-inputs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#editor-inputs-prompt {
|
||||
flex: 1;
|
||||
}
|
||||
#editor-inputs .row {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#makeImage {
|
||||
border-radius: 6px;
|
||||
}
|
||||
#editor-modifiers h5 {
|
||||
padding: 5pt 0;
|
||||
margin: 0;
|
||||
}
|
||||
#makeImage {
|
||||
flex: 0 0 70px;
|
||||
background: rgb(80, 0, 185);
|
||||
border: 2px solid rgb(40, 0, 78);
|
||||
color: rgb(255, 221, 255);
|
||||
width: 100%;
|
||||
height: 30pt;
|
||||
}
|
||||
#makeImage:hover {
|
||||
background: rgb(93, 0, 214);
|
||||
}
|
||||
.flex-container {
|
||||
display: flex;
|
||||
}
|
||||
.col-50 {
|
||||
flex: 50%;
|
||||
}
|
||||
.col-free {
|
||||
flex: 1;
|
||||
}
|
||||
.collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
.collapsible-content {
|
||||
display: none;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.collapsible-content h5 {
|
||||
padding: 5pt 0pt;
|
||||
margin: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.collapsible-handle {
|
||||
color: white;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.panel-box {
|
||||
background: rgb(44, 45, 48);
|
||||
border: 1px solid rgb(47, 49, 53);
|
||||
border-radius: 7px;
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.panel-box h4 {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.prompt-modifier-tag {
|
||||
border: 1px solid rgb(10, 0, 24);
|
||||
border-radius: 4px;
|
||||
padding: 0pt 3pt;
|
||||
margin-right: 2pt;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
background: rgb(163, 163, 163);
|
||||
color: black;
|
||||
line-height: 25pt;
|
||||
float: left;
|
||||
font-size: 9pt;
|
||||
}
|
||||
.prompt-modifier-tag:hover {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
#editor-modifiers-entries .prompt-modifier-tag {
|
||||
background: #110f0f;
|
||||
color: rgb(212, 212, 212);
|
||||
margin-bottom: 4pt;
|
||||
font-size: 10pt;
|
||||
}
|
||||
#editor-modifiers-entries .prompt-modifier-tag:hover {
|
||||
background: rgb(163, 163, 163);
|
||||
color: black;
|
||||
}
|
||||
#editor-modifiers .editor-modifiers-leaf {
|
||||
padding-top: 10pt;
|
||||
padding-bottom: 10pt;
|
||||
}
|
||||
#preview {
|
||||
margin-left: 20pt;
|
||||
}
|
||||
img {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.line-separator {
|
||||
background: rgb(56, 56, 56);
|
||||
height: 1pt;
|
||||
margin: 15pt 0;
|
||||
}
|
||||
#editor-inputs-tags-container {
|
||||
margin-top: 5pt;
|
||||
display: none;
|
||||
}
|
||||
#server-status {
|
||||
float: right;
|
||||
}
|
||||
#server-status-color {
|
||||
width: 8pt;
|
||||
height: 8pt;
|
||||
border-radius: 4pt;
|
||||
background-color: rgb(128, 87, 0);
|
||||
/* background-color: rgb(197, 1, 1); */
|
||||
float: left;
|
||||
transform: translateY(15%);
|
||||
}
|
||||
#server-status-msg {
|
||||
color: rgb(128, 87, 0);
|
||||
padding-left: 2pt;
|
||||
font-size: 10pt;
|
||||
}
|
||||
#preview-prompt {
|
||||
font-size: 16pt;
|
||||
margin-bottom: 10pt;
|
||||
}
|
||||
#coffeeButton {
|
||||
height: 23px;
|
||||
transform: translateY(25%);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,15 +3,16 @@ import { style, globalStyle } from "@vanilla-extract/css";
|
||||
// @ts-ignore
|
||||
import { vars } from "../../../../styles/theme/index.css.ts";
|
||||
|
||||
// import { PanelBox } from "../../../../styles/shared.css.ts";
|
||||
|
||||
export const AdvancedSettingsList = style({
|
||||
fontSize: vars.fonts.sizes.Body,
|
||||
marginBottom: vars.spacing.small,
|
||||
paddingLeft: vars.spacing.medium,
|
||||
// marginBottom: vars.spacing.small,
|
||||
paddingLeft: 0,
|
||||
listStyleType: "none",
|
||||
});
|
||||
|
||||
export const AdvancedSettingItem = style({
|
||||
paddingBottom: vars.spacing.small,
|
||||
export const AdvancedSettingGrouping = style({
|
||||
marginTop: vars.spacing.medium,
|
||||
});
|
||||
|
||||
export const MenuButton = style({
|
||||
@ -23,10 +24,9 @@ export const MenuButton = style({
|
||||
border: "0 none",
|
||||
cursor: "pointer",
|
||||
padding: "0",
|
||||
marginBottom: vars.spacing.small,
|
||||
marginBottom: vars.spacing.medium,
|
||||
});
|
||||
|
||||
globalStyle(`${MenuButton}> h4`, {
|
||||
color: "#e7ba71",
|
||||
marginTop: "5px !important",
|
||||
});
|
||||
|
||||
@ -3,6 +3,11 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
SettingItem // @ts-expect-error
|
||||
} from "../../../../../styles/shared.css.ts";
|
||||
|
||||
|
||||
import {
|
||||
MenuButton, // @ts-expect-error
|
||||
} from "../advancedsettings.css.ts";
|
||||
@ -28,7 +33,7 @@ export default function GpuSettings() {
|
||||
</button>
|
||||
{gpuOpen && (
|
||||
<>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
checked={turbo}
|
||||
@ -39,7 +44,7 @@ export default function GpuSettings() {
|
||||
of GPU memory)
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -49,7 +54,7 @@ export default function GpuSettings() {
|
||||
Use CPU instead of GPU (warning: this will be *very* slow)
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
checked={use_full_precision}
|
||||
|
||||
@ -3,6 +3,9 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
SettingItem // @ts-expect-error
|
||||
} from "../../../../../styles/shared.css.ts";
|
||||
import {
|
||||
MenuButton, // @ts-expect-error
|
||||
} from "../advancedsettings.css.ts";
|
||||
@ -62,7 +65,7 @@ export default function ImprovementSettings() {
|
||||
</button>
|
||||
{improvementOpen && (
|
||||
<>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -72,7 +75,7 @@ export default function ImprovementSettings() {
|
||||
Fix incorrect faces and eyes (uses GFPGAN)
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
Upscale the image to 4x resolution using
|
||||
<select
|
||||
@ -91,7 +94,7 @@ export default function ImprovementSettings() {
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
disabled={isFilteringDisabled}
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useCreateUI } from "../creationPanelUIStore";
|
||||
|
||||
// @ts-expect-error
|
||||
import { PanelBox } from "../../../../styles/shared.css.ts";
|
||||
|
||||
import {
|
||||
AdvancedSettingsList,
|
||||
AdvancedSettingItem, // @ts-expect-error
|
||||
AdvancedSettingGrouping, // @ts-expect-error
|
||||
} from "./advancedsettings.css.ts";
|
||||
|
||||
import ImprovementSettings from "./improvementSettings";
|
||||
@ -16,20 +19,20 @@ import BetaMode from "../../../molecules/betaMode";
|
||||
function SettingsList() {
|
||||
return (
|
||||
<ul className={AdvancedSettingsList}>
|
||||
<li className={AdvancedSettingItem}>
|
||||
<li className={AdvancedSettingGrouping}>
|
||||
<ImprovementSettings />
|
||||
</li>
|
||||
<li className={AdvancedSettingItem}>
|
||||
<li className={AdvancedSettingGrouping}>
|
||||
<PropertySettings />
|
||||
</li>
|
||||
<li className={AdvancedSettingItem}>
|
||||
<li className={AdvancedSettingGrouping}>
|
||||
<WorkflowSettings />
|
||||
</li>
|
||||
<li className={AdvancedSettingItem}>
|
||||
<li className={AdvancedSettingGrouping}>
|
||||
<GpuSettings />
|
||||
</li>
|
||||
|
||||
<li className={AdvancedSettingItem}>
|
||||
<li className={AdvancedSettingGrouping}>
|
||||
<BetaMode />
|
||||
</li>
|
||||
</ul>
|
||||
@ -46,7 +49,7 @@ export default function AdvancedSettings() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="panel-box">
|
||||
<div className={PanelBox}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleAdvancedSettingsIsOpen}
|
||||
|
||||
@ -2,6 +2,10 @@ import React, { useState } from "react";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
SettingItem // @ts-expect-error
|
||||
} from "../../../../../styles/shared.css.ts";
|
||||
|
||||
import {
|
||||
MenuButton, // @ts-expect-error
|
||||
} from "../advancedsettings.css.ts";
|
||||
@ -64,7 +68,7 @@ export default function PropertySettings() {
|
||||
</button>
|
||||
{propertyOpen && (
|
||||
<>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
Seed:
|
||||
<input
|
||||
@ -85,7 +89,7 @@ export default function PropertySettings() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
Number of inference steps:{" "}
|
||||
<input
|
||||
@ -98,7 +102,7 @@ export default function PropertySettings() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
Guidance Scale:
|
||||
<input
|
||||
@ -116,7 +120,7 @@ export default function PropertySettings() {
|
||||
</div>
|
||||
|
||||
{init_image && (
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
Prompt Strength:{" "}
|
||||
<input
|
||||
@ -134,7 +138,7 @@ export default function PropertySettings() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
Width:
|
||||
<select
|
||||
@ -151,9 +155,7 @@ export default function PropertySettings() {
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Height:
|
||||
<select
|
||||
|
||||
@ -3,6 +3,10 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
SettingItem // @ts-expect-error
|
||||
} from "../../../../../styles/shared.css.ts";
|
||||
|
||||
import {
|
||||
MenuButton, // @ts-expect-error
|
||||
} from "../advancedsettings.css.ts";
|
||||
@ -37,7 +41,7 @@ export default function WorkflowSettings() {
|
||||
</button>
|
||||
{workflowOpen && (
|
||||
<>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
Number of images to make:{" "}
|
||||
<input
|
||||
@ -50,7 +54,7 @@ export default function WorkflowSettings() {
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
Generate in parallel:
|
||||
<input
|
||||
@ -61,7 +65,7 @@ export default function WorkflowSettings() {
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
checked={isUseAutoSave}
|
||||
@ -84,7 +88,7 @@ export default function WorkflowSettings() {
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div className={SettingItem}>
|
||||
<label>
|
||||
<input
|
||||
checked={isSoundEnabled}
|
||||
|
||||
@ -18,9 +18,6 @@ globalStyle(`${PromptDisplay} > p`, {
|
||||
});
|
||||
|
||||
globalStyle(`${PromptDisplay} > textarea`, {
|
||||
fontSize: "1.2em",
|
||||
fontWeight: "bold",
|
||||
fontFamily: "Arial",
|
||||
width: "100%",
|
||||
resize: "vertical",
|
||||
height: "100px",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.create-layout {
|
||||
padding: 10px;
|
||||
}
|
||||
.panel-box-toggle-btn {
|
||||
/* .panel-box-toggle-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
@ -9,7 +9,7 @@
|
||||
color: #fff;
|
||||
border: 0 none;
|
||||
cursor: pointer;
|
||||
}
|
||||
} */
|
||||
|
||||
.selected-tags {
|
||||
margin: 10px 0;
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
// @ts-ignore
|
||||
import { vars } from "../../../../styles/theme/index.css.ts";
|
||||
|
||||
export const ImagerModifierGroups = style({
|
||||
// marginBottom: vars.spacing.small,
|
||||
paddingLeft: 0,
|
||||
listStyleType: "none",
|
||||
});
|
||||
|
||||
globalStyle(`${ImagerModifierGroups} li`, {
|
||||
marginTop: vars.spacing.medium,
|
||||
});
|
||||
|
||||
export const ImageModifierGrouping = style({
|
||||
marginTop: vars.spacing.medium,
|
||||
});
|
||||
|
||||
export const MenuButton = style({
|
||||
display: "block",
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
backgroundColor: "transparent",
|
||||
color: vars.colors.text.normal,
|
||||
border: "0 none",
|
||||
cursor: "pointer",
|
||||
padding: "0",
|
||||
marginBottom: vars.spacing.medium,
|
||||
});
|
||||
|
||||
globalStyle(`${MenuButton}> h4`, {
|
||||
color: "#e7ba71",
|
||||
});
|
||||
|
||||
export const ModifierListStyle = style({
|
||||
// marginBottom: vars.spacing.small,
|
||||
paddingLeft: 0,
|
||||
listStyleType: "none",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
});
|
||||
|
||||
globalStyle(`${ModifierListStyle} li`, {
|
||||
margin: 0,
|
||||
});
|
||||
@ -3,6 +3,18 @@ import React, { useEffect, useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { loadModifications } from "../../../../api";
|
||||
|
||||
// @ts-expect-error
|
||||
import { PanelBox } from "../../../../styles/shared.css.ts";
|
||||
|
||||
import {
|
||||
ImagerModifierGroups,
|
||||
ImageModifierGrouping,
|
||||
MenuButton,
|
||||
ModifierListStyle
|
||||
} from //@ts-expect-error
|
||||
"./imageModifiers.css.ts";
|
||||
|
||||
|
||||
import { useImageCreate } from "../../../../stores/imageCreateStore";
|
||||
import { useCreateUI } from "../creationPanelUIStore";
|
||||
|
||||
@ -14,7 +26,7 @@ interface ModifierListProps {
|
||||
|
||||
function ModifierList({ tags }: ModifierListProps) {
|
||||
return (
|
||||
<ul className="modifier-list">
|
||||
<ul className={ModifierListStyle}>
|
||||
{tags.map((tag) => (
|
||||
<li key={tag}>
|
||||
<ModifierTag name={tag} />
|
||||
@ -39,29 +51,18 @@ function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modifier-grouping">
|
||||
<div className="modifier-grouping-header" onClick={_toggleExpand}>
|
||||
<h5>{title}</h5>
|
||||
</div>
|
||||
<div className={ImageModifierGrouping}>
|
||||
<button type="button" className={MenuButton} onClick={_toggleExpand}>
|
||||
<h4>{title}</h4>
|
||||
</button>
|
||||
{isExpanded && <ModifierList tags={tags} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ImageModifers() {
|
||||
// const { status, data } = useQuery(["modifications"], loadModifications);
|
||||
|
||||
// const imageModifierIsOpen = useImageCreate(
|
||||
// (state) => state.uiOptions.imageModifierIsOpen
|
||||
// );
|
||||
// const toggleImageModifiersIsOpen = useImageCreate(
|
||||
// (state) => state.toggleImageModifiersIsOpen
|
||||
// );
|
||||
|
||||
const allModifiers = useImageCreate((state) => state.allModifiers);
|
||||
|
||||
console.log("allModifiers", allModifiers);
|
||||
|
||||
const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);
|
||||
const toggleImageModifiersIsOpen = useCreateUI(
|
||||
(state) => state.toggleImageModifier
|
||||
@ -72,25 +73,28 @@ export default function ImageModifers() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="panel-box">
|
||||
<div className={PanelBox}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
className="panel-box-toggle-btn"
|
||||
>
|
||||
{/* TODO: swap this manual collapse stuff out for some UI component? */}
|
||||
<h4>Image Modifiers (art styles, tags, ect)</h4>
|
||||
<h3>Image Modifiers (art styles, tags, ect)</h3>
|
||||
</button>
|
||||
|
||||
{/* @ts-ignore */}
|
||||
{imageModifierIsOpen &&
|
||||
// @ts-ignore
|
||||
allModifiers.map((item, index) => {
|
||||
return (
|
||||
// @ts-ignore
|
||||
<ModifierGrouping key={item[0]} title={item[0]} tags={item[1]} />
|
||||
);
|
||||
})}
|
||||
{imageModifierIsOpen && (
|
||||
<ul className={ImagerModifierGroups}>
|
||||
{allModifiers.map((item, index) => {
|
||||
return (
|
||||
<li key={item[0]}>
|
||||
<ModifierGrouping title={item[0]} tags={item[1]} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,161 @@
|
||||
import {
|
||||
createGlobalTheme,
|
||||
createThemeContract,
|
||||
createTheme,
|
||||
} from "@vanilla-extract/css";
|
||||
|
||||
/**
|
||||
* Colors are all the same across the themes, this is just to set up a contract
|
||||
* Colors can be decided later. I am just the architect.
|
||||
* Tried to pull things from the original app.
|
||||
*
|
||||
* Lots of these arent used yet, but once they are defined and useable then they can be set.
|
||||
*/
|
||||
|
||||
// Link color 0, 102, 204
|
||||
|
||||
const colors = createThemeContract({
|
||||
brand: null,
|
||||
brandDimmed: null,
|
||||
brandHover: null,
|
||||
brandActive: null,
|
||||
brandAccent: null,
|
||||
brandAccentDimmed: null,
|
||||
brandAccentActive: null,
|
||||
|
||||
secondary: null,
|
||||
secondaryDimmed: null,
|
||||
secondaryHover: null,
|
||||
secondaryActive: null,
|
||||
secondaryAccent: null,
|
||||
secondaryAccentDimmed: null,
|
||||
secondaryAccentActive: null,
|
||||
|
||||
background: null,
|
||||
backgroundAccent: null,
|
||||
backgroundAlt: null,
|
||||
backgroundAltAccent: null,
|
||||
|
||||
text: {
|
||||
normal: null,
|
||||
dimmed: null,
|
||||
|
||||
secondary: null,
|
||||
secondaryDimmed: null,
|
||||
|
||||
accent: null,
|
||||
accentDimmed: null,
|
||||
},
|
||||
|
||||
link: null,
|
||||
warning: null,
|
||||
error: null,
|
||||
success: null,
|
||||
});
|
||||
|
||||
const app = createGlobalTheme(":root", {
|
||||
spacing: {
|
||||
small: "5px",
|
||||
medium: "10px",
|
||||
large: "25px",
|
||||
},
|
||||
|
||||
trim: {
|
||||
smallBorderRadius: "5px",
|
||||
},
|
||||
|
||||
fonts: {
|
||||
body: "Arial, Helvetica, sans-serif;",
|
||||
sizes: {
|
||||
Title: "2em",
|
||||
Headline: "1.5em",
|
||||
Subheadline: "1.20em",
|
||||
SubSubheadline: "1em",
|
||||
Body: "1em",
|
||||
Caption: ".75em",
|
||||
Overline: ".5em",
|
||||
|
||||
},
|
||||
},
|
||||
colors: colors,
|
||||
});
|
||||
|
||||
export const darkTheme = createTheme(colors, {
|
||||
brand: "#5000b9", // purple
|
||||
brandDimmed: "#433852", // muted purple
|
||||
brandHover: "#5d00d6", // bringhter purple
|
||||
brandActive: "#5d00d6", // bringhter purple
|
||||
brandAccent: "#28004e", // darker purple
|
||||
brandAccentDimmed: "#28004e", // darker purple
|
||||
brandAccentActive: "#28004e", // darker purple
|
||||
|
||||
secondary: "#0b8334", // green
|
||||
secondaryDimmed: "#0b8334", // green
|
||||
secondaryHover: "#0b8334", // green
|
||||
secondaryActive: "#0b8334", // green
|
||||
secondaryAccent: "#0b8334", // green
|
||||
secondaryAccentDimmed: "#0b8334", // green
|
||||
secondaryAccentActive: "#0b8334", // green
|
||||
|
||||
background: "#202124", // dark grey
|
||||
backgroundAccent: " #383838", // lighter grey
|
||||
backgroundAlt: "#2c2d30", // med grey
|
||||
backgroundAltAccent: "#383838", // lighter grey
|
||||
|
||||
text: {
|
||||
normal: "#ffffff", // white
|
||||
dimmed: "#d1d5db", // off white
|
||||
|
||||
secondary: "#ffffff", // white
|
||||
secondaryDimmed: "#d1d5db", // off white
|
||||
|
||||
accent: "#e7ba71", // orange
|
||||
accentDimmed: "#7d6641", // muted orange
|
||||
},
|
||||
|
||||
link: '#0066cc', // blue
|
||||
warning: "#f0ad4e",
|
||||
error: "#d9534f",
|
||||
success: "#5cb85c",
|
||||
});
|
||||
|
||||
// Generated by co-pilot
|
||||
export const lightTheme = createTheme(colors, {
|
||||
brand: "#1E40AF",
|
||||
brandDimmed: "#1E40AF",
|
||||
brandHover: "#1E40AF",
|
||||
brandActive: "#1E40AF",
|
||||
brandAccent: "#1E40AF",
|
||||
brandAccentDimmed: "#1E40AF",
|
||||
brandAccentActive: "#1E40AF",
|
||||
|
||||
secondary: "#DB2777",
|
||||
secondaryDimmed: "#DB2777",
|
||||
secondaryHover: "#DB2777",
|
||||
secondaryActive: "#DB2777",
|
||||
secondaryAccent: "#DB2777",
|
||||
secondaryAccentDimmed: "#DB2777",
|
||||
secondaryAccentActive: "#DB2777",
|
||||
|
||||
background: "#EFF6FF",
|
||||
backgroundAccent: "#EFF6FF",
|
||||
backgroundAlt: "#EFF6FF",
|
||||
backgroundAltAccent: "#EFF6FF",
|
||||
text: {
|
||||
normal: "#1F2937",
|
||||
dimmed: "#6B7280",
|
||||
|
||||
secondary: "#1F2937",
|
||||
secondaryDimmed: "#6B7280",
|
||||
|
||||
accent: "#1F2937",
|
||||
accentDimmed: "#6B7280",
|
||||
},
|
||||
|
||||
link: '#0066cc', // blue
|
||||
warning: "yellow",
|
||||
error: "red",
|
||||
success: "green",
|
||||
});
|
||||
|
||||
export const vars = { ...app, colors };
|
||||
@ -1,7 +0,0 @@
|
||||
.footer-display {
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
|
||||
// @ts-ignore
|
||||
import { vars } from "../../../styles/theme/index.css.ts";
|
||||
|
||||
|
||||
export const FooterDisplayMain = style({
|
||||
color: vars.colors.text.normal,
|
||||
fontSize: vars.fonts.sizes.Caption,
|
||||
|
||||
display: "inline-block",
|
||||
// marginTop: vars.spacing.medium,
|
||||
// marginBottom: vars.spacing.medium,
|
||||
// TODO move this to the theme
|
||||
padding: vars.spacing.small,
|
||||
boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
|
||||
});
|
||||
|
||||
export const CoffeeButton = style({
|
||||
height: "23px",
|
||||
transform: "translateY(25%)",
|
||||
});
|
||||
|
||||
globalStyle(`${FooterDisplayMain} a`, {
|
||||
color: vars.colors.link,
|
||||
textDecoration: "none",
|
||||
});
|
||||
|
||||
globalStyle(`${FooterDisplayMain} a:hover`, {
|
||||
textDecoration: "underline",
|
||||
});
|
||||
|
||||
globalStyle(`${FooterDisplayMain} a:visited`, {
|
||||
color: vars.colors.link,
|
||||
});
|
||||
|
||||
globalStyle(`${FooterDisplayMain} a:active`, {
|
||||
color: vars.colors.link,
|
||||
});
|
||||
|
||||
globalStyle(`${FooterDisplayMain} a:focus`, {
|
||||
color: vars.colors.link,
|
||||
});
|
||||
|
||||
globalStyle(`${FooterDisplayMain} p`, {
|
||||
margin: vars.spacing.min,
|
||||
});
|
||||
|
||||
|
||||
// .footer-display {
|
||||
// color: #ffffff;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
// #coffeeButton {
|
||||
// height: 23px;
|
||||
// transform: translateY(25%);
|
||||
// }
|
||||
@ -1,12 +1,16 @@
|
||||
import React from "react";
|
||||
|
||||
import "./footerDisplay.css";
|
||||
import {
|
||||
FooterDisplayMain,
|
||||
CoffeeButton
|
||||
} from // @ts-ignore
|
||||
"./footerDisplay.css.ts";
|
||||
|
||||
import { API_URL } from "../../../api";
|
||||
|
||||
export default function FooterDisplay() {
|
||||
return (
|
||||
<div id="footer" className="panel-box">
|
||||
<div className={FooterDisplayMain}>
|
||||
<p>
|
||||
If you found this project useful and want to help keep it alive, please{" "}
|
||||
<a
|
||||
@ -14,7 +18,7 @@ export default function FooterDisplay() {
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img src={`${API_URL}/kofi.png`} id="coffeeButton" />
|
||||
<img src={`${API_URL}/kofi.png`} className={CoffeeButton} />
|
||||
</a>{" "}
|
||||
to help cover the cost of development and maintenance! Thank you for
|
||||
your support!
|
||||
|
||||
@ -7,7 +7,6 @@ globalStyle("body", {
|
||||
margin: 0,
|
||||
minWidth: "320px",
|
||||
minHeight: "100vh",
|
||||
fontFamily: vars.fonts.body,
|
||||
});
|
||||
|
||||
// single page style
|
||||
@ -25,13 +24,36 @@ globalStyle(`*`, {
|
||||
boxSizing: "border-box",
|
||||
});
|
||||
|
||||
globalStyle(`button`, {
|
||||
fontSize: vars.fonts.sizes.Body,
|
||||
})
|
||||
|
||||
/** RESETS */
|
||||
globalStyle(`p, h3, h4`, {
|
||||
globalStyle(`p, h1, h2, h3, h4, h5, h6, ul`, {
|
||||
margin: 0,
|
||||
});
|
||||
|
||||
globalStyle(`h3`, {
|
||||
fontSize: vars.fonts.sizes.Subheadline,
|
||||
fontFamily: vars.fonts.body,
|
||||
});
|
||||
|
||||
globalStyle(`h4, h5`, {
|
||||
fontSize: vars.fonts.sizes.SubSubheadline,
|
||||
fontFamily: vars.fonts.body,
|
||||
|
||||
});
|
||||
|
||||
globalStyle(`p, label`, {
|
||||
fontSize: vars.fonts.sizes.Body,
|
||||
fontFamily: vars.fonts.body,
|
||||
});
|
||||
|
||||
globalStyle(`textarea`, {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
border: "none",
|
||||
fontSize: vars.fonts.sizes.Body,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: vars.fonts.body,
|
||||
});
|
||||
|
||||
30
ui/frontend/build_src/src/styles/shared.css.ts
Normal file
30
ui/frontend/build_src/src/styles/shared.css.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
// @ts-ignore
|
||||
import { vars } from "./theme/index.css.ts";
|
||||
|
||||
export const PanelBox = style({
|
||||
background: vars.colors.backgroundAlt,
|
||||
color: vars.colors.text.normal,
|
||||
padding: vars.spacing.medium,
|
||||
borderRadius: vars.trim.smallBorderRadius,
|
||||
marginBottom: vars.spacing.medium,
|
||||
// TODO move this to the theme
|
||||
boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
|
||||
});
|
||||
|
||||
|
||||
|
||||
globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
|
||||
display: "block",
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
backgroundColor: "transparent",
|
||||
color: vars.colors.text.normal,
|
||||
border: "0 none",
|
||||
cursor: "pointer",
|
||||
padding: "0",
|
||||
});
|
||||
|
||||
export const SettingItem = style({
|
||||
marginBottom: vars.spacing.medium,
|
||||
});
|
||||
@ -12,7 +12,6 @@ import {
|
||||
* Lots of these arent used yet, but once they are defined and useable then they can be set.
|
||||
*/
|
||||
|
||||
// Link color 0, 102, 204
|
||||
|
||||
const colors = createThemeContract({
|
||||
brand: null,
|
||||
@ -47,6 +46,7 @@ const colors = createThemeContract({
|
||||
accentDimmed: null,
|
||||
},
|
||||
|
||||
link: null,
|
||||
warning: null,
|
||||
error: null,
|
||||
success: null,
|
||||
@ -54,6 +54,8 @@ const colors = createThemeContract({
|
||||
|
||||
const app = createGlobalTheme(":root", {
|
||||
spacing: {
|
||||
none: "0",
|
||||
min: '2px',
|
||||
small: "5px",
|
||||
medium: "10px",
|
||||
large: "25px",
|
||||
@ -69,9 +71,12 @@ const app = createGlobalTheme(":root", {
|
||||
Title: "2em",
|
||||
Headline: "1.5em",
|
||||
Subheadline: "1.20em",
|
||||
SubSubheadline: "1.1em",
|
||||
Body: "1em",
|
||||
Plain: "0.8em",
|
||||
Caption: ".75em",
|
||||
Overline: ".5em",
|
||||
|
||||
},
|
||||
},
|
||||
colors: colors,
|
||||
@ -110,6 +115,7 @@ export const darkTheme = createTheme(colors, {
|
||||
accentDimmed: "#7d6641", // muted orange
|
||||
},
|
||||
|
||||
link: '#0066cc', // blue
|
||||
warning: "#f0ad4e",
|
||||
error: "#d9534f",
|
||||
success: "#5cb85c",
|
||||
@ -148,6 +154,7 @@ export const lightTheme = createTheme(colors, {
|
||||
accentDimmed: "#6B7280",
|
||||
},
|
||||
|
||||
link: '#0066cc', // blue
|
||||
warning: "yellow",
|
||||
error: "red",
|
||||
success: "green",
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { defineConfig } from "vite";
|
||||
import eslint from "vite-plugin-eslint";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
||||
import { defineConfig } from 'vite';
|
||||
import eslint from 'vite-plugin-eslint';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
|
||||
|
||||
import path from "path";
|
||||
import path from 'path';
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
resolve: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user