refractor: app module and settings (#293)

* Refractor settings component.
* Improve responsiveness of settings component.
* Add comments.

Fixes #292
This commit is contained in:
Abhay Chawla
2018-08-12 15:45:48 +05:30
committed by GitHub
parent 116d05a7d1
commit bf8e6f1273
10 changed files with 159 additions and 57 deletions
+42 -22
View File
@@ -1,4 +1,7 @@
<mat-card class="container">
<!-- TODO: Add user specific settings for choice of language and date format. -->
<!-- Global Web App Configuration Settings -->
<div class="container">
<mat-accordion>
@@ -13,29 +16,34 @@
<div fxLayout="column">
<mat-form-field>
<input matInput placeholder="Name of the Organisation">
<mat-label>Name of the Organisation</mat-label>
<input matInput>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Description"></textarea>
<mat-label>Description</mat-label>
<textarea matInput></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Summary"></textarea>
<mat-label>Summary</mat-label>
<textarea matInput></textarea>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Default Language">
<mat-option *ngFor="let language of languages" [value]="language.value">
{{ language.viewValue }}
<mat-label>Default Language</mat-label>
<mat-select>
<mat-option *ngFor="let language of languages" [value]="language">
{{ language }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Default Date Format">
<mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat.value">
{{ dateFormat.viewValue }}
<mat-label>Default Date Format</mat-label>
<mat-select>
<mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
{{ dateFormat }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -54,10 +62,17 @@
<div fxLayout="column">
Favicon <mifosx-file-upload></mifosx-file-upload>
Cover Image <mifosx-file-upload></mifosx-file-upload>
Logo <mifosx-file-upload></mifosx-file-upload>
Logo with Organisation Name <mifosx-file-upload></mifosx-file-upload>
<span class="header">Favicon</span>
<mifosx-file-upload></mifosx-file-upload>
<span class="header">Cover Image</span>
<mifosx-file-upload></mifosx-file-upload>
<span class="header">Logo</span>
<mifosx-file-upload></mifosx-file-upload>
<span class="header">Logo with Organisation Name</span>
<mifosx-file-upload></mifosx-file-upload>
</div>
@@ -73,12 +88,14 @@
<div fxLayout="column">
Theme <mifosx-theme-picker></mifosx-theme-picker> <!-- TODO: Replace or Change to Show More Detail -->
<span class="header">Theme</span>
<mifosx-theme-picker></mifosx-theme-picker>
<mat-form-field>
<mat-select placeholder="Default Font">
<mat-option *ngFor="let font of fonts" [value]="font.value">
{{ font.viewValue }}
<mat-label>Default Font</mat-label>
<mat-select>
<mat-option *ngFor="let font of fonts" [value]="font">
{{ font }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -98,15 +115,18 @@
<div fxLayout="column">
<mat-form-field>
<input type="url" matInput placeholder="Website">
<mat-label>Website</mat-label>
<input type="url" matInput>
</mat-form-field>
<mat-form-field>
<input type="email" matInput placeholder="Email">
<mat-label>Email</mat-label>
<input type="email" matInput>
</mat-form-field>
<mat-form-field>
<input type="tel" matInput placeholder="Contact No">
<mat-label>Contact No</mat-label>
<input type="tel" matInput>
</mat-form-field>
</div>
@@ -115,4 +135,4 @@
</mat-accordion>
</mat-card>
</div>