ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #5083 from GabrielInTheWorld/hintsForTheWin

Browse Source 
Replaces the question-marks in config with hints
This commit is contained in:
Sean 2019-10-30 11:57:55 +01:00 committed by GitHub
commit 19f3fb579b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 94 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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;
}
}

23
client/src/app/site/config/components/config-field/config-field.component.scss-theme.scss Normal file
View File

@ -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);
}
}
}
}
}

10
client/src/assets/styles/global-components-style.scss
View File

@ -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 {

2
client/src/styles.scss
View File

@ -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 */