diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
index 67f579cc608c0f01ed2e0474cbd4232cd4b40f6b..af6b37c72506322ee8dfb1f746cef4dc72150cc5 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
@@ -4,7 +4,8 @@
<div class="input-row" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
<mat-slide-toggle fxFlex (change)="parent.dataManager.demoActive = !parent.dataManager.demoActive"
[checked]="parent.dataManager.demoActive"
- [ngModelOptions]="{standalone: true}">Demo Cloud</mat-slide-toggle>
+ [ngModelOptions]="{standalone: true}">Demo Cloud
+ </mat-slide-toggle>
</div>
</div>
<br>
@@ -16,31 +17,53 @@
</mat-panel-title>
</mat-expansion-panel-header>
<div class="input-row firstElementOfExpansionPanel" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
- <mat-slide-toggle matTooltip="{{'tag-cloud-config.random-angle-tooltip' | translate}}" (change)="valueChanged()" fxFlex [(ngModel)]="cloudParameters.randomAngles"
- [ngModelOptions]="{standalone: true}">{{'tag-cloud-config.random-angle' | translate}}</mat-slide-toggle>
- <mat-icon matTooltip="{{'tag-cloud-config.random-angle-note' | translate}}">help</mat-icon>
+ <mat-slide-toggle matTooltip="{{'tag-cloud-config.random-angle-tooltip' | translate}}"
+ (change)="valueChanged()" fxFlex [(ngModel)]="cloudParameters.randomAngles"
+ [ngModelOptions]="{standalone: true}">{{'tag-cloud-config.random-angle' | translate}}</mat-slide-toggle>
+ <mat-icon matTooltip="{{'tag-cloud-config.random-angle-note' | translate}}">help</mat-icon>
</div>
- <div class="input-row special-settings automatic-spelling" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
- <mat-radio-group matTooltip="{{'tag-cloud-config.notation-tooltip' | translate}}" aria-label="Notation:"> {{'tag-cloud-config.notation' | translate}}
- <div><mat-radio-button value="1" (change)="textStyleChanged(1)" [checked]="cloudParameters.textTransform == 1">{{'tag-cloud-config.lowerCase' | translate}}</mat-radio-button> </div>
- <div><mat-radio-button value="2" (change)="textStyleChanged(3)" [checked]="cloudParameters.textTransform == 3">{{'tag-cloud-config.upperCase' | translate}}</mat-radio-button> </div>
- <div><mat-radio-button value="2" (change)="textStyleChanged(2)" [checked]="cloudParameters.textTransform == 2">{{'tag-cloud-config.capitalization' | translate}}</mat-radio-button> </div>
- <div><mat-radio-button value="0" (change)="textStyleChanged(0)" [checked]="cloudParameters.textTransform == 0">{{'tag-cloud-config.standard' | translate}}</mat-radio-button> </div>
- </mat-radio-group>
- </div>
- <div class="input-row special-settings alphabetical-sorting" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
- <div class="input-row" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
- <mat-slide-toggle matTooltip="{{'tag-cloud-config.alphabetical-sorting-tooltip' | translate}}" [(ngModel)]="cloudParameters.sortAlphabetically" [checked]="cloudParameters.sortAlphabetically" [ngModelOptions]="{standalone: true}"(change)="valueChanged()">{{'tag-cloud-config.alphabetical-sorting' | translate}}</mat-slide-toggle>
+ <div class="input-row special-settings automatic-spelling" fxLayout="row" fxLayoutGap="5px"
+ fxLayout.xs="column">
+ <mat-radio-group matTooltip="{{'tag-cloud-config.notation-tooltip' | translate}}"
+ aria-label="Notation:"> {{'tag-cloud-config.notation' | translate}}
+ <div>
+ <mat-radio-button value="1" (change)="textStyleChanged(1)"
+ [checked]="cloudParameters.textTransform == 1">{{'tag-cloud-config.lowerCase' | translate}}</mat-radio-button>
+ </div>
+ <div>
+ <mat-radio-button value="2" (change)="textStyleChanged(3)"
+ [checked]="cloudParameters.textTransform == 3">{{'tag-cloud-config.upperCase' | translate}}</mat-radio-button>
+ </div>
+ <div>
+ <mat-radio-button value="2" (change)="textStyleChanged(2)"
+ [checked]="cloudParameters.textTransform == 2">{{'tag-cloud-config.capitalization' | translate}}</mat-radio-button>
</div>
+ <div>
+ <mat-radio-button value="0" (change)="textStyleChanged(0)"
+ [checked]="cloudParameters.textTransform == 0">{{'tag-cloud-config.standard' | translate}}</mat-radio-button>
+ </div>
+ </mat-radio-group>
+ </div>
+ <div class="input-row special-settings alphabetical-sorting" fxLayout="row" fxLayoutGap="5px"
+ fxLayout.xs="column">
+ <div class="input-row" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
+ <mat-slide-toggle matTooltip="{{'tag-cloud-config.alphabetical-sorting-tooltip' | translate}}"
+ [(ngModel)]="cloudParameters.sortAlphabetically"
+ [checked]="cloudParameters.sortAlphabetically" [ngModelOptions]="{standalone: true}"
+ (change)="valueChanged()">{{'tag-cloud-config.alphabetical-sorting' | translate}}</mat-slide-toggle>
</div>
+ </div>
<div style="margin: 10px;"></div>
<div class="input-row" fxLayout="column" fxLayoutGap="5px">
<div class="input-row" fxLayout="column" fxLayoutGap="5px">
<div fxLayout="row" fxLayoutGap="5px">
<mat-form-field fxFlex="100%">
<mat-label>{{'tag-cloud-config.background' | translate}}</mat-label>
- <input matInput [value]="cloudParameters.backgroundColor" [colorPicker]="cloudParameters.backgroundColor"
- (colorPickerChange)="backgroundColorChanged($event)" class="custom-color-picker" />
+ <input matInput [value]="cloudParameters.backgroundColor"
+ [colorPicker]="cloudParameters.backgroundColor"
+ (colorPickerChange)="backgroundColorChanged($event)"
+ class="custom-color-picker"
+ [cpPosition]="'left'"/>
<p matTooltip="{{'tag-cloud-config.background-tooltip' | translate}}" class="custom-color-picker-text">
{{'tag-cloud-config.select-color' | translate}}</p>
</mat-form-field>
@@ -51,12 +74,16 @@
<div class="input-row" fxLayout="column" fxLayoutGap="5px">
<mat-label class="label-text">{{'tag-cloud-config.word-delay' | translate}}</mat-label>
<mat-slider #delaySlider min="0" max="1000" step="50" [(ngModel)]="cloudParameters.delayWord"
- [ngModelOptions]="{standalone: true}" (change)="valueChanged()" [thumbLabel]="true"
- [value]="cloudParameters.delayWord" matTooltip="{{'tag-cloud-config.word-delay-tooltip' | translate}}">
+ [ngModelOptions]="{standalone: true}" (change)="valueChanged()" [thumbLabel]="true"
+ [value]="cloudParameters.delayWord"
+ matTooltip="{{'tag-cloud-config.word-delay-tooltip' | translate}}">
</mat-slider>
</div>
<mat-action-row>
- <button mat-icon-button (click)="nextStep()"><mat-icon>expand_more</mat-icon></button> </mat-action-row>
+ <button mat-icon-button (click)="nextStep()">
+ <mat-icon>expand_more</mat-icon>
+ </button>
+ </mat-action-row>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="step == 1" (opened)="setStep(1)" class="matExpansionPanel">
<mat-expansion-panel-header>
@@ -67,7 +94,9 @@
<div class="input-row" fxLayout="column" fxLayoutGap="5px">
<mat-form-field appearance="fill">
<mat-label>{{'tag-cloud-config.font-family' | translate}}</mat-label>
- <mat-select (selectionChange)="valueChanged()" matTooltip="{{'tag-cloud-config.font-family-tooltip' | translate}}" [(ngModel)]="cloudParameters.fontFamily">
+ <mat-select (selectionChange)="valueChanged()"
+ matTooltip="{{'tag-cloud-config.font-family-tooltip' | translate}}"
+ [(ngModel)]="cloudParameters.fontFamily">
<mat-option value="sans-serif">Normal</mat-option>
<mat-option value="Abril Fatface">Abril Fatface</mat-option>
<mat-option value="Dancing Script">Dancing Script</mat-option>
@@ -76,134 +105,176 @@
</mat-select>
</mat-form-field>
</div>
- <div class="input-row special-settings automatic-spelling" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
+ <div class="input-row special-settings automatic-spelling" fxLayout="row" fxLayoutGap="5px"
+ fxLayout.xs="column">
<mat-radio-group matTooltip="{{'tag-cloud-config.bold-notation-tooltip' | translate}}" aria-label="Notation:">
- <div><mat-slide-toggle [checked]="checkBold()" (change)="boldChecked($event)" [ngModelOptions]="{standalone: true}">{{'tag-cloud-config.font-style-bold' | translate}}</mat-slide-toggle> </div>
+ <div>
+ <mat-slide-toggle [checked]="checkBold()" (change)="boldChecked($event)"
+ [ngModelOptions]="{standalone: true}">{{'tag-cloud-config.font-style-bold' | translate}}</mat-slide-toggle>
+ </div>
</mat-radio-group>
</div>
<div class="input-row" fxLayout="column" fxLayoutGap="5px">
<mat-form-field fxFlex fxLayout.xs="column">
<mat-label>{{'tag-cloud-config.font-size-min' | translate}}</mat-label>
<input #minFont [value]="cloudParameters.fontSizeMin.toString()" matInput type="number"
- [(ngModel)]="cloudParameters.fontSizeMin" [ngModelOptions]="{standalone: true}" (change)="calcMaxFont($event,true)"
- min="50" max="300" step="10" matTooltip="{{'tag-cloud-config.font-size-min-tooltip' | translate}}" />
+ [(ngModel)]="cloudParameters.fontSizeMin" [ngModelOptions]="{standalone: true}"
+ (change)="calcMaxFont($event,true)"
+ min="50" max="300" step="10" matTooltip="{{'tag-cloud-config.font-size-min-tooltip' | translate}}"/>
</mat-form-field>
</div>
<div class="input-row" fxLayout="column" fxLayoutGap="5px">
<mat-form-field fxFlex fxLayout.xs="column">
<mat-label>{{'tag-cloud-config.font-size-max' | translate}}</mat-label>
<input #maxFont matInput type="number" [(ngModel)]="MaxFont" [value]="MaxFont.toString()"
- [ngModelOptions]="{standalone: true}" (change)="calcMaxFont($event,false)" min="1" max="10" step="1"
- matTooltip="{{'tag-cloud-config.font-size-max-tooltip' | translate}}" />
+ [ngModelOptions]="{standalone: true}" (change)="calcMaxFont($event,false)" min="1" max="10" step="1"
+ matTooltip="{{'tag-cloud-config.font-size-max-tooltip' | translate}}"/>
</mat-form-field>
</div>
<mat-action-row>
- <button mat-icon-button (click)="prevStep()"><mat-icon>expand_less</mat-icon></button>
- <button mat-icon-button (click)="nextStep()"><mat-icon>expand_more</mat-icon></button>
+ <button mat-icon-button (click)="prevStep()">
+ <mat-icon>expand_less</mat-icon>
+ </button>
+ <button mat-icon-button (click)="nextStep()">
+ <mat-icon>expand_more</mat-icon>
+ </button>
</mat-action-row>
</mat-expansion-panel>
- <mat-expansion-panel [expanded]="step == 2" (opened)="setStep(2)" class="matExpansionPanel">
- <mat-expansion-panel-header>
- <mat-panel-title>
- <label class=" expansion-title settings-heading">{{'tag-cloud-config.hover-title' | translate}}</label>
- </mat-panel-title>
- </mat-expansion-panel-header>
- <div>
- <div class="input-row firstElementOfExpansionPanel" fxLayout="column" fxLayoutGap="5px">
- <div fxLayout="row" fxLayoutGap="5px">
- <mat-form-field fxFlex="100%">
- <mat-label>{{'tag-cloud-config.hover-color' | translate}}</mat-label>
- <input matInput [value]="cloudParameters.fontColor" [colorPicker]="cloudParameters.fontColor"
- (colorPickerChange)="fontColorChanged($event)" class="custom-color-picker" />
- <p class="custom-color-picker-text" matTooltip="{{'tag-cloud-config.select-color-tooltip' | translate}}">
- {{'tag-cloud-config.select-color' | translate}}</p>
- </mat-form-field>
- <div fxFlex="35px" class="color-box" [style.background]="cloudParameters.fontColor"></div>
- </div>
- </div>
- <div class="input-row" fxLayout="column" fxLayoutGap="5px">
- <mat-label class="label-text">{{'tag-cloud-config.hover-scale' | translate}}</mat-label>
- <mat-slider #hoverScaleSlider [value]="cloudParameters.hoverScale" min="1" max="10" step="0.2"
- [(ngModel)]="cloudParameters.hoverScale" [ngModelOptions]="{standalone: true}" (change)="valueChanged()"
- [thumbLabel]="true" matTooltip="{{'tag-cloud-config.hover-scale-tooltip' | translate}}"></mat-slider>
- </div>
- <div class="input-row" fxLayout="column" fxLayoutGap="5px">
- <mat-label class="label-text">{{'tag-cloud-config.hover-time' | translate}}</mat-label>
- <mat-slider #transitonSlider [value]="cloudParameters.hoverTime" min="0" max="2" step="0.2"
- [(ngModel)]="cloudParameters.hoverTime" [ngModelOptions]="{standalone: true}" (change)="valueChanged()"
- [thumbLabel]="true" matTooltip="{{'tag-cloud-config.hover-time-tooltip' | translate}}"></mat-slider>
- </div>
- <div class="input-row" fxLayout="column" fxLayoutGap="5px">
- <mat-label class="label-text">{{'tag-cloud-config.hover-delay' | translate}}</mat-label>
- <mat-slider #hoverDelaySlider [value]="cloudParameters.hoverDelay" min="0" max="2" step="0.1"
- [(ngModel)]="cloudParameters.hoverDelay" [ngModelOptions]="{standalone: true}" (change)="valueChanged()"
- [thumbLabel]="true" matTooltip="{{'tag-cloud-config.hover-delay-tooltip' | translate}}"></mat-slider>
+ <mat-expansion-panel [expanded]="step == 2" (opened)="setStep(2)" class="matExpansionPanel">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <label class=" expansion-title settings-heading">{{'tag-cloud-config.hover-title' | translate}}</label>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+ <div>
+ <div class="input-row firstElementOfExpansionPanel" fxLayout="column" fxLayoutGap="5px">
+ <div fxLayout="row" fxLayoutGap="5px">
+ <mat-form-field fxFlex="100%">
+ <mat-label>{{'tag-cloud-config.hover-color' | translate}}</mat-label>
+ <input matInput [value]="cloudParameters.fontColor"
+ [colorPicker]="cloudParameters.fontColor"
+ (colorPickerChange)="fontColorChanged($event)"
+ class="custom-color-picker"
+ [cpPosition]="'left'"/>
+ <p class="custom-color-picker-text"
+ matTooltip="{{'tag-cloud-config.select-color-tooltip' | translate}}">
+ {{'tag-cloud-config.select-color' | translate}}</p>
+ </mat-form-field>
+ <div fxFlex="35px" class="color-box" [style.background]="cloudParameters.fontColor"></div>
</div>
</div>
- <mat-action-row>
- <button mat-icon-button (click)="prevStep()"><mat-icon>expand_less</mat-icon></button>
- <button mat-icon-button (click)="nextStep()"><mat-icon>expand_more</mat-icon></button>
- </mat-action-row>
+ <div class="input-row" fxLayout="column" fxLayoutGap="5px">
+ <mat-label class="label-text">{{'tag-cloud-config.hover-scale' | translate}}</mat-label>
+ <mat-slider #hoverScaleSlider [value]="cloudParameters.hoverScale" min="1" max="10" step="0.2"
+ [(ngModel)]="cloudParameters.hoverScale" [ngModelOptions]="{standalone: true}"
+ (change)="valueChanged()"
+ [thumbLabel]="true"
+ matTooltip="{{'tag-cloud-config.hover-scale-tooltip' | translate}}"></mat-slider>
+ </div>
+ <div class="input-row" fxLayout="column" fxLayoutGap="5px">
+ <mat-label class="label-text">{{'tag-cloud-config.hover-time' | translate}}</mat-label>
+ <mat-slider #transitonSlider [value]="cloudParameters.hoverTime" min="0" max="2" step="0.2"
+ [(ngModel)]="cloudParameters.hoverTime" [ngModelOptions]="{standalone: true}"
+ (change)="valueChanged()"
+ [thumbLabel]="true"
+ matTooltip="{{'tag-cloud-config.hover-time-tooltip' | translate}}"></mat-slider>
+ </div>
+ <div class="input-row" fxLayout="column" fxLayoutGap="5px">
+ <mat-label class="label-text">{{'tag-cloud-config.hover-delay' | translate}}</mat-label>
+ <mat-slider #hoverDelaySlider [value]="cloudParameters.hoverDelay" min="0" max="2" step="0.1"
+ [(ngModel)]="cloudParameters.hoverDelay" [ngModelOptions]="{standalone: true}"
+ (change)="valueChanged()"
+ [thumbLabel]="true"
+ matTooltip="{{'tag-cloud-config.hover-delay-tooltip' | translate}}"></mat-slider>
+ </div>
+ </div>
+ <mat-action-row>
+ <button mat-icon-button (click)="prevStep()">
+ <mat-icon>expand_less</mat-icon>
+ </button>
+ <button mat-icon-button (click)="nextStep()">
+ <mat-icon>expand_more</mat-icon>
+ </button>
+ </mat-action-row>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="step == 3" (opened)="setStep(3)" class="matExpansionPanel">
<mat-expansion-panel-header>
<mat-panel-title>
- <label class=" expansion-title settings-heading">{{'tag-cloud-config.weight-class-settings' | translate}}</label>
+ <label
+ class=" expansion-title settings-heading">{{'tag-cloud-config.weight-class-settings' | translate}}</label>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="input-row" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
- <div class="cloud-configuration-form" fxLayout="column">
- <div *ngFor="let weightClass of weightClasses" class="weight-class-setting">
- <div class ="weight-class-setting-content">
- <label class=" expansion-title weight-class-heading">{{'tag-cloud-config.weight-class' | translate}} {{weightClasses.indexOf(weightClass) + 1}}</label>
- <div class="input-row" fxLayout="column" fxLayoutGap="5px">
- <div fxLayout="row" fxLayoutGap="5px">
- <mat-form-field fxFlex="100%">
- <mat-label>{{'tag-cloud-config.weight-color' | translate}}</mat-label>
- <input matInput [value]="weightClass.tagColor" [colorPicker]="weightClass.tagColor"
- (colorPickerChange)="weightColorChanged(weightClasses.indexOf(weightClass), $event)" class="custom-color-picker" />
- <p matTooltip="{{'tag-cloud-config.weight-color-tooltip' | translate}}" class="custom-color-picker-text">
- {{'tag-cloud-config.select-color' | translate}}</p>
- </mat-form-field>
- <div fxFlex="35px" class="color-box" [style.background]="weightClass.tagColor"></div>
+ <div class="cloud-configuration-form" fxLayout="column">
+ <div *ngFor="let weightClass of weightClasses" class="weight-class-setting">
+ <div class="weight-class-setting-content">
+ <label
+ class=" expansion-title weight-class-heading">{{'tag-cloud-config.weight-class' | translate}} {{weightClasses.indexOf(weightClass) + 1}}</label>
+ <div class="input-row" fxLayout="column" fxLayoutGap="5px">
+ <div fxLayout="row" fxLayoutGap="5px">
+ <mat-form-field fxFlex="100%">
+ <mat-label>{{'tag-cloud-config.weight-color' | translate}}</mat-label>
+ <input matInput [value]="weightClass.tagColor" [colorPicker]="weightClass.tagColor"
+ (colorPickerChange)="weightColorChanged(weightClasses.indexOf(weightClass), $event)"
+ class="custom-color-picker"
+ [cpPosition]="'left'"/>
+ <p matTooltip="{{'tag-cloud-config.weight-color-tooltip' | translate}}"
+ class="custom-color-picker-text">
+ {{'tag-cloud-config.select-color' | translate}}</p>
+ </mat-form-field>
+ <div fxFlex="35px" class="color-box" [style.background]="weightClass.tagColor"></div>
+ </div>
</div>
- </div>
- <div class="input-row firstElementOfWeightClass" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column" *ngIf="weightClass.actualTagNumber > 0 && !parent.dataManager.demoActive">
- <mat-slide-toggle matTooltip="{{'tag-cloud-config.manual-weight-number-tooltip' | translate}}" (change)="valueChanged()" fxFlex [(ngModel)]=" weightClass.allowManualTagNumber"
- [ngModelOptions]="{standalone: true}">{{'tag-cloud-config.manual-weight-number' | translate}}</mat-slide-toggle>
+ <div class="input-row firstElementOfWeightClass" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column"
+ *ngIf="weightClass.actualTagNumber > 0 && !parent.dataManager.demoActive">
+ <mat-slide-toggle matTooltip="{{'tag-cloud-config.manual-weight-number-tooltip' | translate}}"
+ (change)="valueChanged()" fxFlex [(ngModel)]=" weightClass.allowManualTagNumber"
+ [ngModelOptions]="{standalone: true}">{{'tag-cloud-config.manual-weight-number' | translate}}</mat-slide-toggle>
<mat-icon matTooltip="{{'tag-cloud-config.manual-weight-number-note' | translate}}">help</mat-icon>
- </div>
- <div class="input-row" fxLayout="column" fxLayoutGap="5px" *ngIf="weightClass.actualTagNumber > 0 && !parent.dataManager.demoActive && weightClass.allowManualTagNumber">
- <div class="input-row" fxLayout="column" fxLayoutGap="5px">
- <mat-label class="label-text" >{{'tag-cloud-config.weight-number' | translate}}</mat-label>
- <mat-slider [value]="weightClass.maxTagNumber" min="1" [max]="weightClass.actualTagNumber" step="1"
- [(ngModel)]="weightClass.maxTagNumber" [ngModelOptions]="{standalone: true}" (change)="valueChanged()"
- [thumbLabel]="true" matTooltip="{{'tag-cloud-config.weight-number-tooltip' | translate}}"></mat-slider>
- </div>
- </div>
- <div class="input-row" fxLayout="column" fxLayoutGap="5px" *ngIf="!cloudParameters.randomAngles">
- <mat-label class="label-text">{{'tag-cloud-config.rotate-weight' | translate}}</mat-label>
- <mat-slider [value]="weightClass.rotationAngle" min="-180" max="180" step="1"
- [(ngModel)]="weightClass.rotationAngle" [ngModelOptions]="{standalone: true}" (change)="valueChanged()"
- [thumbLabel]="true" matTooltip="{{'tag-cloud-config.rotate-weight-tooltip' | translate}}"></mat-slider>
+ </div>
+ <div class="input-row" fxLayout="column" fxLayoutGap="5px"
+ *ngIf="weightClass.actualTagNumber > 0 && !parent.dataManager.demoActive && weightClass.allowManualTagNumber">
+ <div class="input-row" fxLayout="column" fxLayoutGap="5px">
+ <mat-label class="label-text">{{'tag-cloud-config.weight-number' | translate}}</mat-label>
+ <mat-slider [value]="weightClass.maxTagNumber" min="1" [max]="weightClass.actualTagNumber" step="1"
+ [(ngModel)]="weightClass.maxTagNumber" [ngModelOptions]="{standalone: true}"
+ (change)="valueChanged()"
+ [thumbLabel]="true"
+ matTooltip="{{'tag-cloud-config.weight-number-tooltip' | translate}}"></mat-slider>
+ </div>
+ </div>
+ <div class="input-row" fxLayout="column" fxLayoutGap="5px" *ngIf="!cloudParameters.randomAngles">
+ <mat-label class="label-text">{{'tag-cloud-config.rotate-weight' | translate}}</mat-label>
+ <mat-slider [value]="weightClass.rotationAngle" min="-180" max="180" step="1"
+ [(ngModel)]="weightClass.rotationAngle" [ngModelOptions]="{standalone: true}"
+ (change)="valueChanged()"
+ [thumbLabel]="true"
+ matTooltip="{{'tag-cloud-config.rotate-weight-tooltip' | translate}}"></mat-slider>
+ </div>
</div>
</div>
</div>
</div>
- </div>
<mat-action-row>
- <button mat-icon-button (click)="prevStep()"><mat-icon>expand_less</mat-icon></button>
- <button class="close-btn" mat-icon-button (click)="nextStep()"><mat-icon>close</mat-icon></button>
+ <button mat-icon-button (click)="prevStep()">
+ <mat-icon>expand_less</mat-icon>
+ </button>
+ <button class="close-btn" mat-icon-button (click)="nextStep()">
+ <mat-icon>close</mat-icon>
+ </button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
<br>
<div class="button-row">
- <button (click)="reset()" mat-button class="reset tag-config-button" >{{'tag-cloud-config.reset-btn' | translate}}</button>
+ <button (click)="reset()" mat-button
+ class="reset tag-config-button">{{'tag-cloud-config.reset-btn' | translate}}</button>
</div>
<div class="button-row save-or-cancel">
- <button (click)="cancel()" mat-button class="secondary tag-config-button">{{'tag-cloud-config.cancel-btn' | translate}}</button>
- <button (click)="save()" mat-button class="primary tag-config-button">{{'tag-cloud-config.save-btn' | translate}}</button>
+ <button (click)="cancel()" mat-button
+ class="secondary tag-config-button">{{'tag-cloud-config.cancel-btn' | translate}}</button>
+ <button (click)="save()" mat-button
+ class="primary tag-config-button">{{'tag-cloud-config.save-btn' | translate}}</button>
</div>
</div>
</div>