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 0c699b126ee2fb8c432f122912a1b69699b70af9..18039f150dee84464badd35a2c166d182626a58d 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 @@ -1,5 +1,8 @@ <div id="wholeDialog" class="drawer-container" fxLayout="column" fxLayoutGap="5px"> - <div class="cloud-configuration-form" fxLayout="column"> + <div class="cloud-configuration-form" fxLayout="column" *ngIf="!extendedView"> + <div class="button-row"> + <button (click)="toggleExtendedView()" mat-button class="primary">{{'tag-cloud-config.extended-btn' | translate}}</button> + </div> <h2>{{'tag-cloud-config.title' | translate}}</h2> <h3>{{'tag-cloud-config.general' | translate}}</h3> <div class="input-row" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column"> @@ -85,4 +88,42 @@ <button (click)="save()" mat-button class="primary">{{'tag-cloud-config.save-btn' | translate}}</button> </div> </div> + <div class="cloud-configuration-form" fxLayout="column" *ngIf="extendedView"> + <div class="button-row"> + <button (click)="toggleExtendedView()" mat-button class="primary">{{'tag-cloud-config.extended-btn' | translate}}</button> + </div> + <h2>Extended View</h2> + <div class="input-row" fxLayout="column" fxLayoutGap="5px"> + <div fxLayout="row" fxLayoutGap="5px"> + <mat-form-field fxFlex="100%"> + <mat-label>{{'tag-cloud-config.weighting1' | translate}}</mat-label> + <input matInput [value]="cloudParameters.bweighting1Color" [colorPicker]="cloudParameters.weighting1Color" + (colorPickerChange)="weighting1ColorChanged($event)" class="custom-color-picker" /> + <p matTooltip="{{'tag-cloud-config.weighting1-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]="cloudParameters.weighting1Color"></div> + </div> + </div> + <div class="input-row" fxLayout="column" fxLayoutGap="5px"> + <!--mat-label class="label-text">{{'tag-cloud-config.weighting1' | translate}}</mat-label--> + <mat-slider #delaySlider min="0" max="10" step="1" [(ngModel)]="cloudParameters.weighting1" + [ngModelOptions]="{standalone: true}" (change)="valueChanged()" [thumbLabel]="true" + [value]="cloudParameters.weighting1" matTooltip="{{'tag-cloud-config.weighting1-tooltip' | translate}}"> + </mat-slider> + </div> + <div class="input-row" fxLayout="column" fxLayoutGap="5px"> + <div fxLayout="row" fxLayoutGap="5px"> + <mat-form-field fxFlex="100%"> + <mat-label>{{'tag-cloud-config.weighting2' | translate}}</mat-label> + <input matInput [value]="cloudParameters.weighting2Color" [colorPicker]="cloudParameters.weighting2Color" + (colorPickerChange)="weighting1ColorChanged($event)" class="custom-color-picker" /> + <p matTooltip="{{'tag-cloud-config.weighting2-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]="cloudParameters.weighting2Color"></div> + </div> + </div> + + </div> </div> \ No newline at end of file diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts index f52da628444f4c1f5cf4848dece62dbf9eb46a02..7887df9a468d763f572b901572b03534fabd6a45 100644 --- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts +++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts @@ -15,7 +15,8 @@ export class CloudConfigurationComponent implements OnInit{ @Input() parent: TagCloudComponent; cloudParameters: CloudParameters; defaultCloudParameters: CloudParameters; - oldCloudParameters: CloudParameters + oldCloudParameters: CloudParameters; + extendedView: boolean; constructor(private translateService: TranslateService) {} @@ -23,6 +24,7 @@ export class CloudConfigurationComponent implements OnInit{ this.translateService.use(localStorage.getItem('currentLang')); this.cloudParameters = this.parent.getCurrentCloudParameters(); this.defaultCloudParameters = this.parent.getCurrentCloudParameters(); + this.extendedView = false; } fontColorChanged(value: string){ @@ -49,4 +51,8 @@ export class CloudConfigurationComponent implements OnInit{ this.parent.configurationOpen = false; } + toggleExtendedView(){ + this.extendedView = !this.extendedView; + } + } diff --git a/src/app/components/shared/tag-cloud/weight-class.interface.ts b/src/app/components/shared/tag-cloud/weight-class.interface.ts new file mode 100644 index 0000000000000000000000000000000000000000..b01dcbefe42a6b115ff8aa14e13cc090fda56523 --- /dev/null +++ b/src/app/components/shared/tag-cloud/weight-class.interface.ts @@ -0,0 +1,6 @@ +export interface WeightClass{ + + maxTagNumber: number; + + tagColor: string; +} \ No newline at end of file diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json index b9e581e5c728f2d0d90489adec92f5a6b2165029..a0564756fef86182d250bee224f6f59724b12dcf 100644 --- a/src/assets/i18n/participant/de.json +++ b/src/assets/i18n/participant/de.json @@ -276,6 +276,9 @@ "select-color-tooltip": "Auswahl der Schriftfarbe", "hover-scale-tooltip": "Skallierung der Wörter beim Erscheinen", "hover-time-tooltip": "Festlegen der Erscheinungszeit der Wörter", - "hover-delay-tooltip": "Verzögerung der Wörter beim Erscheinen" + "hover-delay-tooltip": "Verzögerung der Wörter beim Erscheinen", + "extended-btn": "Ansicht", + "weighting1": "W1", + "weighting2": "W2" } }