[ADF-1434] Theming ADF component (#2228)

* start custom theming adf

* demo shell cleaning

* login mdl cleaning

* uploader mdl cleaning

* prebuilt themes

* theme picker in demo shell

* clean custom colors and mdl

* fix rebase errors

* theming from color style guide

* dev default theme orange purple

* fix color accent inverted in picker

* fix test and add colors classes

* fix tag component theming issues

* fix datatable theming

* add theming guides

demo-shell-ng2/app/components/settings/settings.component.html

@@ -1,63 +1,61 @@
-<div class="setting-container">
-    <div class="table-row">
-        <div class="setting-card-padding"></div>
-        <div class="setting-card mdl-card mdl-shadow--2dp">
-            <div class="mdl-card__title mdl-card--expand">
-                <h2 class="mdl-card__title-text">SETTINGS</h2>
-            </div>
-            <div class="mdl-card__actions mdl-card--border">
-                <div class="mdl-card__supporting-text">
-                    Content Services host URL configuration
-                </div>
-                <nav class="mdl-navigation">
-                    <i class="icon material-icons icon-margin">link</i>
-                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
-                        <input
-                            data-automation-id="ecmHost"
-                            class="mdl-textfield__input"
-                            tabindex="1"
-                            type="text"
-                            tabindex="1"
-                            (change)="onChangeECMHost($event)"
-                            pattern="^(http|https):\/\/.*[^/]$"
-                            id="ecmHost"
-                            value="{{ecmHost}}"
-                            placeholder="http(s)://host|ip:port(/path)">
-                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
-                        <span class="mdl-textfield__error">ECM host is not valid! http(s)://host|ip:port(/path)</span>
-                    </div>
-                </nav>
+<div class="adf-setting-container">
+    <div class="adf-setting-card-padding"></div>
+    <md-toolbar color="primary" >
+        <h3>{{'SETTINGS.TITLE' | translate}}</h3>
+    </md-toolbar>
 
-                <div class="mdl-card__supporting-text">
-                    Process Services host URL configuration
-                </div>
-                <nav class="mdl-navigation">
-                    <i class="icon material-icons icon-margin">link</i>
-                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
-                        <input
-                            data-automation-id="bpmHost"
-                            class="mdl-textfield__input"
-                            type="text"
-                            (change)="onChangeBPMHost($event)"
-                            tabindex="2"
-                            pattern="^(http|https):\/\/.*[^/]$"
-                            id="bpmHost"
-                            value="{{bpmHost}}"
-                            placeholder="http(s)://host|ip:port(/path)">
-                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
-                        <span class="mdl-textfield__error">BPM host is not valid! http(s)://host|ip:port(/path)</span>
-                    </div>
-                </nav>
-            </div>
-            <div class="mdl-card__actions mdl-card--border">
-                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()">
-                    Back
-                </a>
-                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.location.href = '/'">
-                    Apply
-                </a>
-            </div>
-        </div>
-        <div class="setting-card-padding"></div>
-    </div>
+    <md-card class="adf-setting-card">
+        <md-card-content>
+
+            <md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
+
+            <md-input-container class="full-width">
+                <md-icon mdPrefix>link</md-icon>
+                <input mdInput
+                       [formControl]="urlFormControlEcm"
+                       data-automation-id="ecmHost"
+                       type="text"
+                       (change)="onChangeECMHost($event)"
+                       tabindex="2"
+                       id="ecmHost"
+                       value="{{ecmHost}}"
+                       placeholder="http(s)://host|ip:port(/path)">
+                <md-error *ngIf="urlFormControlEcm.hasError('pattern')">
+                    ECM host is not valid! http(s)://host|ip:port(/path)
+                </md-error>
+            </md-input-container>
+            <p>
+            <p>
+            <md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
+
+            <md-input-container class="full-width">
+                <md-icon mdPrefix>link</md-icon>
+                <input mdInput
+                       [formControl]="urlFormControlBpm"
+                       data-automation-id="bpmHost"
+                       type="text"
+                       (change)="onChangeBPMHost($event)"
+                       tabindex="2"
+                       id="bpmHost"
+                       value="{{bpmHost}}"
+                       placeholder="http(s)://host|ip:port(/path)">
+                <md-error *ngIf="urlFormControlBpm.hasError('pattern')">
+                    BPM host is not valid! http(s)://host|ip:port(/path)
+                </md-error>
+            </md-input-container>
+
+        </md-card-content>
+        <md-card-actions>
+
+            <button md-button onclick="window.history.back()" color="primary">
+                {{'SETTINGS.BACK' | translate }}
+            </button>
+
+            <button md-button onclick="window.location.href = '/'" color="primary">
+                {{'SETTINGS.APPLY' | translate }}
+            </button>
+
+        </md-card-actions>
+    </md-card>
+    <div class="adf-setting-card-padding"></div>
 </div>