From 43f77ae49c90284bf29f3fd650636f6d2621c861 Mon Sep 17 00:00:00 2001
From: Xu Zhang <xu.u.zhang@intel.com>
Date: Mon, 4 Jun 2012 14:58:33 +0800
Subject: [PATCH 1/8] [Widget] add style property to page widget

* style property of page has two values: page and dialog. User can
configure this property from property panel.
* When style of page is dialog, show its text as Dialog
* enforce style of the first page in app is page
---
 src/css/builder.css      |  1 +
 src/js/views/outline.js  |  5 ++++-
 src/js/views/property.js | 21 +++++++++++++++------
 src/js/widgets.js        | 23 ++++++++++++++++++++++-
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/css/builder.css b/src/css/builder.css
index c9aa4526..3ac5c443 100644
--- a/src/css/builder.css
+++ b/src/css/builder.css
@@ -660,6 +660,7 @@ body.ui-tabs.ui-widget {
     font-size: 12px;
     color: #111111;
     font-style: normal;
+    text-transform: capitalize;
 }
 .treeView span.widgetType:hover {
     color: #2c7a94;
diff --git a/src/js/views/outline.js b/src/js/views/outline.js
index 4fea8750..af5da774 100644
--- a/src/js/views/outline.js
+++ b/src/js/views/outline.js
@@ -167,11 +167,14 @@
             if (node.getType() === "Page") {
                 //set page id
                 var id = node.getProperty('id'),
-                    titleNode = domNode.find("> a > .pageTitle");
+                    titleNode = domNode.find("> a > .pageTitle"),
+                    widgetNode = domNode.find( "> a > .widgetType"),
+                    style = node.getProperty('style');
                 if (titleNode.length === 0)
                     titleNode = $('<span/>').addClass('pageTitle')
                         .appendTo(domNode.find("> a"));
                 titleNode.text(' (' + id + ')');
+                widgetNode.text(style);
             }
         },
         _render: function (domNode, data) {
diff --git a/src/js/views/property.js b/src/js/views/property.js
index 6be0924a..546cd2cc 100644
--- a/src/js/views/property.js
+++ b/src/js/views/property.js
@@ -301,13 +301,22 @@
                                 .attr('id', valueId)
                                 .addClass('title')
                                 .appendTo(value);
-                            //add options to select list
-                            for (o in options[p]) {
-                                //TODO make it simple
-                                $('<option value="' + options[p][o] +
-                                  '">' +options[p][o] + '</option>')
+                            //Forbid changing the style of the first page to "Dialog", we don't want
+                            //to user adjust style of the first page
+                            if (type === 'Page' &&
+                                    node.getDesign().getChildren()[0] === node &&
+                                    p === 'style') {
+                                $('<option value="page">page</option>')
                                     .appendTo(value.find("#" + valueId));
-                                value.find('#'+ valueId).val(valueVal);
+                            } else {
+                                //add options to select list
+                                for (o in options[p]) {
+                                    //TODO make it simple
+                                    $('<option value="' + options[p][o] +
+                                            '">' +options[p][o] + '</option>')
+                                        .appendTo(value.find("#" + valueId));
+                                    value.find('#'+ valueId).val(valueVal);
+                                }
                             }
                         } else {
                             $('<input type ="text" value="">')
diff --git a/src/js/widgets.js b/src/js/widgets.js
index d7da03cd..0dfcfdfd 100644
--- a/src/js/widgets.js
+++ b/src/js/widgets.js
@@ -241,7 +241,23 @@ var BWidgetRegistry = {
         showInPalette: false,
         selectable: true,
         moveable: false,
-        template: '<div data-role="page"></div>',
+        template: function (node) {
+            var prop, code, design = node.getDesign();
+            //make sure style of the first page  can only be page
+            if (design.getChildren()[0] === node) {
+                code =  $('<div data-role="page"></div>');
+            } else {
+                code = $('<div data-role="' + node.getProperty("style") + '"></div>');
+            }
+            code.attr("id", node.getProperty("id"));
+
+            // don't write data-theme if it's using the default
+            prop = node.getProperty("theme");
+            if (prop !== "default") {
+                code.attr("data-theme", prop);
+            }
+            return code;
+        },
         properties: {
             id: {
                 type: "string",
@@ -253,6 +269,11 @@ var BWidgetRegistry = {
                 options: [ "default", "a", "b", "c", "d", "e" ],
                 defaultValue: "default",
                 htmlAttribute: "data-theme"
+            },
+            style: {
+                type: "string",
+                options: ["page", "dialog"],
+                defaultValue: "page",
             }
         },
         redirect: {

From 3f7c5d5ae93038545089cc950c4e2f40dbbaeaf1 Mon Sep 17 00:00:00 2001
From: Xu Zhang <xu.u.zhang@intel.com>
Date: Mon, 4 Jun 2012 17:59:10 +0800
Subject: [PATCH 2/8] [Page View] add style configure on new page Dialog

Also creating new page according to style passed in.
---
 src/js/pageTemplate.js | 10 +++++++++-
 src/js/views/page.js   |  9 +++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/js/pageTemplate.js b/src/js/pageTemplate.js
index fb6874d6..56ee50ca 100644
--- a/src/js/pageTemplate.js
+++ b/src/js/pageTemplate.js
@@ -18,7 +18,8 @@ $(function() {
         options :{
             design: null,
             pageTemplate: "Blank Page",
-            layout: ['Content']
+            layout: ['Content'],
+            pageStyle: 'page'
         },
         /**
          * Creates an new page according to page configure.
@@ -30,6 +31,7 @@ $(function() {
             var design = config.design || ADM.getDesignRoot(),
                 pageTemplate = config.pageTemplate || this.options[pageTemplate],
                 layout = this.options.layout.concat(config.layout),
+                style = config.pageStyle || this.options[pageStyle],
                 newPage, result;
 
             if (!design.instanceOf("Design")) {
@@ -43,6 +45,12 @@ $(function() {
                 return null;
             }
 
+            //set page style
+            result = newPage.setProperty('style', style);
+            if (!result.result) {
+                return null;
+            }
+
             //set page layout
             result = setPageLayout(newPage, layout);
             //TODO: if we have some specfic logic to handle with template,
diff --git a/src/js/views/page.js b/src/js/views/page.js
index 784b9a81..09140778 100644
--- a/src/js/views/page.js
+++ b/src/js/views/page.js
@@ -243,6 +243,7 @@
                 dialog.find('#pagePicker').get(0).selectedIndex = 0;
                 dialog.find('#header_layout').attr("checked", true);
                 dialog.find('#footer_layout').attr("checked", true);
+                dialog.find('input:radio[name=Layout]')[0].checked = true;
             }
             catch (err) {
                 console.error(err.message);
@@ -256,6 +257,12 @@
                     dialog = $('#pageDialog');
 
                 options.pageTemplate = dialog.find("#pagePicker").val();
+                //get style of new page
+                if (dialog.find('input:radio[name=Layout]:checked').next().html() === 'Dialog') {
+                    options.pageStyle = 'dialog';
+                } else {
+                    options.pageStyle = 'page';
+                }
                 //get checkbox value
                 if (dialog.find('#header_layout').is(":checked")) {
                     layout.push('Header');
@@ -297,14 +304,12 @@
                         '<select id="pagePicker" size="1"></select></li>' +
                         '<li class="m150 mt30"><label for="Layout">Layout</label>' +
                         '<fieldset><ul>' +
-                        /*
                         '<li>' +
                         '<input class="fieldInput" type="radio" name="Layout"/>' +
                         '<label class="fieldLabel" for="layout">Normal Page</label></li>' +
                         '<li>' +
                         '<input class="fieldInput" type="radio" name="Layout"/>' +
                         '<label class="fieldLabel" for="layout">Dialog</label></li>' +
-                        */
                         '<li>' +
                         '<input id="header_layout" class="fieldInput" type="checkbox" name="Header"/>' +
                         '<label class="fieldLabel" for="layout">Header</label></li>' +

From 3111cafe097af5bb1d83abc4311666683120c975 Mon Sep 17 00:00:00 2001
From: Xu Zhang <xu.u.zhang@intel.com>
Date: Mon, 4 Jun 2012 19:04:13 +0800
Subject: [PATCH 3/8] [Layout View] make dialog node display as "page" node in
 layout

In design view, we make dialog and page looked as same.
---
 src/js/views/layout.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/js/views/layout.js b/src/js/views/layout.js
index c0741d1b..bb8c14e0 100644
--- a/src/js/views/layout.js
+++ b/src/js/views/layout.js
@@ -395,6 +395,11 @@
                 $(domNode).addClass('adm-editable');
             }
 
+            // If this node is a "dialog", make it display as "page" in layout view
+            if (admNode.getType() === "Page" && admNode.getProperty("style") === "dialog") {
+                $(domNode).attr('data-role', 'page');
+            }
+
             // FIXME: This is a bit of a hack; we're removing the disabled
             // attribute from widgets because when they're disabled, they
             // lose mouse clicks and can't be selected. This code is assuming

From b54f20e056e160ac767179e21d53cae6b663ea66 Mon Sep 17 00:00:00 2001
From: John Chen <zhang.z.chen@intel.com>
Date: Mon, 25 Jun 2012 16:37:46 +0800
Subject: [PATCH 4/8] [General] Implement msg-box and overide alert and confirm

Also refactor css definitions for 'Add device' dialog so that it
can be resued by msg-box.
---
 index.html           |  1 +
 src/css/builder.css  | 10 ++++++----
 src/js/msg-box.js    | 30 ++++++++++++++++++++++++++++++
 src/js/views/live.js |  2 +-
 4 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 src/js/msg-box.js

diff --git a/index.html b/index.html
index 21e8d05e..e0042ee9 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
     <body class="vbox fullsize">
         <script src="lib/jquery-1.6.4.min.js"></script>
         <script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
+        <script src="src/js/msg-box.js"></script>
         <script src="src/js/widgets.js"></script>
         <script src="src/js/adm.js"></script>
         <script src="src/js/pageTemplate.js"></script>
diff --git a/src/css/builder.css b/src/css/builder.css
index b87caf01..3e0d7a21 100644
--- a/src/css/builder.css
+++ b/src/css/builder.css
@@ -1329,13 +1329,15 @@ div.propertyItems label[for|=id] {
     size: 4;
 }
 
-.deviceSetting #buttonSet{
-    position: absolute;
+center.title {
+    margin: 1em 1em 1.5em 1em;
+}
+#buttonSet{
     bottom: 0px;
     width: 100%;
 }
-.deviceSetting #buttonSet * {
-    margin: 0 1em 3em 1em;
+#buttonSet * {
+    margin: 1.5em 1em 1.5em 1em;
     min-width: 25%;
 }
 
diff --git a/src/js/msg-box.js b/src/js/msg-box.js
new file mode 100644
index 00000000..4c17d6bf
--- /dev/null
+++ b/src/js/msg-box.js
@@ -0,0 +1,30 @@
+$.rib = $.rib || {};
+$.rib.msgbox = function (){
+    var dlg = $("<div/>").append('<center class="title">'
+            + arguments[0] + '</center>'),
+        buttons = arguments[1], buttonSet;
+    if (buttons) {
+        buttonSet = $('<div align="center" id="buttonSet" />').appendTo(dlg);
+        $.each(buttons, function (name, value) {
+                buttonSet.append($('<button class="buttonStyle"/>')
+                    .text(name)
+                    .bind('click', value)
+                    .bind('click', function () {dlg.dialog('close')}));
+        });
+    }
+    dlg.dialog();
+};
+
+window.alert =  function (msg) {
+    $.rib.msgbox(msg, {"OK": null});
+}
+
+var old_confirm = window.confirm;
+window.confirm = function () {
+    if (arguments.length > 1) {
+       $.rib.msgbox(arguments[0], {'Continue': arguments[1], 'Cancel': arguments[2]});
+    }
+    else
+        return old_confirm(arguments[0]);
+}
+
diff --git a/src/js/views/live.js b/src/js/views/live.js
index 223154e3..f6d86b49 100644
--- a/src/js/views/live.js
+++ b/src/js/views/live.js
@@ -88,7 +88,7 @@
                                     }
                                     return false;
                                 })
-                            deviceForm.dialog({title: label, modal:true, width: 360, height: 260, resizable:false });
+                            deviceForm.dialog({title: label, modal:true, width: 360, resizable:false });
                         });
                     $('<a href="javascript:void(0)">' + label +'</a>').appendTo(deviceToolbar).click(function () {
                         deviceButton.trigger('click');

From 693e2e5ea8acdce4cdff74b082c9ba2966f0872e Mon Sep 17 00:00:00 2001
From: John Chen <zhang.z.chen@intel.com>
Date: Fri, 29 Jun 2012 13:38:12 +0800
Subject: [PATCH 5/8] [General] Use new confirm function to show message

---
 src/js/main.js | 60 +++++++++++++++++++++++++++-----------------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 17c3c576..98e32072 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -590,6 +590,33 @@ $(function() {
 
     var fsUtils, cookieUtils, supportedBrowser, supportedOS,
         errorMsg, redirect = 'https://01.org/rib';
+    var startBuilder = function () {
+        cookieUtils = $.rib.cookieUtils;
+        // if can't get the cookie(no this record), then add exportNotice cookie
+        if (!cookieUtils.get("exportNotice")) {
+            if(!cookieUtils.set("exportNotice", "true")) {
+                // Failed to set the cookie
+                if (window.location.protocol === "file:") {
+                    console.error("Browser needs "
+                            + "'--allow-file-access-from-files"
+                            + "--enable-file-cookies' option." +
+                            + "\nClose the browser if you have already"
+                            + " opened it before.");
+                } else {
+                    console.error("Set exportNotice cookie failed.");
+                }
+            }
+        }
+        // Actually invoke the plugin that sets up our app UI
+        $(document).builder({debugMode: true, model: ADM});
+
+        // init the sandbox file system
+        fsUtils = $.rib.fsUtils;
+        // Try to init a temporary filesystem to test '--allow-file-access-from-files' option
+        requestFileSystem(window.TEMPORARY, 10,  function(filesystem) {
+            fsUtils.initFS(fsUtils.fsType, fsUtils.fsSize, fsInitSuccess, fsInitFailed);
+        }, fsInitFailed);
+    }
     // Detect browser and platform
     supportedBrowser = /(Chrome|Chromium)\/(\S+)/;
     supportedOS = /(Win|Linux|Mac)/;
@@ -597,37 +624,16 @@ $(function() {
         !supportedOS.test(navigator.platform)) {
         errorMsg = 'Only Google Chrome or Chromium are supported right now.  ' +
                    'Unfortunately, it seems you are not using one of these, ' +
-                   'but instead:\n\n\t' + navigator.userAgent + '\n\n' +
+                   'but instead:<br/><br/>' + navigator.userAgent + '<br/><br/>' +
                    'To learn more about Rapid Interface Builder and how to ' +
-                   'use it, please visit our project website at:\n\n\t' +
-                    redirect + '\n\n' +
+                   'use it, please visit our project website at:<br/><br/>' +
+                    redirect + '<br/><br/>' +
                    'You will be redirected there now (or press "Cancel" to ' +
                    'try Rapid Interface Builder at your own risk).';
-        if (confirm(errorMsg)) {
+        confirm(errorMsg, startBuilder, function (){
             document.location = redirect;
             return;
-        }
-    }
-    cookieUtils = $.rib.cookieUtils;
-    // if can't get the cookie(no this record), then add exportNotice cookie
-    if (!cookieUtils.get("exportNotice")) {
-        if(!cookieUtils.set("exportNotice", "true")) {
-            // Failed to set the cookie
-            if (window.location.protocol === "file:") {
-                console.error("Browser needs '--allow-file-access-from-files --enable-file-cookies' option." +
-                        "\nClose the browser if you have already opened it before.");
-            } else {
-                console.error("Set exportNotice cookie failed.");
-            }
-        }
+        });
     }
-    // Actually invoke the plugin that sets up our app UI
-    $(document).builder({debugMode: true, model: ADM});
-
-    // init the sandbox file system
-    fsUtils = $.rib.fsUtils;
-    // Try to init a temporary filesystem to test '--allow-file-access-from-files' option
-    requestFileSystem(window.TEMPORARY, 10,  function(filesystem) {
-        fsUtils.initFS(fsUtils.fsType, fsUtils.fsSize, fsInitSuccess, fsInitFailed);
-    }, fsInitFailed);
+    else startBuilder();
 });

From 408df0733ba6034cf6dac1b813a2ef6c60401305 Mon Sep 17 00:00:00 2001
From: John Chen <zhang.z.chen@intel.com>
Date: Fri, 29 Jun 2012 14:01:12 +0800
Subject: [PATCH 6/8] [Property View] Use new confirm function when deleting a
 Page

---
 src/js/views/property.js | 55 +++++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/js/views/property.js b/src/js/views/property.js
index d3c62872..283806ec 100644
--- a/src/js/views/property.js
+++ b/src/js/views/property.js
@@ -372,36 +372,39 @@
             content.find('#deleteElement')
                 .bind('click', function (e) {
                     var parent, zone, index;
-                    try {
-                        index = node.getZoneIndex();
-                        parent = node.getParent();
-                        zone = parent.getZoneArray(node.getZone());
-                        if (type === "Page") {
-                            continueToDelete = confirm("Are you sure you want to delete the page?");
-                            if(!continueToDelete) {
-                                return false;
+                    var doDelete = function () {
+                        try {
+                            index = node.getZoneIndex();
+                            parent = node.getParent();
+                            zone = parent.getZoneArray(node.getZone());
+                            if (type === "Page") {
+                                $.rib.pageUtils.deletePage(node.getUid(), false);
+                            } else {
+                                ADM.removeChild(node.getUid(), false);
                             }
-                            $.rib.pageUtils.deletePage(node.getUid(), false);
-                        } else {
-                            ADM.removeChild(node.getUid(), false);
-                        }
-                        // Select sibling of removed node, or parent node
-                        // if removed node is the last node of parent.  The
-                        // order is next sibling, prev sibling and parent
-                        if (zone.length === 0) {
-                            //find the first selectable ancestor
-                            while (!parent.isSelectable()) {
-                                parent = parent.getParent();
+                            // Select sibling of removed node, or parent node
+                            // if removed node is the last node of parent.  The
+                            // order is next sibling, prev sibling and parent
+                            if (zone.length === 0) {
+                                //find the first selectable ancestor
+                                while (!parent.isSelectable()) {
+                                    parent = parent.getParent();
+                                }
+                                ADM.setSelected(parent);
+                            } else if (index < zone.length) {
+                                ADM.setSelected(zone[index])
+                            } else {
+                                ADM.setSelected(zone[zone.length - 1]);
                             }
-                            ADM.setSelected(parent);
-                        } else if (index < zone.length) {
-                            ADM.setSelected(zone[index])
-                        } else {
-                            ADM.setSelected(zone[zone.length - 1]);
+                        }
+                        catch (err) {
+                            console.error(err.message);
                         }
                     }
-                    catch (err) {
-                        console.error(err.message);
+                    if (type === "Page") {
+                        confirm("Are you sure you want to delete the page?", doDelete);
+                    } else {
+                        doDelete();
                     }
                     e.stopPropagation();
                     return false;

From 6385ebf41d2b822d8bab0e30e70ed8cd1b7f90a5 Mon Sep 17 00:00:00 2001
From: John Chen <zhang.z.chen@intel.com>
Date: Fri, 29 Jun 2012 15:29:38 +0800
Subject: [PATCH 7/8] [Project View] Use new confirm function when deleting a
 project

---
 src/js/views/project.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/js/views/project.js b/src/js/views/project.js
index b1df87a0..8e38cec0 100644
--- a/src/js/views/project.js
+++ b/src/js/views/project.js
@@ -289,10 +289,9 @@
                         });
                     }
                 };
-                var continueToDelete = confirm("Are you sure you want to delete it?");
-                if(continueToDelete) {
+                confirm("Are you sure you want to delete it?", function() {
                     $.rib.pmUtils.deleteProject(pid, success);
-                }
+                });
             };
             // draw project box
             box = $('<div/>').attr('id',pid)

From 7f69bd0eb5f7cad4c3fa4b8ecab9e5e7e1b08624 Mon Sep 17 00:00:00 2001
From: John Chen <zhang.z.chen@intel.com>
Date: Fri, 29 Jun 2012 17:32:00 +0800
Subject: [PATCH 8/8] [Palette View] Make sure there's no duplicated widget

---
 src/js/views/palette.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/js/views/palette.js b/src/js/views/palette.js
index 83341255..6f90d23c 100644
--- a/src/js/views/palette.js
+++ b/src/js/views/palette.js
@@ -72,7 +72,9 @@
             listWidgets = function (container, group) {
                 $.each(group, function (i, value) {
                     if (value && typeof value === "string") {
-                        if (BWidget.isPaletteWidget(value)) {
+                        if (BWidget.isPaletteWidget(value) &&
+                            // Avoid duplication
+                            container.find("#BWidget-" + value).length === 0) {
                             generateWidget(container, value);
                         }
                     }