[ADF-1543] Remove local copy of muli (#2335)

Use http request to load the font
Add the Muli font in all the theme
Remove the overwritten font-family not necessary

demo-shell-ng2/app/theme.scss

@@ -15,6 +15,11 @@
 
 @include mat-core();
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 $primary: mat-palette($alfresco-accent-orange);
 $accent:  mat-palette($alfresco-accent-purple);
 $warn:    mat-palette($alfresco-warn);

demo-shell-ng2/app/vendor.ts

@@ -42,8 +42,6 @@ import 'material-design-icons/iconfont/material-icons.css';
 import 'material-design-lite/dist/material.orange-blue.min.css';
 import 'material-design-lite/material.js';
 
-import '../public/css/muli-font.css';
-
 import 'ng2-activiti-form/stencils/runtime.adf';
 import 'ng2-activiti-form/stencils/runtime.ng1';
 

demo-shell-ng2/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
+    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
 
     <!--[if IE]>
     <script src=js/shim.min.js></script>

demo-shell-ng2/public/css/muli-font.css

@@ -1,126 +0,0 @@
-@font-face {
-    font-family: "Muli";
-    src: url(../fonts/Muli-Light.ttf);
-}
-
-@font-face {
-    font-family: "Muli";
-    src: url(../fonts/Muli-LightItalic.ttf);
-    font-style: italic;
-}
-
-@font-face {
-    font-family: "Muli";
-    src: url(../fonts/Muli-Regular.ttf);
-    font-weight: bold;
-}
-
-@font-face {
-    font-family: "Muli";
-    src: url(../fonts/Muli-Italic.ttf);
-    font-weight: bold;
-    font-style: italic;
-}
-
-html, body {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-h1, h2 {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-h3, h4 {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-h5, h6 {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-    margin: 24px 0 16px
-}
-
-blockquote {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-input {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-typography--display-4, .mdl-typography--display-4-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-typography--display-3, .mdl-typography--display-3-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-typography--display-2, .mdl-typography--display-2-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-typography--display-1, .mdl-typography--display-1-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-
-}
-
-.mdl-typography--headline, .mdl-typography--headline-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-typography--title, .mdl-typography--title-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-typography--subhead, .mdl-typography--subhead-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-typography--body-2-force-preferred-font, .mdl-typography--body-2-force-preferred-font-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-typography--body-1-force-preferred-font, .mdl-typography--body-1-force-preferred-font-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-
-.mdl-typography--caption-force-preferred-font {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif
-}
-
-.mdl-typography--caption-force-preferred-font-color-contrast, .mdl-typography--menu {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif
-}
-
-.mdl-typography--menu-color-contrast, .mdl-typography--button, .mdl-typography--button-color-contrast {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-badge[data-badge]:after {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-button {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-list__item {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-layout__title, .mdl-layout-title {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-snackbar {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}
-
-.mdl-snackbar__action {
-    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
-}

ng2-components/config/prebuilt/adf-blue-orange.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($alfresco-ecm-blue);

ng2-components/config/prebuilt/adf-blue-purple.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($alfresco-ecm-blue);

ng2-components/config/prebuilt/adf-cyan-orange.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($alfresco-ecm-cyan);

ng2-components/config/prebuilt/adf-cyan-purple.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($alfresco-ecm-cyan);

ng2-components/config/prebuilt/adf-green-orange.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($alfresco-bpm-green);

ng2-components/config/prebuilt/adf-green-purple.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($alfresco-bpm-green);

ng2-components/config/prebuilt/adf-indigo-pink.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($mat-indigo);

ng2-components/config/prebuilt/adf-pink-bluegrey.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($mat-pink, 700, 500, 900);

ng2-components/config/prebuilt/adf-purple-green.scss

@@ -1,6 +1,11 @@
 @import '~ng2-alfresco-core/styles/theming';
 @import './all-theme';
 
+$custom-typography: mat-typography-config(
+    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
+);
+@include angular-material-typography($custom-typography);
+
 @include mat-core();
 
 $primary: mat-palette($mat-purple, 700, 500, 800);

ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss

@@ -42,7 +42,6 @@
         text-align: center;
         font-weight: bolder;
         font-size: 18px;
-        font-family: Muli;
         text-transform: uppercase;
         vertical-align: middle;
     }

ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.scss

@@ -14,7 +14,6 @@ adf-datatable /deep/ .data-cell {
 .adf-empty-list-header {
     height: 32px;
     opacity: 0.26 !important;
-    font-family: Muli, Helvetica, Arial, sans-serif;
     font-size: 24px;
     line-height: 1.33;
     letter-spacing: -1px;
@@ -24,7 +23,6 @@ adf-datatable /deep/ .data-cell {
 .adf-empty-list-drag_drop {
     height: 56px;
     opacity: 0.54;
-    font-family: Muli, Helvetica, Arial, sans-serif;
     font-size: 56px;
     line-height: 1;
     letter-spacing: -2px;
@@ -35,7 +33,6 @@ adf-datatable /deep/ .data-cell {
 .adf-empty-list__any-files-here-to-add {
     height: 24px;
     opacity: 0.54;
-    font-family: Muli, Helvetica, Arial, sans-serif;
     font-size: 16px;
     line-height: 1.5;
     letter-spacing: -0.4px;
@@ -48,4 +45,4 @@ adf-datatable /deep/ .data-cell {
     height: 161px;
     object-fit: contain;
     margin-top: 17px;
-}
+}

ng2-components/ng2-activiti-processlist/src/components/processlist.component.css

@@ -20,7 +20,6 @@ adf-datatable >>> .cell-value{
 }
 
 .no-content-message {
-    font-family: Muli;
     font-size: 16px;
     font-weight: bold;
     text-align: center;

ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.scss

@@ -15,7 +15,6 @@
             width: 30px;
             background-color: mat-color($primary);
             border-radius: 50%;
-            font-family: Muli;
             font-size: 16px;
             color: #fff;
             text-align: center;
@@ -27,7 +26,6 @@
             float: left;
             width: calc(100% - 120px);
             padding: 2px 10px;
-            font-family: Muli;
             font-weight: 600;
             color: #595959;
         }
@@ -36,7 +34,6 @@
             float: left;
             width: calc(100% - 10px);
             padding: 2px 10px;
-            font-family: Muli;
             font-style: italic;
             color: #595959;
             white-space: initial;
@@ -46,7 +43,6 @@
             float: left;
             width: calc(100% - 120px);
             padding: 2px 10px;
-            font-family: Muli;
             font-size: 12px;
             color: #595959;
         }

ng2-components/ng2-activiti-tasklist/src/components/comments.component.css

@@ -7,7 +7,6 @@
 .adf-comments-header {
     padding: 10px 20px;
     font-size: 14px;
-    font-family: Muli;
     font-weight: 600;
     border-bottom: 1px solid #e1e1e1;
     color: #a1a1a1;
@@ -29,4 +28,4 @@ adf-comment-list {
     overflow: auto;
     height: calc(100% - 101px);
     width: 100%;
-}
+}

ng2-components/ng2-activiti-tasklist/src/components/people-search.component.scss

@@ -55,10 +55,6 @@
         }
     }
 
-    adf-people-list /deep/ adf-datatable /deep/ .people-full-name {
-        font-family: 'Muli';
-    }
-
     .people-pic {
         background: mat-color($primary);
         width: 30px;
@@ -68,7 +64,6 @@
         text-align: center;
         font-weight: bolder;
         font-size: 18px;
-        font-family: Muli;
         text-transform: uppercase;
         vertical-align: text-bottom;
     }

ng2-components/ng2-activiti-tasklist/src/components/people.component.scss

@@ -11,7 +11,6 @@
         float: left;
         padding: 10px 0px;
         font-weight: bolder;
-        font-family: Muli;
         opacity: 0.54;
     }
 
@@ -47,16 +46,9 @@
         thead {
             display: none;
         }
-        .people-full-name {
-            font-family: 'Muli';
-        }
         .people-email {
-            font-family: 'Muli';
             opacity: 0.54;
         }
-        .people-edit-label {
-            font-family: 'Muli';
-        }
         .people-pic {
             background: mat-color($primary);
             width: 30px;
@@ -66,7 +58,6 @@
             text-align: center;
             font-weight: bolder;
             font-size: 18px;
-            font-family: Muli;
             text-transform: uppercase;
             vertical-align: text-bottom;
         }

ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss

@@ -5,7 +5,6 @@
 
     .adf-new-task-heading {
         padding: 12px 20px;
-        font-family: Muli;
         font-weight: bold;
         border-bottom: 1px solid #eee;
         font-size: 18px;
@@ -25,7 +24,6 @@
 
     .adf-new-task-footer {
         padding: 4px;
-        font-family: Muli;
         font-size: 18px;
         border-top: 1px solid #eee;
         float: left;

ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.scss

@@ -14,7 +14,6 @@ adf-datatable  /deep/ .data-cell {
 .adf-empty-list-header {
     height: 32px;
     opacity: 0.26;
-    font-family: Muli, Helvetica, Arial, sans-serif;
     font-size: 24px;
     line-height: 1.33;
     letter-spacing: -1px;
@@ -24,7 +23,6 @@ adf-datatable  /deep/ .data-cell {
 .adf-empty-list-drag_drop {
     height: 56px;
     opacity: 0.54;
-    font-family: Muli, Helvetica, Arial, sans-serif;
     font-size: 56px;
     line-height: 1;
     letter-spacing: -2px;
@@ -35,7 +33,6 @@ adf-datatable  /deep/ .data-cell {
 .adf-empty-list__any-files-here-to-add {
     height: 24px;
     opacity: 0.54;
-    font-family: Muli, Helvetica, Arial, sans-serif;
     font-size: 16px;
     line-height: 1.5;
     letter-spacing: -0.4px;
@@ -48,4 +45,4 @@ adf-datatable  /deep/ .data-cell {
     height: 161px;
     object-fit: contain;
     margin-top: 17px;
-}
+}

ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.css

@@ -20,10 +20,9 @@ alfresco-datatable >>> .cell-value{
 }
 
 .no-content-message {
-    font-family: Muli;
     font-size: 16px;
     font-weight: bold;
     text-align: center;
     opacity: 0.54;
     color: #000;
-}
+}

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.scss

@@ -29,7 +29,6 @@ $breadcrumb-chevron-spacer: 2px;
             display: flex;
             line-height: 24px;
 
-            font-family: Muli, Roboto, "Helvetica Neue", sans-serif;
             font-size: 14px;
             font-weight: 600;
             letter-spacing: -0.2px;

ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.scss

@@ -48,10 +48,6 @@
                         font-size: 14px;
                     }
 
-                    .mat-select-placeholder,
-                    &.mat-select {
-                        font-family: 'Muli', "Helvetica", "Arial", sans-serif;
-                    }
                 }
 
                 .adf-toolbar .mat-toolbar {

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss

@@ -63,7 +63,6 @@
     .adf-empty-list-header {
         height: 32px;
         opacity: 0.26 !important;
-        font-family: Muli, Helvetica, Arial, sans-serif;
         font-size: 24px;
         line-height: 1.33;
         letter-spacing: -1px;
@@ -83,7 +82,6 @@
         &-this-space-is-empty {
             height: 32px;
             opacity: 0.26;
-            font-family: Muli, Helvetica, Arial, sans-serif;
             font-size: 24px;
             line-height: 1.33;
             letter-spacing: -1px;
@@ -93,7 +91,6 @@
         &-drag-drop {
             height: 56px;
             opacity: 0.54;
-            font-family: Muli, Helvetica, Arial, sans-serif;
             font-size: 56px;
             line-height: 1;
             letter-spacing: -2px;
@@ -104,7 +101,6 @@
         &-any-files-here-to-add {
             height: 24px;
             opacity: 0.54;
-            font-family: Muli, Helvetica, Arial, sans-serif;
             font-size: 16px;
             line-height: 1.5;
             letter-spacing: -0.4px;

ng2-components/ng2-alfresco-search/src/components/search.component.scss

@@ -17,7 +17,6 @@
 .no-result-message {
     height: 32px;
     opacity: 0.26;
-    font-family: Muli, Helvetica, Arial, sans-serif;
     font-size: 24px;
     line-height: 1.33;
     letter-spacing: -1px;