From 79591b3f08c0864d76bdacc8b53a5c96dcc7235c Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 19:38:34 +0200 Subject: [PATCH 01/12] feat: update styling of bug report button --- src/components/bug-report/demo.tsx | 5 +---- src/components/bug-report/index.tsx | 27 ++++++++++++++--------- src/container/chrome/chrome-container.tsx | 2 +- 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/components/bug-report/demo.tsx b/src/components/bug-report/demo.tsx index 2204060df..3afdc68a6 100644 --- a/src/components/bug-report/demo.tsx +++ b/src/components/bug-report/demo.tsx @@ -1,11 +1,8 @@ -import DemoContainer from '../demo-container'; import { BugReport } from './index'; import * as React from 'react'; const BugReportDemo: React.StatelessComponent = (): JSX.Element => ( - - - + ); export default BugReportDemo; diff --git a/src/components/bug-report/index.tsx b/src/components/bug-report/index.tsx index 77fd80dec..9fec2317e 100644 --- a/src/components/bug-report/index.tsx +++ b/src/components/bug-report/index.tsx @@ -1,6 +1,7 @@ -import { Button, ButtonOrder, ButtonSize } from '../button'; import * as React from 'react'; import styled from 'styled-components'; +import { Color } from '../colors'; +import { getSpace, SpaceSize } from '../space'; export interface BugReportProps { onClick?: React.MouseEventHandler; @@ -9,19 +10,25 @@ export interface BugReportProps { } const StyledBugReport = styled.div` + display: flex; + padding: 0 ${getSpace(SpaceSize.S)}px; + align-items: center; justify-self: right; -webkit-app-region: no-drag; + box-sizing: border-box; + border-radius: 3px; + 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}; + } `; export const BugReport: React.StatelessComponent = props => ( - - + + {props.title} ); diff --git a/src/container/chrome/chrome-container.tsx b/src/container/chrome/chrome-container.tsx index e3409ef83..cf6922a8d 100644 --- a/src/container/chrome/chrome-container.tsx +++ b/src/container/chrome/chrome-container.tsx @@ -58,7 +58,7 @@ export const ChromeContainer = MobxReact.inject('store')( {page.getName()} { props.store.getSender().send({ type: MessageType.OpenExternalURL, From 523a3f61927bbcd5a8600670183181a8f6764d50 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 19:39:45 +0200 Subject: [PATCH 02/12] fix: remove non functioning menu items --- .../create-main-menu/create-file-menu.ts | 64 ++++--------------- 1 file changed, 13 insertions(+), 51 deletions(-) diff --git a/src/electron/create-main-menu/create-file-menu.ts b/src/electron/create-main-menu/create-file-menu.ts index c68c99f38..18e5695f3 100644 --- a/src/electron/create-main-menu/create-file-menu.ts +++ b/src/electron/create-main-menu/create-file-menu.ts @@ -74,58 +74,20 @@ export function createFileMenu( type: 'separator' }, { - label: '&Export', - submenu: [ - { - label: 'Export Page as Sketch', - enabled: Boolean(activePage), - click: async () => { - if (!activePage) { - return; - } - - injection.sender.send({ - id: uuid.v4(), - type: MessageType.ExportSketchPage, - payload: { path: undefined } - }); - } - }, - { - label: 'Export Page as PNG', - enabled: Boolean(activePage), - click: async () => { - if (!activePage) { - return; - } - - injection.sender.send({ - id: uuid.v4(), - type: MessageType.ExportPngPage, - payload: { path: undefined } - }); - } - }, - { - type: 'separator' - }, - { - label: 'Export Project as HTML', - enabled: Boolean(activePage), - accelerator: 'CmdOrCtrl+Shift+E', - click: async () => { - if (!ctx.project) { - return; - } - - injection.sender.send({ - id: uuid.v4(), - type: MessageType.ExportHtmlProject, - payload: { path: undefined } - }); - } + label: 'Export Prototype as HTML', + enabled: Boolean(activePage), + accelerator: 'CmdOrCtrl+E', + click: async () => { + if (!ctx.project) { + return; } - ] + + injection.sender.send({ + id: uuid.v4(), + type: MessageType.ExportHtmlProject, + payload: { path: undefined } + }); + } }, { type: 'separator', From fbb9c530f80bf188dc255b35f0328978f8410f18 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 19:40:06 +0200 Subject: [PATCH 03/12] feat: rename builtin component library --- src/model/project.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/model/project.ts b/src/model/project.ts index 776129cdd..6d8bbafbf 100644 --- a/src/model/project.ts +++ b/src/model/project.ts @@ -180,9 +180,9 @@ export class Project { { bundle: '', bundleId: '', - description: 'Basic building blocks available to every new Alva project', + description: 'Built-in components for basic layouts and logic', id: uuid.v4(), - name: 'Built-In Components', + name: 'Essentials', origin: Types.PatternLibraryOrigin.BuiltIn, patternProperties: [], patterns: [], From d06482cfc578dcfb463b07006b1a69120bee3012 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 19:46:37 +0200 Subject: [PATCH 04/12] feat: restructure project settings --- src/components/add-button/demo.tsx | 11 ++++++ .../{add-page-button => add-button}/index.tsx | 26 ++++++++------ src/components/add-button/pattern.json | 8 +++++ src/components/add-page-button/demo.tsx | 11 ------ src/components/add-page-button/pattern.json | 8 ----- src/components/button-group/index.tsx | 4 +++ src/components/copy/index.tsx | 2 ++ src/components/headline/index.tsx | 2 ++ src/components/index.ts | 3 +- src/components/link/index.tsx | 9 +++-- src/components/property-box/index.tsx | 2 +- src/container/library-settings-container.tsx | 6 ---- .../page-list/page-list-container.tsx | 4 ++- src/container/project-settings-container.tsx | 36 ++++++++++++++++++- 14 files changed, 90 insertions(+), 42 deletions(-) create mode 100644 src/components/add-button/demo.tsx rename src/components/{add-page-button => add-button}/index.tsx (60%) create mode 100644 src/components/add-button/pattern.json delete mode 100644 src/components/add-page-button/demo.tsx delete mode 100644 src/components/add-page-button/pattern.json diff --git a/src/components/add-button/demo.tsx b/src/components/add-button/demo.tsx new file mode 100644 index 000000000..a518d855d --- /dev/null +++ b/src/components/add-button/demo.tsx @@ -0,0 +1,11 @@ +import DemoContainer from '../demo-container'; +import * as React from 'react'; +import { AddButton } from '.'; + +const AddButtonDemo: React.StatelessComponent = (): JSX.Element => ( + + + +); + +export default AddButtonDemo; diff --git a/src/components/add-page-button/index.tsx b/src/components/add-button/index.tsx similarity index 60% rename from src/components/add-page-button/index.tsx rename to src/components/add-button/index.tsx index f49954abd..77cc1f81a 100644 --- a/src/components/add-page-button/index.tsx +++ b/src/components/add-button/index.tsx @@ -6,31 +6,37 @@ import { Plus } from 'react-feather'; import { getSpace, SpaceSize } from '../space'; import styled from 'styled-components'; -export interface AddPageButtonProps { +export interface AddButtonProps { onClick?: React.MouseEventHandler; + text: string; + margin?: boolean; } -const StyledAddPageButton = styled.button` +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; + margin: ${(props: AddButtonProps) => (props.margin ? `${getSpace(SpaceSize.XS)}px` : '0')}; 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}; } `; @@ -38,9 +44,9 @@ const StyledIcon = styled(Plus)` margin-right: ${getSpace(SpaceSize.XS)}px; `; -export const AddPageButton: React.SFC = props => ( - +export const AddButton: React.SFC = props => ( + - Add Page - + {props.text} + ); diff --git a/src/components/add-button/pattern.json b/src/components/add-button/pattern.json new file mode 100644 index 000000000..98523d5a6 --- /dev/null +++ b/src/components/add-button/pattern.json @@ -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" +} diff --git a/src/components/add-page-button/demo.tsx b/src/components/add-page-button/demo.tsx deleted file mode 100644 index 0fbdfeeca..000000000 --- a/src/components/add-page-button/demo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import DemoContainer from '../demo-container'; -import * as React from 'react'; -import { AddPageButton } from '.'; - -const AddPageButtonDemo: React.StatelessComponent = (): JSX.Element => ( - - - -); - -export default AddPageButtonDemo; diff --git a/src/components/add-page-button/pattern.json b/src/components/add-page-button/pattern.json deleted file mode 100644 index 704647c0a..000000000 --- a/src/components/add-page-button/pattern.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "add-page-button", - "description": "Button to add pages", - "displayName": "Add Page Button", - "version": "1.0.0", - "tags": ["atom", "button"], - "flag": "alpha" -} diff --git a/src/components/button-group/index.tsx b/src/components/button-group/index.tsx index 5c40a0978..ed62f6154 100644 --- a/src/components/button-group/index.tsx +++ b/src/components/button-group/index.tsx @@ -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; } diff --git a/src/components/copy/index.tsx b/src/components/copy/index.tsx index 1c2d3a8f7..6cfebb942 100644 --- a/src/components/copy/index.tsx +++ b/src/components/copy/index.tsx @@ -21,6 +21,8 @@ export enum CopySize { const StyledCopy = styled.p` margin: 0; line-height: 1.5; + user-select: none; + cursor: default; ${(props: StyledCopyProps) => typeof props.size !== 'undefined' ? `font-size: ${props.size}px;` : 'font-size: 12px'}; ${(props: StyledCopyProps) => diff --git a/src/components/headline/index.tsx b/src/components/headline/index.tsx index 4257c6690..46c6c3caa 100644 --- a/src/components/headline/index.tsx +++ b/src/components/headline/index.tsx @@ -21,6 +21,8 @@ const StyledHeadline = styled.div` margin-top: 0; font-family: ${fonts().NORMAL_FONT}; font-weight: 500; + user-select: none; + cursor: default; ${(props: StyledHeadlineProps) => (props.textColor ? `color: ${props.textColor};` : '')}; ${(props: HeadlineProps) => { diff --git a/src/components/index.ts b/src/components/index.ts index ae01ce0b4..35a561df9 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,4 @@ -export * from './add-page-button'; +export * from './add-button'; export * from './bug-report'; export * from './button'; export * from './button-group'; @@ -10,6 +10,7 @@ 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'; diff --git a/src/components/link/index.tsx b/src/components/link/index.tsx index 49b54a567..72f489725 100644 --- a/src/components/link/index.tsx +++ b/src/components/link/index.tsx @@ -10,14 +10,16 @@ export interface LinkProps { disabled?: boolean; onClick?: React.MouseEventHandler; uppercase?: boolean; + underline?: boolean; } const StyledLink: StyledComponentClass = 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 = props => ( @@ -27,6 +29,7 @@ export const Link: React.StatelessComponent = props => ( disabled={props.disabled} onClick={props.onClick} uppercase={props.uppercase} + underline={props.underline} > {props.children} diff --git a/src/components/property-box/index.tsx b/src/components/property-box/index.tsx index 6f07e2c84..a44aa06e4 100644 --- a/src/components/property-box/index.tsx +++ b/src/components/property-box/index.tsx @@ -20,10 +20,10 @@ const StyledPropertyBox = styled.div` user-select: none; cursor: default; margin-bottom: ${getSpace(SpaceSize.S)}px; + overflow: hidden; `; const StyledPropertyBoxBar = styled.div` - height: ${getSpace(SpaceSize.M) * 2}px; margin-top: ${getSpace(SpaceSize.M)}px; margin-right: -${getSpace(SpaceSize.M)}px; margin-bottom: -${getSpace(SpaceSize.M)}px; diff --git a/src/container/library-settings-container.tsx b/src/container/library-settings-container.tsx index 976c336bb..6c3d24596 100644 --- a/src/container/library-settings-container.tsx +++ b/src/container/library-settings-container.tsx @@ -17,7 +17,6 @@ export class LibrarySettingsContainer extends React.Component - - - Details - - <> {mayUpdate && ( diff --git a/src/container/page-list/page-list-container.tsx b/src/container/page-list/page-list-container.tsx index 592be75b0..ba5f58193 100644 --- a/src/container/page-list/page-list-container.tsx +++ b/src/container/page-list/page-list-container.tsx @@ -115,7 +115,9 @@ export class PageListContainer extends React.Component { page={page} /> ))} - store.getSender().send({ id: uuid.v4(), diff --git a/src/container/project-settings-container.tsx b/src/container/project-settings-container.tsx index 88a392f1a..52536a9f9 100644 --- a/src/container/project-settings-container.tsx +++ b/src/container/project-settings-container.tsx @@ -3,6 +3,10 @@ import * as MobxReact from 'mobx-react'; import * as React from 'react'; import { WithStore } from '../store'; import { LibrarySettingsContainer } from './library-settings-container'; +import { SpaceSize } from '../components/space'; +import { Color } from '../components/colors'; +import { MessageType } from '../message'; +import * as uuid from 'uuid'; @MobxReact.inject('store') @MobxReact.observer @@ -12,12 +16,42 @@ export class ProjectSettingsContainer extends React.Component { return (
- Connected Libraries + + Connected Libraries + + You can connect one or multiple React component libraries. + + + + + store.getSender().send({ + type: MessageType.OpenExternalURL, + id: uuid.v4(), + payload: 'https://github.com/meetalva/alva#pattern-requirements' + }) + } + > + See Library Requirements + + {store .getPatternLibraries() .map(library => ( ))} + + store.getSender().send({ + id: uuid.v4(), + payload: { library: undefined }, + type: MessageType.ConnectPatternLibraryRequest + }) + } + />
); } From dd1050f82517f8222f74c2e60a033d2563aacff8 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 19:46:52 +0200 Subject: [PATCH 05/12] feat: add empty state for element pane --- src/components/empty-state/demo.tsx | 8 ++++ src/components/empty-state/index.tsx | 29 ++++++++++++++ src/components/empty-state/pattern.json | 8 ++++ src/components/icons/index.tsx | 44 +++++++++++++++++++++ src/container/element-list/element-list.tsx | 12 ++++++ 5 files changed, 101 insertions(+) create mode 100644 src/components/empty-state/demo.tsx create mode 100644 src/components/empty-state/index.tsx create mode 100644 src/components/empty-state/pattern.json diff --git a/src/components/empty-state/demo.tsx b/src/components/empty-state/demo.tsx new file mode 100644 index 000000000..349a81125 --- /dev/null +++ b/src/components/empty-state/demo.tsx @@ -0,0 +1,8 @@ +import { EmptyState } from './index'; +import * as React from 'react'; + +const EmptyStateDemo: React.StatelessComponent = (): JSX.Element => ( + +); + +export default EmptyStateDemo; diff --git a/src/components/empty-state/index.tsx b/src/components/empty-state/index.tsx new file mode 100644 index 000000000..8e7c0af31 --- /dev/null +++ b/src/components/empty-state/index.tsx @@ -0,0 +1,29 @@ +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(Space)` + text-align: center; +`; + +export const EmptyState: React.StatelessComponent = props => ( + + + {props.headline} + + + {props.copy} + + {props.image} + +); diff --git a/src/components/empty-state/pattern.json b/src/components/empty-state/pattern.json new file mode 100644 index 000000000..d1af9d6ab --- /dev/null +++ b/src/components/empty-state/pattern.json @@ -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" +} diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index d7dee0991..b08194c6a 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -87,6 +87,50 @@ const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = { ] }; +export const Images: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = { + EmptyElements: [ + [ + + + + + + + + + + + + + + + + + + + + ] + ] +}; + const StyledIconRegistry = styled.svg` display: none; `; diff --git a/src/container/element-list/element-list.tsx b/src/container/element-list/element-list.tsx index bf90d0de1..1916a436b 100644 --- a/src/container/element-list/element-list.tsx +++ b/src/container/element-list/element-list.tsx @@ -10,6 +10,8 @@ import * as Store from '../../store'; import * as Types from '../../types'; import * as utils from '../../alva-util'; +import { Images } from '../../components/icons'; + @MobxReact.inject('store') @MobxReact.observer export class ElementList extends React.Component { @@ -384,6 +386,7 @@ export class ElementList extends React.Component { return null; } const childContent = rootElement.getContentBySlotType(Types.SlotType.Children); + const hasChildren = childContent && childContent.getElements().length > 0; return ( {childContent ? : null} + {hasChildren ? ( + '' + ) : ( + + )} Date: Sat, 15 Sep 2018 19:54:13 +0200 Subject: [PATCH 06/12] fix: make preview pane non-selectable --- src/components/panes/preview-pane/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/panes/preview-pane/index.tsx b/src/components/panes/preview-pane/index.tsx index 758be8ad2..fe1a45255 100644 --- a/src/components/panes/preview-pane/index.tsx +++ b/src/components/panes/preview-pane/index.tsx @@ -7,6 +7,7 @@ const StyledPreviewWrapper = styled.div` justify-content: center; flex-grow: 1; flex-shrink: 0; + user-select: none; `; const StyledPreviewPane = styled.div` From 8c4d13ae898fbd502873bcaafae5de32a9bfffda Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 21:38:53 +0200 Subject: [PATCH 07/12] fix: remove unneeded element list scroll area --- src/components/drag-area/drag-area.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/drag-area/drag-area.tsx b/src/components/drag-area/drag-area.tsx index dd24692cb..f95bc59ec 100644 --- a/src/components/drag-area/drag-area.tsx +++ b/src/components/drag-area/drag-area.tsx @@ -30,6 +30,9 @@ export interface DragAreaProps { const StyledDragArea = styled.div` width: 100%; height: 100%; + position: absolute; + top: 0; + left: 0; `; export const DragArea: React.SFC = props => ( From ff727c39e5da254bba588cfaa97411373972a7da Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 21:39:31 +0200 Subject: [PATCH 08/12] feat: add export button --- src/components/bug-report/demo.tsx | 8 ---- src/components/bug-report/pattern.json | 8 ---- src/components/chrome-button/demo.tsx | 8 ++++ .../{bug-report => chrome-button}/index.tsx | 20 +++++--- src/components/chrome-button/pattern.json | 8 ++++ src/components/index.ts | 2 +- src/container/chrome/chrome-container.tsx | 47 +++++++++++++------ 7 files changed, 63 insertions(+), 38 deletions(-) delete mode 100644 src/components/bug-report/demo.tsx delete mode 100644 src/components/bug-report/pattern.json create mode 100644 src/components/chrome-button/demo.tsx rename src/components/{bug-report => chrome-button}/index.tsx (61%) create mode 100644 src/components/chrome-button/pattern.json diff --git a/src/components/bug-report/demo.tsx b/src/components/bug-report/demo.tsx deleted file mode 100644 index 3afdc68a6..000000000 --- a/src/components/bug-report/demo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { BugReport } from './index'; -import * as React from 'react'; - -const BugReportDemo: React.StatelessComponent = (): JSX.Element => ( - -); - -export default BugReportDemo; diff --git a/src/components/bug-report/pattern.json b/src/components/bug-report/pattern.json deleted file mode 100644 index 82ad98124..000000000 --- a/src/components/bug-report/pattern.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "bug-report", - "displayName": "Bug Report", - "description": "Button to report a bug as Github Issue", - "version": "1.0.0", - "tags": ["bug", "bug-report"], - "flag": "alpha" -} diff --git a/src/components/chrome-button/demo.tsx b/src/components/chrome-button/demo.tsx new file mode 100644 index 000000000..cec2ad90d --- /dev/null +++ b/src/components/chrome-button/demo.tsx @@ -0,0 +1,8 @@ +import { ChromeButton } from './index'; +import * as React from 'react'; + +const ChromeButtonDemo: React.StatelessComponent = (): JSX.Element => ( + +); + +export default ChromeButtonDemo; diff --git a/src/components/bug-report/index.tsx b/src/components/chrome-button/index.tsx similarity index 61% rename from src/components/bug-report/index.tsx rename to src/components/chrome-button/index.tsx index 9fec2317e..5060760ed 100644 --- a/src/components/bug-report/index.tsx +++ b/src/components/chrome-button/index.tsx @@ -3,20 +3,21 @@ import styled from 'styled-components'; import { Color } from '../colors'; import { getSpace, SpaceSize } from '../space'; -export interface BugReportProps { +export interface ChromeButtonProps { onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; title: string; + icon?: React.ReactNode; } -const StyledBugReport = styled.div` +const StyledChromeButton = styled.div` display: flex; padding: 0 ${getSpace(SpaceSize.S)}px; align-items: center; - justify-self: right; -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); @@ -27,8 +28,13 @@ const StyledBugReport = styled.div` } `; -export const BugReport: React.StatelessComponent = props => ( - - {props.title} - +const StyledIcon = styled.div` + margin-right: 6px; +`; + +export const ChromeButton: React.StatelessComponent = props => ( + + {props.icon ? {props.icon} : ''} +
{props.title}
+ ); diff --git a/src/components/chrome-button/pattern.json b/src/components/chrome-button/pattern.json new file mode 100644 index 000000000..64839b0e2 --- /dev/null +++ b/src/components/chrome-button/pattern.json @@ -0,0 +1,8 @@ +{ + "name": "chrome-button", + "displayName": "Chrome Button", + "description": "Button in the chrome", + "version": "1.0.0", + "tags": ["chrome-button"], + "flag": "alpha" +} diff --git a/src/components/index.ts b/src/components/index.ts index 35a561df9..c850de8c3 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,8 +1,8 @@ export * from './add-button'; -export * from './bug-report'; export * from './button'; export * from './button-group'; export * from './chrome'; +export * from './chrome-button'; export * from './colors'; export * from './copy'; export * from './create-select'; diff --git a/src/container/chrome/chrome-container.tsx b/src/container/chrome/chrome-container.tsx index cf6922a8d..98a7c9969 100644 --- a/src/container/chrome/chrome-container.tsx +++ b/src/container/chrome/chrome-container.tsx @@ -1,12 +1,13 @@ import * as AlvaUtil from '../../alva-util'; import { ChromeSwitch } from './chrome-switch'; -import { BugReport, Chrome, CopySize, ViewSwitch } from '../../components'; +import { ChromeButton, Chrome, CopySize, IconSize, ViewSwitch } from '../../components'; import { MessageType } from '../../message'; import * as MobxReact from 'mobx-react'; import { Page } from '../../model'; import * as React from 'react'; import { ViewStore } from '../../store'; import * as uuid from 'uuid'; +import { LogOut } from 'react-feather'; export interface InjectedChromeContainerProps { page: Page; @@ -57,19 +58,37 @@ export const ChromeContainer = MobxReact.inject('store')( > {page.getName()} - { - props.store.getSender().send({ - type: MessageType.OpenExternalURL, - id: uuid.v4(), - payload: 'https://github.com/meetalva/alva/labels/type%3A%20bug' - }); - }} - onDoubleClick={event => { - event.stopPropagation(); - }} - /> +
+ { + props.store.getSender().send({ + type: MessageType.OpenExternalURL, + id: uuid.v4(), + payload: 'https://github.com/meetalva/alva/labels/type%3A%20bug' + }); + }} + onDoubleClick={event => { + event.stopPropagation(); + }} + /> + + } + onClick={() => { + props.store.getSender().send({ + id: uuid.v4(), + type: MessageType.ExportHtmlProject, + payload: { path: undefined } + }); + }} + onDoubleClick={event => { + event.stopPropagation(); + }} + /> +
{props.children} ); From 10d0e8779dc71477ee0488958e4effeea880a4d7 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 22:03:24 +0200 Subject: [PATCH 09/12] fix: restore element list spacing --- src/components/drag-area/drag-area.tsx | 3 --- src/components/empty-state/index.tsx | 5 +++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/drag-area/drag-area.tsx b/src/components/drag-area/drag-area.tsx index f95bc59ec..dd24692cb 100644 --- a/src/components/drag-area/drag-area.tsx +++ b/src/components/drag-area/drag-area.tsx @@ -30,9 +30,6 @@ export interface DragAreaProps { const StyledDragArea = styled.div` width: 100%; height: 100%; - position: absolute; - top: 0; - left: 0; `; export const DragArea: React.SFC = props => ( diff --git a/src/components/empty-state/index.tsx b/src/components/empty-state/index.tsx index 8e7c0af31..2b38e4ab3 100644 --- a/src/components/empty-state/index.tsx +++ b/src/components/empty-state/index.tsx @@ -12,12 +12,13 @@ export interface EmptyStateProps { highlighted?: boolean; } -const StyledEmptyState = styled(Space)` +const StyledEmptyState = styled.div` text-align: center; + padding: ${getSpace(SpaceSize.XXXL)}px; `; export const EmptyState: React.StatelessComponent = props => ( - + {props.headline} From 02b169a2d243d3d395c8ab45822f8ffdc8e91a99 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 22:53:32 +0200 Subject: [PATCH 10/12] fix: simplify code --- src/components/add-button/index.tsx | 17 +++++++++++------ src/components/chrome-button/index.tsx | 2 +- src/container/element-list/element-list.tsx | 4 +--- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/add-button/index.tsx b/src/components/add-button/index.tsx index 77cc1f81a..7a4cbeeca 100644 --- a/src/components/add-button/index.tsx +++ b/src/components/add-button/index.tsx @@ -3,7 +3,7 @@ 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 AddButtonProps { @@ -12,6 +12,10 @@ export interface AddButtonProps { margin?: boolean; } +const StyledSpace = styled(Space)` + width: 100%; +`; + const StyledAddButton = styled.button` position: relative; box-sizing: border-box; @@ -20,7 +24,6 @@ const StyledAddButton = styled.button` border: 1px solid ${Color.Grey90}; border-radius: 6px; background-color: transparent; - margin: ${(props: AddButtonProps) => (props.margin ? `${getSpace(SpaceSize.XS)}px` : '0')}; display: flex; align-items: center; justify-content: center; @@ -45,8 +48,10 @@ const StyledIcon = styled(Plus)` `; export const AddButton: React.SFC = props => ( - - - {props.text} - + + + + {props.text} + + ); diff --git a/src/components/chrome-button/index.tsx b/src/components/chrome-button/index.tsx index 5060760ed..98cd91053 100644 --- a/src/components/chrome-button/index.tsx +++ b/src/components/chrome-button/index.tsx @@ -34,7 +34,7 @@ const StyledIcon = styled.div` export const ChromeButton: React.StatelessComponent = props => ( - {props.icon ? {props.icon} : ''} + {props.icon && {props.icon}}
{props.title}
 ); diff --git a/src/container/element-list/element-list.tsx b/src/container/element-list/element-list.tsx index 1916a436b..064cb1f1d 100644 --- a/src/container/element-list/element-list.tsx +++ b/src/container/element-list/element-list.tsx @@ -406,9 +406,7 @@ export class ElementList extends React.Component { > {childContent ? : null} - {hasChildren ? ( - '' - ) : ( + {!hasChildren && ( Date: Sat, 15 Sep 2018 23:05:40 +0200 Subject: [PATCH 11/12] fix: restore user selection --- src/components/copy/index.tsx | 1 - src/components/headline/index.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/copy/index.tsx b/src/components/copy/index.tsx index 6cfebb942..7d4b4b336 100644 --- a/src/components/copy/index.tsx +++ b/src/components/copy/index.tsx @@ -21,7 +21,6 @@ export enum CopySize { const StyledCopy = styled.p` margin: 0; line-height: 1.5; - user-select: none; cursor: default; ${(props: StyledCopyProps) => typeof props.size !== 'undefined' ? `font-size: ${props.size}px;` : 'font-size: 12px'}; diff --git a/src/components/headline/index.tsx b/src/components/headline/index.tsx index 46c6c3caa..7e29c95cd 100644 --- a/src/components/headline/index.tsx +++ b/src/components/headline/index.tsx @@ -21,7 +21,6 @@ const StyledHeadline = styled.div` margin-top: 0; font-family: ${fonts().NORMAL_FONT}; font-weight: 500; - user-select: none; cursor: default; ${(props: StyledHeadlineProps) => (props.textColor ? `color: ${props.textColor};` : '')}; From aacdc2a79508c28bbf0e6725e57cc7ed18e5a8a8 Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Sat, 15 Sep 2018 23:40:46 +0200 Subject: [PATCH 12/12] fix: remove unneeded text property --- src/components/add-button/demo.tsx | 2 +- src/components/add-button/index.tsx | 3 +-- src/container/page-list/page-list-container.tsx | 5 +++-- src/container/project-settings-container.tsx | 5 +++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/add-button/demo.tsx b/src/components/add-button/demo.tsx index a518d855d..31c56b4b1 100644 --- a/src/components/add-button/demo.tsx +++ b/src/components/add-button/demo.tsx @@ -4,7 +4,7 @@ import { AddButton } from '.'; const AddButtonDemo: React.StatelessComponent = (): JSX.Element => ( - + Add Page ); diff --git a/src/components/add-button/index.tsx b/src/components/add-button/index.tsx index 7a4cbeeca..031da4cd4 100644 --- a/src/components/add-button/index.tsx +++ b/src/components/add-button/index.tsx @@ -8,7 +8,6 @@ import styled from 'styled-components'; export interface AddButtonProps { onClick?: React.MouseEventHandler; - text: string; margin?: boolean; } @@ -51,7 +50,7 @@ export const AddButton: React.SFC = props => ( - {props.text} + {props.children} ); diff --git a/src/container/page-list/page-list-container.tsx b/src/container/page-list/page-list-container.tsx index ba5f58193..afba4f145 100644 --- a/src/container/page-list/page-list-container.tsx +++ b/src/container/page-list/page-list-container.tsx @@ -116,7 +116,6 @@ export class PageListContainer extends React.Component { /> ))} store.getSender().send({ @@ -125,7 +124,9 @@ export class PageListContainer extends React.Component { type: MessageType.CreateNewPage }) } - /> + > + Add Page + ); diff --git a/src/container/project-settings-container.tsx b/src/container/project-settings-container.tsx index 52536a9f9..61ee54e5a 100644 --- a/src/container/project-settings-container.tsx +++ b/src/container/project-settings-container.tsx @@ -43,7 +43,6 @@ export class ProjectSettingsContainer extends React.Component { ))} store.getSender().send({ id: uuid.v4(), @@ -51,7 +50,9 @@ export class ProjectSettingsContainer extends React.Component { type: MessageType.ConnectPatternLibraryRequest }) } - /> + > + Connect Library + ); }