Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit e7c465c

Browse files
RafaelGBRafaelGB
committed
Merge remote-tracking branch 'origin/botom-bar'
2 parents e5580ef + 55b03ef commit e7c465c

File tree

5 files changed

+138
-161
lines changed

5 files changed

+138
-161
lines changed

‎src/components/NavBar.tsx‎

Lines changed: 78 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { NavBarProps } from "cdm/MenuBarModel";
55
import GlobalFilter from "components/reducers/GlobalFilter";
66
import PaginationTable from "components/navbar/PaginationTable";
77
import { InputType, NavBarConfig, StyleVariables } from "helpers/Constants";
8-
import AppBar from "@mui/material/AppBar";
98
import Box from "@mui/material/Box";
109
import IconButton from "@mui/material/IconButton";
1110
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
@@ -16,11 +15,14 @@ import MenuItem from "@mui/material/MenuItem";
1615
import Toolbar from "@mui/material/Toolbar";
1716
import { c } from "helpers/StylesHelper";
1817
import DataviewFilters from "components/reducers/DataviewFilters";
19-
import { MenuButtonStyle } from "components/styles/NavBarStyles";
18+
import {
19+
MenuButtonStyle,
20+
ToolBarMenuButtonStyle,
21+
} from "components/styles/NavBarStyles";
2022
import { SettingsModal } from "Settings";
2123
import CsvReader from "./navbar/CsvReader";
2224
import { t } from "lang/helpers";
23-
import Grid from "@mui/material/Grid";
25+
import AppBar from "@mui/material/AppBar";
2426

2527
export function NavBar(navBarProps: NavBarProps) {
2628
const { table } = navBarProps;
@@ -59,109 +61,97 @@ export function NavBar(navBarProps: NavBarProps) {
5961
};
6062

6163
return (
62-
<>
64+
<Box
65+
sx={{ flexGrow: 1 }}
66+
style={{
67+
color: StyleVariables.TEXT_MUTED,
68+
backgroundColor: StyleVariables.BACKGROUND_SECONDARY,
69+
width: table.getCenterTotalSize(),
70+
}}
71+
>
6372
<AppBar
64-
position="static"
73+
position="sticky"
6574
style={{
6675
color: StyleVariables.TEXT_MUTED,
6776
backgroundColor: StyleVariables.BACKGROUND_SECONDARY,
6877
width: "calc(100% - 20px)",
6978
boxShadow: "none",
70-
position: "fixed",
7179
left: 0,
7280
}}
7381
>
7482
<Toolbar>
75-
<Grid container spacing={1}>
76-
<Grid item xs="auto">
77-
<IconButton
78-
size="large"
79-
edge="start"
80-
color="inherit"
81-
aria-label={t("toolbar_menu_aria_label")}
82-
id="long-button"
83-
aria-controls={open ? "long-menu" : undefined}
84-
aria-expanded={open ? "true" : undefined}
85-
aria-haspopup="true"
86-
onClick={handleClick}
87-
>
88-
<MenuIcon />
89-
</IconButton>
90-
</Grid>
91-
<Menu
92-
anchorEl={anchorEl}
93-
open={open}
94-
onClose={handleMenuClose}
95-
PaperProps={{
96-
style: {
97-
maxHeight: NavBarConfig.ITEM_HEIGHT * 4.5,
98-
},
99-
}}
100-
MenuListProps={{
101-
"aria-labelledby": "long-button",
102-
style: {
103-
backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
104-
color: StyleVariables.TEXT_NORMAL,
105-
},
106-
}}
107-
>
108-
<MenuItem onClick={handleSettingsClick} disableRipple>
109-
<SettingsIcon {...MenuButtonStyle} />
110-
{t("menu_pane_open_db_settings_action")}
111-
</MenuItem>
112-
<MenuItem onClick={handleOpenAsMarkdownClick} disableRipple>
113-
<InsertDriveFileIcon {...MenuButtonStyle} />
114-
{t("menu_pane_open_as_md_action")}
115-
</MenuItem>
116-
<MenuItem disableRipple>
117-
{/* CSV buttton download */}
118-
<CsvWriter
119-
columns={columnsInfo.getAllColumns()}
120-
rows={table.getRowModel().rows}
121-
name={view.diskConfig.yaml.name}
122-
/>
123-
</MenuItem>
124-
<CsvReader {...navBarProps} />
125-
</Menu>
126-
<Grid item xs="auto">
127-
{/** Global filter */}
128-
<GlobalFilter {...navBarProps.globalFilterRows} />
129-
</Grid>
130-
<Grid item xs="auto">
131-
<DataviewFilters table={table} />
132-
</Grid>
133-
<Grid item xs={5}>
134-
<PaginationTable table={table} />
135-
</Grid>
136-
</Grid>
83+
<IconButton
84+
size="small"
85+
edge="start"
86+
color="inherit"
87+
aria-label={t("toolbar_menu_aria_label")}
88+
id="long-button"
89+
aria-controls={open ? "long-menu" : undefined}
90+
aria-expanded={open ? "true" : undefined}
91+
aria-haspopup="true"
92+
onClick={handleClick}
93+
sx={ToolBarMenuButtonStyle}
94+
>
95+
<MenuIcon />
96+
</IconButton>
97+
<Menu
98+
anchorEl={anchorEl}
99+
open={open}
100+
onClose={handleMenuClose}
101+
PaperProps={{
102+
style: {
103+
maxHeight: NavBarConfig.ITEM_HEIGHT * 4.5,
104+
},
105+
}}
106+
MenuListProps={{
107+
"aria-labelledby": "long-button",
108+
style: {
109+
backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
110+
color: StyleVariables.TEXT_NORMAL,
111+
},
112+
}}
113+
>
114+
<MenuItem onClick={handleSettingsClick} disableRipple>
115+
<SettingsIcon {...MenuButtonStyle} />
116+
{t("menu_pane_open_db_settings_action")}
117+
</MenuItem>
118+
<MenuItem onClick={handleOpenAsMarkdownClick} disableRipple>
119+
<InsertDriveFileIcon {...MenuButtonStyle} />
120+
{t("menu_pane_open_as_md_action")}
121+
</MenuItem>
122+
<MenuItem disableRipple>
123+
{/* CSV buttton download */}
124+
<CsvWriter
125+
columns={columnsInfo.getAllColumns()}
126+
rows={table.getRowModel().rows}
127+
name={view.diskConfig.yaml.name}
128+
/>
129+
</MenuItem>
130+
<CsvReader {...navBarProps} />
131+
</Menu>
132+
{/** Global filter */}
133+
<GlobalFilter {...navBarProps.globalFilterRows} />
134+
<Box
135+
justifyContent={"flex-start"}
136+
sx={{
137+
display: { xs: "none", md: "flex" },
138+
}}
139+
>
140+
<DataviewFilters table={table} />
141+
<PaginationTable table={table} />
142+
</Box>
137143
</Toolbar>
138144
</AppBar>
139-
{/** Hacky to stick the bar without move one row before the header*/}
140-
<Toolbar
141-
style={{
142-
opacity: 0,
143-
pointerEvents: "none",
144-
}}
145-
/>
146-
</>
145+
</Box>
147146
);
148147
}
149148
export function HeaderNavBar(headerNavBarProps: NavBarProps) {
150-
const { table } = headerNavBarProps;
151149
return (
152150
<div
153-
key={`div-navbar-header-row`}
154-
className={`${c("tr sticky-level-1")}`}
155-
style={{
156-
width: table.getCenterTotalSize(),
157-
}}
151+
className={`${c("navbar sticky-level-1")}`}
152+
key="div-navbar-header-cell"
158153
>
159-
<div
160-
className={`${c("th navbar sticky-level-1")}`}
161-
key="div-navbar-header-cell"
162-
>
163-
<NavBar {...headerNavBarProps} />
164-
</div>
154+
<NavBar {...headerNavBarProps} />
165155
</div>
166156
);
167157
}

‎src/components/Table.tsx‎

Lines changed: 47 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ import TableRow from "components/TableRow";
4242
import getInitialColumnSizing from "components/behavior/InitialColumnSizeRecord";
4343
import { globalDatabaseFilterFn } from "components/reducers/TableFilterFlavours";
4444
import dbfolderColumnSortingFn from "./reducers/CustomSortingFn";
45+
import Toolbar from "@mui/material/Toolbar";
46+
import Box from "@mui/material/Box";
4547

4648
const defaultColumn: Partial<ColumnDef<RowDataType>> = {
4749
minSize: DatabaseLimits.MIN_COLUMN_HEIGHT,
@@ -284,25 +286,15 @@ export function Table(tableData: TableDataType) {
284286
LOGGER.debug(`<= Table`);
285287
return (
286288
<>
287-
<div
288-
key={`div-table-navbar`}
289-
className={`${c("table sticky-level-1")}`}
290-
style={{
291-
width: table.getCenterTotalSize(),
289+
<HeaderNavBar
290+
key={`div-header-navbar`}
291+
table={table}
292+
globalFilterRows={{
293+
globalFilter: globalFilter,
294+
hits: table.getFilteredRowModel().rows.length,
295+
setGlobalFilter: setGlobalFilter,
292296
}}
293-
>
294-
{/* INIT NAVBAR */}
295-
<HeaderNavBar
296-
key={`div-header-navbar`}
297-
table={table}
298-
globalFilterRows={{
299-
globalFilter: globalFilter,
300-
hits: table.getFilteredRowModel().rows.length,
301-
setGlobalFilter: setGlobalFilter,
302-
}}
303-
/>
304-
{/* ENDS NAVBAR */}
305-
</div>
297+
/>
306298
{/* INIT TABLE */}
307299
<div
308300
key={`div-table`}
@@ -405,8 +397,9 @@ export function Table(tableData: TableDataType) {
405397
{/* ENDS TABLE */}
406398
</div>
407399
{/* INIT NEW ROW */}
408-
<div key={`div-add-row`} className={`${c("tr add-row")}`}>
409-
<div key={`div-add-row-cell`} className={`${c("td")}`}>
400+
401+
<Box sx={{ flexGrow: 1 }} className={`${c("add-row")}`}>
402+
<Toolbar>
410403
<input
411404
type="text"
412405
ref={newRowRef}
@@ -416,43 +409,41 @@ export function Table(tableData: TableDataType) {
416409
onKeyDown={handleKeyDown}
417410
placeholder="filename of new row"
418411
/>
419-
</div>
420-
<div
421-
key={`div-add-row-cell-button`}
422-
className={`${c("td")}`}
423-
onClick={handleAddNewRow}
424-
>
425-
<span className="svg-icon svg-gray" style={{ marginRight: 8 }}>
426-
<PlusIcon />
427-
</span>
428-
</div>
429-
<div
430-
key={`div-add-row-cell-padding-left`}
431-
className={`${c("td padding-left-05")}`}
432-
>
433-
<Select
434-
styles={CustomTemplateSelectorStyles}
435-
options={templateOptions}
436-
value={
437-
templateRow
438-
? {
439-
label: templateRow,
440-
value: templateRow,
441-
}
442-
: null
443-
}
444-
isClearable={true}
445-
isMulti={false}
446-
onChange={handleChangeRowTemplate}
447-
placeholder={"Without template. Select one to use..."}
448-
menuPortalTarget={document.body}
449-
menuShouldBlockScroll={true}
450-
isSearchable
451-
menuPlacement="top"
452-
/>
453-
</div>
412+
<div key={`div-add-row-cell-button`} onClick={handleAddNewRow}>
413+
<span className="svg-icon svg-gray">
414+
<PlusIcon />
415+
</span>
416+
</div>
417+
<Box
418+
justifyContent={"flex-start"}
419+
sx={{
420+
display: { xs: "none", md: "flex" },
421+
}}
422+
>
423+
<Select
424+
styles={CustomTemplateSelectorStyles}
425+
options={templateOptions}
426+
value={
427+
templateRow
428+
? {
429+
label: templateRow,
430+
value: templateRow,
431+
}
432+
: null
433+
}
434+
isClearable={true}
435+
isMulti={false}
436+
onChange={handleChangeRowTemplate}
437+
placeholder={"Without template. Select one to use..."}
438+
menuPortalTarget={document.body}
439+
menuShouldBlockScroll={true}
440+
isSearchable
441+
menuPlacement="top"
442+
/>
443+
</Box>
444+
</Toolbar>
454445
{/* ENDS NEW ROW */}
455-
</div>
446+
</Box>
456447
{/* INIT DEBUG INFO */}
457448
{globalConfig.enable_show_state && (
458449
<pre>

‎src/components/styles/NavBarStyles.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,7 @@ export const MenuButtonStyle = {
6464
}
6565
}
6666

67+
68+
export const ToolBarMenuButtonStyle = {
69+
mr: 2
70+
}

‎src/components/styles/RowTemplateStyles.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,15 @@ const CustomTemplateSelectorStyles: StylesConfig<any, true, GroupBase<any>> = {
1111
...styles,
1212
color: 'var(--text-normal)',
1313
backgroundColor: 'var(--background-primary)',
14-
fontSize: '12px',
1514
textAlign: 'left',
16-
width: 'auto',
1715
}
1816
},
1917
control: (styles) => {
2018
return {
2119
...styles,
2220
color: 'var(--text-normal)',
2321
backgroundColor: 'var(--background-primary)',
24-
fontSize: '12px',
2522
textAlign: 'left',
26-
minWidth: '17rem',
2723
}
2824
}
2925
}

0 commit comments

Comments
 (0)