Skip to content

Commit 8601aed

Browse files
anthonykoerberanthonykoerber
committed
More small fixes
- use attr form-header for styling - allow for horizontal and vertical spacing in columnable behavior
1 parent 841a4b8 commit 8601aed

5 files changed

Lines changed: 28 additions & 36 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
body {
14-
margin:0;
14+
margin:20px;
1515
padding:0;
1616
background: #eee;
1717
}
@@ -29,11 +29,6 @@
2929
padding: 0;
3030
}
3131

32-
.col {
33-
box-sizing: border-box;
34-
padding: 20px 0 0 20px;
35-
}
36-
3732
mm-form[unresolved] {
3833
display: none;
3934
}
@@ -42,7 +37,7 @@
4237

4338
<body>
4439

45-
<mm-form id="testForm" spacing="20" unresolved>
40+
<mm-form id="testForm" unresolved>
4641
<div class="col" span="1">
4742
<mm-input fitparent name="input" placeholder="Type a Number"></mm-input>
4843
</div>
@@ -68,7 +63,6 @@
6863
</mm-group>
6964
</div>
7065
</mm-form>
71-
7266

7367
<!-- config via markup -->
7468
<!--

‎src/mm-form/mm-form.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,7 @@
241241
formLabel.size = 'medium';
242242
formLabel.setAttribute('name', name);
243243
formLabel.classList.add('_'+key+'-label');
244+
formLabel.setAttribute('form-header', true);
244245

245246
Polymer.dom(formLabel).appendChild(labelTxt);
246247
Polymer.dom(parentEleDOM).insertBefore(formLabel, field);
@@ -312,14 +313,9 @@
312313
valid = false,
313314
value = null;
314315

315-
if (exclude) {
316-
// There could be cases wherein the field is 'excluded', but requires validation.
317-
// Since the field is excluded, it's value will not be in the flat 'data' object
318-
// and will need to be retrieved from the field itself
319-
value = this.config[key].field.value;
320-
} else {
321-
value = this.data[key];
322-
}
316+
// If the field is excluded, it's value will not be in the flat 'this.data' object
317+
// and will need to be retrieved from the field itself
318+
value = exclude ? this.config[key].field.value : this.data[key];
323319

324320
if (noValidateFunc) {
325321
// Call the function to derive true or false

‎src/mm-form/mm-form.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,7 @@
2020
line-height: 29px;
2121
}
2222

23-
:host ::content mm-header[size=medium] {
24-
margin-bottom: 10px;
25-
}
26-
27-
:host ::content mm-checkbox {
23+
:host ::content [form-header] {
2824
margin-bottom: 10px;
2925
}
3026

‎src/mm-test-form-view/mm-test-form-view.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,14 @@
1717
<dom-module id="mm-test-form-view">
1818
<link rel="import" type="css" href="mm-test-form-view.css"/>
1919
<template>
20-
<mm-form id="testForm" config="{{formConfig}}" data="{{formData}}" view={{ref}}>
20+
<mm-form id="testForm"
21+
unresolved
22+
h-space="20"
23+
v-space="40"
24+
config="{{formConfig}}"
25+
data="{{formData}}"
26+
view="{{ref}}">
27+
2128
<!-- row 1 -->
2229
<div class="col" span="1">
2330
<mm-input fitparent name="input" placeholder="Type a Number"></mm-input>
@@ -48,7 +55,7 @@
4855

4956
<!-- row 2 -->
5057
<div id="widthHeightWrapper" class="col" span="2">
51-
<mm-header size="medium">Dimensions</mm-header>
58+
<mm-header size="medium" form-header>Dimensions</mm-header>
5259
<div class="custom-item dimensions">
5360
<mm-radio
5461
id="standardSize"
@@ -95,6 +102,7 @@
95102

96103
<div id="freqCapWrapper" class="col" span="2">
97104
<mm-checkbox
105+
form-header
98106
name="use_mm_freq"
99107
on-changed="_useMMFreqOnChange"
100108
checked="{{use_mm_freq}}">
@@ -135,13 +143,6 @@
135143
</div>
136144
</div>
137145

138-
<!-- TODO styling of checkbox? -->
139-
<div class="col" span="4">
140-
<mm-checkbox>
141-
<label>Hi there!</label>
142-
</mm-checkbox>
143-
</div>
144-
145146
</mm-form>
146147

147148
</template>

‎src/shared/behaviors/columnable.html‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,23 @@
1515
value: 4,
1616
reflectToAttribute: true
1717
},
18-
spacing: {
18+
vSpace: {
19+
type: Number,
20+
value: 10,
21+
reflectToAttribute: true
22+
},
23+
hSpace: {
1924
type: Number,
2025
value: 10,
2126
reflectToAttribute: true
2227
}
2328
},
2429

2530
observers: [
26-
"_applyStyles(columns, spacing)"
31+
"_applyStyles(columns, hSpace, vSpace)"
2732
],
2833

29-
_applyStyles: function(columns, spacing) {
34+
_applyStyles: function(columns, hSpace, vSpace) {
3035
var items = this.getLightDOM();
3136

3237
if (items.length > 0) {
@@ -38,11 +43,11 @@
3843
spanItems.forEach(function(item, index){
3944
var span = parseInt(item.getAttribute('span')),
4045
colWidth = columnWidth * span,
41-
calc = 'calc(' + colWidth + '% - ' + spacing + 'px)';
46+
calc = 'calc(' + colWidth + '% - ' + hSpace + 'px)';
4247

4348
item.style.width = calc;
44-
item.style.marginRight = spacing + 'px';
45-
item.style.marginBottom = spacing + 'px';
49+
item.style.marginRight = hSpace + 'px';
50+
item.style.marginBottom = vSpace + 'px';
4651
});
4752
}
4853
}

0 commit comments

Comments
 (0)