Skip to content

Commit 79d489d

Browse files
Ben RubinBen Rubin
Ben Rubin
authored and
Ben Rubin
committed
updates to turn range on
1 parent db5c8d6 commit 79d489d

File tree

6 files changed

+95
-14
lines changed

6 files changed

+95
-14
lines changed

‎dist/angular-material-tree.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
(function(){"use strict";angular.module("angular-material-tree").constant("TREE_THEME","md-branch.md-THEME_NAME-theme .md-branch-icon svg{fill:'{{foreground-2}}'}md-branch.md-THEME_NAME-theme.md-open:not(.md-tip)>.md-branch-inner{border-bottom-color:'{{foreground-4}}'}md-branch.md-THEME_NAME-theme.md-2-line .md-branch-text h3,md-branch.md-THEME_NAME-theme.md-2-line .md-branch-text h4,md-branch.md-THEME_NAME-theme.md-3-line .md-branch-text h3,md-branch.md-THEME_NAME-theme.md-3-line .md-branch-text h4{color:'{{foreground-1}}'}md-branch.md-THEME_NAME-theme.md-2-line .md-branch-text p,md-branch.md-THEME_NAME-theme.md-3-line .md-branch-text p{color:'{{foreground-2}}'}md-branch.md-THEME_NAME-theme.md-checkbox-enabled .checkbox-icon{border-color:'{{foreground-2}}'}md-branch.md-THEME_NAME-theme.md-checkbox-enabled[selected]>.md-branch-inner .checkbox-icon{border-color:'{{foreground-2}}';background-color:'{{primary-color-0.87}}'}md-branch.md-THEME_NAME-theme.md-checkbox-enabled[selected]>.md-branch-inner .checkbox-icon:after{border-color:'{{primary-contrast-0.87}}'}md-branch.md-THEME_NAME-theme:not([disabled]) .md-branch-inner{background-color:'{{background-hue-1}}'}md-branch.md-THEME_NAME-theme:not([disabled]) .md-branch-inner:hover{background-color:'{{background-500-0.2}}'}md-branch.md-THEME_NAME-theme:not([disabled]) .md-branch-inner.md-icon-button:hover{background-color:transparent}md-branch.md-THEME_NAME-theme:not([disabled]).md-focused{outline:none}md-branch.md-THEME_NAME-theme:not([disabled]).md-focused>.md-branch-inner{background-color:'{{background-100}}'}\n");}());
21
(function(){"use strict";/**
32
* @ngdoc module
43
* @name angular-material-tree
@@ -17,6 +16,7 @@ function mdTreeTheme($mdThemingProvider, TREE_THEME) {
1716
$mdThemingProvider.registerStyles(TREE_THEME);
1817
}
1918
}());
19+
(function(){"use strict";angular.module("angular-material-tree").constant("TREE_THEME","md-branch.md-THEME_NAME-theme .md-branch-icon svg{fill:'{{foreground-2}}'}md-branch.md-THEME_NAME-theme.md-open:not(.md-tip)>.md-branch-inner{border-bottom-color:'{{foreground-4}}'}md-branch.md-THEME_NAME-theme.md-2-line .md-branch-text h3,md-branch.md-THEME_NAME-theme.md-2-line .md-branch-text h4,md-branch.md-THEME_NAME-theme.md-3-line .md-branch-text h3,md-branch.md-THEME_NAME-theme.md-3-line .md-branch-text h4{color:'{{foreground-1}}'}md-branch.md-THEME_NAME-theme.md-2-line .md-branch-text p,md-branch.md-THEME_NAME-theme.md-3-line .md-branch-text p{color:'{{foreground-2}}'}md-branch.md-THEME_NAME-theme.md-checkbox-enabled .checkbox-icon{border-color:'{{foreground-2}}'}md-branch.md-THEME_NAME-theme.md-checkbox-enabled[selected]>.md-branch-inner .checkbox-icon{border-color:'{{foreground-2}}';background-color:'{{primary-color-0.87}}'}md-branch.md-THEME_NAME-theme.md-checkbox-enabled[selected]>.md-branch-inner .checkbox-icon:after{border-color:'{{primary-contrast-0.87}}'}md-branch.md-THEME_NAME-theme:not([disabled]) .md-branch-inner{background-color:'{{background-hue-1}}'}md-branch.md-THEME_NAME-theme:not([disabled]) .md-branch-inner:hover{background-color:'{{background-500-0.2}}'}md-branch.md-THEME_NAME-theme:not([disabled]) .md-branch-inner.md-icon-button:hover{background-color:transparent}md-branch.md-THEME_NAME-theme:not([disabled]).md-focused{outline:none}md-branch.md-THEME_NAME-theme:not([disabled]).md-focused>.md-branch-inner{background-color:'{{background-100}}'}\n");}());
2020
(function(){"use strict";// TODO Add key controls
2121
// * Enter: Shoudl select happen if branch is deepest descendent?
2222
// * Shift+Enter: multiple select

‎dist/angular-material-tree.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docsApp/main.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
[marked] {
2+
table {
3+
margin: 0;
4+
padding: 0;
5+
border-spacing: 0;
6+
border-bottom: 1px solid #cccccc;
7+
8+
tr {
9+
margin: 0;
10+
padding: 0;
11+
12+
&:nth-child(2n) {
13+
background-color: #f8f8f8;
14+
}
15+
16+
th {
17+
border-left: 1px solid #cccccc;
18+
border-top: 1px solid #cccccc;
19+
padding: 6px 13px;
20+
21+
&:last-child {
22+
border-right: 1px solid #cccccc;
23+
}
24+
}
25+
26+
td {
27+
border-left: 1px solid #cccccc;
28+
border-top: 1px solid #cccccc;
29+
padding: 6px 13px;
30+
31+
&:last-child {
32+
border-right: 1px solid #cccccc;
33+
}
34+
}
35+
}
36+
}
37+
}

‎docsApp/pages/home/home.controller.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ function HomeController($scope) {
2424
items: [
2525
{
2626
id: 1,
27-
name: 'Item One'
27+
name: 'Item One',
28+
reporting_group: 'Reporting Test One'
2829
}
2930
]
3031
}

‎docsApp/pages/home/home.html‎

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<div layout="row">
22
<div layout="column" flex>
33
<input type="search" style="line-height: 48px; padding-left: 16px; border: none; outline: none;" placeholder="Search..." ng-model="searchTerm" />
4+
5+
46
<md-tree ng-model="vm.selectedItems" restrict-selection="depth" flex>
57
<md-branch branch-repeat="location in vm.locationData | filter: $mdBranchFilter(searchTerm) | orderBy: location.name" class="md-2-line" select>
68
<div class="md-branch-text">
@@ -30,15 +32,55 @@ <h4 style="width: 120px; margin: 0 auto; padding-top: 16px;">Master Panel</h4>
3032
</div>
3133

3234
<div style="width: 420px; padding: 0 16px; border-left: 1px solid #ccc; height: 100%; z-index: 99; background: #EEE;">
33-
<h2>Tree Component v0.0.1</h2>
35+
<h2>Tree Component v0.0.2</h2>
3436
<a href="/components/tree/v0">version 0</a>
37+
<a href="/components/tree/v1">version 1</a>
3538
<p><b>Whats new</b></p>
36-
<p>Everything</p>
37-
<ul>
38-
<li>The core has been rebuilt</li>
39-
<li>You can now filter</li>
40-
<li>Branch auto open while filtering</li>
41-
</ul>
39+
<p>Keyboard Controls</p>
40+
<div marked>
41+
<table>
42+
<thead>
43+
<tr>
44+
<th style="text-align:left">Key</th>
45+
<th style="text-align:left">Description</th>
46+
</tr>
47+
</thead>
48+
<tbody>
49+
<tr>
50+
<td style="text-align:left"><span ng-non-bindable=""><code>Down Arrow</code></span></td>
51+
<td style="text-align:left">focus on next visible branch</td>
52+
</tr>
53+
<tr>
54+
<td style="text-align:left"><span ng-non-bindable=""><code>Up Arrow</code></span></td>
55+
<td style="text-align:left">focus on previous visible branch</td>
56+
</tr>
57+
<tr>
58+
<td style="text-align:left"><span ng-non-bindable=""><code>Right Arrow</code></span></td>
59+
<td style="text-align:left">If current focused branch is closed then open it, otherwise focus on next branch</td>
60+
</tr>
61+
<tr>
62+
<td style="text-align:left"><span ng-non-bindable=""><code>Left Arrow</code></span></td>
63+
<td style="text-align:left">If current focused branch is open then close it, otherwise focus on previous branch</td>
64+
</tr>
65+
<tr>
66+
<td style="text-align:left"><span ng-non-bindable=""><code>Enter</code></span></td>
67+
<td style="text-align:left">Selection toggle. This will deselect all previous selections</td>
68+
</tr>
69+
<tr>
70+
<td style="text-align:left"><span ng-non-bindable=""><code>Space</code></span></td>
71+
<td style="text-align:left">Same as <span ng-non-bindable=""><code>Enter</code></span></td>
72+
</tr>
73+
<tr>
74+
<td style="text-align:left"><span ng-non-bindable=""><code>Shift+Enter</code></span></td>
75+
<td style="text-align:left">Multi select. This will toggle focused branches selection without deselecting previous selections</td>
76+
</tr>
77+
<tr>
78+
<td style="text-align:left"><span ng-non-bindable=""><code>Shift+Space</code></span></td>
79+
<td style="text-align:left">Same as <span ng-non-bindable=""><code>Shift+Enter</code></span></td>
80+
</tr>
81+
</tbody>
82+
</table>
83+
</div>
4284
<p>
4385
You can leave comments about the tree here<br />
4486
<a href="https://bypassmobile.atlassian.net/wiki/display/PROD/Tree+live+demo">Confluence Doc Link</a>

‎src/js/tree.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -217,9 +217,9 @@ function treeDirective($mdTheming, $mdUtil) {
217217
item = branchScope[branchScope.repeatName];
218218

219219
// set element select state
220-
// if ($$mdTree.isShiftPressed()) {
221-
// rangeSelect(branch);
222-
// } else {
220+
if ($$mdTree.isShiftPressed()) {
221+
rangeSelect(branch);
222+
} else {
223223
// if selectable and not clicked on checkbox then deselct all
224224
if (!$$mdTree.isCheckbox(closest)) {
225225
if (Object.keys(vm.selected).length > 1) { _isSelected = false; }
@@ -231,7 +231,7 @@ function treeDirective($mdTheming, $mdUtil) {
231231
} else {
232232
branch.setAttribute('selected', 'selected');
233233
}
234-
// }
234+
}
235235
item.$$selected = !item.$$selected;
236236
toggleSelect(_isSelected, hashGetter(item), item, branch);
237237
e.stopPropagation();
@@ -241,6 +241,7 @@ function treeDirective($mdTheming, $mdUtil) {
241241
}
242242

243243
// TODO this currently will only work visually, needs to set model data
244+
// TODO make this work across all lbranches with the same depth
244245
// NOTE may want to add selection memory so we can select from last selection
245246
// Currentl we select from top if possible then from bottom
246247
function rangeSelect(branchElement) {

0 commit comments

Comments
 (0)