feat: update styling of layout and element pane #393

tilmx · 2018-04-23T06:30:37Z

Bringing the chrome, preview and element pane to the freshest style version!

The pull request will be squashed into "feat: update styling of layout and element pane"

tilmx · 2018-04-23T07:04:12Z

src/lsg/patterns/element/index.tsx

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

 const StyledPlaceholder = styled.div`


@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?

@marionebl takes care of that

Solved with 4f6f148

tilmx · 2018-04-23T07:13:02Z

src/lsg/patterns/element/index.tsx

 	position: relative;
+	z-index: 1;
 `;

 const StyledElementLabel = styled.div`


@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?

Solved with 71c298d

marionebl

Some comments, looks great!

marionebl · 2018-04-25T16:45:25Z

src/component/container/app.tsx

+							>
+								<ElementPane>
+									<ElementList />
+									<AddButton


Shouldn't this be invisible / disabled if the right sidebar displays RightPane.Patterns?

I thought an active state would be cooler, to not disturb the user because the button is sometimes not there. But let’s test that as well (see below)!

marionebl · 2018-04-25T16:46:51Z

src/component/container/app.tsx

+										onClick={e => {
+											e.stopPropagation();
+											store.setRightPane(RightPane.Patterns);
+											store.setSelectedElement();


I don't quite get how the Add Elements button is different from "unfocussing" the currently selected element if we remove the selection. Would it make more sense to retain the current selection while showing the RightPane.Patterns panel?

As interacting with the left layers changes the right property pane, the idea was to add a button that shows the pattern view. And the short cut for not having to directly click on the button left bottom would be to click on the unused area in the element view (so it unselects the element). Then you always see on the right side what you want to do (like inspect on macOS does).

I’d love to test this in a kind of usertest, if we find out it doesn’t work – let’s change it.

marionebl · 2018-04-25T16:47:41Z

src/component/container/element-list.tsx

+	font-size: 12px;
+	opacity: 1;
+	top: 0;
+	left: -500px;


What is the purpose of this offset?

Scratch that - I think this should be something like to ensure this is outside the viewport in any case

/* Ensure cloned drag image node is outside viewport */ position: fixed; top: 100vh;

Good point. Thanks!

marionebl · 2018-04-25T16:55:32Z

src/component/container/element-list.tsx

+		if (dragElement) {
+			const dragImg = dragElement.cloneNode(true) as HTMLElement;
+			dragImg.setAttribute('style', DRAG_IMG_STYLE);
+			document.body.appendChild(dragImg);


We create and never clean up the dragImg nodes here. I think we should save a reference to the dragImg node on the instance and cleanup in handleDragEnd:

private handleDragEnd(e: React.DragEvent<HTMLElement>): void { this.setState({ dragging: false }); if (this.dragImg) { this.dragImg.parentNode.removeChild(this.dragImg); } } private handleDragStart(e: React.DragEvent<HTMLElement>): void { /* code emitted */ const dragImg = dragElement.cloneNode(true) as HTMLElement; document.body.appendChild(dragImg); this.dragImg = dragImg; }

I get the idea, but what do mean with "this.dragImg = dragImg;" instead of "e.dataTransfer.setDragImage(dragImg, 75, 15);"? Now it doesn’t set the drag image anymore. Or did you mean to use "this.dragImg" inside "setDragImage" then?

Sorry, I omitted the e.dataTransfer.setDragImage(dragImg, 75, 15); statement, that's still needed. this.dragImg should happen right after e.dataTransfer.setDragImage(dragImg, 75, 15);

Solved with 70d4708

marionebl · 2018-04-25T16:59:51Z

src/electron/main.ts

@@ -17,6 +17,7 @@ function createWindow(): void {
 		minWidth: 780,
 		minHeight: 380,
 		titleBarStyle: 'hiddenInset',
+		backgroundColor: '#f7f7f7',


This color should be registered with lsg/patterns/colors/index.tsx and moved from there. Also use it in global styles: https://github.com/meetalva/alva/blob/master/src/lsg/patterns/global-styles/index.tsx#L9

Good catch. In "global-styles" that makes sense – but as an open question: Wouldn’t it be better to directly set the color here in main.ts in terms of startup speed?

Sure, nothing wrong with applying a background color here, but I'd recommend we the actual value from the colors pattern.

marionebl · 2018-04-25T17:00:47Z

src/lsg/patterns/add-button/index.tsx

+}
+
+const StyledAddButton = styled.div`
+	position: absolute;


Should be position: fixed, currently this happens:

Good catch, thanks!

As position: fixed would have caused that the button can’t have the same width as the parent, I restyled the preview pane with display flex vertically (+ overflow: scroll in the element section).

marionebl · 2018-04-25T17:09:17Z

src/lsg/patterns/chrome/index.tsx

 	padding: ${getSpace(SpaceSize.XS)}px ${getSpace(SpaceSize.XXL) * 3}px;
+	border-bottom: 0.5px solid ${colors.grey90.toString()};


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; }

marionebl · 2018-04-25T17:13:31Z

src/lsg/patterns/element/index.tsx

 	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' : '')};


This should be deduced from styleguide colors

marionebl · 2018-04-25T17:14:15Z

src/lsg/patterns/list/index.tsx

-		props: StyledListItemProps
-	) => (props.active ? 'background: #def' : '')};
+	${(props: StyledListItemProps) => (props.onClick ? 'cursor: pointer;' : '')};
+	${(props: StyledListItemProps) => (props.active ? 'background: #def' : '')};


Move the colors pattern

* feat(component): update styling of layout * feat(component): update styling of element pane * feat: unselect items when sidebar root receives click * refactor: simplify app view by moving out splashscreen * style: use tabs for indentation * feat(component): add drag image styling * fixup! increase element drag size * fixup! add check for null on drag element * fix: avoid side effect froms drop areas on click interaction * fix: remove obsolete handler * fix: select right drag element target * fix: adapt to new interface * fix: make ts happy * fix: restore icon click functionality * feat: show either properties or patterns pane * fix: restore pattern drag * fix: set backgroundColor during startup * fix: handle draggable states via unified state * feat: add button to show pattern pane * feat: add button styling * fixup! change requests * fix: pass hex color to BrowserWindow * refactor: use 100vh to move element outside of viewport * fix: clean up dragimg nodes after dragging * fix: get color from styleguide * fix: read drag image colors from styleguide * fix: update add button position and side bar borders * fix: set hover and active styling to preview resizer * fix: add element overflow gradient * fix: make entire tree element draggable * fix: reenable placeholder targets for off-list payloads * fix: do not write bogus dom attributes

Tilman Frick added 2 commits April 23, 2018 08:28

feat(component): update styling of layout

ca2c1d9

feat(component): update styling of element pane

b0cc943

tilmx mentioned this pull request Apr 23, 2018

WIP: feat(component): update styling of property pane #373

Closed

5 tasks

tilmx commented Apr 23, 2018

View reviewed changes

tilmx requested a review from lkuechler April 23, 2018 09:08

marionebl and others added 20 commits April 23, 2018 18:37

feat: unselect items when sidebar root receives click

551ec59

refactor: simplify app view by moving out splashscreen

71d38c9

Merge branch 'master' into feat/new-style

744f262

style: use tabs for indentation

76ac1ae

feat(component): add drag image styling

71c298d

fixup! increase element drag size

42284b6

fixup! add check for null on drag element

c6c52ff

fix: avoid side effect froms drop areas on click interaction

4f6f148

fix: remove obsolete handler

686f264

fix: select right drag element target

643d538

fix: adapt to new interface

8904d0a

fix: make ts happy

5500cbf

fix: restore icon click functionality

4fe6cbf

feat: show either properties or patterns pane

9c223fc

fix: restore pattern drag

57208e6

fix: set backgroundColor during startup

dbe48a1

fix: handle draggable states via unified state

c7de980

feat: add button to show pattern pane

dd1a6c4

feat: add button styling

f6212c4

Merge branch 'master' into feat/new-style

4b084dd

tilmx changed the title ~~WIP: feat(component): update styling of layout and element pane~~ feat(component): update styling of layout and element pane Apr 25, 2018

Merge branch 'master' into feat/new-style

9f9f31d

marionebl reviewed Apr 25, 2018

View reviewed changes

Merge branch 'master' into feat/new-style

3b79de9

Tilman Frick and others added 8 commits April 26, 2018 14:45

fixup! change requests

40a6397

fix: pass hex color to BrowserWindow

05dd8a2

refactor: use 100vh to move element outside of viewport

ed39ced

fix: clean up dragimg nodes after dragging

70d4708

fix: get color from styleguide

d8f8408

fix: read drag image colors from styleguide

0a20c6e

fix: update add button position and side bar borders

c42f0e2

fix: set hover and active styling to preview resizer

a192919

tilmx changed the title ~~feat(component): update styling of layout and element pane~~ feat: update styling of layout and element pane Apr 27, 2018

tilmx mentioned this pull request Apr 27, 2018

Empty state of property pane #68

Closed

Tilman Frick and others added 4 commits April 27, 2018 12:40

fix: add element overflow gradient

344f2cb

fix: make entire tree element draggable

a3b2dc8

fix: reenable placeholder targets for off-list payloads

0da7a7c

fix: do not write bogus dom attributes

e5ea5f0

marionebl approved these changes Apr 27, 2018

View reviewed changes

Merge branch 'master' into feat/new-style

81a7e2a

marionebl merged commit 7b7622b into master Apr 27, 2018

marionebl deleted the feat/new-style branch April 27, 2018 21:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: update styling of layout and element pane #393

feat: update styling of layout and element pane #393

tilmx commented Apr 23, 2018 •

edited

Loading

tilmx Apr 23, 2018 •

edited

Loading

tilmx Apr 23, 2018

tilmx Apr 24, 2018

tilmx Apr 23, 2018 •

edited

Loading

tilmx Apr 24, 2018

marionebl left a comment

marionebl Apr 25, 2018

tilmx Apr 27, 2018

marionebl Apr 25, 2018 •

edited

Loading

tilmx Apr 27, 2018

marionebl Apr 25, 2018

marionebl Apr 25, 2018

tilmx Apr 26, 2018

marionebl Apr 25, 2018

tilmx Apr 26, 2018 •

edited

Loading

marionebl Apr 26, 2018 •

edited

Loading

tilmx Apr 27, 2018

marionebl Apr 25, 2018

tilmx Apr 26, 2018

marionebl Apr 26, 2018

marionebl Apr 25, 2018

tilmx Apr 26, 2018

tilmx Apr 27, 2018

marionebl Apr 25, 2018

marionebl Apr 25, 2018

marionebl Apr 25, 2018

		padding: ${getSpace(SpaceSize.XS)}px ${getSpace(SpaceSize.XXL) * 3}px;
		border-bottom: 0.5px solid ${colors.grey90.toString()};

feat: update styling of layout and element pane #393

feat: update styling of layout and element pane #393

Conversation

tilmx commented Apr 23, 2018 • edited Loading

tilmx Apr 23, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tilmx Apr 23, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marionebl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marionebl Apr 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tilmx Apr 26, 2018 • edited Loading

Choose a reason for hiding this comment

marionebl Apr 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tilmx commented Apr 23, 2018 •

edited

Loading

tilmx Apr 23, 2018 •

edited

Loading

tilmx Apr 23, 2018 •

edited

Loading

marionebl Apr 25, 2018 •

edited

Loading

tilmx Apr 26, 2018 •

edited

Loading

marionebl Apr 26, 2018 •

edited

Loading