Skip to content

Commit 6c900a3

Browse files
warpdesignwarpdesign
committed
Badge: remove component, use Mantine's Indicator instead
1 parent fac3db5 commit 6c900a3

File tree

4 files changed

+39
-91
lines changed

4 files changed

+39
-91
lines changed

‎src/components/App.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,11 @@ const App = observer(() => {
317317
<ModalsProvider>
318318
<AppShell
319319
header={{ height: 50 }}
320-
navbar={{ width: 200, breakpoint: 'xs', collapsed: {} }}
320+
navbar={{
321+
width: 200,
322+
breakpoint: 'xs',
323+
collapsed: { mobile: !isExplorer, desktop: !isExplorer },
324+
}}
321325
className={mainClass}
322326
>
323327
<Alert
@@ -358,7 +362,7 @@ const App = observer(() => {
358362
<AppShell.Main h="100%" flex={1}>
359363
{<SideView viewState={views[0]} hide={!isExplorer} />}
360364
{splitView && <SideView viewState={views[1]} hide={!isExplorer} />}
361-
{/*<Downloads hide={isExplorer} /> */}
365+
<Downloads hide={isExplorer} />
362366
</AppShell.Main>
363367
{/* </div> */}
364368
{cache?.cursor && <PreviewDialog />}

‎src/components/Badge.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/components/Nav.tsx‎

Lines changed: 32 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,21 @@
11
import * as React from 'react'
2-
import { Navbar, Alignment, Button, Classes, Intent } from '@blueprintjs/core'
3-
import { IconNames } from '@blueprintjs/icons'
4-
import { Popover2 } from '@blueprintjs/popover2'
52
import { observer } from 'mobx-react'
63
import { useTranslation } from 'react-i18next'
7-
import classNames from 'classnames'
84

95
import { HamburgerMenu } from '$src/components/HamburgerMenu'
10-
import { Badge } from '$src/components/Badge'
116
import { useStores } from '$src/hooks/useStores'
12-
import { ActionIcon, Divider, Group, Menu } from '@mantine/core'
13-
import { IconAdjustmentsHorizontal, IconBorderVertical } from '@tabler/icons-react'
7+
import { ActionIcon, Divider, Group, Menu, Button, Indicator } from '@mantine/core'
8+
import { IconAdjustmentsHorizontal, IconBorderVertical, IconHomeFilled, IconDownload } from '@tabler/icons-react'
149

1510
const Nav = observer(() => {
1611
const { appState } = useStores('appState')
17-
const { transferListState } = appState
12+
// const { transferListState } = appState
1813
const { t } = useTranslation()
1914
const isExplorer = appState.isExplorer
2015
const count = appState.transferListState.pendingTransfers
21-
const badgeText = (count && count + '') || ''
22-
const badgeProgress = transferListState.totalTransferProgress
23-
const downloadClass = classNames(Classes.MINIMAL, 'download')
16+
// const badgeText = (count && count + '') || ''
17+
// const badgeProgress = transferListState.totalTransferProgress
2418
const isSplitViewActive = appState.winStates[0].splitView
25-
const [isPopoverOpen, setPopoverOpen] = React.useState(false)
2619

2720
const navClick = (): void => {
2821
if (appState.isExplorer) {
@@ -37,9 +30,31 @@ const Nav = observer(() => {
3730
return (
3831
<div style={{ height: '100%' }}>
3932
<Group h="100%" px="md" bg="background">
40-
{/* <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" /> */}
4133
<Group justify="space-between" style={{ flex: 1 }}>
42-
{t('APP_MENUS.ABOUT_TITLE')}
34+
<Group gap="sm" visibleFrom="sm">
35+
{t('APP_MENUS.ABOUT_TITLE')}
36+
<Divider size="sm" orientation="vertical" />
37+
<Button
38+
leftSection={<IconHomeFilled size={16} />}
39+
className="data-cy-explorer-tab"
40+
onClick={navClick}
41+
size="xs"
42+
variant={isExplorer ? 'filled' : 'subtle'}
43+
>
44+
{t('NAV.EXPLORER')}
45+
</Button>
46+
<Indicator color="teal" disabled={count === 0} processing={count > 0}>
47+
<Button
48+
leftSection={<IconDownload size={16} />}
49+
className="data-cy-downloads-tab"
50+
onClick={navClick}
51+
size="xs"
52+
variant={!isExplorer ? 'filled' : 'subtle'}
53+
>
54+
{t('NAV.TRANSFERS')}
55+
</Button>
56+
</Indicator>
57+
</Group>
4358
<Group ml="xl" gap="sm" visibleFrom="sm">
4459
<ActionIcon
4560
variant={(isSplitViewActive && 'filled') || 'subtle'}
@@ -52,71 +67,21 @@ const Nav = observer(() => {
5267
<Divider size="sm" orientation="vertical" />
5368
<Menu width={200} position="bottom" withArrow shadow="md">
5469
<Menu.Target>
55-
<ActionIcon variant="subtle" size="lg" onClick={() => setPopoverOpen(!isPopoverOpen)}>
70+
<ActionIcon variant="subtle" size="lg">
5671
<IconAdjustmentsHorizontal size={24} stroke={1.5} />
5772
</ActionIcon>
5873
</Menu.Target>
5974
<Menu.Dropdown className="data-cy-app-menu">
6075
<HamburgerMenu
61-
onOpenShortcuts={(): void => {
62-
setPopoverOpen(false)
63-
appState.toggleShortcutsDialog(true)
64-
}}
65-
onOpenPrefs={(): void => {
66-
setPopoverOpen(false)
67-
appState.togglePrefsDialog(true)
68-
}}
76+
onOpenShortcuts={(): void => appState.toggleShortcutsDialog(true)}
77+
onOpenPrefs={(): void => appState.togglePrefsDialog(true)}
6978
/>
7079
</Menu.Dropdown>
7180
</Menu>
7281
</Group>
7382
</Group>
7483
</Group>
7584
</div>
76-
// <Navbar>
77-
// <Navbar.Group align={Alignment.LEFT} className="title-group">
78-
// <Navbar.Heading>{t('APP_MENUS.ABOUT_TITLE')}</Navbar.Heading>
79-
// <Navbar.Divider />
80-
// <Button
81-
// className={`${Classes.MINIMAL} data-cy-explorer-tab`}
82-
// icon="home"
83-
// text={t('NAV.EXPLORER')}
84-
// onClick={navClick}
85-
// intent={isExplorer ? Intent.PRIMARY : 'none'}
86-
// />
87-
// <Button
88-
// style={{ position: 'relative' }}
89-
// className={`${downloadClass} data-cy-downloads-tab`}
90-
// icon="download"
91-
// onClick={navClick}
92-
// intent={!isExplorer ? Intent.PRIMARY : 'none'}
93-
// >
94-
// {t('NAV.TRANSFERS')}
95-
// <Badge intent="none" text={badgeText} progress={badgeProgress} />
96-
// </Button>
97-
// </Navbar.Group>
98-
// <Navbar.Group align={Alignment.RIGHT}>
99-
// <Button
100-
// className={`data-cy-toggle-splitview ${Classes.MINIMAL}`}
101-
// active={isSplitViewActive}
102-
// intent={(isSplitViewActive && 'primary') || 'none'}
103-
// onClick={onToggleSplitView}
104-
// icon={IconNames.PANEL_STATS}
105-
// title={t('NAV.SPLITVIEW')}
106-
// />
107-
// <Navbar.Divider />
108-
// <Popover2
109-
// content={
110-
// <HamburgerMenu
111-
// onOpenShortcuts={(): void => appState.toggleShortcutsDialog(true)}
112-
// onOpenPrefs={(): void => appState.togglePrefsDialog(true)}
113-
// />
114-
// }
115-
// >
116-
// <Button className={`data-cy-toggle-app-menu ${Classes.MINIMAL}`} icon={IconNames.SETTINGS} />
117-
// </Popover2>
118-
// </Navbar.Group>
119-
// </Navbar>
12085
)
12186
})
12287

‎src/css/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ button.small:hover{
5353
border-radius:0;
5454
}
5555

56-
.main > .hidden{
56+
.main .hidden{
5757
display:none;
5858
pointer-events: none;
5959
}

0 commit comments

Comments
 (0)