Skip to content

style: filters p0 icon churn #11215

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

Merged
rusackas merged 7 commits into from
Oct 10, 2020
Merged

style: filters p0 icon churn #11215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7828d63
new filters icon
rusackas Oct 8, 2020
3e73d51
icon styling
rusackas Oct 8, 2020
e03078e
bigger icons in list views
rusackas Oct 9, 2020
f38afb2
better sizing of table actions and favStars
rusackas Oct 9, 2020
2565d4b
more icon sizing...
rusackas Oct 9, 2020
c541941
fixing more button size jankiness
rusackas Oct 9, 2020
3d90355
linting
rusackas Oct 9, 2020
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
2 changes: 1 addition & 1 deletion superset-frontend/images/icons/filter.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions superset-frontend/images/icons/filter_small.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 7 additions & 3 deletions superset-frontend/src/components/FaveStar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
import { t } from '@superset-ui/core';
import { t, styled } from '@superset-ui/core';
import TooltipWrapper from './TooltipWrapper';
import Icon from './Icon';

Expand All @@ -31,6 +31,10 @@ interface FaveStarProps {
showTooltip?: boolean;
}

const StyledLink = styled.a`
font-size: ${({ theme }) => theme.typography.sizes.xl}px;
`;

export default class FaveStar extends React.PureComponent<FaveStarProps> {
componentDidMount() {
this.props.fetchFaveStar(this.props.itemId);
Expand Down Expand Up @@ -68,7 +72,7 @@ export default class FaveStar extends React.PureComponent<FaveStarProps> {
}

return (
<a
<StyledLink
href="#"
onClick={this.onClick.bind(this)}
className="fave-unfave-icon"
Expand All @@ -80,7 +84,7 @@ export default class FaveStar extends React.PureComponent<FaveStarProps> {
width={this.props.width || 20}
height={this.props.height || 'auto'}
/>
</a>
</StyledLink>
);
}
}
20 changes: 19 additions & 1 deletion superset-frontend/src/components/Icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
* under the License.
*/
import React, { SVGProps } from 'react';
import { styled } from '@superset-ui/core';

import { ReactComponent as AlertSolidIcon } from 'images/icons/alert_solid.svg';
import { ReactComponent as AlertIcon } from 'images/icons/alert.svg';
Expand Down Expand Up @@ -77,6 +78,7 @@ import { ReactComponent as FieldNumIcon } from 'images/icons/field_num.svg';
import { ReactComponent as FieldStructIcon } from 'images/icons/field_struct.svg';
import { ReactComponent as FileIcon } from 'images/icons/file.svg';
import { ReactComponent as FilterIcon } from 'images/icons/filter.svg';
import { ReactComponent as FilterSmallIcon } from 'images/icons/filter_small.svg';
import { ReactComponent as FolderIcon } from 'images/icons/folder.svg';
import { ReactComponent as FullIcon } from 'images/icons/full.svg';
import { ReactComponent as GearIcon } from 'images/icons/gear.svg';
Expand Down Expand Up @@ -194,6 +196,7 @@ export type IconName =
| 'field-struct'
| 'file'
| 'filter'
| 'filter-small'
| 'folder'
| 'full'
| 'gear'
Expand Down Expand Up @@ -314,6 +317,7 @@ export const iconsRegistry: Record<
'field-struct': FieldStructIcon,
file: FileIcon,
filter: FilterIcon,
'filter-small': FilterSmallIcon,
folder: FolderIcon,
full: FullIcon,
gear: GearIcon,
Expand Down Expand Up @@ -376,6 +380,18 @@ interface IconProps extends SVGProps<SVGSVGElement> {
name: IconName;
}

const IconWrapper = styled.span`
display: inline-block;
width: 1em;
height: 1em;
svg {
width: 100%;
height: 100%;
color: currentColor;
vertical-align: middle;
}
`;

const Icon = ({
name,
color = '#666666',
Expand All @@ -385,7 +401,9 @@ const Icon = ({
const Component = iconsRegistry[name];

return (
<Component color={color} viewBox={viewBox} data-test={name} {...rest} />
<IconWrapper>
<Component color={color} viewBox={viewBox} data-test={name} {...rest} />
</IconWrapper>
);
};

Expand Down
1 change: 1 addition & 0 deletions superset-frontend/src/components/ListView/TableCollection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ const Table = styled.table`
.table-row {
.actions {
opacity: 0;
font-size: ${({ theme }) => theme.typography.sizes.xl}px;
}

&:hover {
Expand Down
26 changes: 10 additions & 16 deletions superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,19 @@ export const Pill = styled.div`
color: ${({ theme }) => theme.colors.grayscale.light5};
border-radius: 1em;
vertical-align: text-top;
padding: 0 8px;
font-size: 14px;
padding: ${({ theme }) => `${theme.gridUnit}px ${theme.gridUnit * 2}px`};
font-size: ${({ theme }) => theme.typography.sizes.m}px;
font-weight: normal;
transition: ${({ theme }) => theme.transitionTiming}s all;
min-width: 1em;
min-height: 1em;
line-height: 1em;
vertical-align: middle;
white-space: nowrap;

svg {
vertical-align: middle;
height: 1em;
width: 1em;
color: currentColor;
position: relative;
top: -1px;
}

&:hover {
Expand All @@ -52,17 +55,8 @@ export const Pill = styled.div`
&.filters-inactive {
color: ${({ theme }) => theme.colors.grayscale.light5};
background: ${({ theme }) => theme.colors.grayscale.light1};
min-width: 22px;
max-width: 22px;
min-height: 22px;
max-height: 22px;
padding: 0;
padding: ${({ theme }) => theme.gridUnit}px;
text-align: center;
line-height: 22px;
font-size: 18px;
svg {
margin-bottom: 2px;
}
&:hover {
background: ${({ theme }) => theme.colors.grayscale.base};
}
Expand Down
8 changes: 8 additions & 0 deletions superset-frontend/src/dashboard/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,14 @@ const StyledDashboardHeader = styled.div`
.fave-unfave-icon {
margin-left: ${({ theme }) => theme.gridUnit * 2}px;
}
.button-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.action-button {
font-size: ${({ theme }) => theme.typography.sizes.xl}px;
}
}
`;

class Header extends React.PureComponent {
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ class HeaderActionsDropdown extends React.PureComponent {
title={<Icon name="more-horiz" />}
noCaret
id="save-dash-split-button"
bsSize="small"
bsSize="large"
style={{ border: 'none', padding: 0, marginLeft: '4px' }}
pullRight
>
Expand Down
6 changes: 0 additions & 6 deletions superset-frontend/src/dashboard/stylesheets/dashboard.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,12 +128,6 @@ body {
height: 100%;
}
}

.button-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
}

.dashboard .chart-header,
Expand Down