Merge pull request #535 from maciaszczykm/card-space-limit

Limit number of labels visible by default

Author: maciaszczykm

src/app/frontend/common/components/labels/labels.html

@@ -14,7 +14,11 @@
 limitations under the License.
 -->
 
-<div flex="95" class="kd-labels" ng-repeat="(key, value) in ::labelsCtrl.labels">
-  <kd-middle-ellipsis display-string="{{::key}}: {{::value}}">
-  </kd-middle-ellipsis>
+<div flex="95" class="kd-labels" ng-repeat="(key, value) in ::labelsCtrl.labels"
+     ng-if="labelsCtrl.isVisible($index)">
+  <kd-middle-ellipsis display-string="{{::key}}: {{::value}}"></kd-middle-ellipsis>
+</div>
+<div class="kd-labels kd-labels-switch" ng-show="labelsCtrl.isMoreAvailable()"
+     ng-click="labelsCtrl.switchLabelsView()">
+  {{labelsCtrl.isShowingAll() ? "show less labels" : "show all labels"}}
 </div>

src/app/frontend/common/components/labels/labels.scss

@@ -26,3 +26,9 @@ $label-margin: 0 $baseline-grid ($baseline-grid / 2) 0;
   padding: ($baseline-grid / 4) $baseline-grid;
   vertical-align: middle;
 }
+
+.kd-labels-switch {
+  color: $primary;
+  cursor: pointer;
+  outline: none;
+}

src/app/frontend/common/components/labels/labels_controller.js

@@ -12,6 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/**
+ * Number of labels, that are always visible.
+ * @type {number}
+ */
+const alwaysVisibleLabelsNumber = 8;
+
 /**
  * @final
  */
@@ -23,5 +29,41 @@ export default class LabelsController {
   constructor() {
     /** @export {!Object<string, string>} Initialized from the scope. */
     this.labels;
+
+    /** @private {boolean} */
+    this.isShowingAllLabels_ = false;
   }
+
+  /**
+   * Returns true if element at index position should be visible.
+   *
+   * @param index
+   * @return {boolean}
+   * @export
+   */
+  isVisible(index) { return this.isShowingAllLabels_ || index < alwaysVisibleLabelsNumber; }
+
+  /**
+   * Returns true if more labels than alwaysVisibleLabelsNumber is available.
+   *
+   * @return {boolean}
+   * @export
+   */
+  isMoreAvailable() { return Object.keys(this.labels).length > alwaysVisibleLabelsNumber; }
+
+  /**
+   * Returns true if all labels are showed.
+   *
+   * @return {boolean}
+   * @export
+   */
+  isShowingAll() { return this.isShowingAllLabels_; }
+
+  /**
+   * Switches labels view between two states, which are showing only alwaysVisibleLabelsNumber of
+   * labels and showing all labels.
+   *
+   * @export
+   */
+  switchLabelsView() { this.isShowingAllLabels_ = !this.isShowingAllLabels_; }
 }

src/test/frontend/common/components/labels/labels_controller_test.js

@@ -0,0 +1,74 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import LabelsController from 'common/components/labels/labels_controller';
+import componentsModule from 'common/components/components_module';
+
+describe('Labels controller', () => {
+  /**
+   * @type {!LabelsController}
+   */
+  let ctrl;
+
+  beforeEach(() => {
+    angular.mock.module(componentsModule.name);
+    angular.mock.inject(($controller) => { ctrl = $controller(LabelsController); });
+  });
+
+  it('should display correct number of labels', () => {
+    // given
+    ctrl.labels = {
+      'label-1': 'value-1',
+      'label-2': 'value-2',
+      'label-3': 'value-3',
+      'label-4': 'value-4',
+      'label-5': 'value-5',
+      'label-6': 'value-6',
+      'label-7': 'value-7',
+      'label-8': 'value-8',
+      'label-9': 'value-9',
+      'label-10': 'value-10',
+    };
+
+    expect(ctrl.isMoreAvailable()).toBe(true);
+    expect(ctrl.isShowingAll()).toBe(false);
+    expect(ctrl.isVisible(0)).toBe(true);
+    expect(ctrl.isVisible(7)).toBe(true);
+    expect(ctrl.isVisible(8)).toBe(false);
+
+    // when
+    ctrl.switchLabelsView();
+
+    // then
+    expect(ctrl.isShowingAll()).toBe(true);
+    expect(ctrl.isVisible(0)).toBe(true);
+    expect(ctrl.isVisible(7)).toBe(true);
+    expect(ctrl.isVisible(8)).toBe(true);
+  });
+
+  it('should not display switch if there are less than 8 labels', () => {
+    // given
+    ctrl.labels = {
+      'label-1': 'value-1',
+      'label-2': 'value-2',
+      'label-3': 'value-3',
+      'label-4': 'value-4',
+      'label-5': 'value-5',
+      'label-6': 'value-6',
+    };
+
+    // then
+    expect(ctrl.isMoreAvailable()).toBe(false);
+  });
+});