blame | history | patch | commit | commitdiff
rsanchez
2017-03-15 68bfeadaca5c3af78a9884614dfec7a188454a2f 
 securis/src/main/webapp/src/app/pack.list.component.html
....@@ -1,57 +1,56 @@
1
-<md-toolbar role="toolbar" class="mat-secondary">
2
-  <span class="push-left-sm">
3
-      <span class="md-title" i18n>License Packs</span>
4
-  </span>
5
-  <span class="push-left-sm" *ngIf="filteredItems < data.length">
6
-      <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
7
-  </span>
8
-  <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
9
-  </td-search-box>
10
-  <button md-mini-fab color="accent" (click)="createPack()">
11
-      <md-icon>add</md-icon>
12
-    </button>
13
-</md-toolbar>
14
-<md-divider></md-divider>
15
-<div layout="row" layout-align="center center">
16
-  <div flex="80" layout="column" layout-align="end center" >
17
-<td-data-table 
18
-  [data]="filteredData" 
19
-  [columns]="columns" 
20
-  [sortable]="true"
21
-  [sortBy]="sortBy"
22
-  (sortChange)="sort($event)"
23
-  style="width: 100%">
24
-  <template tdDataTableTemplate="used_licenses" let-row="row">
25
-    <div layout="row">
26
-      <md-chip-list flex>
27
-        <md-chip selected [mdTooltip]="$L.get('field.num_licenses')" color="secondary" >{{row['num_licenses']}}</md-chip>
28
-        <md-chip selected [mdTooltip]="$L.get('field.num_available')" [color]="row['num_available'] > 0 ? 'primary': 'warn'">{{row['num_available']}}</md-chip>
29
-      </md-chip-list>
30
-    </div>
31
-  </template>
32
-  <template tdDataTableTemplate="code" let-row="row" let-value="value">
33
-    <div layout="row" layout-align="start center">
34
-      <span style="white-space: nowrap">{{value}}</span>
35
-    </div>
36
-  </template>
37
-  <template tdDataTableTemplate="menu" let-row="row" let-index="index">
38
-    <div layout="row" layout-align="end center">
39
-      <button md-icon-button (click)="editPack(row)" color="primary"><md-icon>edit</md-icon></button>
40
-      <button md-icon-button [mdMenuTriggerFor]="packMenu" aria-label="Pack menu">
41
-        <md-icon>more_vert</md-icon>
1
+<td-layout-card-over cardWidth="90">
2
+  <md-toolbar role="toolbar" class="mat-secondary">
3
+    <span class="push-left-sm">
4
+        <span class="md-title" i18n>Packs</span>
5
+    </span>
6
+    <span class="push-left-sm" *ngIf="filteredItems < data.length">
7
+        <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
8
+    </span>
9
+    <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
10
+    </td-search-box>
11
+    <button md-mini-fab color="accent" (click)="createPack()">
12
+        <md-icon>add</md-icon>
4213       </button>
43
-       
44
-      <md-menu #packMenu="mdMenu">
45
-          <button md-menu-item *ngFor="let action of pack_menu_options" (click)="packAction(action.command, row)" [disabled]="!isActionAvailable(row)">
46
-            <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
14
+  </md-toolbar>
15
+ 	<div flex="84" layout-align="center end" layout="column">
16
+    <td-data-table 
17
+      [data]="filteredData" 
18
+      [columns]="columns" 
19
+      [sortable]="true"
20
+      [sortBy]="sortBy"
21
+      (sortChange)="sort($event)"
22
+      style="width: 100%">
23
+      <template tdDataTableTemplate="used_licenses" let-row="row">
24
+        <div layout="row">
25
+          <md-chip-list flex>
26
+            <md-chip selected [mdTooltip]="$L.get('field.num_licenses')" color="secondary" >{{row['num_licenses']}}</md-chip>
27
+            <md-chip selected [mdTooltip]="$L.get('field.num_available')" [color]="row['num_available'] > 0 ? 'primary': 'warn'">{{row['num_available']}}</md-chip>
28
+          </md-chip-list>
29
+        </div>
30
+      </template>
31
+      <template tdDataTableTemplate="code" let-row="row" let-value="value">
32
+        <div layout="row" layout-align="start center">
33
+          <span style="white-space: nowrap">{{value}}</span>
34
+        </div>
35
+      </template>
36
+      <template tdDataTableTemplate="menu" let-row="row" let-index="index">
37
+        <div layout="row" layout-align="end center">
38
+          <button md-icon-button (click)="editPack(row)" color="primary"><md-icon>edit</md-icon></button>
39
+          <button md-icon-button [mdMenuTriggerFor]="packMenu" aria-label="Pack menu">
40
+            <md-icon>more_vert</md-icon>
4741           </button>
48
-      </md-menu>
49
-      <button md-icon-button (click)="showLicenses(row)" color="accent"><md-icon>arrow_forward</md-icon></button>
50
-    </div>
51
-  </template>
52
-</td-data-table>
53
-<td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" align="end">
54
-  <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
55
-</td-paging-bar>
56
-</div>
57
-</div>
42
+          
43
+          <md-menu #packMenu="mdMenu">
44
+              <button md-menu-item *ngFor="let action of pack_menu_options" (click)="packAction(action.command, row)" [disabled]="!isActionAvailable(row)">
45
+                <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
46
+              </button>
47
+          </md-menu>
48
+          <button md-icon-button (click)="showLicenses(row)" color="accent"><md-icon>arrow_forward</md-icon></button>
49
+        </div>
50
+      </template>
51
+    </td-data-table>
52
+    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= pagingBar.pageSize">
53
+      <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
54
+    </td-paging-bar>
55
+  </div>
56
+</td-layout-card-over>