Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve css styling #31

Merged
merged 20 commits into from May 8, 2022
Merged

Improve css styling #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
daf312f
give search input "search" type
artisticat1 May 8, 2022
a0d9eac
fix misaligned icons
artisticat1 May 8, 2022
0cc35ec
fix hover on new row
artisticat1 May 8, 2022
b0d3393
use menu class for edit column popover
artisticat1 May 8, 2022
f9862a0
use menu class for submenus, style popovers
artisticat1 May 8, 2022
26e2dcb
use menu class for select popover, remove unused css
artisticat1 May 8, 2022
8f61a17
remove padding from menu
artisticat1 May 8, 2022
4766856
style appBar
artisticat1 May 8, 2022
c21b928
improve cell hover color
artisticat1 May 8, 2022
9d0de76
change new row text color
artisticat1 May 8, 2022
8410195
fix misaligned icons (for base theme)
artisticat1 May 8, 2022
d3a6a68
fix misaligned "new row" icon
artisticat1 May 8, 2022
b87745d
fix popover icons
artisticat1 May 8, 2022
d77cc56
align new row icon
artisticat1 May 8, 2022
fbbe09d
improve new row hover color
artisticat1 May 8, 2022
25ce691
move borderTop into the appBar (fixes the border moving on scroll)
artisticat1 May 8, 2022
e2ba1a9
change buttons -> divs (removes button styling)
artisticat1 May 8, 2022
530cb31
for cells in the file column, match padding of other cells
artisticat1 May 8, 2022
f445e18
remove unnecessary background on input for new select option
artisticat1 May 8, 2022
a6490ca
Merge branch 'RafaelGB:master' into master
artisticat1 May 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Cell.tsx
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ import { MarkdownRenderer } from "obsidian";
import NoteInfo from "services/NoteInfo";
import PopperSelectPortal from "components/portals/PopperSelectPortal";
import { CellContext } from "components/contexts/CellContext";
import { c } from "helpers/StylesHelper";

/**
* Obtain the path of the file inside cellValue
Expand Down Expand Up @@ -117,7 +118,8 @@ export default function DefaultCell(cellProperties: Cell) {
null
);
});
return <span ref={containerRef}></span>;

return <span ref={containerRef} className={`${c("md_cell")}`} ></span>;
/** Selector option */
case DataTypes.SELECT:
return (
Expand Down
47 changes: 21 additions & 26 deletions src/components/HeaderMenu.tsx
View file
Open in desktop
Expand Up @@ -4,7 +4,7 @@ import {
TableDataType,
} from "cdm/FolderModel";
import { ActionTypes, DataTypes, StyleVariables } from "helpers/Constants";
import { dbTrim } from "helpers/StylesHelper";
import { dbTrim, c } from "helpers/StylesHelper";
import ArrowUpIcon from "components/img/ArrowUp";
import ArrowDownIcon from "components/img/ArrowDown";
import ArrowLeftIcon from "components/img/ArrowLeft";
Expand Down Expand Up @@ -290,10 +290,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
{...attributes.popper}
>
<div
className="shadow-5 border-radius-md"
className={`menu ${c("popper")}`}
style={{
width: 240,
backgroundColor: StyleVariables.BACKGROUND_SECONDARY,
width: 240
}}
>
{/** Edit header label section */}
Expand Down Expand Up @@ -328,9 +327,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
</div>
{/** Type of column section */}
<div style={{ padding: "4px 0px" }}>
<button
className="sort-button"
type="button"
<div
className="menu-item sort-button"
onMouseEnter={() => setShowType(true)}
onMouseLeave={() => setShowType(false)}
ref={setTypeReferenceElement}
Expand All @@ -341,30 +339,29 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
<span style={{ textTransform: "capitalize" }}>
{column.dataType}
</span>
</button>
</div>
{showType && (
<div
className="shadow-5 border-radius-m"
className={`menu ${c("popper")}`}
ref={setTypePopperElement}
onMouseEnter={() => setShowType(true)}
onMouseLeave={() => setShowType(false)}
{...typePopper.attributes.popper}
style={{
...typePopper.styles.popper,
width: 200,
backgroundColor: StyleVariables.BACKGROUND_SECONDARY,
zIndex: 4,
padding: "4px 0px",
}}
>
{types.map((type) => (
<div key={type.label}>
<button className="sort-button" onClick={type.onClick}>
<div className="menu-item sort-button" onClick={type.onClick}>
<span className="svg-icon svg-text icon-margin">
{type.icon}
</span>
{type.label}
</button>
</div>
</div>
))}
</div>
Expand All @@ -373,35 +370,33 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
{/** Action buttons section */}
<div
style={{
borderTop: `2px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
borderTop: `1px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
padding: "4px 0px",
}}
>
{buttons.map((button) => (
<button
<div
key={button.label}
type="button"
className="sort-button"
className="menu-item sort-button"
onMouseDown={button.onClick}
>
<span className="svg-icon svg-text icon-margin">
{button.icon}
</span>
{button.label}
</button>
</div>
))}
</div>
<div
style={{
borderTop: `2px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
borderTop: `1px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
padding: "4px 0px",
}}
>
{/** Column settings section */}
<div style={{ padding: "4px 0px" }}>
<button
className="sort-button"
type="button"
<div
className="menu-item sort-button"
onMouseEnter={() => setShowSettings(true)}
onMouseLeave={() => setShowSettings(false)}
ref={setSettingsReferenceElement}
Expand All @@ -410,18 +405,17 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
<AdjustmentsIcon />
</span>
<span>Settings</span>
</button>
</div>
{showSettings && (
<div
className="shadow-5 border-radius-m"
className={`menu ${c("popper")}`}
ref={setSettingsPopperElement}
onMouseEnter={() => setShowSettings(true)}
onMouseLeave={() => setShowSettings(false)}
{...settingsPopper.attributes.popper}
style={{
...settingsPopper.styles.popper,
width: 200,
backgroundColor: StyleVariables.BACKGROUND_SECONDARY,
zIndex: 4,
padding: "4px 0px",
}}
Expand All @@ -445,8 +439,9 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
</div>
</div>
</div>
)}
</div>
)
}
</div >
);
};

Expand Down
3 changes: 2 additions & 1 deletion src/components/NavBar.tsx
View file
Open in desktop
Expand Up @@ -2,6 +2,7 @@ import * as React from "react";
import CsvButton from "components/CsvButton";
import { CsvButtonProps, GlobalFilterProps } from "cdm/MenuBarModel";
import GlobalFilter from "components/reducers/GlobalFilter";
import { StyleVariables } from "helpers/Constants";
import {
AppBar,
Box,
Expand Down Expand Up @@ -41,7 +42,7 @@ export function NavBar(navBarProps: NavBarProps) {
>
<AppBar
position="static"
style={{ backgroundColor: "var(--background-modifier-box-shadow)" }}
style={{ color: StyleVariables.TEXT_MUTED, backgroundColor: StyleVariables.BACKGROUND_SECONDARY, boxShadow: "none" }}
>
<Toolbar>
<IconButton
Expand Down
54 changes: 25 additions & 29 deletions src/components/Table.tsx
View file
Open in desktop
Expand Up @@ -230,6 +230,7 @@ export function Table(initialState: TableDataType) {
position: "sticky",
top: 0,
zIndex: 1,
borderTop: "1px solid var(--background-modifier-border)",
}}
>
<HeaderNavBar
Expand Down Expand Up @@ -311,14 +312,13 @@ export function Table(initialState: TableDataType) {
const tableCellProps = isDragUpdate
? tableCellBaseProps
: {
...tableCellBaseProps,
style: {
...column.getHeaderProps().style,
width: `${
columnsWidthState.widthRecord[column.id]
...tableCellBaseProps,
style: {
...column.getHeaderProps().style,
width: `${columnsWidthState.widthRecord[column.id]
}px`,
},
};
},
};

return (
<div {...tableCellProps}>
Expand Down Expand Up @@ -361,12 +361,12 @@ export function Table(initialState: TableDataType) {
const tableCellProps = isDragUpdate
? tableCellBaseProps
: {
...tableCellBaseProps,
style: {
...tableCellBaseProps.style,
width: columnsWidthState.widthRecord[cell.column.id],
},
};
...tableCellBaseProps,
style: {
...tableCellBaseProps.style,
width: columnsWidthState.widthRecord[cell.column.id],
},
};
return <div {...tableCellProps}>{cell.render("Cell")}</div>;
})}
</div>
Expand All @@ -383,22 +383,18 @@ export function Table(initialState: TableDataType) {
placeholder="filename of new row"
/>
</div>
<div className={`${c("td")}`}>
<div
onClick={() => {
dataDispatch({
type: ActionTypes.ADD_ROW,
filename: inputNewRow,
});
setInputNewRow("");
newRowRef.current.value = "";
}}
>
<span className="svg-icon svg-gray" style={{ marginRight: 4 }}>
<PlusIcon />
</span>
New
</div>
<div className={`${c("td")}`} onClick={() => {
dataDispatch({
type: ActionTypes.ADD_ROW,
filename: inputNewRow,
});
setInputNewRow("");
newRowRef.current.value = "";
}}>
<span className="svg-icon svg-gray" style={{ marginRight: 4 }}>
<PlusIcon />
</span>
New
</div>
</div>
</div>
Expand Down
11 changes: 5 additions & 6 deletions src/components/portals/PopperSelectPortal.tsx
View file
Open in desktop
Expand Up @@ -77,7 +77,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
}

function getColor() {
let match = (column as any).options.find(
const match = (column as any).options.find(
(option: { label: any }) => option.label === value.value
);
return (match && match.backgroundColor) || grey(200);
Expand All @@ -93,7 +93,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
{/* show selector if click on the current value */}
{showSelect && (
<div
className="shadow-5 border-radius-md"
className="menu"
ref={setSelectPop}
{...attributes.popper}
style={{
Expand Down Expand Up @@ -129,7 +129,6 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
marginTop: "0.5rem",
width: 120,
padding: "2px 4px",
backgroundColor: grey(200),
borderRadius: 4,
}}
>
Expand Down Expand Up @@ -177,9 +176,9 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
</div>
{domReady
? ReactDOM.createPortal(
PortalSelect(),
document.getElementById("popper-container")
)
PortalSelect(),
document.getElementById("popper-container")
)
: null}
</>
);
Expand Down
7 changes: 1 addition & 6 deletions src/components/reducers/GlobalFilter.tsx
View file
Open in desktop
Expand Up @@ -30,12 +30,7 @@ export default function GlobalFilter(globalFilterProps: GlobalFilterProps) {
onChange(e.target.value);
}}
placeholder={`${count} records...`}
style={{
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

About this erase of style. It is necessary to lose the background property?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed all the styling (including the background property) since it'd be handled by the styling of input[type=search] in the user's theme.

fontSize: "1.1rem",
border: "0",
background: StyleVariables.BACKGROUND_PRIMARY,
color: StyleVariables.TEXT_NORMAL,
}}
type={"search"}
/>
</span>
);
Expand Down
1 change: 1 addition & 0 deletions src/helpers/Constants.ts
View file
Open in desktop
Expand Up @@ -116,6 +116,7 @@ export const StyleVariables = Object.freeze({
BACKGROUND_SECONDARY: 'var(--background-secondary)',
BACKGROUND_DIVIDER: 'var(--background-divider)',
TEXT_FAINT: 'var(--text-faint)',
TEXT_MUTED: 'var(--text-muted)',
TEXT_NORMAL: 'var(--text-normal)',
});

Expand Down