Merge branch 'tag-cloud-configuration' into 'staging'

Limit font selection

See merge request arsnova/topic-cloud!43

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html

 <div id="wholeDialog" class="drawer-container" fxLayout="column" fxLayoutGap="5px">
   <div class="cloud-configuration-form" fxLayout="column" *ngIf="!extendedView && !cleanUpView">
-    <h2>{{'tag-cloud-config.title' | translate}}</h2>
     <div class="input-row special-settings demo-cloud-settings" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
       <div class="input-row" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
         <mat-slide-toggle fxFlex (change)="parent.dataManager.demoActive = !parent.dataManager.demoActive"
@@ -10,10 +9,10 @@
     </div>
     <br>
     <mat-accordion id="accordion">
-      <mat-expansion-panel [expanded]="step == 0" (opened)="setStep(0)" class="matExpansionPanel" hideToggle>
+      <mat-expansion-panel [expanded]="step == 0" (opened)="setStep(0)" class="matExpansionPanel">
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <h3>{{'tag-cloud-config.general' | translate}}</h3>
+            <label class=" expansion-title settings-heading">{{'tag-cloud-config.general' | translate}}</label>
           </mat-panel-title>
         </mat-expansion-panel-header>
         <div class="input-row firstElementOfExpansionPanel" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
@@ -28,6 +27,7 @@
           <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>
@@ -59,6 +59,33 @@
             [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>
+      </mat-expansion-panel>
+      <mat-expansion-panel [expanded]="step == 1" (opened)="setStep(1)" class="matExpansionPanel">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <label class=" expansion-title settings-heading">{{'tag-cloud-config.font' | translate}}</label>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <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()" [(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>
+              <mat-option value="Indie Flower">Indie Flower</mat-option>
+              <mat-option value="Permanent Marker">Permanent Marker</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </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:"> 
+            <div><mat-slide-toggle value="italic" (change)="italicChecked($event)"[ngModelOptions]="{standalone: true}">{{'tag-cloud-config.font-style-italic' | translate}}</mat-slide-toggle> </div>
+            <div><mat-slide-toggle value="bold" (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>
@@ -76,12 +103,14 @@
           </mat-form-field>
         </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)="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 == 1" (opened)="setStep(1)" class="matExpansionPanel" hideToggle>
+        <mat-expansion-panel [expanded]="step == 2" (opened)="setStep(2)" class="matExpansionPanel">
           <mat-expansion-panel-header>
             <mat-panel-title>
-              <h3>{{'tag-cloud-config.hover-title' | translate}}</h3>
+              <label class=" expansion-title settings-heading">{{'tag-cloud-config.hover-title' | translate}}</label>
             </mat-panel-title>
           </mat-expansion-panel-header>
           <div>
@@ -121,17 +150,17 @@
             <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" hideToggle>
+      <mat-expansion-panel [expanded]="step == 3" (opened)="setStep(3)" class="matExpansionPanel">
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <h3>{{'tag-cloud-config.weight-class-settings' | translate}}</h3>
+            <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">
-            <h3 class="weight-class-heading">{{'tag-cloud-config.weight-class' | translate}} {{weightClasses.indexOf(weightClass) + 1}}</h3>
+            <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%">
@@ -170,8 +199,11 @@
     </mat-accordion>
     <br>
     <div class="button-row">
-      <button (click)="cancel()" mat-button class="secondary">{{'tag-cloud-config.cancel-btn' | translate}}</button>
-      <button (click)="save()" mat-button class="primary">{{'tag-cloud-config.save-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">
+      <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>

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss

-* {
-  color: var(--on-dialog);
-}
+// * {
+//   color: var(--on-dialog);
+// }
 
 h2{
   color: var(--on-dialog);
   font-size: 1.7rem;
 }
 
-h3 {
 
+.expansion-title{
   color: var(--primary);
   padding-bottom: 6px;
+  font-size: 1.2rem;
 }
 
 #commentSlider {
@@ -35,8 +36,8 @@ div {
   color: var(--on-secondary);
 }
 
-::ng-deep .mat-button {
-  min-width: 105px;
+.tag-config-button{
+  min-width: 135px;
 }
 
 .close-btn mat-icon{
@@ -146,15 +147,24 @@ mat-divider {
 }
 
 .button-row{
-  margin: auto auto 50px auto ;
+  width: 100%;
+  margin: auto auto 20px auto ;
+}
+.reset {
+  margin: 25px auto auto auto;
+  background-color: var(--white);
+  color: black;
+  width: 100%;
 }
-
 .cloud-configuration-form{
   width: 290px;
 }
 
 .drawer-container{
+  color: var(--on-dialog)!important;
   margin: 20px;
+  align-items: center;
+  justify-content: center;
 }
 
 ::ng-deep.custom-color-picker{
@@ -168,6 +178,11 @@ mat-divider {
   transform: translateY(-35px);
 }
 
+.settings-heading {
+  margin-left: 0;
+  margin-right: auto;
+}
+
 ::ng-deep.mat-drawer-backdrop.mat-drawer-shown{
   display: none;
 }
@@ -179,6 +194,8 @@ mat-divider {
 
 .weight-class-setting-content {
   border-top: 3px solid var(--primary);
+  padding-top: 20px;
+  padding-bottom: 15px;
 }
 
 .weight-class-heading {
@@ -207,6 +224,7 @@ mat-divider {
   border-top: none;
   border-bottom: 2px solid var(--primary);
   padding: 10px 0;
+  margin-bottom: 20px;
 }
 
 #rotation{
@@ -215,6 +233,7 @@ mat-divider {
 
 .matExpansionPanel{
   background-color: var(--dialog);
+  color: var(--on-dialog)!important;
   margin: 2px;
   padding: 5px;
 }
@@ -223,3 +242,6 @@ mat-divider {
   border-top: 2px solid var(--primary);
   padding-top: 10px;
 }
+.automatic-spelling{
+  padding-bottom: 30px;
+}

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts

@@ -26,7 +26,7 @@ export class CloudConfigurationComponent implements OnInit {
   alphabeticalSorting: boolean;
   rotation: number;
   highestWeight: number;
-  step:number = 0;
+  step:number = 10;
   weightClasses: WeightClass[] = [
     {
       maxTagNumber: 20,
@@ -143,6 +143,8 @@ export class CloudConfigurationComponent implements OnInit {
   valueChanged() {
     this.parseJsonToArrayWeightClasses();
     this.parent.setCloudParameters(this.cloudParameters, false);
+    console.log(this.cloudParameters);
+    
   }
 
   cancel() {
@@ -193,4 +195,20 @@ export class CloudConfigurationComponent implements OnInit {
     this.step--;
   }
 
+  reset(){
+    this.parent.resetColorsToTheme();
+    this.parent.configurationOpen = false;
+    this.cloudParameters = this.parent.currentCloudParameters;
+  }
+
+  italicChecked(event){
+    console.log(event.checked);
+    
+    event.checked == true ? this.cloudParameters.fontStyle = "italic" : this.cloudParameters.fontStyle = "normal";
+    this.valueChanged();
+  }
+  boldChecked(event){
+    event.checked == true ? this.cloudParameters.fontWeight = "bold" : this.cloudParameters.fontWeight = "normal";
+    this.valueChanged();
+  }
 }

src/app/components/shared/footer/footer.component.scss

@@ -195,11 +195,9 @@ mat-icon {
   padding:0px;
   margin:0px;
   margin-left:15px;
-  color:var(--on-dialog);
 }
 
 .title_bold{
-  color:rgba(0,0,0,0.9);
   font-weight:500;
 }
 

src/app/components/shared/header/header.component.scss

@@ -117,6 +117,15 @@ svg {
   * {
     background-color: transparent !important;
   }
+  *:hover {
+    color: var(--dialog);
+    background-color: var(--on-dialog) !important;
+
+    mat-icon{
+      color: var(--dialog);
+      background-color: var(--on-dialog) !important;
+    }
+  }
 }
 h1{
   color: red;

src/app/components/shared/tag-cloud/tag-cloud.component.html

+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Indie+Flower&family=Permanent+Marker&display=swap" rel="stylesheet">
 <ars-screen ars-flex-box>
   <mat-drawer-container class="spacyTagCloudContainer">
     <mat-drawer [(opened)]="configurationOpen" position="end" mode="over">

src/app/components/shared/tag-cloud/tag-cloud.component.scss

 $header-size: 67px;
 $margin: 15px;
 
-.mat-drawer.mat-drawer-push {
+mat-drawer,
+.mat-drawer {
   background-color: var(--background);
-}
 
-mat-drawer {
-  background-color: var(--dialog);
+  @media (max-width: 450px) {
+    width: 100vw;
+  }
+
 }
 
 ars-fill {

src/app/components/shared/tag-cloud/tag-cloud.component.ts

@@ -110,7 +110,7 @@ const getDefaultCloudParameters = (): CloudParameters => {
     {maxVisibleElements: -1, color: resDefaultColors[10], rotation: 0},
   ];
   return {
-    fontFamily: 'Helvetica,Arial,sans-serif',
+    fontFamily: 'Dancing Script',
     fontWeight: 'normal',
     fontStyle: 'normal',
     fontSize: '10px',
@@ -122,7 +122,7 @@ const getDefaultCloudParameters = (): CloudParameters => {
     hoverTime: 0.6,
     hoverDelay: 0.4,
     delayWord: 0,
-    randomAngles: false,
+    randomAngles: true,
     checkSpelling: true,
     sortAlphabetically: false,
     textTransform: CloudTextStyle.normal,
@@ -454,7 +454,7 @@ export class TagCloudComponent implements OnInit, AfterViewInit, OnDestroy {
       textTransform + ' font-family: ' + this._currentSettings.fontFamily + '; ' +
       'font-size: ' + this._currentSettings.fontSize + '; ' +
       'font-weight: ' + this._currentSettings.fontWeight + '; ' +
-      'font-style' + this._currentSettings.fontStyle + '; }');
+      'font-style:' + this._currentSettings.fontStyle + '; }');
     // custom spans
     const fontRange = (this._currentSettings.fontSizeMax - this._currentSettings.fontSizeMin) / 10;
     for (let i = 1; i <= 10; i++) {

src/assets/i18n/creator/de.json

@@ -342,8 +342,7 @@
     "preview": "Vorschau"
   },
   "tag-cloud-config":{
-    "title":"Tag-Cloud Einstellungen",
-    "general":"Allgemeine Einstellungen",
+    "general":"Allgemein",
     "overflow":"Überlauf",
     "height":"Höhe",
     "random-angle":"Zufallswinkel",
@@ -351,16 +350,15 @@
     "background":"Hintergrundfarbe",
     "word-delay":"Wortverzögerung",
     "hover-color":"Schriftfarbe",
-    "hover-scale":"Hover Skala",
-    "hover-time":"Hover Zeit",
-    "hover-title":"Hover Einstellungen",
-    "hover-delay":"Hover Verzögerung",
+    "hover-scale":"Fokus Skala",
+    "hover-time":"Fokus Zeit",
+    "hover-title":"Fokus",
+    "hover-delay":"Fokus Verzögerung",
     "cancel-btn":"Abbruch",
     "save-btn":"Speichern",
     "font-size-min":"Schriftgröße min",
     "font-size-max":"Schriftgröße max",
     "select-color": "Farbauswahl",
-
     "random-angle-tooltip": "Anordnung der Winkel zufällig generieren",
     "background-tooltip": "Auswahl der Hintergrundfarbe",
     "word-delay-tooltip": "Animationsverzögerung der Wörter",
@@ -370,18 +368,18 @@
     "hover-scale-tooltip": "Skallierung der Wörter beim Erscheinen",
     "hover-time-tooltip": "Festlegen der Erscheinungszeit der Wörter",
     "hover-delay-tooltip": "Hover-Verzögerung der Wörter",
-
-    "weight-class-settings": "Wichtigkeitsklasse Einstellungen",
-    "weight-class": "Wichtigkeitsklasse",
+    "weight-class-settings": "Relevanz-Gruppen",
+    "weight-class": "Relevanz-Gruppe",
     "back-btn": "Zurück",
     "weight-color": "Schriftfarbe",
     "weight-number": "max. Anzahl Schlüsselwörter",
     "weight-color-tooltip": "Auswahl der Schriftfarbe",
     "weight-number-tooltip": "maximale Anzahl der Schlüsselwörter festlegen",
-    "automatic-spelling": "Automatische Rechtschreibung",
+    "automatic-spelling": "Rechtschreibüberprüfung",
     "notation": "Notation:",
     "lowerCase": "Kleinschreibung",
-    "capitalization": "Großschreibung",
+    "capitalization": "Kapitälchen",
+    "upperCase": "Großschreibung",
     "standard": "Standard",
     "alphabetical-sorting": "Alphabetische Sortierung",
     "cleanUpView": "Tag-Cleanup Einstellungen",
@@ -392,6 +390,11 @@
     "alphabetical-sorting-tooltip": "Alphabetische Sortierung",
     "highestWeight-tooltip": "x Tags mit der höchsten Gewichtung anzeigen",
     "rotate-weight": "Einige Einträge dieser Klasse zufällig um x Grad drehen",
-    "rotate-weight-tooltip": "einige Einträge dieser Wichtigkeitsklassen zufällig um x Grad drehen"
+    "rotate-weight-tooltip": "einige Einträge dieser Wichtigkeitsklassen zufällig um x Grad drehen",
+    "font":"Schrift",
+    "reset-btn": "Zurücksetzten",
+    "font-style-bold" : "Fett",
+    "font-style-italic": "Kursiv",
+    "font-family":"Schrift Art"
   }
 }

src/assets/i18n/creator/en.json

@@ -343,8 +343,7 @@
     "preview": "Preview"
   },
   "tag-cloud-config":{
-    "title":"Tag-Cloud Options",
-    "general":"General Options",
+    "general":"General",
     "overflow":"Overflow",
     "height":"Height",
     "random-angle":"Randomize angle",
@@ -354,14 +353,13 @@
     "hover-color":"Font-color",
     "hover-scale":"Scale",
     "hover-time":"Hover time",
-    "hover-title":"Hover Options",
+    "hover-title":"Hover",
     "hover-delay":"Hover delay",
     "cancel-btn":"Cancel",
     "save-btn":"Save",
     "font-size-min":"Font size min",
     "font-size-max":"Font size max",
     "select-color": "Selected color",
-
     "random-angle-tooltip": "Generate angle randomly",
     "background-tooltip": "Select background-color",
     "word-delay-tooltip": "Select word-delay",
@@ -371,28 +369,33 @@
     "hover-scale-tooltip": "Select hover-scale",
     "hover-time-tooltip": "Select hover-time",
     "hover-delay-tooltip": "Select hover-delay",
-
-    "weight-class-settings": "Weight-class Settings",
-    "weight-class": "Weight class",
+    "weight-class-settings": "Weight-classes",
+    "weight-class": "Weight-class",
     "back-btn": "Back",
     "weight-color": "Font color",
     "weight-number": "max. number of keywords",
     "weight-color-tooltip": "Select font-color",
     "weight-number-tooltip": "Select maximal number of keywords",
-    "automatic-spelling": "Automatic spelling",
+    "automatic-spelling": "Spell check",
     "notation": "Notation:",
     "lowerCase": "Lower case",
     "capitalization": "Capitalization",
+    "upperCase": "Upper Case",
     "standard": "Standard",
     "alphabetical-sorting": "Alphabetical sorting",
     "cleanUpView": "Tag-Cleanup Settings",
     "rotation": "rotation of random entries",
     "highestWeight": "Number of tags with highest weight",
-    "automatic-spelling-tooltip": "automatic spelling check",
+    "automatic-spelling-tooltip": "spell check",
     "notation-tooltip": "Notation-Settings: small, large, standard",
     "alphabetical-sorting-tooltip": "Alphabetical sorting",
     "rotate-weight-tooltip": "Rotate some entries randomly by x degrees",
     "highestWeight-tooltip": "show x tags with the highest weight",
-    "rotate-weight": "Rotate some entries of this weight class randomly by x degrees"
+    "rotate-weight": "Rotate some entries of this weight class randomly by x degrees",
+    "font":"Font",
+    "reset-btn": "Reset",    
+    "font-style-bold" : "Bold",
+    "font-style-italic": "Italic",
+    "font-family":"Font Family"
   }
 }

src/assets/i18n/participant/de.json

@@ -305,8 +305,7 @@
     "read-less": "Weniger lesen"
   },
   "tag-cloud-config": {
-    "title": "Tag-Cloud Einstellungen",
-    "general": "Allgemeine Einstellungen",
+    "general": "Allgemein",
     "overflow": "Überlauf",
     "height": "Höhe",
     "random-angle": "Zufallswinkel",
@@ -314,10 +313,10 @@
     "background": "Hintergrundfarbe",
     "word-delay": "Wortverzögerung",
     "hover-color": "Schriftfarbe",
-    "hover-scale": "Hover Skala",
-    "hover-time": "Hover Zeit",
-    "hover-title": "Hover Einstellungen",
-    "hover-delay": "Hover Verzögerung",
+    "hover-scale": "Fokus Skala",
+    "hover-time": "Fokus Zeit",
+    "hover-title": "Fokus",
+    "hover-delay": "Fokus Verzögerung",
     "cancel-btn": "Abbruch",
     "save-btn": "Speichern",
     "font-size-min": "Schriftgröße min",
@@ -334,16 +333,17 @@
     "hover-delay-tooltip": "Hover-Verzögerung der Wörter",
     "extended-btn": "Wichtigkeitsklasse",
     "back-btn": "Zurück",
-    "weight-class-settings": "Wichtigkeitsklassen Einstellungen",
-    "weight-class": "Wichtigkeitsklasse",
+    "weight-class-settings": "Relevanz-Gruppen",
+    "weight-class": "Relevanz-Gruppe",
     "weight-color": "Schriftfarbe",
     "weight-number": "max. Anzahl Schlüsselwörter",
     "weight-color-tooltip": "Auswahl der Schriftfarbe",
     "weight-number-tooltip": "maximale Anzahl der Schlüsselwörter festlegen",
-    "automatic-spelling": "Automatische Rechtschreibung",
+    "automatic-spelling": "Rechtschreibüberprüfung",
     "notation": "Notation:",
     "lowerCase": "Kleinschreibung",
-    "capitalization": "Großschreibung",
+    "capitalization": "Kapitälchen",
+    "upperCase": "Großschreibung",
     "standard": "Standard",
     "alphabetical-sorting": "Alphabetische Sortierung",
     "cleanUpView": "Tag-Cleanup Einstellungen",
@@ -354,6 +354,11 @@
     "alphabetical-sorting-tooltip": "Alphabetische Sortierung",
     "highestWeight-tooltip": "x Tags mit der höchsten Gewichtung anzeigen",
     "rotate-weight": "Einige Einträge dieser Klasse zufällig um x Grad drehen",
-    "rotate-weight-tooltip": "einige Einträge dieser Wichtigkeitsklasse zufällig um x Grad drehen"
+    "rotate-weight-tooltip": "einige Einträge dieser Wichtigkeitsklasse zufällig um x Grad drehen",
+    "font":"Schrift",
+    "reset-btn": "Zurücksetzten",    
+    "font-style-bold" : "Fett",
+    "font-style-italic": "Kursiv",
+    "font-family":"Schrift Art"
   }
 }

src/assets/i18n/participant/en.json

@@ -311,8 +311,7 @@
     "read-less": "Read less"
   },
   "tag-cloud-config":{
-    "title":"Tag-Cloud Options",
-    "general":"General Options",
+    "general":"General",
     "overflow":"Overflow",
     "height":"Height",
     "random-angle":"Randomize angle",
@@ -322,7 +321,7 @@
     "hover-color":"Font-color",
     "hover-scale":"Scale",
     "hover-time":"Hover time",
-    "hover-title":"Hover Options",
+    "hover-title":"Hover",
     "hover-delay":"Hover delay",
     "cancel-btn":"Cancel",
     "save-btn":"Save",
@@ -339,17 +338,18 @@
     "hover-time-tooltip": "Select hover-time",
     "hover-delay-tooltip": "Select hover-delay",
     "extended-btn": "Weight classes",
-    "weight-class-settings": "Weight-class Settings",
-    "weight-class": "Weight class",
+    "weight-class-settings": "Weight-classes",
+    "weight-class": "Weight-class",
     "back-btn": "Back",
     "weight-color": "Font color",
     "weight-number": "max. number of keywords",
     "weight-color-tooltip": "Select font-color",
     "weight-number-tooltip": "Select maximal number of keywords",
-    "automatic-spelling": "Automatic spelling",
+    "automatic-spelling": "Spell check",
     "notation": "Notation:",
     "lowerCase": "Lower case",
     "capitalization": "Capitalization",
+    "upperCase": "Upper Case",
     "standard": "Standard",
     "alphabetical-sorting": "Alphabetical sorting",
     "cleanUpView": "Tag-Cleanup Settings",
@@ -360,6 +360,11 @@
     "alphabetical-sorting-tooltip": "Alphabetical sorting",
     "rotate-weight-tooltip": "Rotate some entries randomly by x degrees",
     "highestWeight-tooltip": "show x tags with the highest weight",
-    "rotate-weight": "Rotate some entries of this weight class randomly by x degrees"
+    "rotate-weight": "Rotate some entries of this weight class randomly by x degrees",
+    "font":"Font",
+    "reset-btn": "Reset",
+    "font-style-bold" : "Bold",
+    "font-style-italic": "Italic",
+    "font-family":"Font Family"
   }
 }

src/theme/dark-theme/_dark-theme.scss

@@ -28,3 +28,8 @@ a {
   background-color: var(--dialog) !important;
   color: var(--on-dialog) !important;
 }
+
+.mat-menu-panel .mat-menu-item:hover {
+  background-color: var(--on-dialog) !important;
+  color: var(--dialog) !important;
+}