[Widget]: Add dialog support in RIB

src/css/builder.css

@@ -654,6 +654,7 @@ body.ui-tabs.ui-widget {
     font-size: 12px;
     color: #111111;
     font-style: normal;
+    text-transform: capitalize;
 }
 .treeView span.widgetType:hover {
     color: #2c7a94;

src/js/pageTemplate.js

@@ -18,7 +18,8 @@ $(function() {
         options :{
             design: null,
             pageTemplate: "Blank Page",
-            layout: ['Content']
+            layout: ['Content'],
+            isDialog: false
         },
         /**
          * Creates an new page according to page configure.
@@ -30,19 +31,26 @@ $(function() {
             var design = config.design || ADM.getDesignRoot(),
                 pageTemplate = config.pageTemplate || this.options[pageTemplate],
                 layout = this.options.layout.concat(config.layout),
+                isDialog = config.isDialog || this.options.isDialog,
                 newPage, result;
 
             if (!design.instanceOf("Design")) {
                 console.error("Error: wrong design root passed in");
                 return null;
             }
 
+            ADM.startTransaction();
             // create New ADM page node
-            newPage = ADM.createNode('Page');
+            newPage = new ADMNode("Page");
             if (!newPage) {
                 return null;
             }
-
+            ADM.addChild(design, newPage);
+            //set dialog property of page
+            result = ADM.setProperty(newPage, 'dialog', isDialog);
+            if (!result.result) {
+                return null;
+            }
             //set page layout
             result = setPageLayout(newPage, layout);
             //TODO: if we have some specfic logic to handle with template,
@@ -61,7 +69,7 @@ $(function() {
                 }
             }
             */
-            ADM.addChild(design, newPage);
+            ADM.endTransaction();
             return result? newPage: null;
 
             /**

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("dialog") === true) {
+                $(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

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"),
+                    isDialog = node.getProperty('dialog');
                 if (titleNode.length === 0)
                     titleNode = $('<span/>').addClass('pageTitle')
                         .appendTo(domNode.find("> a"));
                 titleNode.text(' (' + id + ')');
+                widgetNode.text(isDialog? "dialog" : "page");
             }
         },
         _render: function (domNode, data) {

src/js/views/page.js

@@ -242,6 +242,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);
@@ -255,6 +256,12 @@
                     dialog = $('#pageDialog');
 
                 options.pageTemplate = dialog.find("#pagePicker").val();
+                //get style of new page
+                if (dialog.find('input:radio[name=Layout]:checked').val() === 'dialog') {
+                    options.isDialog = true;
+                } else {
+                    options.isDialog = false;
+                }
                 //get checkbox value
                 if (dialog.find('#header_layout').is(":checked")) {
                     layout.push('Header');
@@ -296,14 +303,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"/>' +
+                        '<input class="fieldInput" type="radio" name="Layout" value="page"/>' +
                         '<label class="fieldLabel" for="layout">Normal Page</label></li>' +
                         '<li>' +
-                        '<input class="fieldInput" type="radio" name="Layout"/>' +
+                        '<input class="fieldInput" type="radio" name="Layout" value="dialog"/>' +
                         '<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>' +

src/js/views/property.js

@@ -144,9 +144,17 @@
                 // display property of widget
                 switch (propType) {
                     case "boolean":
-                        $('<input type="checkbox"/>')
-                            .attr('id', valueId)
-                            .appendTo(value);
+                        //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 === 'dialog') {
+                            code.empty();
+                        } else {
+                            $('<input type="checkbox"/>')
+                                .attr('id', valueId)
+                                .appendTo(value);
+                        }
 
                         // FIXME: Boolean values should be actual booleans, not
                         // "true" and "false" strings; but because of bugs we

src/js/widgets.js

@@ -635,8 +635,8 @@ var BWidgetRegistry = {
             opentargetas : {
                 type: "string",
                 displayName: "open target as",
-                options: ["page", "dialog"],
-                defaultValue: "page",
+                options: ["default", "page", "dialog"],
+                defaultValue: "default",
                 htmlAttribute: "data-rel"
             },
             icon: BCommonProperties.icon,