Skip to content

Commit 0b529a7

Browse files
Ben RubinBen Rubin
Ben Rubin
authored and
Ben Rubin
committed
rearrange and change ether checkbox styling to so it does not inherit from angular materials styles. This was causing issue with nested checkboxes
1 parent f2fefde commit 0b529a7

File tree

5 files changed

+68
-113
lines changed

5 files changed

+68
-113
lines changed

‎docsApp/pages/home/home.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h3>{{location.name}}</h3>
66
<p>Location</p>
77
</div>
88

9-
<md-branch branch-repeat="menu in location.menus" class="md-2-line">
9+
<md-branch branch-repeat="menu in location.menus" class="md-2-line" select>
1010
<div class="md-branch-text">
1111
<h3>{{menu.name}}</h3>
1212
<p>Menu</p>

‎src/js/branch.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ angular
44
.controller('BranchController', branchController);
55

66

7-
var CHECKBOX_SELECTION_INDICATOR = angular.element('<div class="checkbox-container"><div class="md-container"><div class="md-icon"></div></div></div>');
7+
var CHECKBOX_SELECTION_INDICATOR = angular.element('<div class="checkbox-container"><div class="checkbox-icon"></div></div>');
88
var BRANCH_ARROW_TEMPLATE = angular.element('<div class="md-branch-icon-container">'+
99
'<div class="md-branch-icon">'+
1010
'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">'+
@@ -294,6 +294,7 @@ function branchController($scope, $mdUtil, $animateCss) {
294294
var isSelect = $element.attr('select') !== undefined;
295295
if (isSelect && branchContainsElement(e.target)) {
296296
var selected = $element.attr('selected') !== undefined;
297+
findTree();
297298
vm.treeCtrl.toggleSelect(!selected, vm.treeCtrl.hashGetter($scope[$scope.repeatName]), $scope[$scope.repeatName]);
298299

299300
$element.attr('selected', !selected);

‎src/js/tree.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function treeDirective($mdTheming, $mdUtil) {
2020
// make ngModel available to controller
2121
var ngModelCtrl = ctrls[1];
2222

23-
// create fake ngModel so code runs as normal
23+
// create fake ngModel so code runs as normal when no model is provided
2424
if (!ngModelCtrl) {
2525
ngModelCtrl = $mdUtil.fakeNgModel();
2626
ngModelCtrl.$validators = []; //$mdUtil.fakeNgModel is missing `$validators`
@@ -124,7 +124,6 @@ function treeDirective($mdTheming, $mdUtil) {
124124
}
125125

126126
function refreshViewValue() {
127-
console.log('refreshViewValue', vm.selected)
128127
var branchValue;
129128
var newValue;
130129
var prevValue;

‎src/style-theme.scss‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,51 @@
1-
md-tree {
2-
md-branch {
3-
.md-branch-inner {
4-
background-color: '{{background-hue-1}}';
5-
}
6-
7-
.md-branch-icon svg {
8-
fill: '{{foreground-2}}';
9-
}
1+
md-branch.md-THEME_NAME-theme {
2+
.md-branch-inner {
3+
background-color: '{{background-hue-1}}';
4+
}
105

11-
&.md-tip {
12-
.md-branch-inner {
13-
background-color: '{{background-200}}';
14-
}
6+
.md-branch-icon svg {
7+
fill: '{{foreground-2}}';
8+
}
159

16-
.md-branch-icon svg {
17-
fill: #fff;
18-
}
10+
&.md-tip {
11+
.md-branch-inner {
12+
background-color: '{{background-200}}';
1913
}
14+
}
2015

21-
&.md-open {
22-
& > .md-branch-inner {
23-
border-bottom-color: '{{foreground-4}}';
24-
}
16+
&.md-open {
17+
& > .md-branch-inner {
18+
border-bottom-color: '{{foreground-4}}';
2519
}
2620
}
2721

28-
md-branch.md-2-line .md-branch-text,
29-
md-branch.md-3-line .md-branch-text {
22+
&.md-2-line .md-branch-text,
23+
&.md-3-line .md-branch-text {
3024
h3, h4 {
3125
color: '{{foreground-1}}';
3226
}
3327
p {
3428
color: '{{foreground-2}}';
3529
}
3630
}
31+
32+
33+
&.md-checkbox-enabled {
34+
.checkbox-icon {
35+
border-color: '{{foreground-2}}';
36+
}
37+
38+
39+
// selected
40+
&[selected] > .md-branch-inner {
41+
.checkbox-icon {
42+
border-color: '{{foreground-2}}';
43+
background-color: '{{primary-color}}';
44+
45+
&:after {
46+
border-color: '{{primary-contrast}}';
47+
}
48+
}
49+
}
50+
}
3751
}

‎src/style.scss‎

Lines changed: 28 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,18 @@ md-tree {
2323
transform: rotate(90deg);
2424
pointer-events: none;
2525
}
26-
27-
& + .checkbox-container .md-container {
28-
margin-left: 0;
29-
}
3026
}
3127

3228
&.md-open > .md-branch-inner > .md-branch-icon-container .md-branch-icon {
3329
transform: rotate(-90deg);
3430
}
31+
32+
// hide arrow icon if we are at the most nested level
33+
&.md-tip {
34+
.md-branch-icon {
35+
display: none;
36+
}
37+
}
3538
}
3639
}
3740

@@ -254,34 +257,23 @@ md-branch {
254257

255258

256259

257-
258-
// --- MIXINS from ngMaterial ---
259-
260+
// Checkbox style
260261
$select-option-padding: 16px !default;
261262
$checkbox-width: 20px !default;
262263
$checkbox-height: $checkbox-width !default;
263264
$checkbox-border-radius: 2px !default;
264265
$checkbox-border-width: 2px !default;
265266

266-
// This mixin allows a user to use the md-checkbox css outside of the
267-
// md-checkbox directive.
268-
// See src/components/select/select.scss for an example.
269-
@mixin checkbox-container(
270-
$checkedSelector: '.md-checked',
271-
$width: $checkbox-width,
272-
$height: $checkbox-height,
273-
$border-width: $checkbox-border-width,
274-
$border-radius: $checkbox-border-radius) {
275-
.md-container {
267+
// branch's checkbox
268+
md-branch.md-checkbox-enabled > .md-branch-inner {
269+
.checkbox-container {
276270
position: relative;
277271
top: 50%;
278272
box-sizing: border-box;
279273
display: inline-block;
280-
width: $width;
281-
height: $height;
282-
@include rtl(left, 0, auto);
283-
@include rtl(right, auto, 0);
284-
margin: auto 24px;
274+
width: $checkbox-width;
275+
height: $checkbox-height;
276+
margin: auto 24px auto 0;
285277

286278
&:before {
287279
box-sizing: border-box;
@@ -308,93 +300,42 @@ $checkbox-border-width: 2px !default;
308300
bottom: -10px;
309301
left: -10px;
310302
}
311-
312-
.md-ripple-container {
313-
position: absolute;
314-
display: block;
315-
width: auto;
316-
height: auto;
317-
left: -15px;
318-
top: -15px;
319-
right: -15px;
320-
bottom: -15px;
321-
}
322303
}
323304

324305
// unchecked
325-
.md-icon {
306+
.checkbox-icon {
326307
box-sizing: border-box;
327308
transition: 240ms;
328309
position: absolute;
329310
top: 0;
330311
left: 0;
331-
width: $width;
332-
height: $height;
333-
border-width: $border-width;
312+
width: $checkbox-width;
313+
height: $checkbox-height;
314+
border-width: $checkbox-border-width;
334315
border-style: solid;
335-
border-radius: $border-radius;
316+
border-radius: $checkbox-border-radius;
336317
}
318+
}
337319

338-
&#{$checkedSelector} .md-icon {
320+
// branch's checkbox: SELECTED
321+
md-branch.md-checkbox-enabled[selected] > .md-branch-inner {
322+
.checkbox-icon {
339323
border-color: transparent;
340324

341325
&:after {
342326
box-sizing: border-box;
343327
transform: rotate(45deg);
344328
position: absolute;
345-
left: $width / 3 - $border-width;
346-
top: $width / 9 - $border-width;
329+
left: $checkbox-width / 3 - $checkbox-border-width;
330+
top: $checkbox-width / 9 - $checkbox-border-width;
347331
display: table;
348-
width: $width / 3;
349-
height: $width * 2 / 3;
350-
border-width: $border-width;
332+
width: $checkbox-width / 3;
333+
height: $checkbox-width * 2 / 3;
334+
border-width: $checkbox-border-width;
351335
border-style: solid;
352336
border-top: 0;
353337
border-left: 0;
354338
content: '';
355339
}
356340
}
357-
358-
// disabled
359-
&[disabled] {
360-
cursor: default;
361-
}
362-
363-
&.md-indeterminate .md-icon {
364-
&:after {
365-
box-sizing: border-box;
366-
position: absolute;
367-
top: 50%;
368-
left: 50%;
369-
transform: translate(-50%, -50%);
370-
display: table;
371-
width: $width * 0.6;
372-
height: $border-width;
373-
border-width: $border-width;
374-
border-style: solid;
375-
border-top: 0;
376-
border-left: 0;
377-
content: '';
378-
}
379-
}
380-
}
381-
382-
383-
@mixin rtl($prop, $ltr-value, $rtl-value) {
384-
#{$prop}: $ltr-value;
385-
[dir=rtl] & {
386-
#{$prop}: $rtl-value;
387-
}
388-
}
389-
390-
391-
// Checkbox style
392-
$select-option-padding: 16px !default;
393-
$checkbox-width: 20px !default;
394-
$checkbox-height: $checkbox-width !default;
395-
$checkbox-border-radius: 2px !default;
396-
$checkbox-border-width: 2px !default;
397-
398-
md-branch.md-checkbox-enabled {
399-
@include checkbox-container('[selected]');
400341
}

0 commit comments

Comments
 (0)