From 2ecbbe6fae69378fb0bd09a07afb7a0e81cb71fc Mon Sep 17 00:00:00 2001
From: John Chen <zhang.z.chen@intel.com>
Date: Fri, 6 Jul 2012 11:19:27 +0800
Subject: [PATCH 1/2] [Live View] Set limitation for device size

---
 src/js/views/live.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/views/live.js b/src/js/views/live.js
index bf9855ea..9c0a8d3e 100644
--- a/src/js/views/live.js
+++ b/src/js/views/live.js
@@ -43,9 +43,9 @@
                                 .append('<input required name="name"/>')
                                 .append('<br/>')
                                 .append('<label for="screenWidth">Screen</label>')
-                                .append('<input name="screenWidth" type="number" max="10000" required/>')
+                                .append('<input name="screenWidth" type="number" max="10000" min="240" required/>')
                                 .append('<span>x</span>')
-                                .append('<input name="screenHeight" type="number" max="10000" required/>');
+                                .append('<input name="screenHeight" type="number" max="10000" min="320" required/>');
                             buttonSet = $('<div align="center" id="buttonSet" />').appendTo(deviceForm);
                             if (className === "editDevice") {
                                 if (widget._sysDevices[widget._projectDevice.name]) {

From 5f2405441409996612cca78999529f313ccf7217 Mon Sep 17 00:00:00 2001
From: John Chen <zhang.z.chen@intel.com>
Date: Tue, 10 Jul 2012 17:10:01 +0800
Subject: [PATCH 2/2] [Live View] Validate the screen size in toolbar

---
 src/js/views/live.js | 37 +++++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/js/views/live.js b/src/js/views/live.js
index 9c0a8d3e..a5cbb8ca 100644
--- a/src/js/views/live.js
+++ b/src/js/views/live.js
@@ -30,6 +30,18 @@
                 deviceWrapper,
                 rotateDeviceButton,
                 widget = this,
+                screenCoordElement = function (name, min, className) {
+                    return $('<input type="number" max="10000" required/>')
+                                .attr("name", name)
+                                .attr("min", min)
+                                .addClass(className);
+                },
+                screenWidthElement = function (className) {
+                    return screenCoordElement("screenWidth", 240, className);
+                },
+                screenHeightElement = function (className) {
+                    return screenCoordElement("screenHeight", 320, className);
+                },
                 createDeviceButton = function (className) {
                     var label = (className === "editDevice"?"Edit":"Add") +  " Device";
                     var deviceButton = $('<a/>')
@@ -43,9 +55,9 @@
                                 .append('<input required name="name"/>')
                                 .append('<br/>')
                                 .append('<label for="screenWidth">Screen</label>')
-                                .append('<input name="screenWidth" type="number" max="10000" min="240" required/>')
+                                .append(screenWidthElement())
                                 .append('<span>x</span>')
-                                .append('<input name="screenHeight" type="number" max="10000" min="320" required/>');
+                                .append(screenHeightElement());
                             buttonSet = $('<div align="center" id="buttonSet" />').appendTo(deviceForm);
                             if (className === "editDevice") {
                                 if (widget._sysDevices[widget._projectDevice.name]) {
@@ -135,8 +147,13 @@
                 .end()
                 .appendTo(devicePanel);
 
-            deviceToolbar = $('<div/>')
+            deviceToolbar = $('<form/>')
                 .addClass('panel-section-contents')
+                .submit(function () {
+                    widget._setDevice();
+                    return false;
+                 })
+                .append("<input type='submit' style='display:none' value='sumbit'/>")
                 .appendTo(devicePanel);
 
             widget._recentDevices = $('<select/>').appendTo(deviceToolbar)
@@ -228,15 +245,23 @@
                 .addClass("separated")
                 .appendTo(deviceToolbar);
             widget._screenWidth =
-                $('<input name="screenWidth" type="number" min="0" class="screenCoordinate"/>')
+                screenWidthElement("screenCoordinate")
                 .change( function () {
                     widget._projectDevice.screenWidth = $(this).val();
-                    widget._setDevice();
+                    // Without setTimeout, error message will not show when
+                    // validation fails
+                    setTimeout(function () {
+                            // We have to click the submit button to trigger
+                            // error message when validation fails
+                            deviceToolbar.find('input[type=submit]').click();
+                        },
+                        0
+                    );
                 })
                 .appendTo(deviceToolbar);
             $('<label for="screenHeight"> x </label>').appendTo(deviceToolbar);
             widget._screenHeight =
-                $('<input name="screenHeight" type="number" min="0" class="screenCoordinate"/>')
+                screenHeightElement("screenCoordinate")
                 .change( function () {
                     widget._projectDevice.screenHeight = $(this).val();
                     widget._screenWidth.trigger('change');