Skip to content
This repository has been archived by the owner on Apr 26, 2024. It is now read-only.

Update tool bar #702

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Update tool bar #702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e04153
Updated Editor panels
Aug 25, 2021
b9be32b
Added tool bar menu items
Aug 25, 2021
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
4 changes: 3 additions & 1 deletion src/app/components/draggable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { classNames } from "../utils";
import { Point } from "../../core";

import * as Hammer from "hammerjs";
import { CSSProperties } from "react";

export interface DraggableElementProps {
className?: string;
Expand All @@ -20,6 +21,7 @@ export interface DraggableElementProps {
onDragEnd?: () => void;
dragData: () => any;
renderDragElement?: () => [JSX.Element, Point];
styles?: CSSProperties;
}

export interface DraggableElementState {
Expand Down Expand Up @@ -82,7 +84,7 @@ export class DraggableElement extends React.Component<
"dragging",
this.state.dragging,
])}
style={{ display: "inline-block", cursor: "pointer" }}
style={{ display: "inline-block", cursor: "pointer", ...this.props.styles }}
>
{this.props.children}
</span>
Expand Down
102 changes: 102 additions & 0 deletions src/app/editor_panels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.

import {
ErrorBoundary,
MinimizablePane,
MinimizablePanelView,
TelemetryRecorder,
} from "./components";
import { strings } from "../strings";
import { AttributePanel, MarkEditorView } from "./views";
import { ObjectListEditor } from "./views/panels/object_list_editor";
import * as React from "react";
import { MainViewState } from "./main_view";
import { AppStore } from "./stores";

interface EditorPanelsProps {
state: MainViewState;
setState: (newState: MainViewState) => void;
telemetry?: TelemetryRecorder;
store: AppStore;
}

export class EditorPanels extends React.Component<
EditorPanelsProps,
Record<string, unknown>
> {
constructor(props: EditorPanelsProps) {
super(props);
this.props.store.addListener(AppStore.EVENT_GRAPHICS, () =>
this.forceUpdate()
);
}

render() {
return (
<div
className="charticulator__panel-editor-panel charticulator__panel-editor-panel-panes"
style={{
display:
this.props.state.glyphViewMaximized &&
this.props.state.attributeViewMaximized &&
this.props.state.layersViewMaximized
? "none"
: undefined,
}}
>
<MinimizablePanelView>
{this.props.state.glyphViewMaximized ? null : (
<MinimizablePane
title={strings.mainView.glyphPaneltitle}
scroll={false}
onMaximize={() =>
this.props.setState({
...this.props.state,
glyphViewMaximized: true,
})
}
>
<ErrorBoundary telemetryRecorder={this.props.telemetry}>
<MarkEditorView height={300} />
</ErrorBoundary>
</MinimizablePane>
)}
{this.props.state.layersViewMaximized ? null : (
<MinimizablePane
title={strings.mainView.layersPanelTitle}
scroll={true}
maxHeight={200}
onMaximize={() =>
this.props.setState({
...this.props.state,
layersViewMaximized: true,
})
}
>
<ErrorBoundary telemetryRecorder={this.props.telemetry}>
<ObjectListEditor />
</ErrorBoundary>
</MinimizablePane>
)}
{this.props.state.attributeViewMaximized ? null : (
<MinimizablePane
title={strings.mainView.attributesPaneltitle}
scroll={true}
onMaximize={() =>
this.props.setState({
...this.props.state,
attributeViewMaximized: true,
})
}
>
<ErrorBoundary telemetryRecorder={this.props.telemetry}>
<AttributePanel store={this.props.store} />
</ErrorBoundary>
</MinimizablePane>
)}
</MinimizablePanelView>
</div>
);
}
}
85 changes: 25 additions & 60 deletions src/app/main_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import { ScalesPanel } from "./views/panels/scales_panel";
import { strings } from "../strings";
import { FluentUIToolbar } from "./views/fluentui_tool_bar";
import { MainReactContext } from "./context_component";
import { EditorPanels } from "./editor_panels";
import { FluentUIToolbarV2 } from "./views/fluentui_tool_bar_v2";

export enum UndoRedoLocation {
MenuBar = "menubar",
Expand Down Expand Up @@ -102,8 +104,6 @@ export class MainView extends React.Component<MainViewProps, MainViewState> {
attributeViewMaximized: false,
scaleViewMaximized: false,
};

props.store.addListener(AppStore.EVENT_GRAPHICS, () => this.forceUpdate());
}

public static childContextTypes = {
Expand All @@ -124,14 +124,23 @@ export class MainView extends React.Component<MainViewProps, MainViewState> {
toolbarLabels: boolean;
}) => {
return (
<div className={`charticulator__panel-editor-toolbar-${config.layout}`}>
{/* <Toolbar toolbarLabels={config.toolbarLabels} undoRedoLocation={config.undoRedoLocation} layout={config.layout} /> */}
<FluentUIToolbar
toolbarLabels={config.toolbarLabels}
undoRedoLocation={config.undoRedoLocation}
layout={config.layout}
/>
</div>
<>
<div className={`charticulator__panel-editor-toolbar-${config.layout}`}>
{/* <Toolbar toolbarLabels={config.toolbarLabels} undoRedoLocation={config.undoRedoLocation} layout={config.layout} /> */}
<FluentUIToolbar
toolbarLabels={config.toolbarLabels}
undoRedoLocation={config.undoRedoLocation}
layout={config.layout}
/>
</div>
<div className={`charticulator__panel-editor-toolbar-${config.layout}`}>
<FluentUIToolbarV2
toolbarLabels={config.toolbarLabels}
undoRedoLocation={config.undoRedoLocation}
layout={config.layout}
/>
</div>
</>
);
};

Expand Down Expand Up @@ -166,56 +175,12 @@ export class MainView extends React.Component<MainViewProps, MainViewState> {

const editorPanels = () => {
return (
<div
className="charticulator__panel-editor-panel charticulator__panel-editor-panel-panes"
style={{
display:
this.state.glyphViewMaximized &&
this.state.attributeViewMaximized &&
this.state.layersViewMaximized
? "none"
: undefined,
}}
>
<MinimizablePanelView>
{this.state.glyphViewMaximized ? null : (
<MinimizablePane
title={strings.mainView.glyphPaneltitle}
scroll={false}
onMaximize={() => this.setState({ glyphViewMaximized: true })}
>
<ErrorBoundary telemetryRecorder={this.props.telemetry}>
<MarkEditorView height={300} />
</ErrorBoundary>
</MinimizablePane>
)}
{this.state.layersViewMaximized ? null : (
<MinimizablePane
title={strings.mainView.layersPanelTitle}
scroll={true}
maxHeight={200}
onMaximize={() => this.setState({ layersViewMaximized: true })}
>
<ErrorBoundary telemetryRecorder={this.props.telemetry}>
<ObjectListEditor />
</ErrorBoundary>
</MinimizablePane>
)}
{this.state.attributeViewMaximized ? null : (
<MinimizablePane
title={strings.mainView.attributesPaneltitle}
scroll={true}
onMaximize={() =>
this.setState({ attributeViewMaximized: true })
}
>
<ErrorBoundary telemetryRecorder={this.props.telemetry}>
<AttributePanel store={this.props.store} />
</ErrorBoundary>
</MinimizablePane>
)}
</MinimizablePanelView>
</div>
<EditorPanels
state={this.state}
setState={this.setState}
telemetry={this.props.telemetry}
store={this.props.store}
/>
);
};

Expand Down
Loading