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

feat: update styling of layout and element pane #393

Merged
merged 37 commits into from
Apr 27, 2018
Merged

feat: update styling of layout and element pane #393

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
ca2c1d9
feat(component): update styling of layout
Apr 23, 2018
b0cc943
feat(component): update styling of element pane
Apr 23, 2018
551ec59
feat: unselect items when sidebar root receives click
marionebl Apr 23, 2018
71d38c9
refactor: simplify app view by moving out splashscreen
marionebl Apr 23, 2018
744f262
Merge branch 'master' into feat/new-style
marionebl Apr 23, 2018
76ac1ae
style: use tabs for indentation
marionebl Apr 23, 2018
71c298d
feat(component): add drag image styling
Apr 23, 2018
42284b6
fixup! increase element drag size
Apr 23, 2018
c6c52ff
fixup! add check for null on drag element
Apr 23, 2018
4f6f148
fix: avoid side effect froms drop areas on click interaction
marionebl Apr 23, 2018
686f264
fix: remove obsolete handler
marionebl Apr 23, 2018
643d538
fix: select right drag element target
Apr 23, 2018
8904d0a
fix: adapt to new interface
marionebl Apr 23, 2018
5500cbf
fix: make ts happy
marionebl Apr 23, 2018
4fe6cbf
fix: restore icon click functionality
marionebl Apr 23, 2018
9c223fc
feat: show either properties or patterns pane
marionebl Apr 23, 2018
57208e6
fix: restore pattern drag
marionebl Apr 23, 2018
dbe48a1
fix: set backgroundColor during startup
Apr 24, 2018
c7de980
fix: handle draggable states via unified state
marionebl Apr 24, 2018
dd1a6c4
feat: add button to show pattern pane
marionebl Apr 24, 2018
f6212c4
feat: add button styling
Apr 25, 2018
4b084dd
Merge branch 'master' into feat/new-style
tilmx Apr 25, 2018
9f9f31d
Merge branch 'master' into feat/new-style
marionebl Apr 25, 2018
3b79de9
Merge branch 'master' into feat/new-style
marionebl Apr 25, 2018
40a6397
fixup! change requests
Apr 26, 2018
05dd8a2
fix: pass hex color to BrowserWindow
marionebl Apr 26, 2018
ed39ced
refactor: use 100vh to move element outside of viewport
marionebl Apr 26, 2018
70d4708
fix: clean up dragimg nodes after dragging
marionebl Apr 26, 2018
d8f8408
fix: get color from styleguide
Apr 26, 2018
0a20c6e
fix: read drag image colors from styleguide
Apr 26, 2018
c42f0e2
fix: update add button position and side bar borders
Apr 27, 2018
a192919
fix: set hover and active styling to preview resizer
Apr 27, 2018
344f2cb
fix: add element overflow gradient
Apr 27, 2018
a3b2dc8
fix: make entire tree element draggable
marionebl Apr 27, 2018
0da7a7c
fix: reenable placeholder targets for off-list payloads
marionebl Apr 27, 2018
e5ea5f0
fix: do not write bogus dom attributes
marionebl Apr 27, 2018
81a7e2a
Merge branch 'master' into feat/new-style
marionebl Apr 27, 2018
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
8 changes: 4 additions & 4 deletions src/component/container/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,19 +150,19 @@ export class App extends React.Component {

<MainArea>
{project && [
<SideBar key="left" directionVertical hasPaddings>
<SideBar key="left" directionVertical>
<ElementPane>
<ElementList />
</ElementPane>
<PatternsPane>
<PatternListContainer />
</PatternsPane>
</SideBar>,
<PreviewPaneWrapper key="center" previewFrame={previewFramePath} />,
<SideBar key="right" directionVertical hasPaddings>
<PropertyPane>
<PropertyList />
</PropertyPane>
<PatternsPane>
<PatternListContainer />
</PatternsPane>
</SideBar>
]}

Expand Down
16 changes: 9 additions & 7 deletions src/lsg/patterns/chrome/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,15 @@ const StyledChrome = styled.div`
display: flex;
align-items: center;
width: 100%;
height: 54px;
height: 40px;
padding: ${getSpace(SpaceSize.XS)}px ${getSpace(SpaceSize.XXL) * 3}px;
border-bottom: 0.5px solid ${colors.grey90.toString()};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should not drop on subpixels - this might produce undesirable output on devices with lower pixel density.
This should be guarded with a media query, like this:

border-bottom-width: 1px;
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  border-bottom-width: 0.5px;
}

background: ${colors.white.toString()};
font-family: ${fonts().NORMAL_FONT};
-webkit-app-region: drag;
-webkit-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
`;

const StyledChromeTitle = styled.div`
Expand All @@ -38,13 +41,12 @@ const StyledChromeTitle = styled.div`

const StyledTitleWrapper = styled.div`
position: relative;
margin: 0 ${getSpace(SpaceSize.XS)}px;
margin: -${getSpace(SpaceSize.XXS)}px ${getSpace(SpaceSize.XS)}px 0;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
width: 130px;
}
`;

interface StyledIconWrapperProps {
Expand All @@ -53,7 +55,7 @@ interface StyledIconWrapperProps {

const StyledIconWrapper = styled.div`
margin: ${getSpace(SpaceSize.XS)}px;
padding: ${getSpace(SpaceSize.XS)}px;
padding: ${getSpace(SpaceSize.XXS)}px;
border-radius: ${getSpace(SpaceSize.XXS)}px;

&:hover {
Expand All @@ -77,13 +79,13 @@ const Chrome: React.StatelessComponent<ChromeProps> = props => (
<StyledChrome>
<StyledChromeTitle>
<StyledIconWrapper visible={props.leftVisible !== false} onClick={props.onLeftClick}>
<StyledLeftIcon size={IconSize.XS} name={IconName.ArrowFill} />
<StyledLeftIcon size={IconSize.XS} name={IconName.Arrow} />
</StyledIconWrapper>

<StyledTitleWrapper>{props.title}</StyledTitleWrapper>

<StyledIconWrapper visible={props.rightVisible !== false} onClick={props.onRightClick}>
<StyledRightIcon size={IconSize.XS} name={IconName.ArrowFill} />
<StyledRightIcon size={IconSize.XS} name={IconName.Arrow} />
</StyledIconWrapper>
</StyledChromeTitle>
{props.children}
Expand Down
4 changes: 4 additions & 0 deletions src/lsg/patterns/colors/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ export const colors = {
displayName: 'Blue 40',
rgb: [102, 169, 230]
}),
blue80: new Color({
displayName: 'Blue 80',
rgb: [212, 226, 242]
}),
grey20: new Color({
displayName: 'Grey 20',
rgb: [52, 61, 69]
Expand Down
97 changes: 72 additions & 25 deletions src/lsg/patterns/element/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,69 +45,116 @@ export interface StyledPlaceholder {
}

const StyledElement = styled.div`
cursor: default;
position: relative;
z-index: 1;
`;

const StyledElementLabel = styled.div`
Copy link
Member Author

@tilmx tilmx Apr 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lkuechler Is it possible to apply styling on the element during dragging around? So like only showing the element title text instead of a screenshot of the whole element?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Solved with 71c298d

position: relative;
display: flex;
padding: 9px ${getSpace(Size.L)}px 9px ${getSpace(Size.XL)}px;
border-radius: 3px;
cursor: pointer;
padding: ${getSpace(Size.XS)}px ${getSpace(Size.L)}px ${getSpace(Size.XS)}px ${getSpace(Size.XXL)}px;
align-items: center;
color: ${colors.black.toString()};
color: ${colors.grey20.toString()};
position: relative;
font-size: 15px;
line-height: 21px;
z-index: 1;

&::before {
content: '';
display: block;
position: absolute;
height: 100%;
width: 240px;
left: 0;
top: 0;
margin-left: -240px;
}

&:hover {
background: ${colors.grey90.toString()};
background ${colors.black.toString('rgb', { alpha: 0.05 })};

&::before {
background: ${colors.black.toString('rgb', { alpha: 0.05 })};
}
}

${(props: StyledElementLabelProps) =>
props.active
? `
color: ${colors.white.toString()};
background: ${colors.blue40.toString()};
color: ${colors.blue.toString()};
background: ${colors.blue80.toString()};

&::before {
background: ${colors.blue80.toString()};
}

&:hover {
background: ${colors.blue40.toString()};
background: ${colors.blue80.toString()};

&::before {
background: ${colors.blue80.toString()};
}
}
`
: ''};
${(props: StyledElementLabelProps) =>
props.highlight
? `
background: ${colors.grey90.toString()};

&::before {
background: ${colors.grey90.toString()};
}
`
: ''};
`;

const StyledPlaceholder = styled.div`
Copy link
Member Author

@tilmx tilmx Apr 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lkuechler Is it possible to show the placeholder (drop area) only when an element is being dragged around? So it doesn’t react to clicks?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marionebl takes care of that

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Solved with 4f6f148

position: relative;
height: 10px;
height: ${getSpace(Size.S)};
width: 100%;
margin-top: -5px;
margin-bottom: -5px;
border-radius: 3px;
margin-top: -${getSpace(Size.XS)};
margin-bottom: -${getSpace(Size.XS)};
z-index: 10;

&::before {
content: '';
display: block;
position: absolute;
height: 6px;
width: 6px;
left: 6px;
top: 3px;
border-radius: 3px;
background: ${colors.blue40.toString()};
transform: scale(0);
transition: transform 0.2s;
z-index: 20;
}

&::after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: ${colors.grey90.toString()};
height: 2px;
width: calc(100% - 6px);
left: ${getSpace(Size.XS)};
top: 5px;
background: ${colors.blue40.toString()};
transform: scaleY(0);
transition: transform 0.2s;
z-index: 50;
z-index: 20;
}

${(props: StyledPlaceholder) =>
props.highlightPlaceholder
? `
&:after {
&::before {
transform: scale(1);
}

&::after {
transform: scaleY(1);
}
`
Expand All @@ -122,15 +169,15 @@ const StyledElementChild = styled.div`

const StyledIcon = styled(Icon)`
position: absolute;
left: 0;
left: ${getSpace(Size.XS) + getSpace(Size.XXS)}px;
fill: ${colors.grey60.toString()};
width: 12px;
height: 12px;
width: ${getSpace(Size.S)}px;
height: ${getSpace(Size.S)}px;
padding: ${getSpace(Size.XS)}px;
transition: transform 0.2s;

${(props: StyledIconProps) => (props.open ? 'transform: rotate(90deg)' : '')};
${(props: StyledIconProps) => (props.active ? 'fill: white' : '')};
${(props: StyledIconProps) => (props.active ? 'fill: #0070D6' : '')};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be deduced from styleguide colors

`;

const Element: React.StatelessComponent<ElementProps> = props => {
Expand All @@ -155,7 +202,7 @@ const Element: React.StatelessComponent<ElementProps> = props => {
} = props;

return (
<StyledElement title={title}>
<StyledElement>
<StyledPlaceholder
highlightPlaceholder={highlightPlaceholder}
onDragOver={(e: React.DragEvent<HTMLElement>) => {
Expand Down
3 changes: 2 additions & 1 deletion src/lsg/patterns/layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ const StyledLayout = styled.div`
const StyledMainArea = styled(StyledLayout)`
box-sizing: border-box;
height: 100vh;
padding-top: 54px;
padding-top: 40px;
-webkit-font-smoothing: antialiased;
`;

const StyledSideBar = styled(StyledLayout)`
Expand Down
26 changes: 23 additions & 3 deletions src/lsg/patterns/panes/element-pane/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,28 @@
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../../colors';
import { getSpace, Size } from '../../space';

const StyledElementPane = styled.div`
position: relative;
flex-grow: 3;
flex-shrink: 0;
flex-basis: 60%;
overflow: scroll;
padding-top: ${getSpace(Size.M)}px;

&::before {
content: '';
position: absolute;
top: 0;
right: 0;
display: block;
width: 1px;
height: 100%;
border-right: 0.5px solid ${colors.black.toString('rgb', { alpha: 0.1 })};
box-sizing: border-box;
z-index: 10;
}

/*FadeOut*/
&::after {
Expand All @@ -16,13 +32,17 @@ const StyledElementPane = styled.div`
display: block;
width: 100%;
height: 40px;
background: linear-gradient(to bottom,
background: linear-gradient(
to bottom,
rgba(247, 247, 247, 0) 0%,
rgba(247, 247, 247, 0.5) 15%,
rgba(247, 247, 247, 1) 100%);
rgba(247, 247, 247, 1) 100%
);
}
`;

const ElementPane: React.StatelessComponent = props => <StyledElementPane>{props.children}</StyledElementPane>;
const ElementPane: React.StatelessComponent = props => (
<StyledElementPane>{props.children}</StyledElementPane>
);

export default ElementPane;
8 changes: 4 additions & 4 deletions src/lsg/patterns/panes/preview-pane/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const StyledPreviewResizer = styled.div`
width: 12px;
height: 100%;
cursor: ew-resize;
display: none;
&::after {
content: '';
position: absolute;
Expand All @@ -41,15 +42,14 @@ const BaseStyledPreviewPane = styled.div`
flex-grow: 1;
overflow: hidden;
background: ${colors.white.toString()};
border-radius: 6px 6px 0 0;
box-shadow: 0 3px 9px 0 ${colors.black.toRGBString(0.15)};
border-right: 0.5px solid ${colors.black.toString('rgb', { alpha: 0.1 })};
`;

const StyledPreviewPane = BaseStyledPreviewPane.extend.attrs({
style: (props: PreviewPaneProps) => ({
maxWidth: `${props.width}px` || 'none'
})
}) `${(props: PreviewPaneProps) => ({})}`;
})`${(props: PreviewPaneProps) => ({})}`;

export default class PreviewPane extends React.Component<PreviewPaneProps> {
private previewPane: HTMLElement;
Expand Down Expand Up @@ -84,7 +84,7 @@ export default class PreviewPane extends React.Component<PreviewPaneProps> {
<StyledPreviewPane
width={width}
dangerouslySetInnerHTML={{
__html: `<webview id="preview" style="height: 100%; border-radius: 6px 6px 0 0; overflow: hidden;" src="${previewFrame ||
__html: `<webview id="preview" style="height: 100%; overflow: hidden;" src="${previewFrame ||
'./preview.html'}" preload="./preview.js" partition="electron" />`
}}
/>
Expand Down