Make input number extend AbstractNumberField

Also re-styled too look more like the other controls
montagejs · May 14, 2013 · 984a5bc · 984a5bc
1 parent ed8319d
commit 984a5bc
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 245 deletions.
diff --git a/test/input-number/input-number-spec.js b/test/input-number/input-number-spec.js
@@ -23,14 +23,12 @@ TestPageLoader.queueTest("input-number-test", function(testPage) {
  defaultStep = inputNumber.step;
  defaultMin = inputNumber.min;
  defaultMax = inputNumber.max;
- defaultRequired = inputNumber.required;
  }
  //restore default values
  inputNumber.min = defaultMin;
  inputNumber.max = defaultMax;
  inputNumber.step = defaultStep;
  inputNumber.value = defaultValue;
- inputNumber.required = defaultRequired;
  });
  describe("property", function() {
  describe("value", function() {
@@ -169,15 +167,6 @@ TestPageLoader.queueTest("input-number-test", function(testPage) {
  });
  });
  });
- describe("required", function() {
- it("should have correct default", function() {
- expect(defaultRequired).toEqual(false);
- });
- it("can be set", function() {
- inputNumber.required = true;
- expect(inputNumber.required).toEqual(true);
- });
- });
  });
  describe("interaction", function () {
  describe("plus", function () {
@@ -250,7 +239,6 @@ TestPageLoader.queueTest("input-number-test", function(testPage) {
  if (!inputNumber) {
  inputNumber = testPage.test.inputNumberWithAttributes;
  //keep default values
- defaultRequired = inputNumber.required;
  defaultValue = inputNumber.value;
  defaultStep = inputNumber.step;
  defaultMin = inputNumber.min;
@@ -261,10 +249,6 @@ TestPageLoader.queueTest("input-number-test", function(testPage) {
  inputNumber.max = defaultMax;
  inputNumber.step = defaultStep;
  inputNumber.value = defaultValue;
- inputNumber.required = defaultRequired;
- });
- it("should have expected required property value", function () {
- expect(inputNumber.required).toEqual(true);
  });
  it("should have expected min property value", function () {
  expect(inputNumber.min).toEqual(-4);

diff --git a/ui/input-number.reel/input-number.css b/ui/input-number.reel/input-number.css
@@ -1,58 +1,22 @@
 .digit-InputNumber {
- /font-size: 12px;
+ box-sizing: border-box;
  position: relative;
  display: inline-block;
- /width: 5em;
- /margin-right: 2.5em;
-}
-
-.digit-InputNumber > .digit-InputNumber-input {
- font-size: inherit;
- width: 3.6em;
- vertical-align: middle;
- /border-radius: 3px 0 0 3px;
-}
-
-.digit-InputNumber > .digit-InputNumber-input:focus {
- border-color: #7f7f7f;
-}
-
-.digit-InputNumber > .digit-InputNumber-plus,
-.digit-InputNumber > .digit-InputNumber-minus {
- position: absolute;
- margin: 0;
- padding: 0;
- width: 2.5em;
- height: 1.25em;
- right: -2.5em;
- line-height: 0;
-}
-
-.digit-InputNumber > .digit-InputNumber-plus {
- border-width: 1px 1px 0 0;
- border-radius: 0 3px 0 0;
- top: 0px;
-}
-
-.digit-InputNumber > .digit-InputNumber-minus {
- border-width: 1px 1px 1px 0;
- border-radius: 0 0 3px 0;
- bottom: 0px;
-}
-
-
-
-/* Style for Touch */
-.digit-InputNumber {
  font-size: 16px;
  width: auto;
  margin: 0;
 }
 
 .digit-InputNumber > .digit-InputNumber-input {
+ display: inline-block;
  font-size: inherit;
+ height: 2.5em;
+ width: 3.6em;
  border-radius: 0;
  text-align: center;
+ padding-bottom: 3px;
+ border: 1px solid #b3b3b3;
+ /*vertical-align: middle;*/
 }
 
 .digit-InputNumber-input::-webkit-inner-spin-button {
@@ -61,10 +25,18 @@
 
 .digit-InputNumber > .digit-InputNumber-plus,
 .digit-InputNumber > .digit-InputNumber-minus {
- position: static;
+ display: inline-block;
+ font-size: inherit;
+ width: 2.5em;
  height: 2.5em;
  top: auto;
  right: auto;
+ margin: 0;
+ line-height: 2.5em;
+ padding: 2px;
+ border: 1px solid #b3b3b3;
+ cursor: pointer;
+ -webkit-user-select: none;
 }
 .digit-InputNumber > .digit-InputNumber-plus {
  border-width: 1px 1px 1px 0;
@@ -74,3 +46,41 @@
  border-width: 1px 0 1px 1px;
  border-radius: 2.5em 0 0 2.5em;
 }
+/* Light ------------------------------------ */
+
+[data-montage-skin="light"] .digit-InputNumber > .digit-InputNumber-plus,
+[data-montage-skin="light"] .digit-InputNumber > .digit-InputNumber-minus {
+
+ color: hsla(0,0%,0%,.7);
+ text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
+ border-color: hsl(0,0%,80%);
+ background-image: -webkit-linear-gradient(top, hsl(0,0%,96%), hsl(0,0%,92%) );
+ box-shadow: inset 0 1px 1px hsla(0,0%,100%,.8), inset 0 -1px 1px hsla(0,0%,0%,.04), 0 1px 0 hsla(0,0%,100%,.6);
+}
+
+[data-montage-skin="light"] .digit-InputNumber > .digit-InputNumber-plus.montage--active,
+[data-montage-skin="light"] .digit-InputNumber > .digit-InputNumber-minus.montage--active {
+ border-color: hsla(0,0%,70%,1);
+ background-image: -webkit-linear-gradient(top, hsl(0,0%,90%), hsl(0,0%,86%) );
+ box-shadow: inset 0 1px 3px hsla(0,0%,0%,.2), 0 1px 0 hsla(0,0%,100%,.6);
+}
+
+
+/* Dark ------------------------------------ */
+
+[data-montage-skin="dark"] .digit-InputNumber > .digit-InputNumber-plus,
+[data-montage-skin="dark"] .digit-InputNumber > .digit-InputNumber-minus {
+ color: hsla(0,0%,100%,.5);
+ text-shadow: 0 1px 0 hsla(0,0%,0%,.2);
+ border-color: hsl(0,0%,15%);
+ background-image: -webkit-linear-gradient(top, hsl(0,0%,30%), hsl(0,0%,24%) );
+ box-shadow: inset 0 1px 1px hsla(0,0%,100%,.1), inset 0 -1px 1px hsla(0,0%,0%,.06), 0 1px 0 hsla(0,0%,100%,.1);
+}
+
+[data-montage-skin="dark"] .digit-InputNumber > .digit-InputNumber-plus.montage--active,
+[data-montage-skin="dark"] .digit-InputNumber > .digit-InputNumber-minus.montage--active {
+ color: hsla(0,0%,100%,.3);
+ border-color: hsl(0,0%,15%);
+ background-image: -webkit-linear-gradient(top, hsl(0,0%,24%), hsl(0,0%,18%) );
+ box-shadow: inset 0 1px 3px hsla(0,0%,0%,.3), 0 1px 0 hsla(0,0%,100%,.1);
+}
diff --git a/ui/input-number.reel/input-number.html b/ui/input-number.reel/input-number.html
@@ -8,12 +8,16 @@
  {
  "owner": {
  "properties": {
- "element": {"#": "inputNumber"}
+ "element": {"#": "inputNumber"},
+ "_numberFieldTextFieldComponent": {"@": "inputText"},
+ "_numberFieldMinusComponent": {"@": "minus"},
+ "_numberFieldPlusComponent": {"@": "plus"}
+
  }
  },
 
  "inputText": {
- "prototype": "matte/ui/input-text.reel",
+ "prototype": "ui/input-number.reel[TextField]",
  "properties": {
  "element": {"#": "inputText"}
  },
@@ -23,7 +27,7 @@
  },
 
  "plus": {
- "prototype": "matte/ui/button.reel",
+ "prototype": "ui/input-number.reel[Button]",
  "properties": {
  "element": {"#": "buttonPlus"}
  },
@@ -38,7 +42,7 @@
  },
 
  "minus": {
- "prototype": "matte/ui/button.reel",
+ "prototype": "ui/input-number.reel[Button]",
  "properties": {
  "element": {"#": "buttonMinus"}
  },
@@ -59,7 +63,7 @@
 <body>
 
  <span data-montage-id="inputNumber" class="digit-InputNumber">
- <button data-montage-id="buttonMinus" class="digit-InputNumber-minus">-</button><input data-montage-id="inputText" class="digit-InputNumber-input" type="text"><button data-montage-id="buttonPlus" class="digit-InputNumber-plus">+</button>
+ <span data-montage-id="buttonMinus" class="digit-InputNumber-minus">-</span><input data-montage-id="inputText" class="digit-InputNumber-input" type="text"><span data-montage-id="buttonPlus" class="digit-InputNumber-plus">+</span>
  </span>
 
 </body>