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

Commit

Permalink
feat: update styling of layout and element pane (#393)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@tilmx
tilmx authored and Mauricio Palma committed May 7, 2018
1 parent f2e0fc1 commit 8eb1cb8
Show file tree
Hide file tree
Showing 24 changed files with 741 additions and 326 deletions.
3 changes: 2 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

137 changes: 65 additions & 72 deletions src/component/container/app.tsx
View file
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,52 @@ 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
side="left"
directionVertical
onClick={() => store.setSelectedElement()}
hasBorder
>
<ElementPane>
<ElementList />
</ElementPane>
<AddButton
active={store.getRightPane() === RightPane.Patterns}
label="Add Elements"
onClick={e => {
e.stopPropagation();
store.setRightPane(RightPane.Patterns);
store.setSelectedElement();
}}
/>
</SideBar>
<PreviewPaneWrapper key="center" previewFrame={previewFramePath} />
<SideBar side="right" directionVertical hasBorder>
{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

0 comments on commit 8eb1cb8

Please sign in to comment.