i18n fixes (#1614)

* i18n fixes

- fix issue with default (fallback) language set to browser language
- fix issue with fallback language loading when browser language set to
non-English locale

* code and UI fixes

- move document list i18n strings into own scope
- replace MDL menu with @angular/material menu (fixes issue with menu
items translation, not supported by MDL)
- minor improvements

* fix unit tests

* improve i18n docs and code

- provide basic documentation for Translation service
- remove custom Login component localisation in favour of documentation
sample
- simplified i18n setup for demo shell (single path for dev/prod env)

* remove unnecessary comments

ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.css

@@ -17,69 +17,3 @@
     transition: height .35s cubic-bezier(0.4,0.0,1,1),border-color .4s;
     z-index: 5;
 }
-
-.action {
-    max-width: 394px;
-    min-width: 150px;
-}
-
-.action {
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 13px 0 11px 30px;
-    -webkit-transition: padding .35s cubic-bezier(0.4, 0.0, 1, 1);
-    transition: padding .35s cubic-bezier(0.4, 0.0, 1, 1);
-}
-
-.mdl-menu__item-primary-content {
-    box-sizing: border-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-.mdl-menu__item-primary-content {
-    -webkit-order: 0;
-    -ms-flex-order: 0;
-    order: 0;
-    -webkit-flex-grow: 2;
-    -ms-flex-positive: 2;
-    flex-grow: 2;
-    text-decoration: none;
-}
-
-.mdl-menu__item-primary-content {
-    box-sizing: border-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-
-}
-
-.mdl-menu__item-icon {
-    margin-right: 32px;
-    margin-top: 10px;
-    margin-left: 10px;
-}
-
-.mdl-menu--bottom-left {
-    width: 200px;
-}
-
-.mdl-menu__text {
-    float: right;
-    margin-right: 22px;
-}

ng2-components/ng2-alfresco-documentlist/src/components/document-menu-action.component.html

@@ -1,21 +1,18 @@
 <div class="container">
-    <div class="action">
-        <button id="actions" class="mdl-button mdl-js-button mdl-button--raised">
-            <i class="material-icons">add</i> {{ 'BUTTON.ACTION_CREATE' | translate }}
+    <button md-button [mdMenuTriggerFor]="menu">
+        <md-icon>add</md-icon>
+        <span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_CREATE' | translate }}</span>
+    </button>
+    <md-menu #menu="mdMenu">
+        <button md-menu-item (click)="showDialog()">
+            <md-icon>create_new_folder</md-icon>
+            <span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_NEW_FOLDER' | translate }}</span>
         </button>
-        <ul alfresco-mdl-menu class="mdl-menu--bottom-left"
-            [attr.for]="'actions'">
-            <li class="mdl-menu__item"
-                (click)="showDialog()" >
-                <i style="float: left;" class="material-icons mdl-menu__item-icon">folder</i>
-                <span class="mdl-menu__text">{{ 'BUTTON.ACTION_NEW_FOLDER' | translate }}</span>
-            </li>
-        </ul>
-    </div>
+    </md-menu>
 </div>
 
 <dialog class="mdl-dialog" #dialog>
-    <h4 class="mdl-dialog__title">{{ 'BUTTON.ACTION_NEW_FOLDER' | translate }}</h4>
+    <h4 class="mdl-dialog__title">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_NEW_FOLDER' | translate }}</h4>
     <div class="mdl-dialog__content">
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
             <input
@@ -30,7 +27,7 @@
         </div>
     </div>
     <div class="mdl-dialog__actions">
-        <button type="button" [disabled]="isFolderNameEmpty()" (click)="createFolder(folderName)" class="mdl-button">{{ 'BUTTON.CREATE' | translate }}</button>
-        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'BUTTON.CANCEL' | translate}}</button>
+        <button type="button" [disabled]="isFolderNameEmpty()" (click)="createFolder(folderName)" class="mdl-button">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CREATE' | translate }}</button>
+        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CANCEL' | translate}}</button>
     </div>
-</dialog>
+</dialog>