From 67ad043c618c5a8ed10f2a5f65ddfb8dc6c642ba Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Wed, 11 Aug 2021 11:39:21 +0200
Subject: [PATCH] Fix positioning of colour picker
[Ticket: #222]
---
.../cloud-configuration.component.html | 60 +++++++------------
.../cloud-configuration.component.scss | 6 +-
2 files changed, 25 insertions(+), 41 deletions(-)
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 af6b37c72..cea9b96d3 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
@@ -56,18 +56,14 @@
<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"
- [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>
- <div fxFlex="35px" class="color-box" [style.background]="cloudParameters.backgroundColor"></div>
+ <div fxLayout="column" fxLayoutGap="5px">
+ <mat-label>{{'tag-cloud-config.background' | translate}}</mat-label>
+ <input [value]="cloudParameters.backgroundColor"
+ [colorPicker]="cloudParameters.backgroundColor"
+ (colorPickerChange)="backgroundColorChanged($event)"
+ class="custom-color-picker"
+ [cpToggle]="true"
+ [cpDialogDisplay]="'inline'"/>
</div>
</div>
</div>
@@ -148,19 +144,14 @@
</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 fxLayout="column" fxLayoutGap="5px">
+ <mat-label>{{'tag-cloud-config.hover-color' | translate}}</mat-label>
+ <input [value]="cloudParameters.fontColor"
+ [colorPicker]="cloudParameters.fontColor"
+ (colorPickerChange)="fontColorChanged($event)"
+ [cpToggle]="true"
+ class="custom-color-picker"
+ [cpDialogDisplay]="'inline'"/>
</div>
</div>
<div class="input-row" fxLayout="column" fxLayoutGap="5px">
@@ -211,18 +202,13 @@
<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 fxLayout="column" fxLayoutGap="5px">
+ <mat-label>{{'tag-cloud-config.weight-color' | translate}}</mat-label>
+ <input [value]="weightClass.tagColor" [colorPicker]="weightClass.tagColor"
+ (colorPickerChange)="weightColorChanged(weightClasses.indexOf(weightClass), $event)"
+ class="custom-color-picker"
+ [cpToggle]="true"
+ [cpDialogDisplay]="'inline'"/>
</div>
</div>
<div class="input-row firstElementOfWeightClass" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column"
diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
index dee0da2ab..fed401a5e 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
@@ -158,10 +158,8 @@ mat-icon {
justify-content: center;
}
-::ng-deep.custom-color-picker {
- opacity: 0;
- z-index: -1;
- cursor: pointer;
+.custom-color-picker {
+ display: none;
}
.custom-color-picker-text {
--
GitLab