folders
Rick Carlino 2019-12-18 16:09:18 -06:00
commit ed0661917e
3 changed files with 19 additions and 10 deletions

View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { BlurableInput, ColorPicker, Row, Col, ToolTip } from "../ui"; import { BlurableInput, ColorPicker, Row, Col } from "../ui";
import { import {
FolderUnion, FolderUnion,
FolderItemProps, FolderItemProps,
@ -28,7 +28,6 @@ import { urlFriendly } from "../util";
import { setActiveSequenceByName } from "../sequences/set_active_sequence_by_name"; import { setActiveSequenceByName } from "../sequences/set_active_sequence_by_name";
import { Position, Popover } from "@blueprintjs/core"; import { Position, Popover } from "@blueprintjs/core";
import { t } from "../i18next_wrapper"; import { t } from "../i18next_wrapper";
import { ToolTips } from "../constants";
const FolderListItem = (props: FolderItemProps) => { const FolderListItem = (props: FolderItemProps) => {
const { sequence, onClick } = props; const { sequence, onClick } = props;
@ -211,8 +210,6 @@ export class Folders extends React.Component<FolderProps, FolderState> {
render() { render() {
return <div> return <div>
<h3>{t("Sequences")}</h3>
<ToolTip helpText={ToolTips.SEQUENCE_LIST} />
<div className="panel-top with-button" style={{ marginTop: 0 }}> <div className="panel-top with-button" style={{ marginTop: 0 }}>
<div className="thin-search-wrapper"> <div className="thin-search-wrapper">
<div className="text-input-wrapper"> <div className="text-input-wrapper">

View File

@ -65,7 +65,7 @@ export interface FolderProps {
export interface FolderState { export interface FolderState {
toggleDirection: boolean; toggleDirection: boolean;
movedSequenceUuid?: string; movedSequenceUuid?: string;
}; }
export interface FolderNodeProps { export interface FolderNodeProps {
node: FolderUnion; node: FolderUnion;

View File

@ -2,10 +2,12 @@ import * as React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { StepButtonCluster } from "./step_button_cluster"; import { StepButtonCluster } from "./step_button_cluster";
import { SequenceEditorMiddle } from "./sequence_editor_middle"; import { SequenceEditorMiddle } from "./sequence_editor_middle";
import { Page, Row, Col } from "../ui/index"; import {
Page, Row, LeftPanel, EmptyStateWrapper, EmptyStateGraphic
} from "../ui";
import { Props } from "./interfaces"; import { Props } from "./interfaces";
import { mapStateToProps } from "./state_to_props"; import { mapStateToProps } from "./state_to_props";
import { ToolTips } from "../constants"; import { ToolTips, Content } from "../constants";
import { isTaggedSequence } from "../resources/tagged_resources"; import { isTaggedSequence } from "../resources/tagged_resources";
import { setActiveSequenceByName } from "./set_active_sequence_by_name"; import { setActiveSequenceByName } from "./set_active_sequence_by_name";
import { CenterPanel, RightPanel } from "../ui"; import { CenterPanel, RightPanel } from "../ui";
@ -41,9 +43,19 @@ export class RawSequences extends React.Component<Props, {}> {
const activeClasses = [sequenceOpen, insertingStep].join(" "); const activeClasses = [sequenceOpen, insertingStep].join(" ");
return <Page className="sequence-page"> return <Page className="sequence-page">
<Row> <Row>
<Col sm={3}> <LeftPanel
<Folders {...this.props.folderData} /> className={`sequence-list-panel ${activeClasses}`}
</Col> title={t("Sequences")}
helpText={t(ToolTips.SEQUENCE_LIST)}>
<EmptyStateWrapper
notEmpty={this.props.sequences.length > 0
|| this.props.folderData.rootFolder.folders.length > 0}
graphic={EmptyStateGraphic.sequences}
title={t("No Sequences.")}
text={Content.NO_SEQUENCES}>
<Folders {...this.props.folderData} />
</EmptyStateWrapper>
</LeftPanel>
<CenterPanel <CenterPanel
className={`sequence-editor-panel ${activeClasses}`} className={`sequence-editor-panel ${activeClasses}`}
backButton={<SequenceBackButton backButton={<SequenceBackButton