Merge pull request #5083 from GabrielInTheWorld/hintsForTheWin
Replaces the question-marks in config with hints
This commit is contained in:
Sean
GitHub
commit
19f3fb579b
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
width: 30px;
|
||||
flex: 1;
|
||||
|
||||
.mat-form-field {
|
||||
.mat-form-field-subscript-wrapper {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue