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

feat: move page overview to sidebar #554

Merged
merged 24 commits into from
Jun 13, 2018
Merged

Conversation

tilmx
Copy link
Member

@tilmx tilmx commented Jun 11, 2018

For easier page switches I moved the page overview to the left sidebar. Now you can easily switch between pages – like in Apple Keynote e.g.

Content

  • Move Page Overview from a separate View to a new Sidebar in PageDetail View
  • Introduce Focus State for Elements and Pages (focusedItem)

Todo

  • Move Page Overview
  • Set AppFocus on Element or Page Select
  • Select next page when deleting the very first page (Bug)
  • Show or Hide Page View with "< Pages" button
    Make entire page tile editable (Coming with PR feat(editable-title): make page title editable #553)

Bugs

  • First Open Project: DEL leads to weird unreversible deletion

@tilmx tilmx changed the title WIP feat: move page overview to sidebar feat: move page overview to sidebar Jun 12, 2018
import * as React from 'react';
import { AddPage } from '.';

const AddPageDemo: React.StatelessComponent<void> = (): JSX.Element => (
Copy link
Contributor

Choose a reason for hiding this comment

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

Omit the void type parameter

import { AddPage } from '.';

const AddPageDemo: React.StatelessComponent<void> = (): JSX.Element => (
<DemoContainer title="Floating Button">
Copy link
Contributor

Choose a reason for hiding this comment

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

Change to Add Button

@@ -0,0 +1,8 @@
{
"name": "add-page",
Copy link
Contributor

Choose a reason for hiding this comment

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

add-page-button might be a more distinct name

}

export interface ElementProps {
children?: React.ReactNode;
draggable: boolean;
dragging: boolean;
editable?: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this required on top of State.Editable? It might be less confusing to make focused the boolean flag instead.

store.getActiveAppView() === Types.AlvaView.Pages
? Types.AlvaView.PageDetail
: Types.AlvaView.Pages;
const next = store.getShowPages() ? false : true;
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove, see line 25

return (
<ViewButton
title={title}
onClick={() => store.setShowPages(next)}
Copy link
Contributor

Choose a reason for hiding this comment

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

store.setShowPages(!store.getShowPages())

@@ -30,6 +30,7 @@ export class ElementContainer extends React.Component<ElementContainerProps> {
<Components.Element
draggable={true}
dragging={store.getDragging()}
editable={props.element.getRole() === ElementRole.Root ? false : true}
Copy link
Contributor

Choose a reason for hiding this comment

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

props.element.getRole() !== ElementRole.Root

@@ -38,7 +39,7 @@ export class ElementContainer extends React.Component<ElementContainerProps> {
onChange={AlvaUtil.noop}
placeholderHighlighted={props.element.getPlaceholderHighlighted()}
state={getState(props.element, store)}
title={props.element.getName()}
title={props.element.getRole() === ElementRole.Root ? 'Page' : props.element.getName()}
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's use the page name for the root element, should be implemented in Element.prototype.getName

<Layout wrap={LayoutWrap.Wrap}>
{project
.getPages()
.map((page, i) => (
Copy link
Contributor

Choose a reason for hiding this comment

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

Change to map(page => {...})

import * as MobxReact from 'mobx-react';
import { Page } from '../../model';
import * as React from 'react';
import { ViewStore } from '../../store';
import * as Types from '../../types';

export interface PageTileContainerProps {
focused: boolean;
focus: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

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

focused, highlighted

@meetalva meetalva deleted a comment from tilmx Jun 12, 2018
marionebl
marionebl previously approved these changes Jun 13, 2018
@marionebl marionebl merged commit 7bb8a57 into master Jun 13, 2018
@marionebl marionebl deleted the feat/update-page-styling branch June 13, 2018 13:39
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants