✨ feat: add extra network sidebar

CHANGELOG.md

@@ -4,11 +4,10 @@
 
 ## [1.4.5](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.4.4...v1.4.5) (2023-04-22)
 
-
 ### 🐛 Bug Fixes
 
-* Bug Croped outpaint extention fiexed ([ee2765d](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/ee2765d)), closes [#41](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/issues/41)
-* Bug Croped outpaint extention fixed ([157bd50](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/157bd50)), closes [#41](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/issues/41)
+- Bug Croped outpaint extention fiexed ([ee2765d](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/ee2765d)), closes [#41](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/issues/41)
+- Bug Croped outpaint extention fixed ([157bd50](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/commit/157bd50)), closes [#41](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/issues/41)
 
 ## [1.4.4](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/compare/v1.4.3...v1.4.4) (2023-04-21)
 

src/components/ExtraNetworkSidebar/index.tsx

@@ -0,0 +1,79 @@
+import { DraggablePanel } from '@/components'
+import { ZoomInOutlined } from '@ant-design/icons'
+import { Slider } from 'antd'
+import { useResponsive } from 'antd-style'
+import React, { CSSProperties, useEffect, useState } from 'react'
+import styled from 'styled-components'
+
+const View = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: -webkit-fill-available;
+  overflow: hidden;
+`
+
+const SidebarView = styled.div<{ size: number }>`
+  padding: 16px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex: 1;
+
+  .extra-network-thumbs {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(${({ size }) => size}px, 1fr));
+    > .card {
+      height: ${({ size }) => size * 1.5}px !important;
+      width: -webkit-fill-available !important;
+    }
+  }
+`
+
+const Footer = styled.div`
+  flex: 0;
+  padding: 12px 16px;
+  border-top: 1px soild ${({ theme }) => theme.colorSplit};
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`
+
+const ZoomSlider = styled(Slider)`
+  margin-left: 16px;
+  flex: 1;
+`
+
+interface SidebarProps {
+  children: React.ReactNode
+  loading?: boolean
+  style?: CSSProperties
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ children, style }) => {
+  const { mobile } = useResponsive()
+  const [expand, setExpand] = useState<boolean>(!mobile)
+  const [size, setSize] = useState<number>(96)
+
+  useEffect(() => {
+    setExpand(!mobile)
+  }, [mobile])
+
+  return (
+    <DraggablePanel
+      style={style}
+      placement="right"
+      defaultSize={{ width: 340 }}
+      isExpand={expand}
+      onExpandChange={setExpand}
+    >
+      <View>
+        <SidebarView size={size}>{children}</SidebarView>
+        <Footer>
+          <ZoomInOutlined />
+          <ZoomSlider defaultValue={86} step={8} max={256} min={64} onChange={setSize} />
+        </Footer>
+      </View>
+    </DraggablePanel>
+  )
+}
+
+export default React.memo(Sidebar)

src/components/index.tsx

@@ -1,4 +1,5 @@
 export { default as Content } from './Content'
 export * from './DraggablePanel'
+export { default as ExtraNetworkSidebar } from './ExtraNetworkSidebar'
 export { default as Header } from './Header'
 export { default as Sidebar } from './Sidebar'

src/pages/index/App.tsx

@@ -1,4 +1,4 @@
-import { Content, Header, Sidebar } from '@/components'
+import { Content, ExtraNetworkSidebar, Header, Sidebar } from '@/components'
 import { useAppStore } from '@/store'
 import { Spin } from 'antd'
 import React, { useEffect, useRef, useState } from 'react'
@@ -36,22 +36,30 @@ interface AppProps {
 }
 
 const App: React.FC<AppProps> = ({ themeMode }) => {
-  const [setCurrentTab] = useAppStore((st) => [st.setCurrentTab], shallow)
+  const [currentTab, setCurrentTab] = useAppStore((st) => [st.currentTab, st.setCurrentTab], shallow)
   const [loading, setLoading] = useState(true)
   const sidebarRef: any = useRef<HTMLElement>()
   const mainRef: any = useRef<HTMLElement>()
   const headerRef: any = useRef<HTMLElement>()
+  const txt2imgExtraNetworkSidebarRef: any = useRef<HTMLElement>()
+  const img2imgExtraNetworkSidebarRef: any = useRef<HTMLElement>()
   useEffect(() => {
     onUiLoaded(() => {
       const sidebar = gradioApp().querySelector('#quicksettings')
       const header = gradioApp().querySelector('#tabs > .tab-nav:first-child')
       const main = gradioApp().querySelector('.app')
+      const txt2imgExtraNetworks = gradioApp().querySelector('div#txt2img_extra_networks')
+      const img2imgExtraNetworks = gradioApp().querySelector('div#img2img_extra_networks')
       if (sidebar) sidebarRef.current?.appendChild(sidebar)
       if (header) {
         headerRef.current?.appendChild(header)
         headerRef.current.id = 'tabs'
       }
       if (main) mainRef.current?.appendChild(main)
+      if (txt2imgExtraNetworks && img2imgExtraNetworks) {
+        txt2imgExtraNetworkSidebarRef.current?.appendChild(txt2imgExtraNetworks)
+        img2imgExtraNetworkSidebarRef.current?.appendChild(img2imgExtraNetworks)
+      }
       setLoading(false)
     })
     onUiUpdate(() => {
@@ -86,6 +94,23 @@ const App: React.FC<AppProps> = ({ themeMode }) => {
           )}
           <div id="content" ref={mainRef} />
         </Content>
+        <ExtraNetworkSidebar style={['tab_txt2img', 'tab_img2img'].includes(currentTab) ? {} : { display: 'none' }}>
+          {loading && (
+            <LoadingBox>
+              <Spin size="small" />
+            </LoadingBox>
+          )}
+          <div
+            id="txt2img-extra-netwrok-sidebar"
+            style={currentTab === 'tab_txt2img' ? {} : { display: 'none' }}
+            ref={txt2imgExtraNetworkSidebarRef}
+          />
+          <div
+            id="img2img-extra-netwrok-sidebar"
+            style={currentTab === 'tab_img2img' ? {} : { display: 'none' }}
+            ref={img2imgExtraNetworkSidebarRef}
+          />
+        </ExtraNetworkSidebar>
       </View>
     </MainView>
   )

src/theme/components/extra-network.less

@@ -1,26 +1,52 @@
+button#txt2img_extra_networks,
+button#img2img_extra_networks {
+  display: none !important;
+}
+
+#txt2img_extra_networks,
+#img2img_extra_networks {
+  display: block !important;
+
+  .tabitem.gradio-tabitem.svelte-19hvt5v {
+    padding: 0;
+    background: transparent;
+  }
+
+  .search {
+    max-width: -webkit-fill-available;
+    width: -webkit-fill-available;
+    max-height: 36px !important;
+    box-sizing: border-box;
+    padding: 8px;
+  }
+
+  button {
+    height: 32px !important;
+  }
+}
+
 .extra-networks {
   .tab-nav {
     align-items: center;
-
     > * {
       height: 40px !important;
       margin: 0 !important;
       font-size: 14px !important;
     }
-
-    > .search {
-      padding: 8px;
-    }
   }
 
   .extra-network-subdirs.extra-network-subdirs-thumbs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
     align-items: center;
     margin-bottom: 12px;
     padding: 0 !important;
-
-    > * {
-      height: 32px !important;
-      margin: 0 !important;
+    > button {
+      flex: 1;
+      min-width: 100px;
+      margin: 0;
+      cursor: pointer;
       zoom: 0.8;
     }
   }
@@ -37,10 +63,11 @@
     }
 
     .additional > ul {
+      margin: 0;
+      padding: 0;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: linear-gradient(180deg, rgb(0 0 0 / 80%), transparent) !important;
     }
   }
 
@@ -52,10 +79,7 @@
     transition: all 0.2s ease-in-out;
 
     &:hover {
-      transform: scale(1.5);
-      z-index: 500;
-      box-shadow: 0 6px 24px -4px rgb(0 0 0 / 80%);
-
+      outline: 2px solid var(--color-primary);
       .additional {
         display: block;
       }

src/theme/style.less

@@ -1,3 +1,6 @@
+/* Normalize */
+@import 'utils/normalize';
+
 /* Var */
 @import 'var/antd';
 @import 'var/antd-extra';
@@ -83,4 +86,6 @@ h5 {
   color: var(--color-text);
 }
 
-/* Theme Fix */
+a {
+  text-decoration: none;
+}