Skip to content

Commit ed5088e

Browse files
sajjadmrxsajjadmrx
authored
Merge pull request #359 from shakurt/fix/modal-whitespace-bottom
Fix/modal-whitespace-bottom
2 parents 4271a38 + 2eb2a63 commit ed5088e

3 files changed

Lines changed: 59 additions & 46 deletions

File tree

‎src/components/tab-manager.tsx‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface TabManagerProps {
1717
onTabChange?: (tabValue: string) => void
1818
direction?: 'rtl' | 'ltr'
1919
tabPosition?: 'top' | 'side'
20+
children?: ReactNode // for additional tab buttons at the end of aside (just pass the actual buttons)
2021
}
2122

2223
export const TabManager = ({
@@ -27,6 +28,7 @@ export const TabManager = ({
2728
direction = 'rtl',
2829
tabOwner,
2930
tabPosition,
31+
children,
3032
}: TabManagerProps) => {
3133
const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.value || '')
3234
const contentRef = useRef<HTMLDivElement>(null)
@@ -69,28 +71,34 @@ export const TabManager = ({
6971
? 'shrink-0 md:overflow-y-auto w-full'
7072
: 'md:flex-col md:w-48 shrink-0 md:overflow-y-auto'
7173
return (
72-
<div dir={direction} className={`flex ${headClass} overflow-hidden`}>
73-
<div
74-
className={`flex w-full gap-2 p-2 overflow-x-auto rounded-lg ${contentClass}`}
75-
>
76-
{tabs.map(({ label, value, icon, isNew }) => (
77-
<button
78-
key={value}
79-
onClick={() => handleTabChange(value)}
80-
className={`relative flex items-center gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] ${getTabButtonStyle(activeTab === value)}`}
81-
>
82-
<span
83-
className={`relative ${getTabIconStyle(activeTab === value)}`}
84-
>
85-
{icon}
86-
{isNew && (
87-
<span className="absolute left-0 z-30 w-2 h-2 duration-200 rounded-full -bottom-1 bg-error animate-ping"></span>
88-
)}
89-
</span>
90-
<span className="text-sm">{label}</span>
91-
</button>
92-
))}
93-
</div>{' '}
74+
<div dir={direction} className={`flex ${headClass} overflow-hidden`}>
75+
<aside className="flex flex-row justify-between overflow-hidden sm:flex-col md:h-full">
76+
<div
77+
className={`flex w-full md:h-full justify-between overflow-x-auto rounded-lg ${contentClass}`}
78+
>
79+
<div className="flex flex-row sm:flex-col sm:gap-2">
80+
{tabs.map(({ label, value, icon, isNew }) => (
81+
<button
82+
key={value}
83+
onClick={() => handleTabChange(value)}
84+
className={`relative flex items-center gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] ${getTabButtonStyle(activeTab === value)}`}
85+
>
86+
<span
87+
className={`relative ${getTabIconStyle(activeTab === value)}`}
88+
>
89+
{icon}
90+
{isNew && (
91+
<span className="absolute left-0 z-30 w-2 h-2 duration-200 rounded-full -bottom-1 bg-error animate-ping"></span>
92+
)}
93+
</span>
94+
<span className="text-sm">{label}</span>
95+
</button>
96+
))}
97+
</div>
98+
{children}
99+
</div>
100+
</aside>
101+
94102
<div
95103
className="relative flex-1 overflow-x-hidden overflow-y-auto rounded-lg"
96104
ref={contentRef}

‎src/layouts/setting/setting-modal.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -96,22 +96,26 @@ export const SettingModal = ({ isOpen, onClose, selectedTab }: SettingModalProps
9696
defaultTab="general"
9797
selectedTab={selectedTab}
9898
direction="rtl"
99-
/>
100-
<button
101-
className={`relative items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
102-
onClick={() => openWidgetSettings()}
103-
>
104-
<TbApps size={20} className="text-muted" />
105-
<span className="text-sm font-light">مدیریت ویجت ها</span>
106-
<span className="absolute w-2 h-2 rounded-full right-4 top-2 bg-error animate-pulse"></span>
107-
</button>
108-
<button
109-
className={`relative items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
110-
onClick={() => setUpdateModalOpen(true)}
11199
>
112-
<VscMegaphone size={20} />
113-
<span className="text-sm font-light">تغییرات اخیر</span>
114-
</button>
100+
<div className="flex flex-row gap-1 sm:flex-col">
101+
<button
102+
className={`relative items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
103+
onClick={() => openWidgetSettings()}
104+
>
105+
<TbApps size={20} className="text-muted" />
106+
<span className="text-sm font-light">مدیریت ویجت ها</span>
107+
<span className="absolute w-2 h-2 rounded-full right-4 top-2 bg-error animate-pulse"></span>
108+
</button>
109+
<button
110+
className={`relative items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
111+
onClick={() => setUpdateModalOpen(true)}
112+
>
113+
<VscMegaphone size={20} />
114+
<span className="text-sm font-light">تغییرات اخیر</span>
115+
</button>
116+
</div>
117+
</TabManager>
118+
115119
<UpdateReleaseNotesModal
116120
isOpen={isUpdateModalOpen}
117121
onClose={() => setUpdateModalOpen(false)}

‎src/layouts/widgets-settings/widget-settings-modal.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -89,16 +89,17 @@ export function WidgetSettingsModal({
8989
tabOwner="widgets-settings"
9090
defaultTab={selectedTab || WidgetTabKeys.widget_management}
9191
direction="rtl"
92-
/>
93-
<button
94-
className={`relative items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
95-
onClick={() => {
96-
onClickSettings()
97-
}}
9892
>
99-
<VscSettings size={20} className="text-muted" />
100-
<span className="text-sm font-light">تنظیمات</span>
101-
</button>
93+
<button
94+
className={`relative items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
95+
onClick={() => {
96+
onClickSettings()
97+
}}
98+
>
99+
<VscSettings size={20} className="text-muted" />
100+
<span className="text-sm font-light">تنظیمات</span>
101+
</button>
102+
</TabManager>
102103
</Modal>
103104
)
104105
}

0 commit comments

Comments
 (0)