Skip to content

Commit

Permalink
begins styling toolbox; adjusts logic in prepartion for collapsable s…
Browse files Browse the repository at this point in the history 
…ections
  • Loading branch information
@perpetualgrimace @davelandry
perpetualgrimace authored and davelandry committed Jul 2, 2019
1 parent 8b63df1 commit 4337f98
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 70 deletions.
97 changes: 49 additions & 48 deletions packages/cms/src/components/toolbox/Toolbox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import axios from "axios";
import React, {Component} from "react";
import {Checkbox} from "@blueprintjs/core";
import Section from "../Section";
import Loading from "components/Loading";
import Button from "../Button";
import GeneratorCard from "../cards/GeneratorCard";
import FormatterEditor from "../../formatter/FormatterEditor";
import Status from "../Status";
Expand All @@ -20,7 +20,7 @@ export default class Toolbox extends Component {
this.state = {
minData: false,
currentView: "generators",
grouped: true,
detailView: true,
recompiling: true,
query: ""
};
Expand Down Expand Up @@ -113,10 +113,6 @@ export default class Toolbox extends Component {
this.setState({forceGenID, forceMatID, forceKey});
}

changeView(e) {
this.setState({currentView: e.target.value});
}

filter(e) {
this.setState({query: e.target.value});
}
Expand All @@ -142,7 +138,7 @@ export default class Toolbox extends Component {

render() {

const {currentView, grouped, minData, recompiling, query, forceGenID, forceMatID, forceKey} = this.state;
const {currentView, detailView, minData, recompiling, query, forceGenID, forceMatID, forceKey} = this.state;
const {variables, locale, localeDefault, previews} = this.props;

if (!minData) {
Expand All @@ -157,50 +153,52 @@ export default class Toolbox extends Component {
if (!dataLoaded || !varsLoaded || !defLoaded || !locLoaded) return <div className="cms-toolbox"><h3>Loading...</h3></div>;

return <div className="cms-toolbox">
{/* loading status */}
<Status recompiling={recompiling} />
<h3>Toolbox</h3>
<strong>Filter:</strong>
<div>
<label className="cms-field-container">
<span className="u-visually-hidden">filter by name, output, description...</span>
<input
type="search"
placeholder="filter by name, output, description..."
value={query}
onChange={this.filter.bind(this)}
/>
</div>
<label className="cms-select-label">
<strong>View:</strong>
<select
className="cms-select"
value={currentView}
onChange={this.changeView.bind(this)}
>
<option value="generators">Generators</option>
<option value="formatters">Formatters</option>
</select>
</label>
{ currentView === "generators" &&
<Checkbox checked={grouped} onChange={() => this.setState({grouped: !this.state.grouped})}>
Group By Generator
</Checkbox>

<div className="button-group">
<Button
onClick={() => this.setState({detailView: true})}
icon="th-list"
iconPosition="left"
>
detail view
</Button>
<Button
onClick={() => this.setState({detailView: false})}
icon="list"
iconPosition="left"
>
output view
</Button>
</div>

{!detailView &&
<div className="cms-variables-list">
<ul>
{Object.keys(variables[localeDefault])
.sort((a, b) => a.localeCompare(b))
.filter(key => key !== "_genStatus" && key !== "_matStatus")
.filter(key => key.toLowerCase().includes(query.toLowerCase()) || typeof variables[localeDefault][key] === "string" && variables[localeDefault][key].toLowerCase().includes(query.toLowerCase()))
.map(key =>
<li key={key} className="cms-list-var" onClick={this.openGenerator.bind(this, key)}>
<strong>{key}</strong>: {variables[localeDefault][key]}
</li>
)}
</ul>
</div>
}
{ currentView === "generators" && !grouped && <div className="cms-variables-list">
<ul>
{Object.keys(variables[localeDefault])
.sort((a, b) => a.localeCompare(b))
.filter(key => key !== "_genStatus" && key !== "_matStatus")
.filter(key => key.toLowerCase().includes(query.toLowerCase()) || typeof variables[localeDefault][key] === "string" && variables[localeDefault][key].toLowerCase().includes(query.toLowerCase()))
.map(key =>
<li key={key} className="cms-list-var" onClick={this.openGenerator.bind(this, key)}>
<strong>{key}</strong>: {variables[localeDefault][key]}
</li>
)}
</ul>
</div> }
{/* Hide the sections if not grouped - but SHOW them if forceKey is set, which means
{/* Hide the sections if not detailView - but SHOW them if forceKey is set, which means
* that someone has clicked an individual variable and wants to view its editor
*/}
{currentView === "generators" && <div style={grouped || forceKey ? {} : {display: "none"}}>
<div style={detailView || forceKey ? {} : {display: "none"}}>
{/* generators */}
<Section
title="Generators"
Expand All @@ -213,7 +211,7 @@ export default class Toolbox extends Component {
.map(g => <GeneratorCard
key={g.id}
context="generator"
hidden={!grouped}
hidden={!detailView}
item={g}
attr={minData.attr || {}}
locale={localeDefault}
Expand All @@ -240,7 +238,7 @@ export default class Toolbox extends Component {
.map(m => <GeneratorCard
key={m.id}
context="materializer"
hidden={!grouped}
hidden={!detailView}
item={m}
locale={localeDefault}
secondaryLocale={locale}
Expand All @@ -255,12 +253,15 @@ export default class Toolbox extends Component {
forceKey={String(forceMatID) === String(m.id) ? forceKey : null}
/>)}
/>
</div>}
{ currentView === "formatters" && <div>
{/* formatters */}
</div>

{/* formatters */}
{detailView &&
<FormatterEditor />
</div>}
}

{/* loading status */}
<Status recompiling={recompiling} />
</div>;

}
Expand Down
40 changes: 18 additions & 22 deletions packages/cms/src/formatter/FormatterEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,28 +45,24 @@ class FormatterEditor extends Component {
const {formatters} = this.state;

return (
<div className="cms-panel formatter-panel" id="formatter-editor">
<div className="cms-editor">
<Section
title="Formatters"
entity="formatter"
addItem={this.addItem.bind(this)}
description="Javascript Formatters for Canon text components"
cards={formatters && formatters
.sort((a, b) => a.name.localeCompare(b.name))
.map(g => <GeneratorCard
context="formatter"
key={g.id}
item={g}
onSave={this.onSave.bind(this)}
onDelete={this.onDelete.bind(this)}
type="formatter"
variables={{}}
/>)
}
/>
</div>
</div>
<Section
title="Formatters"
entity="formatter"
addItem={this.addItem.bind(this)}
description="Javascript Formatters for Canon text components"
cards={formatters && formatters
.sort((a, b) => a.name.localeCompare(b.name))
.map(g => <GeneratorCard
context="formatter"
key={g.id}
item={g}
onSave={this.onSave.bind(this)}
onDelete={this.onDelete.bind(this)}
type="formatter"
variables={{}}
/>)
}
/>
);
}
}
Expand Down

0 comments on commit 4337f98

Please sign in to comment.