in packages/tooling/fast-figma-plugin-msft/src/core/ui/index.tsx [144:495]
private renderBody(): JSX.Element {
const backgroundRecipes = this.appliedRecipes(RecipeTypes.backgroundFills);
const foregroundRecipes = this.appliedRecipes(RecipeTypes.foregroundFills);
const strokeRecipes = this.appliedRecipes(RecipeTypes.strokeFills);
const cornerRadiusRecipes = this.appliedRecipes(RecipeTypes.cornerRadius);
const supportsDesignSystem = this.props.selectedNodes.some(node =>
node.supports.includes("designSystem")
);
return (
<div
style={{
display: "grid",
gridTemplateRows: "1fr auto",
height: "100%",
}}
>
<div style={{ overflowY: "overlay" as any }}>
<td-drawer name="Theme">
{supportsDesignSystem ? this.renderThemeSwitcher() : null}
{supportsDesignSystem ? this.renderColorPicker() : null}
</td-drawer>
<td-drawer name="Color">
<div slot="collapsed-content">
{backgroundRecipes.length ? (
<>
<p className="title inset">Background</p>
{backgroundRecipes.map(recipe => (
<p className="applied-recipe" key={recipe.id}>
<td-swatch
circular
value={recipe.value}
orientation="horizontal"
>
{recipe.name}
</td-swatch>
<div>
<span>
{recipe.value.replace("#", "")}
</span>
<ActionTrigger
glyph={detach}
appearance={
ActionTriggerAppearance.stealth
}
title={"Detach"}
aria-label={"Detach"}
onClick={this.removeRecipe.bind(
this,
RecipeTypes.backgroundFills
)}
jssStyleSheet={{
actionTrigger: { padding: "6px" },
}}
/>
</div>
</p>
))}
</>
) : null}
{foregroundRecipes.length ? (
<>
<p className="title inset">Foreground</p>
{foregroundRecipes.map(recipe => (
<p className="applied-recipe" key={recipe.id}>
<td-swatch
circular
value={recipe.value}
orientation="horizontal"
>
{recipe.name}
</td-swatch>
<div>
<span>
{recipe.value.replace("#", "")}
</span>
<ActionTrigger
glyph={detach}
appearance={
ActionTriggerAppearance.stealth
}
title={"Detach"}
aria-label={"Detach"}
onClick={this.removeRecipe.bind(
this,
RecipeTypes.foregroundFills
)}
jssStyleSheet={{
actionTrigger: { padding: "6px" },
}}
/>
</div>
</p>
))}
</>
) : null}
{strokeRecipes.length ? (
<>
<p className="title inset">Border</p>
{strokeRecipes.map(recipe => (
<p className="applied-recipe" key={recipe.id}>
<td-swatch
circular
value={recipe.value}
orientation="horizontal"
type="border"
>
{recipe.name}
</td-swatch>
<div>
<span>
{recipe.value.replace("#", "")}
</span>
<ActionTrigger
glyph={detach}
appearance={
ActionTriggerAppearance.stealth
}
title={"Detach"}
aria-label={"Detach"}
onClick={this.removeRecipe.bind(
this,
RecipeTypes.strokeFills
)}
jssStyleSheet={{
actionTrigger: { padding: "6px" },
}}
/>
</div>
</p>
))}
</>
) : null}
</div>
<div>
{this.props.selectedNodes.some(node =>
node.supports.includes(RecipeTypes.backgroundFills)
) ? (
<>
<p className="title inset">Page backgrounds</p>
<div className="swatch-grid">
{this.pageBackgroundIds()
.map(id =>
this.recipeOptionsByType(
RecipeTypes.backgroundFills
).find(item => item.id === id)
)
.filter(
(recipe): recipe is RecipeData => !!recipe
)
.map(recipe => {
return (
<td-swatch
key={recipe.id}
value={recipe.value}
title={recipe.value}
interactive
selected={
!!this.recipeIsAssigned(
recipe.id
).length
}
onClick={this.setRecipe.bind(
this,
recipe.id,
recipe.type
)}
>
{recipe.name}
</td-swatch>
);
})}
</div>
<p className="title inset">Backgrounds and borders</p>
<div className="swatch-stack">
{this.recipeOptionsByType(
RecipeTypes.backgroundFills
)
.filter(
recipe =>
!this.pageBackgroundIds().includes(
recipe.id
)
)
.map(recipe => {
return (
<td-swatch
key={recipe.id}
circular
value={recipe.value}
title={recipe.value}
orientation="horizontal"
interactive
selected={
!!this.recipeIsAssigned(
recipe.id
).length
}
onClick={this.setRecipe.bind(
this,
recipe.id,
recipe.type
)}
>
{recipe.name}
</td-swatch>
);
})}
<Divider style={{ marginTop: 12 }} />
{this.recipeOptionsByType(RecipeTypes.strokeFills)
.filter(
recipe =>
!this.pageBackgroundIds().includes(
recipe.id
)
)
.map(recipe => {
return (
<td-swatch
key={recipe.id}
circular
value={recipe.value}
title={recipe.value}
orientation="horizontal"
interactive
type="border"
selected={
!!this.recipeIsAssigned(
recipe.id
).length
}
onClick={this.setRecipe.bind(
this,
recipe.id,
recipe.type
)}
>
{recipe.name}
</td-swatch>
);
})}
</div>
</>
) : null}
{this.props.selectedNodes.some(node =>
node.supports.includes(RecipeTypes.foregroundFills)
) ? (
<>
<p className="title inset">Foregrounds</p>
<div className="swatch-grid">
{this.recipeOptionsByType(
RecipeTypes.foregroundFills
).map(recipe => (
<td-swatch
key={recipe.id}
circular
value={recipe.value}
title={recipe.value}
interactive
selected={
!!this.recipeIsAssigned(recipe.id)
.length
}
onClick={this.setRecipe.bind(
this,
recipe.id,
recipe.type
)}
>
{recipe.name}
</td-swatch>
))}
</div>
</>
) : null}
</div>
</td-drawer>
<td-drawer name="Corner Radius">
{this.props.selectedNodes.some(node =>
node.supports.includes(RecipeTypes.cornerRadius)
) ? (
<div className="swatch-grid" style={{ marginTop: 8 }}>
{this.recipeOptionsByType(RecipeTypes.cornerRadius).map(
recipe => {
return (
<td-corner-radius
key={recipe.id}
value={recipe.value}
interactive
selected={
!!this.recipeIsAssigned(recipe.id)
.length
}
onClick={this.setRecipe.bind(
this,
recipe.id,
recipe.type
)}
>
{recipe.name}
</td-corner-radius>
);
}
)}
</div>
) : null}
{cornerRadiusRecipes.length ? (
<div slot="collapsed-content">
{cornerRadiusRecipes.map(recipe => (
<p className="applied-recipe" key={recipe.id}>
<td-corner-radius
value={recipe.value}
orientation="horizontal"
onClick={this.setRecipe.bind(
this,
recipe.id,
recipe.type
)}
>
{recipe.name}
</td-corner-radius>
<div>
<span>{recipe.value}</span>
<ActionTrigger
glyph={detach}
appearance={
ActionTriggerAppearance.stealth
}
title={"Detach"}
aria-label={"Detach"}
onClick={this.removeRecipe.bind(
this,
RecipeTypes.cornerRadius
)}
jssStyleSheet={{
actionTrigger: { padding: "6px" },
}}
/>
</div>
</p>
))}
</div>
) : null}
</td-drawer>
<button className="button">Export</button>
</div>
{this.renderFooter()}
</div>
);
}