From 963281044a4b664c80f699fde4b75d642affba70 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sun, 17 Jun 2018 00:39:56 +0200 Subject: [PATCH] feat: introduce feather icons --- package-lock.json | 5 ++ package.json | 1 + src/components/add-page-button/index.tsx | 9 +- src/components/icons/index.tsx | 83 +------------------ src/components/pattern-list/index.tsx | 17 ++-- .../property-item-boolean/index.tsx | 16 +++- src/components/search/index.tsx | 7 +- src/components/tab-switch/tab-switch.tsx | 17 +--- src/components/view-switch/index.tsx | 28 +++++-- src/container/chrome/chrome-switch.tsx | 21 +++-- src/container/preview-pane-wrapper.tsx | 10 +-- src/electron/create-menu.ts | 3 + 12 files changed, 80 insertions(+), 137 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1aaa61359..8d507932c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13150,6 +13150,11 @@ "prop-types": "^15.6.0" } }, + "react-feather": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.0.tgz", + "integrity": "sha512-JlLSN6NyWWue/ZJ0pYOx0cfMWvIWFHnFkLKxOoM58RpVk2wjkr9GWtMKDx6EbnqyYP1e+JFp1W/eABfvP5rIGQ==" + }, "react-helmet": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz", diff --git a/package.json b/package.json index 46e2e3747..3850df785 100644 --- a/package.json +++ b/package.json @@ -178,6 +178,7 @@ "react-docgen": "2.20.1", "react-docgen-typescript": "1.5.0", "react-dom": "16.3.1", + "react-feather": "1.1.0", "react-helmet": "5.2.0", "react-router": "4.2.0", "react-select": "2.0.0-beta.6", diff --git a/src/components/add-page-button/index.tsx b/src/components/add-page-button/index.tsx index ff361dfb1..341f10680 100644 --- a/src/components/add-page-button/index.tsx +++ b/src/components/add-page-button/index.tsx @@ -1,8 +1,9 @@ -import * as React from 'react'; import { Color } from '../colors'; import { Copy } from '../copy'; +import { IconSize } from '../icons'; +import * as React from 'react'; +import { Plus } from 'react-feather'; import { getSpace, SpaceSize } from '../space'; -import { Icon, IconName, IconSize } from '../icons'; import styled from 'styled-components'; export interface AddPageButtonProps { @@ -33,13 +34,13 @@ const StyledAddPageButton = styled.button` } `; -const StyledIcon = styled(Icon)` +const StyledIcon = styled(Plus)` margin-right: ${getSpace(SpaceSize.XS)}px; `; export const AddPageButton: React.SFC = props => ( - + Add Page ); diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 351cbd74e..aefff41ff 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -3,18 +3,9 @@ import * as React from 'react'; import styled from 'styled-components'; export enum IconName { - ArrowRight, - ArrowLeft, ArrowFillRight, ArrowFillLeft, - Check, - Element, - Page, - Plus, - Pattern, - Robo, - Search, - Uncheck + Robo } export interface IconProps { @@ -43,82 +34,10 @@ interface IconRegistrySymbolProps { } const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = { - [IconName.ArrowRight]: [ - [ - - ] - ], - [IconName.ArrowLeft]: [ - [ - - ] - ], [IconName.ArrowFillRight]: [[]], [IconName.ArrowFillLeft]: [[]], [IconName.Robo]: [ [] - ], - [IconName.Plus]: [ - [ - - ] - ], - [IconName.Pattern]: [ - [ - - ] - ], - [IconName.Uncheck]: [ - [ - - ] - ], - [IconName.Check]: [ - [ - - ] - ], - [IconName.Search]: [ - [ - - ] - ], - [IconName.Page]: [ - [ - - ] - ], - [IconName.Element]: [ - [ - - ] ] }; diff --git a/src/components/pattern-list/index.tsx b/src/components/pattern-list/index.tsx index 692d218ae..3314f75fe 100644 --- a/src/components/pattern-list/index.tsx +++ b/src/components/pattern-list/index.tsx @@ -1,6 +1,7 @@ import { Color } from '../colors'; -import { Icon, IconName, IconSize } from '../icons'; +import { IconSize } from '../icons'; import * as React from 'react'; +import { Layout } from 'react-feather'; import { getSpace, SpaceSize } from '../space'; import styled from 'styled-components'; @@ -51,9 +52,10 @@ const StyledPatternListItem = styled.div` props.draggable ? 'cursor: move;' : props.onClick ? 'cursor: pointer;' : ''}; `; -const StyledIcon = styled(Icon)` - margin-right: ${getSpace(SpaceSize.XS)}px; - flex: 0 0 ${IconSize.S}px; +const StyledIcon = styled(Layout)` + margin-top: ${getSpace(SpaceSize.XS)}px; + margin-right: ${getSpace(SpaceSize.XS + SpaceSize.XXS)}px; + flex: 0 0 ${IconSize.XS}px; `; const StyledPatternListItemContainer = styled.div` @@ -101,12 +103,7 @@ export const PatternListItem: React.StatelessComponent = p {icon ? ( ) : ( - + )} {props.children} diff --git a/src/components/property-item-boolean/index.tsx b/src/components/property-item-boolean/index.tsx index efbf8ebee..4bec4f355 100644 --- a/src/components/property-item-boolean/index.tsx +++ b/src/components/property-item-boolean/index.tsx @@ -1,7 +1,8 @@ import { Color } from '../colors'; -import { Icon, IconName, IconSize } from '../icons'; +import { IconSize } from '../icons'; import { PropertyItem } from '../property-item'; import * as React from 'react'; +import { Check, X } from 'react-feather'; import styled from 'styled-components'; export interface PropertyItemBooleanProps { @@ -81,7 +82,11 @@ const StyledIndicatorTrack = styled.div` : ''}; `; -const StyledIcon = styled(Icon)` +const StyledCheckIcon = styled(Check)` + transform: translate(-0.5px, -0.5px); // fix to align icon properly +`; + +const StyledXIcon = styled(X)` transform: translate(-0.5px, -0.5px); // fix to align icon properly `; @@ -90,7 +95,6 @@ const StyledInput = styled.input` `; export const PropertyItemBoolean: React.StatelessComponent = props => { - const icon = props.checked ? IconName.Check : IconName.Uncheck; const color = props.checked ? Color.Blue40 : Color.Grey60; return ( @@ -98,7 +102,11 @@ export const PropertyItemBoolean: React.StatelessComponent - + {props.checked ? ( + + ) : ( + + )} diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index 44513bcdb..ea644724c 100644 --- a/src/components/search/index.tsx +++ b/src/components/search/index.tsx @@ -1,6 +1,7 @@ import { Color } from '../colors'; -import { Icon, IconName, IconSize } from '../icons'; +import { IconSize } from '../icons'; import * as React from 'react'; +import * as Icon from 'react-feather'; import { getSpace, SpaceSize } from '../space'; import styled from 'styled-components'; @@ -58,7 +59,7 @@ const StyledSearch = styled.input` } `; -const StyledIcon = styled(Icon)` +const StyledIcon = styled(Icon.Search)` position: absolute; left: 0; top: ${getSpace(SpaceSize.M) - 1}px; // fix to propertly align icon @@ -67,7 +68,7 @@ const StyledIcon = styled(Icon)` export const Search: React.StatelessComponent = props => ( - + ; - title: string; + children?: React.ReactNode; } export enum TabSwitchState { @@ -33,14 +29,7 @@ const StyledTabSwitch = styled.div` `; export const TabSwitch: React.SFC = props => ( - - {props.icon && } - {props.label && {props.label}} + + {props.children} ); diff --git a/src/components/view-switch/index.tsx b/src/components/view-switch/index.tsx index 4d472cb39..f34a59eed 100644 --- a/src/components/view-switch/index.tsx +++ b/src/components/view-switch/index.tsx @@ -1,7 +1,8 @@ import { Color } from '../colors'; import { CopySize } from '../copy'; -import { Icon, IconName, IconProps, IconSize } from '../icons'; +import { IconProps, IconSize } from '../icons'; import * as React from 'react'; +import { ChevronLeft, ChevronRight } from 'react-feather'; import { getSpace, SpaceSize } from '../space'; import styled from 'styled-components'; @@ -55,14 +56,27 @@ const StyledTitle = styled.strong` white-space: nowrap; `; -const StyledIcons = styled(Icon)` +const StyledLeftIcon = styled(ChevronLeft)` + padding: ${getSpace(SpaceSize.XXS)}px; + border-radius: ${getSpace(SpaceSize.XXS)}px; + visibility: ${(props: StyledIconProps) => (props.visible ? 'visible' : 'hidden')}; + cursor: pointer; + pointer-events: auto; + + &:hover { + background: ${Color.Grey90}; + } + &:active { + background: ${Color.Grey80}; + } +`; + +const StyledRightIcon = styled(ChevronRight)` padding: ${getSpace(SpaceSize.XXS)}px; border-radius: ${getSpace(SpaceSize.XXS)}px; visibility: ${(props: StyledIconProps) => (props.visible ? 'visible' : 'hidden')}; cursor: pointer; pointer-events: auto; - transform: rotate(${(props: StyledIconProps) => (props.rotate ? '180deg' : '0')}); - transition: transform 0.2s; &:hover { background: ${Color.Grey90}; @@ -74,19 +88,17 @@ const StyledIcons = styled(Icon)` export const ViewSwitch: React.SFC = (props): JSX.Element => ( - {props.title} - diff --git a/src/container/chrome/chrome-switch.tsx b/src/container/chrome/chrome-switch.tsx index abfbfc129..cdbc906da 100644 --- a/src/container/chrome/chrome-switch.tsx +++ b/src/container/chrome/chrome-switch.tsx @@ -1,6 +1,7 @@ -import { IconName, TabSwitchState } from '../../components'; +import { IconSize, TabSwitchState } from '../../components'; import * as MobxReact from 'mobx-react'; import * as React from 'react'; +import { File, Layers, Sliders } from 'react-feather'; import { TabSwitch } from '../../components'; import { ViewStore } from '../../store'; @@ -13,17 +14,23 @@ export class ChromeSwitch extends React.Component { return (
store.setShowPages(!store.getShowPages())} - /> + > + + store.setShowLeftSidebar(!store.getShowLeftSidebar())} - /> + > + + + store.setShowRightSidebar(!store.getShowRightSidebar())} + > + +
); } diff --git a/src/container/preview-pane-wrapper.tsx b/src/container/preview-pane-wrapper.tsx index 700e438ca..d11988340 100644 --- a/src/container/preview-pane-wrapper.tsx +++ b/src/container/preview-pane-wrapper.tsx @@ -1,11 +1,11 @@ import { setSearch } from '../alva-util'; import { PreviewFrame, PreviewPane } from '../components'; -import { PreviewDocumentMode } from '../preview'; -import * as React from 'react'; - import { Copy, CopySize } from '../components/copy'; -import { Icon, IconName, IconSize } from '../components/icons'; +import { IconSize } from '../components/icons'; import { Overlay } from '../components/overlay'; +import { PreviewDocumentMode } from '../preview'; +import * as React from 'react'; +import { Layout } from 'react-feather'; import { Space, SpaceSize } from '../components/space'; export interface PreviewPaneProps { @@ -25,7 +25,7 @@ export class PreviewPaneWrapper extends React.Component { /> - + Drop the component on the left element list diff --git a/src/electron/create-menu.ts b/src/electron/create-menu.ts index f99cff9aa..964eb28ad 100644 --- a/src/electron/create-menu.ts +++ b/src/electron/create-menu.ts @@ -408,6 +408,9 @@ export function createMenu(ctx: MenuContext): void { } } }, + { + type: 'separator' + }, { label: 'Show Pages', type: 'checkbox',