[ADF-2305] Process app tiles on process workspace landing page show "…" in Firefox (#2963)

* [ADF-2305] Process app tiles on process workspace landing page show "..." in Firefox

* [ADF-2305] Removed multi-line ellipsis work around for Firefox
* [ADF-2305] Added multi-line or single line ellpsis conditionally

* * [ADF-2305] Imported line-clamp mixin from core mixins

lib/core/styles/_mixins.scss

@@ -30,31 +30,21 @@
 }
 
 @mixin line-clamp($line-height: 1.25, $lines: 3) {
-    display: block;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
     position: relative;
     line-height: $line-height;
+    padding: 0 !important;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: 0 !important;
-    -webkit-line-clamp: $lines;
-    height: calc(0.99em * #{$line-height} * #{$lines});
 
-    &:after {
+    @supports (-webkit-line-clamp: 1) {
-        content: '...';
+        display: -webkit-box;
-        text-align: right;
+        -webkit-box-orient: vertical;
-        bottom: 0;
+        -webkit-line-clamp: $lines;
-        right: 0;
+        height: calc(0.99em * #{$line-height} * #{$lines});
-        width: 25%;
+    }
-        display: block;
+
-        position: absolute;
+    @supports not (-webkit-line-clamp: 1) {
-        height: calc(0.99em * #{$line-height});
+        white-space: nowrap;
-    }
+        width: 100%;
-}
-
-@supports (-webkit-line-clamp: 1) {
-    .line-clamp:after  {
-        display: none !important;
     }
 }

lib/process-services/app-list/apps-list.component.scss

@@ -1,132 +1,130 @@
-// TODO: import this mixin from core mixins...
+@mixin adf-apps-theme($theme) {
-// -------
-@mixin line-clamp($line-height: 1.25, $lines: 3) { display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: $line-height; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; -webkit-line-clamp: $lines; height: calc(0.99em * #{$line-height} * #{$lines}); &:after { content: '...'; text-align: right; bottom: 0; right: 0; width: 25%; display: block; position: absolute; height: calc(0.99em * #{$line-height}); } } @supports (-webkit-line-clamp: 1) { .line-clamp:after { display: none !important; } }
-// -------
 
-:host {
+    :host {
-    width: 100%;
+        width: 100%;
-}
-
-.adf-app-list-item {
-    cursor: pointer;
-}
-
-$themes: (
-    theme-1: (bg: #269abc, color: #168aac),
-    theme-2: (bg: #7da9b0, color: #6d99a0),
-    theme-3: (bg: #7689ab, color: #66799b),
-    theme-4: (bg: #c74e3e, color: #b73e2e),
-    theme-5: (bg: #fab96c, color: #eaa95c),
-    theme-6: (bg: #759d4c, color: #658d3c),
-    theme-7: (bg: #b1b489, color: #a1a479),
-    theme-8: (bg: #a17299, color: #916289),
-    theme-9: (bg: #696c67, color: #595c57),
-    theme-10: (bg: #cabb33, color: #baab23)
-);
-
-.adf-app-list-spinner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    height: 85vh;
-    .mat-spinner {
-        margin: 0 auto;
     }
-}
 
-.adf-app-listgrid {
+    .adf-app-list-item {
-    padding: 8px;
+        cursor: pointer;
+    }
 
-    &-item {
+    $tile-themes: (
-        outline: none;
+        theme-1: (bg: #269abc, color: #168aac),
+        theme-2: (bg: #7da9b0, color: #6d99a0),
+        theme-3: (bg: #7689ab, color: #66799b),
+        theme-4: (bg: #c74e3e, color: #b73e2e),
+        theme-5: (bg: #fab96c, color: #eaa95c),
+        theme-6: (bg: #759d4c, color: #658d3c),
+        theme-7: (bg: #b1b489, color: #a1a479),
+        theme-8: (bg: #a17299, color: #916289),
+        theme-9: (bg: #696c67, color: #595c57),
+        theme-10: (bg: #cabb33, color: #baab23)
+    );
+
+    .adf-app-list-spinner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        height: 85vh;
+        .mat-spinner {
+            margin: 0 auto;
+        }
+    }
+
+    .adf-app-listgrid {
         padding: 8px;
-        box-sizing: border-box;
-
-        &-card {
-
-            @for $i from 1 through 10 {
-                &.theme-#{$i} {
-                    $theme: map-get($themes, theme-#{$i});
-                    background-color: map-get($theme, bg);
-                }
-            }
 
+        &-item {
             outline: none;
-            transition: transform 280ms cubic-bezier(.4,0,.2,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);
+            padding: 8px;
-            min-height: 200px;
+            box-sizing: border-box;
-            padding: 0;
 
-            &:hover {
+            &-card {
-                box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
-                cursor: pointer;
-                transform: scale(1.015);
-            }
 
-            &-logo {
+                @for $i from 1 through 10 {
-                position: absolute;
+                    &.theme-#{$i} {
-                right: 20px;
+                        $tile-theme: map-get($tile-themes, theme-#{$i});
-                top: 20px;
+                        background-color: map-get($tile-theme, bg);
-                padding: 16px;
+                    }
-                z-index: 9998;
+                }
 
-                &-icon {
+                outline: none;
-                    font-size: 70px;
+                transition: transform 280ms cubic-bezier(.4,0,.2,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);
-                    width: 1em;
+                min-height: 200px;
-                    height: 1em;
+                padding: 0 !important;
 
-                    @for $i from 1 through 10 {
+                &:hover {
-                        .theme-#{$i} & {
+                    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
-                            $theme: map-get($themes, theme-#{$i});
+                    cursor: pointer;
-                            color: map-get($theme, color);
+                    transform: scale(1.015);
+                }
+
+                &-logo {
+                    position: absolute;
+                    right: 20px;
+                    top: 20px;
+                    padding: 16px;
+                    z-index: 9998;
+
+                    &-icon {
+                        font-size: 70px;
+                        width: 1em !important;
+                        height: 1em !important;
+
+                        @for $i from 1 through 10 {
+                            .theme-#{$i} & {
+                                $tile-theme: map-get($tile-themes, theme-#{$i});
+                                color: map-get($tile-theme, color);
+                            }
                         }
                     }
                 }
-            }
 
-            &-title {
+                &-title {
-                padding: 16px;
+                    padding: 16px;
-                margin-bottom: 0;
+                    margin-bottom: 0 !important;
-                z-index: 9999;
+                    z-index: 9999;
 
-                h1 {
+                    h1 {
+                        color: white;
+                        width: 80%;
+                        font-size: 24px;
+                        margin: 0;
+                        line-height: normal;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                }
+
+                &-subtitle {
                     color: white;
-                    width: 80%;
+                    z-index: 9999;
-                    font-size: 24px;
+                    padding: 16px;
-                    margin: 0;
-                    line-height: normal;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-            }
 
-            &-subtitle {
+                    .line-clamp {
-                color: white;
+                        @include line-clamp(1.25, 3);
-                z-index: 9999;
+                    }
-                padding: 16px;
-
-                .line-clamp {
-                    @include line-clamp(1.25, 3);
-                }
-            }
-
-            &-actions {
-                padding: 0 16px 16px 16px;
-                border-top: 1px solid rgba(0,0,0,.1);
-                min-height: 48px;
-                box-sizing: border-box;
-
-                &-icon {
-                    color: #e9f1f3;
                 }
 
-                &.mat-card-actions {
+                &-actions {
-                    margin-left: 0px;
+                    padding: 0 16px 16px 16px !important;
-                    margin-right: 0px;
+                    border-top: 1px solid rgba(0,0,0,.1);
+                    min-height: 48px;
+                    box-sizing: border-box;
 
-                    &:last-child {
+                    &-icon {
-                        margin-bottom: 0;
+                        color: #e9f1f3;
+                    }
+
+                    &.mat-card-actions {
+                        margin-left: 0px;
+                        margin-right: 0px;
+
+                        &:last-child {
+                            margin-bottom: 0 !important;
+                        }
                     }
                 }
             }

lib/process-services/styles/_index.scss

@@ -6,6 +6,7 @@
 @import '../task-list/components/start-task.component';
 @import '../task-list/components/task-filters.component';
 @import '../task-list/components/task-header.component';
+@import '../app-list/apps-list.component';
 
 @mixin adf-process-services-theme($theme) {
     @include adf-process-filters-theme($theme);
@@ -16,4 +17,5 @@
     @include adf-task-list-header-theme($theme);
     @include adf-process-attachment-list-theme($theme);
     @include adf-task-attachment-list-theme($theme);
+    @include adf-apps-theme($theme);
 }