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

fix looker3d controls styles in light theme #2236

Merged
merged 3 commits into from
Nov 5, 2022
Merged

fix looker3d controls styles in light theme #2236

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0781cad
fix looker3d controls styles in light theme
imanjra Nov 4, 2022
e6a5ea0
Merge branch 'develop' into bugfix/looker3d-controls-style
brimoor Nov 4, 2022
2ef8e7b
fix looker styles and help panel toggle
imanjra Nov 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions app/packages/components/src/components/Icons/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,20 @@ export function Close(props: SvgIconProps) {
</SvgIcon>
);
}
export function JSONIcon(props: SvgIconProps = {}) {
return (
<SvgIcon {...props}>
<path d="M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z" />
</SvgIcon>
);
}
export function HelpIcon(props: SvgIconProps = {}) {
return (
<SvgIcon {...props}>
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</SvgIcon>
);
}

export { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
export { IconButton } from "@mui/material";
2 changes: 2 additions & 0 deletions app/packages/components/src/components/Icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,6 @@ export {
IconButton,
Close,
Copy,
JSONIcon,
HelpIcon,
} from "./Icons";
2 changes: 2 additions & 0 deletions app/packages/components/src/components/ThemeProvider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ let theme = extendJoyTheme({
secondary: "hsl(200, 0%, 30%)",
tertiary: "hsl(200, 0%, 50%)",
lookerTag: "hsl(200, 0%, 100%)",
invert: "hsl(200, 0%, 100%)",
},
custom: {
shadow: "hsl(200, 0%, 90%)",
Expand Down Expand Up @@ -104,6 +105,7 @@ let theme = extendJoyTheme({
tertiary: "hsl(200, 0%, 50%)",
buttonHighlight: "hsl(200, 0%, 100%)",
lookerTag: "hsl(200, 0%, 100%)",
invert: "hsl(200, 0%, 5%)",
},
custom: {
shadow: "hsl(200, 0%, 10%)",
Expand Down
36 changes: 25 additions & 11 deletions app/packages/looker-3d/src/Looker3d.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ import {
Loading,
PopoutSectionTitle,
TabOption,
jsonIcon,
helpIcon,
JSONIcon,
HelpIcon,
} from "@fiftyone/components";
import { colorMap, dataset } from "@fiftyone/state";
import { removeListener } from "process";
Expand Down Expand Up @@ -546,8 +546,9 @@ const ActionBarContainer = styled.div`

opacity: 0.9;
height: 37px;
background-color: hsl(210, 11%, 11%);
border: 1px solid var(--joy-palette-divider);
background-color: var(--joy-palette-background-level3);
border: 1px solid var(--joy-palette-primary-plainBorder);
border-left: 0;
box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.43);
padding: 0 1rem;
`;
Expand Down Expand Up @@ -587,13 +588,22 @@ const ActionItem = styled.div`
align-content: center;
text-align: center;
cursor: pointer;
color: var(--joy-palette-text-secondary);
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;

&:hover {
transform: translate(0, -1px);
}
`;

const ViewButton = styled.div`
line-height: 1rem;
padding: 0.2rem 0.4rem;
background-color: #fff;
color: #000;
padding: 3px 6px;
background-color: var(--joy-palette-text-secondary);
color: var(--joy-palette-text-invert);
border-radius: 1rem;
border: none;
font-weight: bold;
Expand All @@ -619,6 +629,8 @@ function ChooseColorSpace() {
<Fragment>
<ActionItem>
<ColorLensIcon
sx={{ fontSize: 24 }}
color="inherit"
onClick={(e) => {
const targetAction = "colorBy";
const nextAction =
Expand Down Expand Up @@ -675,8 +687,9 @@ function ViewJSON({ sample, jsonPanel }) {
return (
<Fragment>
<ActionItem>
<img
src={jsonIcon}
<JSONIcon
sx={{ fontSize: 24 }}
color="inherit"
onClick={(e) => {
const targetAction = "json";
const nextAction =
Expand Down Expand Up @@ -717,8 +730,9 @@ function ViewHelp({ helpPanel }) {
return (
<Fragment>
<ActionItem>
<img
src={helpIcon}
<HelpIcon
sx={{ fontSize: 24 }}
color="inherit"
onClick={(e) => {
const targetAction = "help";
const nextAction =
Expand Down
1 change: 1 addition & 0 deletions app/packages/looker/src/elements/common/controls.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@

background-color: var(--joy-palette-background-level3);
border: 1px solid var(--joy-palette-primary-plainBorder);
border-right: 0;
box-shadow: 0 8px 15px 0 var(--joy-palette-neutral-softBg);
}

Expand Down