chore: improve profile modal styling

Tormak9970 · Jan 9, 2024 · 5e5b147 · 5e5b147
1 parent 821e508
commit 5e5b147
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 24 deletions.
diff --git a/src/components/context-menus/LibraryMenu.tsx b/src/components/context-menus/LibraryMenu.tsx
@@ -150,7 +150,7 @@ const HiddenItems: VFC<HiddenItemsProps> = ({ hiddenTabsList, isMicroSDeckInstal
           setRefresh(refresh => !refresh);
         }}
       >
-        <TabListLabel tabContainer={tabContainer} microSDeckDisabled={!isMicroSDeckInstalled}/>
+        <TabListLabel tabContainer={tabContainer} microSDeckDisabled={!isMicroSDeckInstalled} />
       </MenuItemNoClose>
     )}
   </>;

diff --git a/src/components/generic/ScrollableWindow.tsx b/src/components/generic/ScrollableWindow.tsx
@@ -0,0 +1,43 @@
+import { GamepadButton } from 'decky-frontend-lib';
+import { FC, Fragment } from 'react';
+import { ModalPosition, Panel, ScrollPanelGroup } from '../docs/Scrollable';
+
+export interface ScrollableWindowProps {
+  height: string;
+  fadePercent: number;
+}
+export const ScrollableWindow: FC<ScrollableWindowProps> = ({ height, fadePercent, children }) => {
+  return (
+    <>
+      <style>
+        {`.modal-position-container .gamepaddialog_ModalPosition_30VHl {
+          top: 0;
+          bottom: 0;
+          padding: 0;
+        }`}
+      </style>
+      <div
+        className='modal-position-container'
+        style={{
+          position: 'relative',
+          height: height,
+          WebkitMaskImage: `linear-gradient(to bottom, transparent, black ${fadePercent}%, black ${100 - fadePercent}%, transparent 100%)`
+        }}>
+        <ModalPosition>
+
+          <ScrollPanelGroup focusable={false} style={{ flex: 1, minHeight: 0 }}>
+            <Panel
+              focusable={true}
+              noFocusRing={true}
+              actionDescriptionMap={{
+                [GamepadButton.DIR_UP]: 'Scroll Up',
+                [GamepadButton.DIR_DOWN]: 'Scroll Down'
+              }}>
+              {children}
+            </Panel>
+          </ScrollPanelGroup>
+        </ModalPosition>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/modals/TabProfileModals.tsx b/src/components/modals/TabProfileModals.tsx
@@ -1,8 +1,9 @@
-import { ConfirmModal, Field, TextField, afterPatch, quickAccessControlsClasses } from 'decky-frontend-lib';
-import { VFC, useEffect, useState, Fragment } from 'react';
+import { ConfirmModal, Field, TextField, quickAccessControlsClasses } from 'decky-frontend-lib';
+import { VFC, useState, Fragment, FC } from 'react';
 import { TabMasterManager } from '../../state/TabMasterManager';
 import { TabMasterContextProvider } from "../../state/TabMasterContext";
 import { TabProfileModalStyles } from "../styles/TabProfileModalStyles";
+import { TabListLabel } from '../TabListLabel';
 
 export interface CreateTabProfileModalProps {
   tabMasterManager: TabMasterManager,
@@ -12,25 +13,6 @@ export interface CreateTabProfileModalProps {
 export const CreateTabProfileModal: VFC<CreateTabProfileModalProps> = ({ tabMasterManager, closeModal }) => {
   const [name, setName] = useState<string>('');
   const visibleTabs = tabMasterManager.getTabs().visibleTabsList;
-  const [patchInput, setPatchInput] = useState<boolean>(true);
-
-  const nameInputElement = <TextField value={name} placeholder="The name of this tab profile" onChange={onNameChange} />;
-
-  //reference to input field class component instance, which has a focus method
-  let inputComponentInstance: any;
-
-  if (patchInput) {
-    afterPatch(nameInputElement.type.prototype, 'render', function (_: any, ret: any) {
-      //@ts-ignore     get reference to instance
-      inputComponentInstance = this;
-      return ret;
-    }, { singleShot: true });
-  }
-
-  useEffect(() => {
-    inputComponentInstance.Focus();
-    setPatchInput(false);
-  }, []);
 
   function onNameChange(e: React.ChangeEvent<HTMLInputElement>) {
     setName(e?.target.value);
@@ -54,11 +36,21 @@ export const CreateTabProfileModal: VFC<CreateTabProfileModalProps> = ({ tabMast
                 <div style={{ paddingBottom: "6px" }} className={quickAccessControlsClasses.PanelSectionTitle}>
                   Profile Name
                 </div>
-                {nameInputElement}
+                <TextField value={name} placeholder="The name of this tab profile" onChange={onNameChange} />
               </>
             } />
           </div>
-          {visibleTabs.map(tabContainer => <div>{tabContainer.title}</div>)}
+          {/* <ScrollableWindow height='180px' fadePercent={7}> */}
+            <div style={{ padding: '0 20px'}}>
+              {visibleTabs.map(tabContainer => {
+                return (
+                  <TabItem >
+                    <TabListLabel tabContainer={tabContainer} microSDeckDisabled={false} />
+                  </TabItem>
+                );
+              })}
+            </div>
+          {/* </ScrollableWindow> */}
         </ConfirmModal>
       </div>
     </TabMasterContextProvider>
@@ -101,3 +93,21 @@ export const OverwriteTabProfileModal: VFC<OverwriteTabProfileModalProps> = ({ p
   );
 };
 
+const TabItem: FC<{}> = ({ children }) => {
+  return (
+    <>
+      <div style={{ padding: '0 15px', height: '28px', display: 'flex', fontSize: 'small' }}>
+        {children}
+      </div>
+      <div
+        style={{
+          height: '2px',
+          background: 'rgba(255,255,255,.1)',
+          flexShrink: '0'
+        }}
+      />
+    </>
+  );
+};
+
+