Merged PR 315: ErgonomieTreeView
Affichage fonctionnelle sous forme de toolbar vertical, comme dans les IDE Related work items: #7976
This commit is contained in:
Carl Fuchs
Eric Nguyen
parent
acb5ba2d82
commit
8a99ef4cfd
13 changed files with 240 additions and 133 deletions
|
|
@ -1,9 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import { ElementsList } from '../ElementsList/ElementsList';
|
||||
import { ElementsSideBar } from '../ElementsList/ElementsSideBar';
|
||||
import { History } from '../History/History';
|
||||
import { Bar } from '../Bar/Bar';
|
||||
import { Bar, BAR_WIDTH } from '../Bar/Bar';
|
||||
import { Symbols } from '../Symbols/Symbols';
|
||||
import { SymbolsSidebar } from '../SymbolsList/SymbolsList';
|
||||
import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { Messages } from '../Messages/Messages';
|
||||
import { Sidebar } from '../Sidebar/Sidebar';
|
||||
|
|
@ -37,7 +37,9 @@ export interface IUIProps {
|
|||
export enum SidebarType {
|
||||
None,
|
||||
Components,
|
||||
ComponentsExpanded,
|
||||
Symbols,
|
||||
SymbolsExpanded,
|
||||
History,
|
||||
Messages,
|
||||
Settings
|
||||
|
|
@ -59,6 +61,7 @@ function UseSetOrToggleSidebar(
|
|||
|
||||
export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
||||
const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components);
|
||||
|
||||
const [messages, setMessages] = React.useState<IMessage[]>([]);
|
||||
const current = GetCurrentHistoryState(editorState.history, editorState.historyCurrentStep);
|
||||
const configuration = editorState.configuration;
|
||||
|
|
@ -78,7 +81,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
);
|
||||
}
|
||||
|
||||
// Please use setOrToggleSidebar rather than setSelectedSidebar so we can close the sidebar
|
||||
// Please use setOrToggleSidebar rather than setSelectedSidebar, so we can close the sidebar
|
||||
const setOrToggleSidebar = UseSetOrToggleSidebar(selectedSidebar, setSelectedSidebar);
|
||||
|
||||
let leftSidebarTitle = '';
|
||||
|
|
@ -104,7 +107,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
buttonOnClick={methods.addContainer}
|
||||
/>;
|
||||
rightSidebarTitle = Text({ textId: '@Elements' });
|
||||
rightChildren = <ElementsList
|
||||
rightChildren = <ElementsSideBar
|
||||
containers={current.containers}
|
||||
mainContainer={mainContainer}
|
||||
symbols={current.symbols}
|
||||
|
|
@ -112,9 +115,31 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
onPropertyChange={methods.onPropertyChange}
|
||||
selectContainer={methods.selectContainer}
|
||||
addContainer={methods.addContainerAt}
|
||||
isExpanded ={false}
|
||||
onExpandChange={() => setOrToggleSidebar(SidebarType.ComponentsExpanded) }
|
||||
/>;
|
||||
break;
|
||||
case SidebarType.ComponentsExpanded:
|
||||
leftSidebarTitle = Text({ textId: '@Components' });
|
||||
leftChildren = <Components
|
||||
selectedContainer={selectedContainer}
|
||||
componentOptions={configuration.AvailableContainers}
|
||||
categories={configuration.Categories}
|
||||
buttonOnClick={methods.addContainer}
|
||||
/>;
|
||||
rightSidebarTitle = Text({ textId: '@Elements' });
|
||||
rightChildren = <ElementsSideBar
|
||||
containers={current.containers}
|
||||
mainContainer={mainContainer}
|
||||
symbols={current.symbols}
|
||||
selectedContainer={selectedContainer}
|
||||
onPropertyChange={methods.onPropertyChange}
|
||||
selectContainer={methods.selectContainer}
|
||||
addContainer={methods.addContainerAt}
|
||||
isExpanded ={true}
|
||||
onExpandChange={() => setOrToggleSidebar(SidebarType.Components) }
|
||||
/>;
|
||||
break;
|
||||
|
||||
case SidebarType.Symbols:
|
||||
leftSidebarTitle = Text({ textId: '@SymbolsLeft' });
|
||||
leftChildren = <Symbols
|
||||
|
|
@ -127,6 +152,24 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
symbols={current.symbols}
|
||||
onPropertyChange={methods.onSymbolPropertyChange}
|
||||
selectSymbol={methods.selectSymbol}
|
||||
isExpanded ={false}
|
||||
onExpandChange={() => setOrToggleSidebar(SidebarType.SymbolsExpanded) }
|
||||
/>;
|
||||
break;
|
||||
case SidebarType.SymbolsExpanded:
|
||||
leftSidebarTitle = Text({ textId: '@SymbolsLeft' });
|
||||
leftChildren = <Symbols
|
||||
componentOptions={configuration.AvailableSymbols}
|
||||
buttonOnClick={methods.addSymbol}
|
||||
/>;
|
||||
rightSidebarTitle = Text({ textId: '@SymbolsRight' });
|
||||
rightChildren = <SymbolsSidebar
|
||||
selectedSymbolId={current.selectedSymbolId}
|
||||
symbols={current.symbols}
|
||||
onPropertyChange={methods.onSymbolPropertyChange}
|
||||
selectSymbol={methods.selectSymbol}
|
||||
isExpanded ={true}
|
||||
onExpandChange={() => setOrToggleSidebar(SidebarType.Symbols)}
|
||||
/>;
|
||||
break;
|
||||
|
||||
|
|
@ -159,6 +202,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
|
||||
const isLeftSidebarOpen = selectedSidebar !== SidebarType.None;
|
||||
const isRightSidebarOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.Symbols;
|
||||
const isRightSidebarOpenExpanded = selectedSidebar === SidebarType.ComponentsExpanded || selectedSidebar === SidebarType.SymbolsExpanded;
|
||||
|
||||
const isLeftSidebarOpenClasses = new Set<string>([
|
||||
'left-sidebar',
|
||||
|
|
@ -170,14 +214,29 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
|
||||
let isRightSidebarOpenClasses = 'right-0 -bottom-full md:-right-80 md:bottom-0';
|
||||
|
||||
let marginSidebar = BAR_WIDTH;
|
||||
const viewerMarginClasses = new Set<string>([
|
||||
'ml-16'
|
||||
]);
|
||||
|
||||
if (isLeftSidebarOpen) {
|
||||
isLeftSidebarOpenClasses.delete('-bottom-full');
|
||||
isLeftSidebarOpenClasses.delete('md:-left-64');
|
||||
isLeftSidebarOpenClasses.delete('md:bottom-0');
|
||||
marginSidebar += 256;
|
||||
viewerMarginClasses.add(' md:ml-80');
|
||||
}
|
||||
|
||||
if (isRightSidebarOpen) {
|
||||
if (isRightSidebarOpen || isRightSidebarOpenExpanded) {
|
||||
isRightSidebarOpenClasses = 'right-0';
|
||||
|
||||
if (isRightSidebarOpenExpanded) {
|
||||
viewerMarginClasses.add(' md:mr-[32rem]');
|
||||
marginSidebar += 512;
|
||||
} else {
|
||||
viewerMarginClasses.add(' md:mr-64');
|
||||
marginSidebar += 256;
|
||||
}
|
||||
} else {
|
||||
isLeftSidebarOpenClasses.delete('left-sidebar');
|
||||
isLeftSidebarOpenClasses.add('left-sidebar-single');
|
||||
|
|
@ -186,16 +245,24 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
return (
|
||||
<>
|
||||
<Bar
|
||||
isComponentsOpen={selectedSidebar === SidebarType.Components}
|
||||
isSymbolsOpen={selectedSidebar === SidebarType.Symbols}
|
||||
isComponentsOpen={selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.ComponentsExpanded}
|
||||
isSymbolsOpen={selectedSidebar === SidebarType.Symbols || selectedSidebar === SidebarType.SymbolsExpanded}
|
||||
isHistoryOpen={selectedSidebar === SidebarType.History}
|
||||
isMessagesOpen={selectedSidebar === SidebarType.Messages}
|
||||
isSettingsOpen={selectedSidebar === SidebarType.Settings}
|
||||
toggleComponents={() => {
|
||||
setOrToggleSidebar(SidebarType.Components);
|
||||
if (selectedSidebar === SidebarType.ComponentsExpanded) {
|
||||
setOrToggleSidebar(SidebarType.ComponentsExpanded);
|
||||
} else {
|
||||
setOrToggleSidebar(SidebarType.Components);
|
||||
}
|
||||
} }
|
||||
toggleSymbols={() => {
|
||||
setOrToggleSidebar(SidebarType.Symbols);
|
||||
if (selectedSidebar === SidebarType.SymbolsExpanded) {
|
||||
setOrToggleSidebar(SidebarType.SymbolsExpanded);
|
||||
} else {
|
||||
setOrToggleSidebar(SidebarType.Symbols);
|
||||
}
|
||||
} }
|
||||
toggleTimeline={() => {
|
||||
setOrToggleSidebar(SidebarType.History);
|
||||
|
|
@ -214,11 +281,11 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
{ leftChildren }
|
||||
</Sidebar>
|
||||
<Viewer
|
||||
isLeftSidebarOpen={isLeftSidebarOpen}
|
||||
isRightSidebarOpen={isRightSidebarOpen}
|
||||
className={`${[...viewerMarginClasses.values()].join(' ')} w-full h-full`}
|
||||
current={current}
|
||||
selectedContainer={selectedContainer}
|
||||
selectContainer={methods.selectContainer}
|
||||
margin={marginSidebar}
|
||||
/>
|
||||
<Sidebar
|
||||
className={`right-sidebar ${isRightSidebarOpenClasses}`}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue