From 611567e76012f4974bb7b2b9e2ddf190f9f0c4cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anto=CC=81nio=20Afonso?= Date: Mon, 15 Jul 2013 13:52:32 -0700 Subject: [PATCH 1/5] Add Alert --- test/alert/alert-spec.js | 27 +++++++++ test/alert/alert-test.html | 31 ++++++++++ test/alert/alert-test.js | 4 ++ test/all.js | 1 + ui/alert.reel/alert.css | 113 +++++++++++++++++++++++++++++++++++++ ui/alert.reel/alert.html | 60 ++++++++++++++++++++ ui/alert.reel/alert.js | 23 ++++++++ ui/alert.reel/alert.meta | 22 ++++++++ 8 files changed, 281 insertions(+) create mode 100644 test/alert/alert-spec.js create mode 100644 test/alert/alert-test.html create mode 100644 test/alert/alert-test.js create mode 100644 ui/alert.reel/alert.css create mode 100644 ui/alert.reel/alert.html create mode 100644 ui/alert.reel/alert.js create mode 100644 ui/alert.reel/alert.meta diff --git a/test/alert/alert-spec.js b/test/alert/alert-spec.js new file mode 100644 index 0000000..d49798c --- /dev/null +++ b/test/alert/alert-spec.js @@ -0,0 +1,27 @@ +var TestPageLoader = require("montage-testing/testpageloader").TestPageLoader; + +TestPageLoader.queueTest("alert-test", function(testPage) { + + describe("test/alert/alert-spec", function() { + it("should load", function() { + expect(testPage.loaded).toBe(true); + }); + + describe("Alert", function() { + it("can be created", function() { + expect(testPage.test.templateObjects.alert).toBeDefined(); + }); + + it("can be shown", function() { + var alert = testPage.test.templateObjects.alert; + + alert.show(); + + testPage.waitForComponentDraw(alert._overlay); + runs(function() { + expect(testPage.iframe.contentDocument.body.contains(alert._overlay.element)).toBeTruthy(); + }); + }); + }); + }); +}); diff --git a/test/alert/alert-test.html b/test/alert/alert-test.html new file mode 100644 index 0000000..f3b2f96 --- /dev/null +++ b/test/alert/alert-test.html @@ -0,0 +1,31 @@ + + + + + Alert Test + + + + + +

Alert

+ +
+ + + diff --git a/test/alert/alert-test.js b/test/alert/alert-test.js new file mode 100644 index 0000000..b18378c --- /dev/null +++ b/test/alert/alert-test.js @@ -0,0 +1,4 @@ +var TestController = require("montage-testing/test-controller").TestController; + +exports.Test = TestController.specialize({ +}); diff --git a/test/all.js b/test/all.js index fd5bbce..8b1251c 100644 --- a/test/all.js +++ b/test/all.js @@ -1,5 +1,6 @@ require("montage-testing").run(require,[ // Please keep in alphabetical order + "test/alert/alert-spec", "test/button/button-spec", "test/checkbox/checkbox-spec", "test/slider/slider-spec", diff --git a/ui/alert.reel/alert.css b/ui/alert.reel/alert.css new file mode 100644 index 0000000..591909b --- /dev/null +++ b/ui/alert.reel/alert.css @@ -0,0 +1,113 @@ +.digit-Alert-Overlay { + margin: 20px auto; + max-width: 300px; + min-width: 200px; + font-size: 16px; + border-radius: 6px; + background-color: hsl(0,0%,96%); +} + +.digit-Alert--show { + opacity: 1; + transform: scale(1); + -moz-transform: scale(1); + -webkit-transform: scale(1); + transition-timing-function: cubic-bezier(0.23,0.21,0.00,1.00); + -moz-transition-timing-function: cubic-bezier(0.23,0.21,0.00,1.00); + -webkit-transition-timing-function: cubic-bezier(0.23,0.21,0.00,1.00); +} + +.digit-Alert-content { + padding: 10px; + text-align: center; +} + + +.digit-Alert-header, +.digit-Alert-footer { + padding: 10px; + background-color: hsl(0,0%,90%); +} + +.digit-Alert-header { + text-align: center; + font-size: 1.2em; + font-weight: bold; + border-bottom: 1px solid hsla(0,0%,0%,.06); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.digit-Alert-footer { + text-align: right; + border-top: 1px solid hsla(0,0%,0%,.06); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; +} + +.digit-Button.digit-Alert-button--cancel { + color: hsl(0,0%,60%); + border-color: hsl(0,0%,80%); + background-color: transparent; +} + + +/* Light ------------------------------------ */ + + +[data-montage-skin="light"] .digit-Alert { + color: hsl(0,0%,40%); + text-shadow: 0 1px 0 hsla(0,0%,100%,.4); + background: hsl(0,0%,90%); +} + +[data-montage-skin="light"] .digit-Alert-header, +[data-montage-skin="light"] .digit-Alert-footer { + background-image: linear-gradient(top, hsl(0,0%,96%), hsl(0,0%,92%)); + background-image: -moz-linear-gradient(top, hsl(0,0%,96%), hsl(0,0%,92%)); + background-image: -webkit-linear-gradient(top, hsl(0,0%,96%), hsl(0,0%,92%)); +} + +[data-montage-skin="light"] .digit-Alert-header { + border-bottom: 1px solid hsla(0,0%,0%,.12); +} + +[data-montage-skin="light"] .digit-Button.digit-Alert-button--cancel { + color: hsl(0,0%,60%); + border-color: hsl(0,0%,86%); + background: transparent; + box-shadow: inset 0 1px 1px hsla(0,0%,100%,.2), inset 0 -1px 1px hsla(0,0%,0%,.04), 0 1px 0 hsla(0,0%,100%,.6); +} + + +/* Dark ------------------------------------ */ + +[data-montage-skin="dark"] .digit-Alert { + background: hsl(0,0%,20%); +} + +[data-montage-skin="dark"] .digit-Alert-content { + color: hsl(0,0%,40%); + text-shadow: 0 1px 0 hsla(0,0%,100%,.4); + background: hsl(0,0%,90%); +} + +[data-montage-skin="dark"] .digit-Alert-header, +[data-montage-skin="dark"] .digit-Alert-footer { + background-image: linear-gradient(top, hsl(0,0%,26%), hsl(0,0%,20%) ); + background-image: -moz-linear-gradient(top, hsl(0,0%,26%), hsl(0,0%,20%) ); + background-image: -webkit-linear-gradient(top, hsl(0,0%,26%), hsl(0,0%,20%) ); +} + +[data-montage-skin="dark"] .digit-Alert-header { + color: hsl(0,0%,70%); + text-shadow: none; + border-bottom: 1px solid hsla(0,0%,100%,.9); +} + +[data-montage-skin="dark"] .digit-Button.digit-Alert-button--cancel { + color: hsl(0,0%,50%); + border-color: hsl(0,0%,16%); + background: transparent; + box-shadow: inset 0 1px 0 hsla(0,0%,100%,.06), inset 0 -1px 1px hsla(0,0%,0%,.04), 0 1px 0 hsla(0,0%,100%,.1); +} \ No newline at end of file diff --git a/ui/alert.reel/alert.html b/ui/alert.reel/alert.html new file mode 100644 index 0000000..94b572b --- /dev/null +++ b/ui/alert.reel/alert.html @@ -0,0 +1,60 @@ + + + + + + + + +
+
+
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/ui/alert.reel/alert.js b/ui/alert.reel/alert.js new file mode 100644 index 0000000..dab46cd --- /dev/null +++ b/ui/alert.reel/alert.js @@ -0,0 +1,23 @@ +/** + * @module ui/alert.reel + */ +var AbstractAlert = require("montage/ui/base/abstract-alert").AbstractAlert; + +/** + * @class Alert + * @extends AbstractAlert + */ +exports.Alert = AbstractAlert.specialize(/** @lends Alert# */ { + constructor: { + value: function Alert() { + this.super(); + } + }, + + templateDidLoad: { + value: function() { + this._overlay = this.templateObjects.modalOverlay; + this._okButton = this.templateObjects.okButton; + } + } +}); diff --git a/ui/alert.reel/alert.meta b/ui/alert.reel/alert.meta new file mode 100644 index 0000000..97f3aac --- /dev/null +++ b/ui/alert.reel/alert.meta @@ -0,0 +1,22 @@ +{ + "blueprint_parent": { + "prototype": "montage/core/meta/blueprint-reference", + "properties": { + "valueReference": { + "blueprintName": "AbstractAlert", + "blueprintModuleId": "montage/ui/base/abstract-alert.meta", + "prototypeName": "AbstractAlert" + } + } + }, + + "root": { + "prototype": "montage/core/meta/blueprint", + "properties": { + "name": "Alert", + "blueprintModuleId": "ui/alert.reel/alert.meta", + "prototypeName": "Alert", + "parent": {"@": "blueprint_parent"} + } + } +} From 56d3800b674d44e0329b1a6ba3e595cbf4a0416f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anto=CC=81nio=20Afonso?= Date: Mon, 15 Jul 2013 16:36:08 -0700 Subject: [PATCH 2/5] Add Confirm --- test/all.js | 1 + test/confirm/confirm-spec.js | 43 +++++++++++++++++++++ test/confirm/confirm-test.html | 33 ++++++++++++++++ test/confirm/confirm-test.js | 4 ++ ui/confirm.reel/confirm.html | 70 ++++++++++++++++++++++++++++++++++ ui/confirm.reel/confirm.js | 24 ++++++++++++ ui/confirm.reel/confirm.meta | 22 +++++++++++ 7 files changed, 197 insertions(+) create mode 100644 test/confirm/confirm-spec.js create mode 100644 test/confirm/confirm-test.html create mode 100644 test/confirm/confirm-test.js create mode 100644 ui/confirm.reel/confirm.html create mode 100644 ui/confirm.reel/confirm.js create mode 100644 ui/confirm.reel/confirm.meta diff --git a/test/all.js b/test/all.js index 8b1251c..0eec6fb 100644 --- a/test/all.js +++ b/test/all.js @@ -3,6 +3,7 @@ require("montage-testing").run(require,[ "test/alert/alert-spec", "test/button/button-spec", "test/checkbox/checkbox-spec", + "test/confirm/confirm-spec", "test/slider/slider-spec", "test/number-field/number-field-spec", "test/radio-button/radio-button-spec", diff --git a/test/confirm/confirm-spec.js b/test/confirm/confirm-spec.js new file mode 100644 index 0000000..2609f15 --- /dev/null +++ b/test/confirm/confirm-spec.js @@ -0,0 +1,43 @@ +var TestPageLoader = require("montage-testing/testpageloader").TestPageLoader; + +TestPageLoader.queueTest("confirm-test", function(testPage) { + + describe("test/confirm/confirm-spec", function() { + it("should load", function() { + expect(testPage.loaded).toBe(true); + }); + + describe("Confirm", function() { + it("can be created", function() { + expect(testPage.test.templateObjects.confirm).toBeDefined(); + }); + + it("can be shown", function() { + var confirm = testPage.test.templateObjects.confirm; + + confirm.show(); + + testPage.waitForComponentDraw(confirm._overlay); + runs(function() { + expect(testPage.iframe.contentDocument.body.contains(confirm._overlay.element)).toBeTruthy(); + }); + }); + + it("uses the configured ok label", function() { + var confirm = testPage.test.templateObjects.confirm; + + confirm.okLabel = "Okay"; + + expect(confirm._okButton.label).toBe("Okay"); + }); + + it("uses the configured cancel label", function() { + var confirm = testPage.test.templateObjects.confirm; + + confirm.cancelLabel = "Nay"; + + expect(confirm._cancelButton.label).toBe("Nay"); + }); + }); + }); +}); diff --git a/test/confirm/confirm-test.html b/test/confirm/confirm-test.html new file mode 100644 index 0000000..668dacf --- /dev/null +++ b/test/confirm/confirm-test.html @@ -0,0 +1,33 @@ + + + + + Confirm Test + + + + + +

Confirm

+ +
+ + + diff --git a/test/confirm/confirm-test.js b/test/confirm/confirm-test.js new file mode 100644 index 0000000..b18378c --- /dev/null +++ b/test/confirm/confirm-test.js @@ -0,0 +1,4 @@ +var TestController = require("montage-testing/test-controller").TestController; + +exports.Test = TestController.specialize({ +}); diff --git a/ui/confirm.reel/confirm.html b/ui/confirm.reel/confirm.html new file mode 100644 index 0000000..68b04e0 --- /dev/null +++ b/ui/confirm.reel/confirm.html @@ -0,0 +1,70 @@ + + + + + + + + +
+
+
+
+
+ + +
+
+
+ + \ No newline at end of file diff --git a/ui/confirm.reel/confirm.js b/ui/confirm.reel/confirm.js new file mode 100644 index 0000000..9706479 --- /dev/null +++ b/ui/confirm.reel/confirm.js @@ -0,0 +1,24 @@ +/** + * @module ui/confirm.reel + */ +var AbstractConfirm = require("montage/ui/base/abstract-confirm").AbstractConfirm; + +/** + * @class Confirm + * @extends AbstractConfirm + */ +exports.Confirm = AbstractConfirm.specialize(/** @lends Confirm# */ { + constructor: { + value: function Confirm() { + this.super(); + } + }, + + templateDidLoad: { + value: function() { + this._overlay = this.templateObjects.modalOverlay; + this._okButton = this.templateObjects.okButton; + this._cancelButton = this.templateObjects.cancelButton; + } + } +}); diff --git a/ui/confirm.reel/confirm.meta b/ui/confirm.reel/confirm.meta new file mode 100644 index 0000000..dd1a758 --- /dev/null +++ b/ui/confirm.reel/confirm.meta @@ -0,0 +1,22 @@ +{ + "blueprint_parent": { + "prototype": "montage/core/meta/blueprint-reference", + "properties": { + "valueReference": { + "blueprintName": "AbstractConfirm", + "blueprintModuleId": "montage/ui/base/abstract-confirm.meta", + "prototypeName": "AbstractConfirm" + } + } + }, + + "root": { + "prototype": "montage/core/meta/blueprint", + "properties": { + "name": "Confirm", + "blueprintModuleId": "ui/confirm.reel/confirm.meta", + "prototypeName": "Confirm", + "parent": {"@": "blueprint_parent"} + } + } +} From c9ce8c735d2006918afbd52b4722e4c105c30ea8 Mon Sep 17 00:00:00 2001 From: Adam Solove Date: Wed, 18 Sep 2013 12:00:48 -0400 Subject: [PATCH 3/5] Documentation for alert. --- overview/README.md | 3 ++- overview/ui/main.reel/main.css | 13 ++++++--- overview/ui/main.reel/main.html | 7 +++++ overview/ui/main.reel/main.js | 14 +++++++++- overview/ui/main.reel/main.json | 11 ++++++-- test/alert/alert-test.html | 1 + ui/alert.reel/README.md | 46 ++++++++++++++++++++++++++++++++ ui/alert.reel/screenshot.png | Bin 0 -> 22305 bytes 8 files changed, 88 insertions(+), 7 deletions(-) create mode 100644 ui/alert.reel/README.md create mode 100644 ui/alert.reel/screenshot.png diff --git a/overview/README.md b/overview/README.md index 7d85192..0e8ae34 100644 --- a/overview/README.md +++ b/overview/README.md @@ -20,4 +20,5 @@ ## Layout components -![List](../ui/list.reel/screenshot.png) \ No newline at end of file +![List](../ui/list.reel/screenshot.png) +![Alert](../ui/alert.reel/screenshot.png) \ No newline at end of file diff --git a/overview/ui/main.reel/main.css b/overview/ui/main.reel/main.css index 58be560..9b8fe18 100644 --- a/overview/ui/main.reel/main.css +++ b/overview/ui/main.reel/main.css @@ -87,9 +87,6 @@ td:nth-child(2) { background: hsl(0,0%,90%); } td:nth-child(3) { background: hsl(0,0%,96%); } td:nth-child(4) { background: hsl(0,0%,24%); } -.layout td:nth-child(3) { background: hsl(0,0%,70%); } -.layout td:nth-child(4) { background: hsl(0,0%,40%); } - .modal td:nth-child(2) { background: hsla(0,0%,0%,.1); } @@ -100,3 +97,13 @@ td:nth-child(4) { background: hsl(0,0%,24%); } .layout td:nth-child(4) { background: hsl(0,0%,40%); } + +.test-alert { + display: inline-block !important; +} + +.test-alert .montage-Overlay { + position: relative !important; + display: inline-block !important; + margin: 0px; +} \ No newline at end of file diff --git a/overview/ui/main.reel/main.html b/overview/ui/main.reel/main.html index 619aa2a..7cdafa9 100644 --- a/overview/ui/main.reel/main.html +++ b/overview/ui/main.reel/main.html @@ -168,6 +168,13 @@

Layout components

+ + Alert +
+
+
+ + diff --git a/overview/ui/main.reel/main.js b/overview/ui/main.reel/main.js index b4091bb..c04e78f 100644 --- a/overview/ui/main.reel/main.js +++ b/overview/ui/main.reel/main.js @@ -1,3 +1,15 @@ var Component = require("montage/ui/component").Component; -exports.Main = Component.specialize({}); +exports.Main = Component.specialize({ + + draw: { + value: function() { + // There can normallt only be one alert, absolutely-positioned, + // so we need to manually mangle the dom and style them to appear inline. + var alerts = ["alert", "alert-light", "alert-dark"]; + alerts.forEach(function(alertName){ + this[alertName].element.appendChild(this[alertName]._overlay.element); + }.bind(this)); + } + } +}); diff --git a/overview/ui/main.reel/main.json b/overview/ui/main.reel/main.json index f806c6b..1e89e54 100644 --- a/overview/ui/main.reel/main.json +++ b/overview/ui/main.reel/main.json @@ -1,7 +1,10 @@ { "owner": { "properties": { - "element": {"#": "main"} + "element": {"#": "main"}, + "alert": {"@": "alert"}, + "alert-light": {"@": "alert-light"}, + "alert-dark": {"@": "alert-dark"} } }, @@ -60,5 +63,9 @@ "list-2": { "prototype": "ui/list.reel", "properties": { "element": {"#": "list-2"}, "content": [1, 2, 3] } }, "listItem-2": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-2"} } }, "list-3": { "prototype": "ui/list.reel", "properties": { "element": {"#": "list-3"}, "content": [1, 2, 3] } }, - "listItem-3": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-3"} } } + "listItem-3": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-3"} } }, + + "alert": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert"}, "title": "Title", "message": "This is an alert"}}, + "alert-light": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert-light"}, "title": "Title", "message": "This is an alert"}}, + "alert-dark": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert-dark"}, "title": "Title", "message": "This is an alert"}} } diff --git a/test/alert/alert-test.html b/test/alert/alert-test.html index f3b2f96..8af64ef 100644 --- a/test/alert/alert-test.html +++ b/test/alert/alert-test.html @@ -4,6 +4,7 @@ Alert Test +