Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

Commit

Permalink
feat: improve user experience (#607)
Browse files Browse the repository at this point in the history
* feat: update styling of bug report button

* fix: remove non functioning menu items

* feat: rename builtin component library

* feat: restructure project settings

* feat: add empty state for element pane

* fix: make preview pane non-selectable

* fix: remove unneeded element list scroll area

* feat: add export button

* fix: restore element list spacing

* fix: simplify code

* fix: restore user selection

* fix: remove unneeded text property
  • Loading branch information
tilmx authored and marionebl committed Sep 16, 2018
1 parent 864adf5 commit 34f4a2c
Show file tree
Hide file tree
Showing 29 changed files with 303 additions and 159 deletions.
11 changes: 11 additions & 0 deletions src/components/add-button/demo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import DemoContainer from '../demo-container';
import * as React from 'react';
import { AddButton } from '.';

const AddButtonDemo: React.StatelessComponent = (): JSX.Element => (
<DemoContainer title="Add Page Button">
<AddButton>Add Page</AddButton>
</DemoContainer>
);

export default AddButtonDemo;
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,54 @@ import { Copy } from '../copy';
import { IconSize } from '../icons';
import * as React from 'react';
import { Plus } from 'react-feather';
import { getSpace, SpaceSize } from '../space';
import { Space, getSpace, SpaceSize } from '../space';
import styled from 'styled-components';

export interface AddPageButtonProps {
export interface AddButtonProps {
onClick?: React.MouseEventHandler<HTMLElement>;
margin?: boolean;
}

const StyledAddPageButton = styled.button`
const StyledSpace = styled(Space)`
width: 100%;
`;

const StyledAddButton = styled.button`
position: relative;
box-sizing: border-box;
height: 60px;
width: 100%;
border: 1px solid ${Color.Grey80};
border: 1px solid ${Color.Grey90};
border-radius: 6px;
background-color: transparent;
margin: ${getSpace(SpaceSize.XS)}px;
display: flex;
align-items: center;
justify-content: center;
transition: border 0.2s;
user-select: none;
&:hover {
border: 1px solid ${Color.Grey60};
}
&:focus {
outline: none;
}
&:hover {
border: 1px solid ${Color.Grey60};
&:active {
background-color: ${Color.Grey90};
}
`;

const StyledIcon = styled(Plus)`
margin-right: ${getSpace(SpaceSize.XS)}px;
`;

export const AddPageButton: React.SFC<AddPageButtonProps> = props => (
<StyledAddPageButton onClick={props.onClick}>
<StyledIcon size={IconSize.XS} color={Color.Grey50} />
<Copy textColor={Color.Grey50}>Add Page</Copy>
</StyledAddPageButton>
export const AddButton: React.SFC<AddButtonProps> = props => (
<StyledSpace size={props.margin ? SpaceSize.XS : 0} {...props}>
<StyledAddButton onClick={props.onClick}>
<StyledIcon size={IconSize.XS} color={Color.Grey50} />
<Copy textColor={Color.Grey50}>{props.children}</Copy>
</StyledAddButton>
</StyledSpace>
);
8 changes: 8 additions & 0 deletions src/components/add-button/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"name": "add-button",
"description": "Button to add a page or library",
"displayName": "Add Button",
"version": "1.0.0",
"tags": ["atom", "button"],
"flag": "alpha"
}
11 changes: 0 additions & 11 deletions src/components/add-page-button/demo.tsx

This file was deleted.

8 changes: 0 additions & 8 deletions src/components/add-page-button/pattern.json

This file was deleted.

11 changes: 0 additions & 11 deletions src/components/bug-report/demo.tsx

This file was deleted.

27 changes: 0 additions & 27 deletions src/components/bug-report/index.tsx

This file was deleted.

8 changes: 0 additions & 8 deletions src/components/bug-report/pattern.json

This file was deleted.

4 changes: 4 additions & 0 deletions src/components/button-group/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ const StyledButtonGroup = styled.div`
margin-top: ${getSpace(SpaceSize.XS)}px;
border-top: 1px solid ${Color.Grey90};
&:active {
background: ${Color.Grey97};
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
border-top-width: 0.5px;
}
Expand Down
8 changes: 8 additions & 0 deletions src/components/chrome-button/demo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { ChromeButton } from './index';
import * as React from 'react';

const ChromeButtonDemo: React.StatelessComponent<void> = (): JSX.Element => (
<ChromeButton title="Found a bug?" />
);

export default ChromeButtonDemo;
40 changes: 40 additions & 0 deletions src/components/chrome-button/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import * as React from 'react';
import styled from 'styled-components';
import { Color } from '../colors';
import { getSpace, SpaceSize } from '../space';

export interface ChromeButtonProps {
onClick?: React.MouseEventHandler<HTMLElement>;
onDoubleClick?: React.MouseEventHandler<HTMLElement>;
title: string;
icon?: React.ReactNode;
}

const StyledChromeButton = styled.div`
display: flex;
padding: 0 ${getSpace(SpaceSize.S)}px;
align-items: center;
-webkit-app-region: no-drag;
box-sizing: border-box;
border-radius: 3px;
margin-left: ${getSpace(SpaceSize.S)}px;
background: linear-gradient(to bottom, ${Color.White} 0%, ${Color.Grey97});
height: 21px;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 0.5px 2px 0 rgba(0, 0, 0, 0.3);
color: ${Color.Grey50};
&:active {
background: ${Color.Grey90};
}
`;

const StyledIcon = styled.div`
margin-right: 6px;
`;

export const ChromeButton: React.StatelessComponent<ChromeButtonProps> = props => (
<StyledChromeButton {...props}>
{props.icon && <StyledIcon>{props.icon}</StyledIcon>}
<div>{props.title}</div>
</StyledChromeButton>
);
8 changes: 8 additions & 0 deletions src/components/chrome-button/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"name": "chrome-button",
"displayName": "Chrome Button",
"description": "Button in the chrome",
"version": "1.0.0",
"tags": ["chrome-button"],
"flag": "alpha"
}
1 change: 1 addition & 0 deletions src/components/copy/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export enum CopySize {
const StyledCopy = styled.p`
margin: 0;
line-height: 1.5;
cursor: default;
${(props: StyledCopyProps) =>
typeof props.size !== 'undefined' ? `font-size: ${props.size}px;` : 'font-size: 12px'};
${(props: StyledCopyProps) =>
Expand Down
8 changes: 8 additions & 0 deletions src/components/empty-state/demo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { EmptyState } from './index';
import * as React from 'react';

const EmptyStateDemo: React.StatelessComponent<void> = (): JSX.Element => (
<EmptyState headline="Elements" copy="Drop them here" />
);

export default EmptyStateDemo;
30 changes: 30 additions & 0 deletions src/components/empty-state/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import styled from 'styled-components';
import { Color } from '../colors';
import { Space, getSpace, SpaceSize } from '../space';
import { Headline } from '../headline';
import { Copy } from '../copy';

export interface EmptyStateProps {
headline: string;
copy: string;
image?: React.ReactNode;
highlighted?: boolean;
}

const StyledEmptyState = styled.div`
text-align: center;
padding: ${getSpace(SpaceSize.XXXL)}px;
`;

export const EmptyState: React.StatelessComponent<EmptyStateProps> = props => (
<StyledEmptyState>
<Headline order={4} textColor={props.highlighted ? Color.Blue : Color.Black}>
{props.headline}
</Headline>
<Space sizeTop={getSpace(SpaceSize.XS)} sizeBottom={getSpace(SpaceSize.L)}>
<Copy textColor={props.highlighted ? Color.Blue : Color.Grey50}>{props.copy}</Copy>
</Space>
{props.image}
</StyledEmptyState>
);
8 changes: 8 additions & 0 deletions src/components/empty-state/pattern.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"name": "empty-state",
"displayName": "Empty State",
"description": "Explanation of todos in case of an empty state",
"version": "1.0.0",
"tags": ["empty-state"],
"flag": "alpha"
}
1 change: 1 addition & 0 deletions src/components/headline/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const StyledHeadline = styled.div`
margin-top: 0;
font-family: ${fonts().NORMAL_FONT};
font-weight: 500;
cursor: default;
${(props: StyledHeadlineProps) => (props.textColor ? `color: ${props.textColor};` : '')};
${(props: HeadlineProps) => {
Expand Down
44 changes: 44 additions & 0 deletions src/components/icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,50 @@ const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
]
};

export const Images: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
EmptyElements: [
[
<svg width="66" height="65">
<defs>
<rect id="b" width="60" height="22" rx="3" />
<filter
x="-8.3%"
y="-18.2%"
width="116.7%"
height="145.5%"
filterUnits="objectBoundingBox"
id="a"
>
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
stdDeviation="1.5"
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
/>
<feColorMatrix
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
in="shadowBlurOuter1"
/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<path
d="M37.44.36l-8.43 5.48 7.76 4.56.67-10.04zm-5.5 32.6c-1.74-7.89-1.05-17.85 1.67-25.1l-.93-.35c-2.8 7.43-3.5 17.6-1.7 25.67l.97-.21z"
fill="#000"
opacity=".5"
/>
<g transform="translate(3 39)">
<use fill="#000" filter="url(#a)" href="#b" />
<use fill="#FFF" href="#b" />
<path fill="#000" opacity=".5" d="M18 6h33v3H18zM18 10h12v3H18z" />
<circle fill="#000" opacity=".5" cx="9" cy="9" r="3" />
</g>
</g>
</svg>
]
]
};

const StyledIconRegistry = styled.svg`
display: none;
`;
Expand Down
5 changes: 3 additions & 2 deletions src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
export * from './add-page-button';
export * from './bug-report';
export * from './add-button';
export * from './button';
export * from './button-group';
export * from './chrome';
export * from './chrome-button';
export * from './colors';
export * from './copy';
export * from './create-select';
export * from './drag-area';
export * from './editable-title';
export * from './element';
export * from './element-slot';
export * from './empty-state';
export * from './fonts';
export * from './global-styles';
export * from './headline';
Expand Down
9 changes: 6 additions & 3 deletions src/components/link/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,16 @@ export interface LinkProps {
disabled?: boolean;
onClick?: React.MouseEventHandler<HTMLElement>;
uppercase?: boolean;
underline?: boolean;
}

const StyledLink: StyledComponentClass<LinkProps, {}> = styled.a`
font-family: ${fonts().NORMAL_FONT};
${(props: LinkProps) => (props.color ? `color: ${props.color}` : 'color: inherit')};
${(props: LinkProps) => (props.onClick ? 'cursor: pointer;' : 'cursor: auto;')} ${(
props: LinkProps
) => (props.uppercase ? 'text-transform: uppercase;' : '')};
${(props: LinkProps) =>
props.underline ? 'text-decoration: underline' : 'text-decoration: none'};
${(props: LinkProps) => (props.onClick ? 'cursor: pointer' : 'cursor: auto')};
${(props: LinkProps) => (props.uppercase ? 'text-transform: uppercase' : '')};
`;

export const Link: React.StatelessComponent<LinkProps> = props => (
Expand All @@ -27,6 +29,7 @@ export const Link: React.StatelessComponent<LinkProps> = props => (
disabled={props.disabled}
onClick={props.onClick}
uppercase={props.uppercase}
underline={props.underline}
>
{props.children}
</StyledLink>
Expand Down
1 change: 1 addition & 0 deletions src/components/panes/preview-pane/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const StyledPreviewWrapper = styled.div`
justify-content: center;
flex-grow: 1;
flex-shrink: 0;
user-select: none;
`;

const StyledPreviewPane = styled.div`
Expand Down
Loading

0 comments on commit 34f4a2c

Please sign in to comment.