Merge pull request #5083 from GabrielInTheWorld/hintsForTheWin

Replaces the question-marks in config with hints

client/src/app/site/config/components/config-field/config-field.component.html

@@ -38,11 +38,14 @@
                         [type]="formType(configItem.inputType)"
                     />
                 </ng-template>
+
+                <mat-hint *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</mat-hint>
             </mat-form-field>
 
             <div class="config-form-group" *ngIf="isExcludedType(configItem.inputType)">
                 <div *ngIf="configItem.inputType === 'boolean'">
                     <mat-checkbox formControlName="value">{{ configItem.label | translate }}</mat-checkbox>
+                    <div class="hint" *ngIf="configItem.helpText">{{ configItem.helpText | translate }}</div>
                     <div class="error" *ngIf="error">{{ error }}</div>
                 </div>
 
@@ -90,7 +93,9 @@
                             <input matInput [format]="24" formControlName="time" [ngxTimepicker]="timepicker" />
                             <div class="suffix-wrapper" matSuffix>
                                 <mat-icon class="red-warning-text" *ngIf="updateSuccessIcon">error</mat-icon>
-                                <ngx-material-timepicker-toggle [for]="timepicker"></ngx-material-timepicker-toggle>
+                                <ngx-material-timepicker-toggle [for]="timepicker">
+                                    <mat-icon ngxMaterialTimepickerToggleIcon>access_time</mat-icon>
+                                </ngx-material-timepicker-toggle>
                             </div>
                             <mat-error *ngIf="error"> {{ error }} </mat-error>
                             <ngx-material-timepicker #timepicker></ngx-material-timepicker>
@@ -114,9 +119,4 @@
             </div>
         </form>
     </div>
-    <div class="reset-button">
-        <button mat-icon-button *ngIf="configItem.helpText" matTooltip="{{ configItem.helpText | translate }}">
-            <mat-icon>help_outline</mat-icon>
-        </button>
-    </div>
 </div>

client/src/app/site/config/components/config-field/config-field.component.scss

@@ -1,47 +1,3 @@
-/* Full width form fields */
-.mat-form-field {
-    width: 100%;
-}
-
-.datetimepicker-container {
-    margin-left: -20px;
-
-    .mat-form-field {
-        width: 50%;
-        box-sizing: border-box;
-        padding-left: 20px;
-
-        .suffix-wrapper {
-            display: flex;
-            align-items: center;
-
-            .mat-datepicker-toggle {
-                padding-left: 4px;
-                padding-right: 4px;
-
-                .mat-datepicker-toggle-default-icon {
-                    width: 20px;
-                    margin-bottom: 10px;
-                }
-            }
-
-            .ngx-material-timepicker-toggle {
-                width: 28px;
-            }
-        }
-    }
-}
-
-/* limit the color bar of color inputs */
-input[type='color'] {
-    max-width: 100px;
-}
-
-/* Spacing between config entries */
-.config-form-group {
-    margin-bottom: 15px;
-}
-
 .config-field-wrapper {
     width: 100%;
     display: flex;
@@ -49,9 +5,58 @@ input[type='color'] {
     .form-item {
         flex: 2;
     }
-    .reset-button {
+
-        max-width: 30px;
+    .mat-form-field {
-        width: 30px;
+        .mat-form-field-subscript-wrapper {
-        flex: 1;
+            position: static;
+        }
+        .mat-form-field-underline {
+            display: none;
+        }
+    }
+
+    /* Full width form fields */
+    .mat-form-field {
+        width: 100%;
+    }
+
+    .datetimepicker-container {
+        margin-left: -20px;
+        display: flex;
+
+        .mat-form-field {
+            flex: 1;
+            box-sizing: border-box;
+            padding-left: 20px;
+
+            .suffix-wrapper {
+                display: flex;
+                align-items: center;
+
+                .mat-datepicker-toggle {
+                    padding-left: 4px;
+                    padding-right: 4px;
+
+                    .mat-datepicker-toggle-default-icon {
+                        width: 20px;
+                        margin-bottom: 10px;
+                    }
+                }
+
+                .ngx-material-timepicker-toggle {
+                    width: 28px;
+                }
+            }
+        }
+    }
+
+    /* limit the color bar of color inputs */
+    input[type='color'] {
+        max-width: 100px;
+    }
+
+    /* Spacing between config entries */
+    .config-form-group {
+        margin-bottom: 15px;
     }
 }

client/src/app/site/config/components/config-field/config-field.component.scss-theme.scss

@@ -0,0 +1,23 @@
+@import '~@angular/material/theming';
+
+@mixin os-config-field-style($theme) {
+    $foreground: map-get($theme, foreground);
+
+    $is-dark-theme: map-get($theme, is-dark);
+
+    .config-field-wrapper {
+        .mat-form-field {
+            .mat-form-field-flex {
+                border-bottom: 1px solid mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+            }
+        }
+
+        .datetimepicker-container {
+            .ngx-material-timepicker-toggle {
+                mat-icon {
+                    color: mat-color($foreground, icon);
+                }
+            }
+        }
+    }
+}

client/src/assets/styles/global-components-style.scss

@@ -11,6 +11,8 @@
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
+    $is-dark-theme: map-get($theme, is-dark);
+
     h1,
     h3.accent {
         color: mat-color($primary);
@@ -39,6 +41,14 @@
         background: mat-color($background, background);
     }
 
+    .underline {
+        border-bottom: 1px solid mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+    }
+
+    .hint {
+        color: mat-color($foreground, secondary-text);
+    }
+
     /* Custom hint and error classes. Same values as .mat-hint and -mat-error */
     .hint,
     .error {

client/src/styles.scss

@@ -24,6 +24,7 @@
 @import './app/site/common/components/super-search/super-search.component.scss';
 @import './app/shared/components/rounded-input/rounded-input.component.scss';
 @import './app/shared/components/meta-text-block/meta-text-block.component.scss';
+@import './app/site/config/components/config-field/config-field.component.scss-theme.scss';
 
 /** fonts */
 @import './assets/styles/fonts.scss';
@@ -48,6 +49,7 @@ $narrow-spacing: (
     @include os-super-search-style($theme);
     @include os-rounded-input-style($theme);
     @include os-meta-text-block-style($theme);
+    @include os-config-field-style($theme);
 }
 
 /** Load projector specific SCSS values */