-
Notifications
You must be signed in to change notification settings - Fork 224
Conversation
src/components/add-page/demo.tsx
Outdated
import * as React from 'react'; | ||
import { AddPage } from '.'; | ||
|
||
const AddPageDemo: React.StatelessComponent<void> = (): JSX.Element => ( |
There was a problem hiding this comment.
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
src/components/add-page/demo.tsx
Outdated
import { AddPage } from '.'; | ||
|
||
const AddPageDemo: React.StatelessComponent<void> = (): JSX.Element => ( | ||
<DemoContainer title="Floating Button"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Change to Add Button
src/components/add-page/pattern.json
Outdated
@@ -0,0 +1,8 @@ | |||
{ | |||
"name": "add-page", |
There was a problem hiding this comment.
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
src/components/element/index.tsx
Outdated
} | ||
|
||
export interface ElementProps { | ||
children?: React.ReactNode; | ||
draggable: boolean; | ||
dragging: boolean; | ||
editable?: boolean; |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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)} |
There was a problem hiding this comment.
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} |
There was a problem hiding this comment.
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()} |
There was a problem hiding this comment.
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) => ( |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
focused
, highlighted
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
focusedItem
)Todo
Make entire page tile editable(Coming with PR feat(editable-title): make page title editable #553)Bugs