3 files changed, 74 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
new file mode 100644
index 0000000000..31fa06adda
--- /dev/null
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
@@ -0,0 +1,7 @@
+{{actualText}}
+
+<span class="ellipsis-directive-more-less"
+      data-ng-click="collapsed = !collapsed; toggleText()"
+      data-ng-hide="ellipsis.length <= maxChars">
+  {{collapsed ? "More" : "Less"}}
+</span>
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less
new file mode 100644
index 0000000000..d8dfdbb73b
--- /dev/null
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less
@@ -0,0 +1,10 @@
+.ellipsis-directive-more-less {
+    .a_9;
+    .bold;
+    .hand;
+    float: right;
+    margin-right: 17px;
+    line-height: 23px;
+    text-decoration: underline;
+    text-align: left;
+}
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
new file mode 100644
index 0000000000..8fbbd4d486
--- /dev/null
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
@@ -0,0 +1,57 @@
+'use strict';
+export interface IEllipsisScope extends ng.IScope {
+    ellipsis:string;
+    maxChars:number;
+    toggleText():void;
+    collapsed:boolean;
+    actualText:string;
+
+}
+
+export class EllipsisDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        ellipsis: '=',
+        moreClass: '@',
+        maxChars: '='
+    };
+
+    replace = false;
+    restrict = 'A';
+    template = ():string => {
+        return require('./ellipsis-directive.html');
+    };
+
+    link = (scope:IEllipsisScope, $elem:any) => {
+
+
+        scope.collapsed = true;
+
+        scope.toggleText = ():void => {
+            if (scope.ellipsis && scope.collapsed) {
+                scope.actualText = scope.ellipsis.substr(0, scope.maxChars);
+                scope.actualText += scope.ellipsis.length > scope.maxChars ? '...' : '';
+            }
+            else {
+                scope.actualText = scope.ellipsis;
+            }
+        };
+
+        scope.$watch("ellipsis", function () {
+            scope.collapsed = true;
+            scope.toggleText();
+        });
+
+
+    };
+
+    public static factory = ()=> {
+        return new EllipsisDirective();
+    };
+
+}
+
+EllipsisDirective.factory.$inject = [];