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 23 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
136 changes: 64 additions & 72 deletions src/component/container/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,25 @@
import Button, { Order } from '../../lsg/patterns/button';
import AddButton from '../../lsg/patterns/add-button';
import { ChromeContainer } from '../chrome/chrome-container';
import { colors } from '../../lsg/patterns/colors';
import Copy, { Size as CopySize } from '../../lsg/patterns/copy';
import { remote } from 'electron';
import { ElementList } from '../../component/container/element-list';
import ElementPane from '../../lsg/patterns/panes/element-pane';
import * as FileExtraUtils from 'fs-extra';
import globalStyles from '../../lsg/patterns/global-styles';
import { Headline } from '../../lsg/patterns/headline';
import { IconName, IconRegistry } from '../../lsg/patterns/icons';
import Layout, { MainArea, SideBar } from '../../lsg/patterns/layout';
import Link from '../../lsg/patterns/link';
import { createMenu } from '../../electron/menu';
import * as MobX from 'mobx';
import { observer } from 'mobx-react';
import * as PathUtils from 'path';
import { PatternListContainer } from '../../component/container/pattern-list';
import { PatternListContainer } from './pattern-list';
import PatternsPane from '../../lsg/patterns/panes/patterns-pane';
import { PreviewPaneWrapper } from '../../component/container/preview-pane-wrapper';
import * as ProcessUtils from 'process';
import { PropertyList } from './property-list';
import PropertyPane from '../../lsg/patterns/panes/property-pane';
import * as React from 'react';
import Space, { Size as SpaceSize } from '../../lsg/patterns/space';
import SplashScreen from '../../lsg/patterns/splash-screen';
import { Store } from '../../store/store';
import { SplashScreen } from './splash-screen';
import { RightPane, Store } from '../../store/store';

globalStyles();

Expand All @@ -36,32 +31,22 @@ export class App extends React.Component {
private static PROPERTIES_LIST_ID = 'propertieslist';

@MobX.observable protected activeTab: string = App.PATTERN_LIST_ID;

private ctrlDown: boolean = false;
private shiftDown: boolean = false;

public constructor(props: {}) {
super(props);
this.handleTabNaviagtionClick = this.handleTabNaviagtionClick.bind(this);
this.handleMainWindowClick = this.handleMainWindowClick.bind(this);
this.handleCreateNewSpaceClick = this.handleCreateNewSpaceClick.bind(this);
this.handleOpenSpaceClick = this.handleOpenSpaceClick.bind(this);
}

public componentDidMount(): void {
createMenu();
this.redirectUndoRedo();
}

private getDevTools(): React.StatelessComponent | null {
try {
const DevToolsExports = require('mobx-react-devtools');
return DevToolsExports ? DevToolsExports.default : undefined;
} catch (error) {
return null;
}
}

protected handleCreateNewSpaceClick(): void {
// TODO: Should move to store
protected createNewSpace(): void {
let appPath: string = remote.app.getAppPath().replace('.asar', '.asar.unpacked');
if (appPath.indexOf('node_modules') >= 0) {
appPath = ProcessUtils.cwd();
Expand All @@ -82,18 +67,20 @@ export class App extends React.Component {
);
}

private getDevTools(): React.StatelessComponent | null {
try {
const DevToolsExports = require('mobx-react-devtools');
return DevToolsExports ? DevToolsExports.default : undefined;
} catch (error) {
return null;
}
}

private handleMainWindowClick(): void {
Store.getInstance().setElementFocussed(false);
createMenu();
}

protected handleOpenSpaceClick(): void {
remote.dialog.showOpenDialog({ properties: ['openDirectory'] }, filePaths => {
store.openStyleguide(filePaths[0]);
store.openFirstPage();
});
}

protected handleTabNaviagtionClick(evt: React.MouseEvent<HTMLElement>, id: string): void {
this.activeTab = id;
}
Expand All @@ -106,6 +93,14 @@ export class App extends React.Component {
return this.activeTab === App.PROPERTIES_LIST_ID;
}

// TODO: Should move to store
protected openSpace(): void {
remote.dialog.showOpenDialog({ properties: ['openDirectory'] }, filePaths => {
store.openStyleguide(filePaths[0]);
store.openFirstPage();
});
}

private redirectUndoRedo(): void {
document.body.onkeydown = event => {
if (event.keyCode === 16) {
Expand Down Expand Up @@ -145,54 +140,51 @@ export class App extends React.Component {
const DevTools = this.getDevTools();

return (
<Layout directionVertical handleClick={this.handleMainWindowClick}>
<Layout directionVertical onClick={this.handleMainWindowClick}>
<ChromeContainer />

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

{!project && (
<SplashScreen>
<Space sizeBottom={SpaceSize.L}>
<Headline textColor={colors.grey20} order={2}>
Getting started with Alva
</Headline>
</Space>
<Space sizeBottom={SpaceSize.XXXL}>
<Copy size={CopySize.M} textColor={colors.grey20}>
You can open an existing Alva space or create a new one based on our
designkit including some basic components to kickstart your project.
</Copy>
</Space>
<Space sizeBottom={SpaceSize.S}>
<Button handleClick={this.handleCreateNewSpaceClick} order={Order.Primary}>
Create new Alva space
</Button>
</Space>
<Link color={colors.grey50} onClick={this.handleOpenSpaceClick}>
<Copy size={CopySize.S}>or open existing Alva space</Copy>
</Link>
</SplashScreen>
{project ? (
<React.Fragment>
<SideBar
key="left"
directionVertical
onClick={() => store.setSelectedElement()}
>
<ElementPane>
<ElementList />
<AddButton
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Member Author

Choose a reason for hiding this comment

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

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)!

active={store.getRightPane() === RightPane.Patterns}
label="Add Elements"
onClick={e => {
e.stopPropagation();
store.setRightPane(RightPane.Patterns);
store.setSelectedElement();
Copy link
Contributor

@marionebl marionebl Apr 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

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?

Copy link
Member Author

Choose a reason for hiding this comment

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

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.

}}
/>
</ElementPane>
</SideBar>
<PreviewPaneWrapper key="center" previewFrame={previewFramePath} />
<SideBar key="right" directionVertical hasPaddings>
{store.getRightPane() === RightPane.Properties && (
<PropertyPane>
<PropertyList />
</PropertyPane>
)}
{store.getRightPane() === RightPane.Patterns && (
<PatternsPane>
<PatternListContainer />
</PatternsPane>
)}
</SideBar>
</React.Fragment>
) : (
<SplashScreen
onPrimaryButtonClick={() => this.createNewSpace()}
onSecondaryButtonClick={() => this.openSpace()}
/>
)}
</MainArea>

<IconRegistry names={IconName} />

{DevTools ? <DevTools /> : null}
</Layout>
);
Expand Down
Loading