From 53fd5fa1211be8752eaa7d3f812373df7f3ffbe1 Mon Sep 17 00:00:00 2001 From: Alexander Peschel Date: Thu, 14 Dec 2017 10:08:46 +0100 Subject: [PATCH] feat: move panes to lsg --- src/component/app.tsx | 43 +++---------------- src/lsg/patterns/panes/element-pane/index.tsx | 25 +++++++++++ .../patterns/panes/element-pane/pattern.json | 9 ++++ .../patterns/panes/patterns-pane/index.tsx | 16 +++++++ .../patterns/panes/patterns-pane/pattern.json | 10 +++++ src/lsg/patterns/panes/preview-pane/index.tsx | 19 ++++++++ .../patterns/panes/preview-pane/pattern.json | 10 +++++ src/lsg/patterns/panes/project-pane/index.tsx | 12 ++++++ .../patterns/panes/project-pane/pattern.json | 9 ++++ .../patterns/panes/property-pane/index.tsx | 12 ++++++ .../patterns/panes/property-pane/pattern.json | 9 ++++ 11 files changed, 137 insertions(+), 37 deletions(-) create mode 100644 src/lsg/patterns/panes/element-pane/index.tsx create mode 100644 src/lsg/patterns/panes/element-pane/pattern.json create mode 100644 src/lsg/patterns/panes/patterns-pane/index.tsx create mode 100644 src/lsg/patterns/panes/patterns-pane/pattern.json create mode 100644 src/lsg/patterns/panes/preview-pane/index.tsx create mode 100644 src/lsg/patterns/panes/preview-pane/pattern.json create mode 100644 src/lsg/patterns/panes/project-pane/index.tsx create mode 100644 src/lsg/patterns/panes/project-pane/pattern.json create mode 100644 src/lsg/patterns/panes/property-pane/index.tsx create mode 100644 src/lsg/patterns/panes/property-pane/pattern.json diff --git a/src/component/app.tsx b/src/component/app.tsx index dfcc63a7e..b2259fa87 100644 --- a/src/component/app.tsx +++ b/src/component/app.tsx @@ -1,6 +1,6 @@ import { Chrome } from './container/chrome'; -import { colors } from '../lsg/patterns/colors'; import { WebviewTag } from 'electron'; +import ElementPane from '../lsg/patterns/panes/element-pane'; import { ElementList } from './container/element_list'; import globalStyles from '../lsg/patterns/global-styles'; import { IconName, IconRegistry } from '../lsg/patterns/icons'; @@ -12,44 +12,18 @@ import { observer } from 'mobx-react'; import DevTools from 'mobx-react-devtools'; import { Page } from '../store/page'; import { PatternList } from './container/pattern_list'; +import PatternsPane from '../lsg/patterns/panes/patterns-pane'; +import PreviewPane from '../lsg/patterns/panes/preview-pane'; +import ProjectPane from '../lsg/patterns/panes/project-pane'; import { ProjectList } from './container/project_list'; +import PropertyPane from '../lsg/patterns/panes/property-pane'; import { PropertyList } from './container/property_list'; import * as React from 'react'; import * as ReactDom from 'react-dom'; import { Store } from '../store'; -import styledComponents from 'styled-components'; globalStyles(); -const ElementPane = styledComponents.div` - flex: 3 0 60%; - overflow: scroll; -`; - -const PropertyPane = styledComponents.div` - flex: 2 0 0px; -`; - -const PatternsPane = styledComponents.div` - flex: 2 0 40%; - overflow: scroll; - border-top: 2px solid ${colors.grey70.toString()}; - box-sizing: border-box; - padding: 18px 0; -`; - -const ProjectPane = styledComponents.div` - flex: 3 0 0px; -`; - -const PreviewPane = styledComponents.div` - flex: 2 0 0px; - background-color: #ffffff; - border-radius: 6px 6px 0 0; - box-shadow: 0 3px 9px 0 rgba(0,0,0,.15); - overflow: hidden; -`; - interface AppProps { store: Store; } @@ -103,12 +77,7 @@ class App extends React.Component { - ' - }} - /> + diff --git a/src/lsg/patterns/panes/element-pane/index.tsx b/src/lsg/patterns/panes/element-pane/index.tsx new file mode 100644 index 000000000..e090172f4 --- /dev/null +++ b/src/lsg/patterns/panes/element-pane/index.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +const StyledElementPane = styled.div` + position: relative; + flex-grow: 3; + flex-shrink: 0; + flex-basis: 60%; + overflow: scroll; + + /*FadeOut*/ + &::after { + content: ''; + position: sticky; + bottom: 0; + display: block; + width: 100%; + height: 40px; + background: linear-gradient(to bottom, rgba(247,247,247,0) 0%, rgba(247,247,247,0.5) 15%, rgba(247,247,247,1) 100%); + } +`; + +const ElementPane: React.StatelessComponent<{}> = props => {props.children}; + +export default ElementPane; diff --git a/src/lsg/patterns/panes/element-pane/pattern.json b/src/lsg/patterns/panes/element-pane/pattern.json new file mode 100644 index 000000000..8f5850849 --- /dev/null +++ b/src/lsg/patterns/panes/element-pane/pattern.json @@ -0,0 +1,9 @@ +{ + "name": "element-pane", + "displayName": "Element Pane", + "flag": "alpha", + "version": "1.0.0", + "tags": ["atom", "element-pane"], + "patterns": { + } + } diff --git a/src/lsg/patterns/panes/patterns-pane/index.tsx b/src/lsg/patterns/panes/patterns-pane/index.tsx new file mode 100644 index 000000000..f5bc96cf6 --- /dev/null +++ b/src/lsg/patterns/panes/patterns-pane/index.tsx @@ -0,0 +1,16 @@ +import { colors } from '../../colors'; +import * as React from 'react'; +import styled from 'styled-components'; + +const StyledPatternsPane = styled.div` + box-sizing: border-box; + flex-grow: 2; + flex-shrink: 0; + flex-basis: 40%; + border-top: 2px solid ${colors.grey70.toString()}; + overflow: scroll; +`; + +const PatternsPane: React.StatelessComponent<{}> = props => {props.children}; + +export default PatternsPane; diff --git a/src/lsg/patterns/panes/patterns-pane/pattern.json b/src/lsg/patterns/panes/patterns-pane/pattern.json new file mode 100644 index 000000000..d4d70a67b --- /dev/null +++ b/src/lsg/patterns/panes/patterns-pane/pattern.json @@ -0,0 +1,10 @@ +{ + "name": "patterns-pane", + "displayName": "Patterns Pane", + "flag": "alpha", + "version": "1.0.0", + "tags": ["atom", "patterns-pane"], + "patterns": { + "color": "color" + } + } diff --git a/src/lsg/patterns/panes/preview-pane/index.tsx b/src/lsg/patterns/panes/preview-pane/index.tsx new file mode 100644 index 000000000..3cd24f08d --- /dev/null +++ b/src/lsg/patterns/panes/preview-pane/index.tsx @@ -0,0 +1,19 @@ +import { colors } from '../../colors'; +import * as React from 'react'; +import styled from 'styled-components'; + +const StyledPreviewPane = styled.div` + flex-grow: 1; + flex-shrink: 0; + background: ${colors.white.toString()}; + border-radius: 6px 6px 0 0; + box-shadow: 0 3px 9px 0 ${colors.black.toRGBString(0.15)}; + overflow: hidden; +`; + +const PreviewPane: React.StatelessComponent<{}> = props => ' +}} />; + +export default PreviewPane; diff --git a/src/lsg/patterns/panes/preview-pane/pattern.json b/src/lsg/patterns/panes/preview-pane/pattern.json new file mode 100644 index 000000000..0ee2a040d --- /dev/null +++ b/src/lsg/patterns/panes/preview-pane/pattern.json @@ -0,0 +1,10 @@ +{ + "name": "preview-pane", + "displayName": "Preview Pane", + "flag": "alpha", + "version": "1.0.0", + "tags": ["atom", "preview-pane"], + "patterns": { + "colors": "colors" + } + } diff --git a/src/lsg/patterns/panes/project-pane/index.tsx b/src/lsg/patterns/panes/project-pane/index.tsx new file mode 100644 index 000000000..73dcf93a3 --- /dev/null +++ b/src/lsg/patterns/panes/project-pane/index.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +const StyledProjectPane = styled.div` + flex-grow: 1; + flex-shrink: 0; + flex-basis: 60%; +`; + +const ProjectPane: React.StatelessComponent<{}> = props => {props.children}; + +export default ProjectPane; diff --git a/src/lsg/patterns/panes/project-pane/pattern.json b/src/lsg/patterns/panes/project-pane/pattern.json new file mode 100644 index 000000000..bd368e0b1 --- /dev/null +++ b/src/lsg/patterns/panes/project-pane/pattern.json @@ -0,0 +1,9 @@ +{ + "name": "project-pane", + "displayName": "Project Pane", + "flag": "alpha", + "version": "1.0.0", + "tags": ["atom", "project-pane"], + "patterns": { + } + } diff --git a/src/lsg/patterns/panes/property-pane/index.tsx b/src/lsg/patterns/panes/property-pane/index.tsx new file mode 100644 index 000000000..d0a49bbf4 --- /dev/null +++ b/src/lsg/patterns/panes/property-pane/index.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +const StyledPropertyPane = styled.div` + flex-grow: 1; + flex-shrink: 0; + flex-basis: 40%; +`; + +const PropertyPane: React.StatelessComponent<{}> = props => {props.children}; + +export default PropertyPane; diff --git a/src/lsg/patterns/panes/property-pane/pattern.json b/src/lsg/patterns/panes/property-pane/pattern.json new file mode 100644 index 000000000..fc5eeac2d --- /dev/null +++ b/src/lsg/patterns/panes/property-pane/pattern.json @@ -0,0 +1,9 @@ +{ + "name": "property-pane", + "displayName": "Property Pane", + "flag": "alpha", + "version": "1.0.0", + "tags": ["atom", "property-pane"], + "patterns": { + } + }