ActionButtons in the MultiStepDialog should be managed by their actions

#3736

src/main/resources/assets/admin/common/js/ui/Action.ts

@@ -192,7 +192,10 @@ export class Action {
  }
 
  setClass(value: string): Action {
- this.cls = `${value}-action`;
+ if (value !== `${this.cls}-action`) {
+ this.cls = `${value}-action`;
+ this.notifyPropertyChanged();
+ }
  return this;
  }
 

src/main/resources/assets/admin/common/js/ui/dialog/multistep/MultiStepDialog.ts

@@ -34,9 +34,9 @@ export class MultiStepDialog
 
  protected headerContent: NamesAndIconView;
 
- private forwardButton: ActionButton;
+ private forwardAction: Action;
 
- private backButton: ActionButton;
+ private backAction: Action;
 
  private noStepsBlock?: Element;
 
@@ -47,8 +47,8 @@ export class MultiStepDialog
 
  this.steps = this.config.steps;
  this.stepsContainer = this.createStepsContainer();
- this.backButton = this.addAction(new Action(this.getBackButtonLabel()));
- this.forwardButton = this.addAction(new Action(this.getForwardButtonLabel()));
+ this.addAction(this.backAction = new Action(this.getBackButtonLabel()));
+ this.addAction(this.forwardAction = new Action(this.getForwardButtonLabel()));
  this.headerContent = this.createHeaderContent();
  }
 
@@ -79,13 +79,13 @@ export class MultiStepDialog
  this.handleHidden();
  });
 
- this.forwardButton.getAction().onExecuted(() => {
- if (this.forwardButton.isEnabled()) {
+ this.forwardAction.onExecuted(() => {
+ if (this.forwardAction.isEnabled()) {
  this.forwardOrSubmit();
  }
  });
 
- this.backButton.getAction().onExecuted(() => {
+ this.backAction.onExecuted(() => {
  this.showPreviousStep();
  });
 
@@ -209,7 +209,7 @@ export class MultiStepDialog
  }
 
  private updateForwardButtonLabel(): void {
- this.forwardButton.setLabel(this.getForwardButtonLabelDependingOnState());
+ this.forwardAction.setLabel(this.getForwardButtonLabelDependingOnState());
  }
 
  private getForwardButtonLabelDependingOnState(): string {
@@ -230,13 +230,13 @@ export class MultiStepDialog
 
  private updateForwardButtonEnabledState(): void {
  if (this.currentStep.isOptional()) {
- this.forwardButton.setEnabled(true);
+ this.forwardAction.setEnabled(true);
  } else {
- this.forwardButton.setEnabled(false);
+ this.forwardAction.setEnabled(false);
  this.lock();
 
  this.currentStep.isValid().then((isValid: boolean) => {
- this.forwardButton.setEnabled(isValid);
+ this.forwardAction.setEnabled(isValid);
  })
  .catch(DefaultErrorHandler.handle)
  .finally(() => this.unlock());
@@ -272,8 +272,8 @@ export class MultiStepDialog
  this.noStepsBlock = new DivEl('no-steps-block').setHtml(i18n('dialog.multistep.no.steps'));
  }
 
- this.backButton.hide();
- this.forwardButton.hide();
+ this.backAction.setVisible(false);
+ this.forwardAction.setVisible(false);
  this.appendChildToContentPanel(this.noStepsBlock);
  }
 
@@ -291,8 +291,8 @@ export class MultiStepDialog
  this.appendChildToHeader(this.headerContent);
  this.stepsContainer.addClass('steps-container');
  this.appendChildToContentPanel(this.stepsContainer);
- this.backButton.addClass('back');
- this.forwardButton.addClass('forward');
+ this.backAction.setClass('back');
+ this.forwardAction.setClass('forward');
 
  return rendered;
  });

src/main/resources/assets/admin/common/styles/api/app/browse/checkable-item.less

@@ -5,14 +5,12 @@
 
 .checkable-item-checkbox {
  display: flex;
- height: 24px;
 
  label {
  .icon();
  display: flex;
  justify-items: center;
  align-items: center;
- width: 24px;
  padding: 0;
  }
 
@@ -21,10 +19,12 @@
  background-image: none;
  }
 
- input[disabled]:checked + label::before {
- content: "\e370";
- font-size: 10px;
- line-height: 14px;
- margin-left: 1px;
+ input[disabled]:checked + label {
+ text-align: center;
+ &::before {
+ content: "\e370";
+ font-size: 10px;
+ line-height: 14px;
+ }
  }
 }

src/main/resources/assets/admin/common/styles/api/form/set/optionset/form-option-set-view.less

@@ -77,7 +77,7 @@
  max-width: initial;
 
  > input {
- height: 37px; // match the option to prevent height bounce
+ height: 45px; // match the option to prevent height bounce
  }
 
  > .@{_COMMON_PREFIX}dropdown-handle {

src/main/resources/assets/admin/common/styles/api/ui/button/dropdown-handle.less

@@ -3,7 +3,7 @@
  width: @input-height-big;
  border: 0;
  cursor: pointer;
- background-color: @admin-white;
+ background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;

src/main/resources/assets/admin/common/styles/api/ui/selector/dropdown/dropdown.less

@@ -8,7 +8,6 @@
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
- max-width: 540px;
  text-align: left;
 
  > input {

src/main/resources/assets/admin/common/styles/api/ui/selector/option-filter-input.less

@@ -1,4 +1,5 @@
 .option-filter-input {
+ height: 100%;
  background-color: @admin-white;
  padding: 4px 4px 4px 10px;
  box-sizing: border-box;