Only show correct settings (#565)

* Only show correct settings

The logic to display which settings when nothing was selected was incorrect. This PR ensures that they are in sync.

I also removed all the <hr /> which after the redesigned just looked like weird empty spaces

* fix handling editing/text elements

Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Christopher Chedeau 2020-01-26 06:19:43 -08:00 committed by David Luzar
parent 2a87c7381b
commit 141b7409a2
2 changed files with 19 additions and 40 deletions

View file

@ -381,17 +381,10 @@ export class App extends React.Component<any, AppState> {
private renderSelectedShapeActions(elements: readonly ExcalidrawElement[]) {
const { t } = this.props;
const { elementType, editingElement } = this.state;
const selectedElements = elements.filter(el => el.isSelected);
const hasSelectedElements = selectedElements.length > 0;
const isTextToolSelected = elementType === "text";
const isShapeToolSelected = elementType !== "selection";
const isEditingText = editingElement && editingElement.type === "text";
if (
!hasSelectedElements &&
!isShapeToolSelected &&
!isTextToolSelected &&
!isEditingText
) {
const targetElements = editingElement
? [editingElement]
: elements.filter(el => el.isSelected);
if (!targetElements.length && elementType === "selection") {
return null;
}
@ -405,9 +398,8 @@ export class App extends React.Component<any, AppState> {
this.syncActionResult,
t,
)}
{(hasBackground(elements) ||
(isShapeToolSelected && !isTextToolSelected)) && (
{(hasBackground(elementType) ||
targetElements.some(element => hasBackground(element.type))) && (
<>
{this.actionManager.renderAction(
"changeBackgroundColor",
@ -424,12 +416,11 @@ export class App extends React.Component<any, AppState> {
this.syncActionResult,
t,
)}
<hr />
</>
)}
{(hasStroke(elements) ||
(isShapeToolSelected && !isTextToolSelected)) && (
{(hasStroke(elementType) ||
targetElements.some(element => hasStroke(element.type))) && (
<>
{this.actionManager.renderAction(
"changeStrokeWidth",
@ -446,11 +437,11 @@ export class App extends React.Component<any, AppState> {
this.syncActionResult,
t,
)}
<hr />
</>
)}
{(hasText(elements) || isTextToolSelected || isEditingText) && (
{(hasText(elementType) ||
targetElements.some(element => hasText(element.type))) && (
<>
{this.actionManager.renderAction(
"changeFontSize",
@ -467,7 +458,6 @@ export class App extends React.Component<any, AppState> {
this.syncActionResult,
t,
)}
<hr />
</>
)}