💄 style: update

lobehub · Jun 26, 2023 · 6e6dad8 · 6e6dad8
1 parent 34ea7aa
commit 6e6dad8
Show file tree

Hide file tree

Showing 61 changed files with 1,192 additions and 3,433 deletions.
diff --git a/.env b/.env
diff --git a/.env.production b/.env.production
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     {
       files: ['*.ts', '*.tsx'],
       rules: {
+        'linebreak-style': 0,
         'no-undef': 0,
         'object-curly-spacing': 0,
         'unicorn/prefer-add-event-listener': 0,

diff --git a/javascript/main.js b/javascript/main.js
diff --git a/package.json b/package.json
@@ -95,6 +95,7 @@
     "react-tag-input": "^6",
     "remark": "^14",
     "remark-cli": "^11",
+    "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^21",
     "styled-components": "latest",
     "stylelint": "^15",

diff --git a/src/components/Sidebar/SidebarBody.tsx b/src/components/Sidebar/SidebarBody.tsx
@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import { DivProps } from '@/types/index';
+
+import { useStyles } from './style';
+
+const SidebarBody = memo<DivProps>(({ className, children, ...props }) => {
+  const { cx, styles } = useStyles();
+  return (
+    <div className={cx(styles.body, className)} {...props}>
+      {children}
+    </div>
+  );
+});
+
+export default SidebarBody;
diff --git a/src/components/Sidebar/SidebarContainer.tsx b/src/components/Sidebar/SidebarContainer.tsx
@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import { DivProps } from '@/types/index';
+
+import { useStyles } from './style';
+
+const SidebarContainer = memo<DivProps>(({ className, children, ...props }) => {
+  const { cx, styles } = useStyles();
+  return (
+    <div className={cx(styles.container, className)} {...props}>
+      {children}
+    </div>
+  );
+});
+
+export default SidebarContainer;
diff --git a/src/components/Sidebar/SidebarFooter.tsx b/src/components/Sidebar/SidebarFooter.tsx
@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import { DivProps } from '@/types/index';
+
+import { useStyles } from './style';
+
+const SidebarFooter = memo<DivProps>(({ className, children, ...props }) => {
+  const { cx, styles } = useStyles();
+  return (
+    <div className={cx(styles.footer, className)} {...props}>
+      {children}
+    </div>
+  );
+});
+
+export default SidebarFooter;
diff --git a/src/components/Sidebar/SidebarHeader.tsx b/src/components/Sidebar/SidebarHeader.tsx
@@ -0,0 +1,38 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { PanelLeft, Pin, PinOff } from 'lucide-react';
+import { memo } from 'react';
+
+import { DivProps } from '@/types/index';
+
+import { useStyles } from './style';
+
+export interface SidebarHeaderProps extends DivProps {
+  pin: boolean;
+  position?: 'left' | 'right';
+  setPin: (pin: boolean) => void;
+  title: string;
+}
+
+const SidebarHeader = memo<SidebarHeaderProps>(
+  ({ pin, setPin, className, title, position = 'left', ...props }) => {
+    const { cx, styles } = useStyles();
+    const panelIcon = <Icon icon={PanelLeft} />;
+    const pinIcon = (
+      <ActionIcon
+        active={pin}
+        icon={pin ? Pin : PinOff}
+        onClick={() => setPin(!pin)}
+        size={{ blockSize: 24, fontSize: 14 }}
+      />
+    );
+    return (
+      <div className={cx(styles.header, className)} {...props}>
+        {position === 'left' ? panelIcon : pinIcon}
+        {title}
+        {position === 'left' ? pinIcon : panelIcon}
+      </div>
+    );
+  },
+);
+
+export default SidebarHeader;
diff --git a/src/components/Sidebar/style.ts b/src/components/Sidebar/style.ts
@@ -0,0 +1,47 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+
+export const useStyles = createStyles(({ css, token, stylish, cx }) => ({
+  body: css`
+    overflow-x: hidden;
+    overflow-y: auto;
+    flex: 1;
+    padding: 16px;
+  `,
+  container: cx(
+    stylish.blur,
+    css`
+      position: relative;
+
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      background: ${rgba(token.colorBgLayout, 0.8)};
+    `,
+  ),
+  footer: css`
+    display: flex;
+    flex: 0;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+
+    padding: 8px 16px;
+
+    border-top: 1px solid ${token.colorBorderSecondary};
+  `,
+  header: css`
+    display: flex;
+    flex: 0;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 8px 16px;
+
+    font-weight: 500;
+
+    border-bottom: 1px solid ${token.colorBorderSecondary};
+  `,
+}));
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,2 +1,6 @@
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Modal, type ModalProps } from './Modal';
+export { default as SidebarBody } from './Sidebar/SidebarBody';
+export { default as SidebarContainer } from './Sidebar/SidebarContainer';
+export { default as SidebarFooter } from './Sidebar/SidebarFooter';
+export { default as SidebarHeader, type SidebarHeaderProps } from './Sidebar/SidebarHeader';
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,7 +4,7 @@ import App from './App';
 
 if (window.global === undefined) window.global = window;
 
-if (window.location.href.includes('dev') && import.meta.env.VITE_CONTEXT !== 'DEV') {
+if (window.location.href.includes('dev') && process.env.NODE_ENV === 'production') {
   console.log('🚧 Theme Loader in Dev Mode');
 } else {
   document.addEventListener(

diff --git a/src/pages/Content/index.tsx b/src/pages/Content/index.tsx
@@ -31,7 +31,8 @@ const Content = memo<DivProps>(({ className, ...props }) => {
         styles.draggablePanel,
         styles.textares,
         styles.gallery,
-        styles.img2img,
+        styles.text2img,
+        styles.autocompleteResults,
         className,
       )}
       ref={mainReference}

diff --git a/src/pages/Content/style.ts b/src/pages/Content/style.ts
@@ -17,6 +17,28 @@ export const useStyles = createStyles(
       border-radius: ${token.borderRadius}px !important;
     `;
     return {
+      autocompleteResults: css`
+        .autocompleteResults {
+          font-family: ${token.fontFamilyCode};
+
+          background: ${token.colorBgElevated} !important;
+          border-color: ${token.colorBorder} !important;
+          border-radius: ${token.borderRadius}px !important;
+          box-shadow: ${token.boxShadow};
+
+          li:nth-child(odd) {
+            background: transparent !important;
+          }
+
+          li {
+            border-bottom: 1px solid ${token.colorBorder};
+
+            &:hover {
+              background: ${token.colorFillSecondary} !important;
+            }
+          }
+        }
+      `,
       background: cx(
         stylish.gradientAnimation,
         isPrimaryColor &&
@@ -95,12 +117,6 @@ export const useStyles = createStyles(
         }
       `,
       gallery: css`
-        .livePreview {
-          position: absolute;
-          top: 4px;
-          left: 4px;
-        }
-
         .livePreview,
         .gradio-gallery,
         .gradio-image,
@@ -137,7 +153,80 @@ export const useStyles = createStyles(
           background: ${rgba(token.colorBgLayout, 0.5)};
         }
       `,
-      img2img: css`
+      text2img: css`
+        [id$='img_gallery_container'] {
+          div:not(.livePreview) {
+            position: relative;
+            box-sizing: border-box;
+          }
+
+          .livePreview {
+            top: 46px;
+            left: 20px;
+          }
+        }
+
+        [id$='img_settings'],
+        .gradio-column.compact {
+          display: flex !important;
+          flex-direction: column !important;
+          gap: 12px !important;
+
+          .gradio-column:has(button) {
+            min-width: min(36px, 100%) !important;
+          }
+
+          > div:not([id$='_script_container'], .gradio-tabs):has(div),
+          > fieldset {
+            flex-flow: row wrap;
+            gap: 12px;
+
+            margin: 0 !important;
+            padding: 16px !important;
+
+            background-color: ${token.colorBgContainer}!important;
+            border-radius: ${token.borderRadius}px !important;
+          }
+
+          .gradio-tabitem {
+            background: ${token.colorFillTertiary} !important;
+          }
+
+          [id$='_script_container'] {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+
+            .gradio-accordion:not(.hidden):has(div) {
+              padding: 0 !important;
+              border: none !important;
+            }
+
+            #script_list,
+            > .gradio-group:not(.hidden):has(div) {
+              display: flex;
+              flex-direction: column;
+
+              margin: 0;
+              padding: 16px;
+
+              background-color: ${token.colorBgContainer} !important;
+              border: 1px solid ${token.colorBorderSecondary} !important;
+              border-radius: ${token.borderRadius}px !important;
+              box-shadow: none;
+
+              > .gradio-accordion {
+                padding: 0 !important;
+                border: none !important;
+              }
+            }
+
+            #script_list {
+              padding: 8px 16px 12px !important;
+            }
+          }
+        }
+
         #img2img_column_batch {
           min-width: 100% !important;
         }

diff --git a/src/pages/ExtraNetworkSidebar/Inner.tsx b/src/pages/ExtraNetworkSidebar/Inner.tsx
@@ -4,6 +4,7 @@ import { ZoomIn } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
+import { SidebarBody, SidebarFooter } from '@/components';
 import { useStyles } from '@/pages/ExtraNetworkSidebar/style';
 import civitaiHelperFix from '@/script/civitaiHelperFix';
 import { useAppStore } from '@/store';
@@ -53,7 +54,7 @@ const Inner = memo(() => {
 
   return (
     <>
-      <div className={styles.list}>
+      <SidebarBody className={styles.body}>
         {extraLoading && <Skeleton active />}
         <div style={extraLoading ? { display: 'none' } : {}}>
           <div
@@ -67,8 +68,8 @@ const Inner = memo(() => {
             style={currentTab === 'tab_img2img' ? {} : { display: 'none' }}
           />
         </div>
-      </div>
-      <div className={styles.footer}>
+      </SidebarBody>
+      <SidebarFooter>
         <Icon icon={ZoomIn} />
         <Slider
           defaultValue={size}
@@ -78,7 +79,7 @@ const Inner = memo(() => {
           step={8}
           style={{ flex: 1 }}
         />
-      </div>
+      </SidebarFooter>
     </>
   );
 });

diff --git a/src/pages/ExtraNetworkSidebar/index.tsx b/src/pages/ExtraNetworkSidebar/index.tsx
@@ -3,6 +3,7 @@ import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useEffect, useState } from 'react';
 
+import { SidebarContainer, SidebarHeader } from '@/components';
 import { useAppStore } from '@/store';
 import { DivProps } from '@/types/index';
 
@@ -15,8 +16,8 @@ export interface ExtraNetworkSidebarProps extends DivProps {
 
 const ExtraNetworkSidebar = memo<ExtraNetworkSidebarProps>(({ headerHeight }) => {
   const setting = useAppStore((st) => st.setting, isEqual);
-  const [mode] = useState<'fixed' | 'float'>(setting.extraNetworkFixedMode);
   const [expand, setExpand] = useState<boolean>(setting.extraNetworkSidebarExpand);
+  const [pin, setPin] = useState<boolean>(setting.extraNetworkFixedMode === 'fixed');
   const { mobile } = useResponsive();
   const { styles } = useStyles({ headerHeight });
 
@@ -43,15 +44,16 @@ const ExtraNetworkSidebar = memo<ExtraNetworkSidebarProps>(({ headerHeight }) =>
       defaultSize={{ width: setting.extraNetworkSidebarWidth }}
       expand={expand}
       minWidth={setting.extraNetworkSidebarWidth}
-      mode={mode}
+      mode={pin ? 'fixed' : 'float'}
       onExpandChange={setExpand}
-      pin={mode === 'fixed'}
+      pin={pin}
       placement="right"
     >
       <LayoutSidebarInner>
-        <div className={styles.container}>
+        <SidebarContainer className={styles.container}>
+          <SidebarHeader pin={pin} position="right" setPin={setPin} title="ExraNetworks" />
           <Inner />
-        </div>
+        </SidebarContainer>
       </LayoutSidebarInner>
     </DraggablePanel>
   );