From a3560066f297e5e6cc1e9bd5832d13e1e8eb30ff Mon Sep 17 00:00:00 2001
From: Tom Frederik Leimbrock <tom.leimbrock@mni.thm.de>
Date: Fri, 7 May 2021 21:51:47 +0200
Subject: [PATCH] styled matdrawer
---
.../cloud-configuration.component.html | 301 +++++++++---------
.../cloud-configuration.component.scss | 8 +-
.../shared/tag-cloud/tag-cloud.component.html | 2 +-
.../shared/tag-cloud/tag-cloud.component.scss | 8 +
4 files changed, 166 insertions(+), 153 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 6a663b473..593babb8e 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,45 +1,119 @@
-<div
- fxLayout="row"
- fxLayout.xs="column"
- fxLayout.sm="column"
- fxLayoutGap="15px"
+<div id="wholeDialog"
+ fxLayout="row"
+ fxLayout.xs="column"
+ fxLayout.sm="column"
+ fxLayoutGap="15px"
>
- <form [formGroup]="cloudConfigForm" fxLayout="column">
- <h2>{{'tag-cloud-config.title' | translate}}</h2>
+ <form [formGroup]="cloudConfigForm" fxLayout="column">
+ <h2>{{'tag-cloud-config.title' | translate}}</h2>
- <h3>{{'tag-cloud-config.general' | translate}}</h3>
- <div
+ <h3>{{'tag-cloud-config.general' | translate}}</h3>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ </div>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ <mat-slide-toggle fxFlex formControlName="realignOnResize"
+ >{{'tag-cloud-config.realign' | translate}}</mat-slide-toggle
+ >
+ <mat-slide-toggle fxFlex formControlName="randomizeAngle"
+ >{{'tag-cloud-config.random-angle' | translate}}</mat-slide-toggle
+ >
+ </div>
+
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ style="padding-top: 20px;"
+ >
+
+ </div>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayout.xs="column"
+ fxLayoutGap="20px"
+ >
+ <div fxFlex="48%" fxFlex.xs="100%">
+ <div fxLayout="row" fxLayoutGap="10px">
+ <mat-form-field fxFlex="80%">
+ <mat-label>{{'tag-cloud-config.background' | translate}}</mat-label>
+ <input
+ matInput
+ [colorPicker]="
+ cloudConfigForm.get('background').value
+ "
+ (colorPickerChange)="
+ cloudConfigForm
+ .get('background')
+ .setValue($event)
+ "
+ formControlName="background"
+ />
+ </mat-form-field>
+ <div
+ fxFlex="35px"
+ class="color-box"
+ [style.background]="
+ cloudConfigForm.get('background').value
+ "
+ ></div>
+ </div>
+ </div>
+
+ <div fxFlex="50%" fxFlex.xs="100%">
+ <mat-label class="label-text">{{'tag-cloud-config.word-delay' | translate}}</mat-label>
+ <mat-slider
+ min="0"
+ max="1000"
+ step="50"
+ formControlName="delay"
+ [thumbLabel]="true"
+ ></mat-slider>
+ </div>
+ </div>
+ <div
+ class="input-row"
+ fxLayout="row"
+ fxLayoutGap="20px"
+ fxLayout.xs="column"
+ >
+ <div
class="input-row"
fxLayout="row"
- fxLayoutGap="20px"
fxLayout.xs="column"
+ fxLayoutGap="20px"
>
- </div>
- <div
- class="input-row"
- fxLayout="row"
- fxLayoutGap="20px"
- fxLayout.xs="column"
- >
- <mat-slide-toggle fxFlex formControlName="realignOnResize"
- >{{'tag-cloud-config.realign' | translate}}</mat-slide-toggle
- >
- <mat-slide-toggle fxFlex formControlName="randomizeAngle"
- >{{'tag-cloud-config.random-angle' | translate}}</mat-slide-toggle
- >
- </div>
-
- <div
- class="input-row"
- fxLayout="row"
- fxLayoutGap="20px"
- fxLayout.xs="column"
- style="padding-top: 20px;"
- >
-
+ <div fxFlex="50%" fxFlex.xs="100%">
+ <mat-form-field fxFlex fxLayout.xs="column">
+ <mat-label>{{'tag-cloud-config.font-size' | translate}}</mat-label>
+ <input
+ matInput
+ type="number"
+ formControlName="font-size"
+ placeholder="font-size"
+ min="100"
+ max="150"
+ step="10"
+ />
+ </mat-form-field>
</div>
- <div
+ </div>
+ </div>
+ <h3>{{'tag-cloud-config.hover-title' | translate}}</h3>
+ <div formGroupName="zoomOnHover">
+ <div
class="input-row"
fxLayout="row"
fxLayout.xs="column"
@@ -48,150 +122,77 @@
<div fxFlex="48%" fxFlex.xs="100%">
<div fxLayout="row" fxLayoutGap="10px">
<mat-form-field fxFlex="80%">
- <mat-label>{{'tag-cloud-config.background' | translate}}</mat-label>
+ <mat-label>{{'tag-cloud-config.hover-color' | translate}}</mat-label>
<input
matInput
[colorPicker]="
- cloudConfigForm.get('background').value
- "
+ cloudConfigForm.get('zoomOnHover').get('color').value
+ "
(colorPickerChange)="
- cloudConfigForm
- .get('background')
- .setValue($event)
- "
- formControlName="background"
+ cloudConfigForm
+ .get('zoomOnHover')
+ .get('color')
+ .setValue($event)
+ "
+ formControlName="color"
/>
</mat-form-field>
<div
fxFlex="35px"
class="color-box"
[style.background]="
- cloudConfigForm.get('background').value
- "
+ cloudConfigForm.get('zoomOnHover').get('color').value
+ "
></div>
</div>
</div>
<div fxFlex="50%" fxFlex.xs="100%">
- <mat-label class="label-text">{{'tag-cloud-config.word-delay' | translate}}</mat-label>
+ <mat-label class="label-text">{{'tag-cloud-config.hover-scale' | translate}}</mat-label>
<mat-slider
- min="0"
- max="1000"
- step="50"
- formControlName="delay"
+ min="1"
+ max="2"
+ step="0.2"
+ formControlName="scale"
[thumbLabel]="true"
></mat-slider>
</div>
</div>
- <div
- class="input-row"
- fxLayout="row"
- fxLayoutGap="20px"
- fxLayout.xs="column"
- >
+
<div
class="input-row"
fxLayout="row"
fxLayout.xs="column"
fxLayoutGap="20px"
>
- <div fxFlex="50%" fxFlex.xs="100%">
- <mat-form-field fxFlex fxLayout.xs="column">
- <mat-label>{{'tag-cloud-config.font-size' | translate}}</mat-label>
- <input
- matInput
- type="number"
- formControlName="font-size"
- placeholder="font-size"
- min="100"
- max="150"
- step="10"
- />
- </mat-form-field>
+ <div fxFlex="50%" fxFlex.xs="100%">
+ <mat-label class="label-text">{{'tag-cloud-config.hover-time' | translate}}</mat-label>
+ <mat-slider
+ min="0"
+ max="2"
+ step="0.2"
+ formControlName="transitionTime"
+ [thumbLabel]="true"
+ ></mat-slider>
+ </div>
+ <div fxFlex="50%" fxFlex.xs="100%">
+ <mat-label class="label-text">{{'tag-cloud-config.hover-delay' | translate}}</mat-label>
+ <mat-slider
+ min="0"
+ max="2"
+ step="0.1"
+ formControlName="delay"
+ [thumbLabel]="true"
+ ></mat-slider>
</div>
</div>
</div>
- <h3>{{'tag-cloud-config.hover-title' | translate}}</h3>
- <div formGroupName="zoomOnHover">
- <div
- class="input-row"
- fxLayout="row"
- fxLayout.xs="column"
- fxLayoutGap="20px"
- >
- <div fxFlex="48%" fxFlex.xs="100%">
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field fxFlex="80%">
- <mat-label>{{'tag-cloud-config.hover-color' | translate}}</mat-label>
- <input
- matInput
- [colorPicker]="
- cloudConfigForm.get('zoomOnHover').get('color').value
- "
- (colorPickerChange)="
- cloudConfigForm
- .get('zoomOnHover')
- .get('color')
- .setValue($event)
- "
- formControlName="color"
- />
- </mat-form-field>
- <div
- fxFlex="35px"
- class="color-box"
- [style.background]="
- cloudConfigForm.get('zoomOnHover').get('color').value
- "
- ></div>
- </div>
- </div>
-
- <div fxFlex="50%" fxFlex.xs="100%">
- <mat-label class="label-text">{{'tag-cloud-config.hover-scale' | translate}}</mat-label>
- <mat-slider
- min="1"
- max="2"
- step="0.2"
- formControlName="scale"
- [thumbLabel]="true"
- ></mat-slider>
- </div>
- </div>
-
- <div
- class="input-row"
- fxLayout="row"
- fxLayout.xs="column"
- fxLayoutGap="20px"
- >
- <div fxFlex="50%" fxFlex.xs="100%">
- <mat-label class="label-text">{{'tag-cloud-config.hover-time' | translate}}</mat-label>
- <mat-slider
- min="0"
- max="2"
- step="0.2"
- formControlName="transitionTime"
- [thumbLabel]="true"
- ></mat-slider>
- </div>
- <div fxFlex="50%" fxFlex.xs="100%">
- <mat-label class="label-text">{{'tag-cloud-config.hover-delay' | translate}}</mat-label>
- <mat-slider
- min="0"
- max="2"
- step="0.1"
- formControlName="delay"
- [thumbLabel]="true"
- ></mat-slider>
- </div>
- </div>
- </div>
- <br>
- <div class="button-row">
- <button mat-button class="secondary">{{'tag-cloud-config.cancel-btn' | translate}}</button>
- <button mat-button class="primary">{{'tag-cloud-config.save-btn' | translate}}</button>
- </div>
- </form>
+ <br>
+ <div class="button-row">
+ <button mat-button class="secondary">{{'tag-cloud-config.cancel-btn' | translate}}</button>
+ <button mat-button class="primary">{{'tag-cloud-config.save-btn' | translate}}</button>
+ </div>
+ </form>
</div>
+i
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 cdfd946f3..092022593 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
@@ -1,9 +1,13 @@
+#wholeDialog {
+ margin: 10px;
+}
+
#commentSlider {
width: 100%;
}
-mat-drawer-container {
- background-color: var(--background);
+div {
+ margin: 10px;
}
.delete {
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.html b/src/app/components/shared/tag-cloud/tag-cloud.component.html
index fe2bee042..7513ffb07 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.html
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.html
@@ -37,7 +37,7 @@
</angular-tag-cloud>
</ars-fill>
- <ars-row [height]="100">
+ <ars-row [height]="500">
</ars-row>
</mat-drawer-content>
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.scss b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
index 3520bd22b..3de8fd082 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.scss
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
@@ -1,3 +1,11 @@
+mat-drawer-container {
+ background-color: var(--background);
+}
+
+mat-drawer {
+ background-color: var(--background);
+}
+
.config {
span {
display: none;
--
GitLab