Integration 20120913

index.html

@@ -47,6 +47,7 @@
         <script src="src/js/views/outline.js"></script>
         <script src="src/js/views/property.js"></script>
         <script src="src/js/views/palette.js"></script>
+        <script src="src/js/views/eventHandler.js"></script>
         <script src="src/js/views/widget.js"></script>
         <script src="src/js/panel.js"></script>
         <script src="src/js/main.js"></script>

src/css/builder.css

@@ -186,35 +186,39 @@ body.ui-tabs.ui-widget {
 }
 .navbar > ul.ui-tabs-nav {
     display: -webkit-box;
-    border: 0px none transparent;
+    border: 3px solid #1C2229;
     background: none;
+    height: 26px;
+    width: 293px; /* FIXME: ul li width calculate have some issues, it will be broken when zoom in/out. */
     padding: 0px;
     margin: 12px 0px 12px 10px;
-    -webkit-border-top-left-radius: 0px;
-    -webkit-border-top-right-radius: 0px;
-    -webkit-border-bottom-left-radius: 0px;
-    -webkit-border-bottom-right-radius: 0px;
+    border-radius: 8px;
 }
 .navbar > ul.ui-tabs-nav li {
-    -webkit-border-top-left-radius: 0px;
-    -webkit-border-top-right-radius: 0px;
-    -webkit-border-bottom-left-radius: 0px;
-    -webkit-border-bottom-right-radius: 0px;
     top: 0px;
     margin: 0px;
-    border: none;
-    background: none;
+    border-top: 1px solid #95999B;
+    border-right: 1px solid #393C3D;
+    border-bottom: 1px solid #323536;
+    border-left: 1px solid #95999B;
+    border-radius: 0px;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #575D63), color-stop(20%, #737A80));
 }
 .navbar > ul.ui-tabs-nav li:first-child {
-    -webkit-border-top-left-radius: .5em !important;
-    -webkit-border-bottom-left-radius: .5em !important;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
 }
 .navbar > ul.ui-tabs-nav li:last-child {
-    -webkit-border-top-right-radius: .5em !important;
-    -webkit-border-bottom-right-radius: .5em !important;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+.navbar > ul.ui-tabs-nav li:hover {
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #528791), color-stop(20%, #6B9FA9));
+    box-shadow: inset 0 0 10px #446A70;
 }
 .navbar > ul.ui-tabs-nav li.ui-tabs-selected {
     padding-bottom: 0px;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #366B7E), color-stop(20%, #46889A));
 }
 .navbar .default-tools a:hover {
     /* GRG */
@@ -235,9 +239,18 @@ body.ui-tabs.ui-widget {
 }
 
 .navbar > ul.ui-tabs-nav li a {
-    padding: 0;
-    height: 32px;
+    width: 80px;
+    height: 26px;
+    font-size: 12px;
+    font-family: OpenSans-SB;
+    text-transform: uppercase;
+    text-align: center;
+    text-shadow: -1px -1px 1px #222;
+    line-height: 26px;
+    color: white;
+    padding: 0px;
     border: none;
+    outline:none;
 }
 
 /*
@@ -1495,54 +1508,18 @@ p.title {
 input.screenCoordinate::-webkit-inner-spin-button {
     -webkit-appearance: none
 }
-
 .projectViewButton {
-    background: url("images/homeButton_up.png") no-repeat 0 0;
-    width: 45px;
-}
-.projectViewButton:focus,
-.projectViewButton:hover,
-.projectViewButton:active {
-    background-image: url("images/homeButton_active.png");
-}
-.ui-tabs-selected >.projectViewButton {
-    background-image: url("images/homeButton_down.png");
-}
-.layoutViewButton {
-    background: url("images/layoutButton_up.png") no-repeat 0 0;
-    width: 80px;
-}
-.layoutViewButton:focus,
-.layoutViewButton:hover,
-.layoutViewButton:active {
-    background-image: url("images/layoutButton_active.png");
-}
-.ui-tabs-selected >.layoutViewButton {
-    background-image: url("images/layoutButton_down.png");
+    width: 45px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */
+    text-indent: -3000px;
+    background-image: url(images/homeIcon.png);
+    background-position: center;
+    background-repeat: no-repeat;
 }
 .codeViewButton {
-    background: url("images/codeButton_up.png") no-repeat 0 0;
-    width: 71px;
-}
-.codeViewButton:focus,
-.codeViewButton:hover,
-.codeViewButton:active {
-    background-image: url("images/codeButton_active.png");
-}
-.ui-tabs-selected >.codeViewButton {
-    background-image: url("images/codeButton_down.png");
+    width: 70px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */
 }
 .liveViewButton {
-    background: url("images/previewButton_up.png") no-repeat 0 0;
-    width: 87px;
-}
-.liveViewButton:focus,
-.liveViewButton:hover,
-.liveViewButton:active {
-    background-image: url("images/previewButton_active.png");
-}
-.ui-tabs-selected >.liveViewButton {
-    background-image: url("images/previewButton_down.png");
+    width: 90px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */
 }
 .centerImage {
     margin-top: 8px;
@@ -1563,17 +1540,19 @@ input.screenCoordinate::-webkit-inner-spin-button {
     margin: 0 0.6em;
 }
 
-#eventHandlerDialog {
+.eventHandler {
+    width: 980px !important; /* Override computed style */
+    height: 560px !important; /* Override computed style */
     overflow: hidden;
 }
 
-#eventHandlerDialog .title {
+.eventHandler .title {
     position: relative;
     height: 52px;
     background-color: #E4E5DF;
 }
 
-#eventHandlerDialog .title > label {
+.eventHandler .title > label {
     position: absolute;
     left: 10px;
     top: 16px;
@@ -1583,44 +1562,43 @@ input.screenCoordinate::-webkit-inner-spin-button {
     font-weight: 600; /* semi-bold */
 }
 
-
-#eventHandlerDialog .wrap_left {
+.eventHandler .wrap_left {
     position: relative;
     width: 230px;
     border-right: 1px solid #dededc;
 }
 
-#eventHandlerDialog .wrap_left .container {
+.eventHandler .wrap_left .container {
     position: absolute;
     width: 100%;
     margin: 10px;
 }
 
 
-#eventHandlerDialog .wrap_left .container * {
+.eventHandler .wrap_left .container * {
     display: inline-block;
 }
 
-#eventHandlerDialog .wrap_left .container select {
+.eventHandler .wrap_left .container select {
     position: absolute;
     top: 10px;
     left: 0px;
     width: 270px;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset {
+.eventHandler .wrap_left .container fieldset {
     position: absolute;
     top: 40px;
     width: 244px;
     height: 370px;
     overflow: auto;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset ul {
+.eventHandler .wrap_left .container fieldset ul {
     margin: 0px;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset li {
+.eventHandler .wrap_left .container fieldset li {
     display: block;
     padding: 8px 8px 8px 8px;
     margin-left: -36px;
@@ -1630,36 +1608,40 @@ input.screenCoordinate::-webkit-inner-spin-button {
     border-bottom: 1px solid #CCC;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset li.ui-selected {
+.eventHandler .wrap_left .container fieldset li.ui-selected {
     background-color: #4AE57B;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset li > a.link {
+.eventHandler .wrap_left .container fieldset li > a.link {
     padding-top: 8px;
     width: 160px;
     height: 34px;
 }
 
-#eventHandlerDialog .wrap_left .container button.doneButton {
+.eventHandler .wrap_left .container fieldset a.ui-button  {
+    margin-top: 0px;
+    float: right;
+}
+
+.eventHandler .wrap_left .container button.doneButton {
     position: absolute;
     top: 440px;
     left: 46px;
     width: 180px;
 }
 
-#eventHandlerDialog .wrap_right {
+.eventHandler .wrap_right {
     width: 630px;
 }
 
-#eventHandlerDialog .wrap_right .container {
+.eventHandler .wrap_right .container {
     overflow: auto;
     resize:  none;
-    height: 600px;
     width: 98%;
     margin: 6px;
 }
 
-#eventHandlerDialog .wrap_right .container .CodeMirror {
+.eventHandler .wrap_right .container .CodeMirror {
     margin: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
@@ -1669,6 +1651,24 @@ input.screenCoordinate::-webkit-inner-spin-button {
     height: 470px;
 }
 
-#eventHandlerDialog .wrap_right .container .CodeMirror .CodeMirror-scroll {
+.eventHandler .wrap_right .container .CodeMirror .CodeMirror-scroll {
     height: 464px;
 }
+
+.eventHandlerIcon {
+    display: inline-block;
+    position: relative;
+    top: 4px;
+    left: 4px;
+    margin-right: 1px;
+    text-indent: -3000px;
+    height: 20px;
+    width: 20px;
+    background-repeat: no-repeat;
+    background-position: left top;
+    background-image: url('images/eventHandlerIcon.png');
+}
+
+.eventHandlerIcon:hover {
+    opacity: 0.8;
+}

src/js/jquery-workarounds.js

@@ -373,7 +373,7 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, {
     _contactContainers: function(event) {
 
         // get innermost container that intersects with item
-        var innermostContainer = null, innermostIndex = null, direction, intersection;
+        var innermostContainer = null, innermostIndex = null;
 
 
         for (var i = this.containers.length - 1; i >= 0; i--){
@@ -384,8 +384,7 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, {
                 continue;
 
 
-            if(intersection = this._intersectsWithPointer(this.containers[i].containerCache)) {
-                direction = intersection == 1 ? "down" : "up";
+            if(this._intersectsWithPointer(this.containers[i].containerCache)) {
 
                 // if we've already found a container and it's more "inner" than this, then continue
                 if(innermostContainer && $.ui.contains(this.containers[i].element[0], innermostContainer.element[0]))
@@ -420,17 +419,15 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, {
             for (var j = this.items.length - 1; j >= 0; j--) {
                 if(!$.ui.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue;
                 var cur = this.items[j][posProperty];
-                if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base))
+                var nearBottom = false;
+                if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)) {
                     cur += this.items[j][sizeProperty];
+                    nearBottom = true;
+                }
 
                 if(Math.abs(cur - base) < dist) {
                     dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
-                    if(!this._intersectsWithPointer(itemWithLeastDistance) && base != cur)
-                    {
-                        this.direction =  base > cur ? "up": "down";
-                    }
-                    else
-                        this.direction = direction;
+                    this.direction =  nearBottom ? "up": "down";
                 }
             }
 

src/js/main.js

@@ -255,10 +255,10 @@
         _constructApp: function(container) {
             var widget = this;
             $('<ul/>').appendTo(container)
-                .append('<li><a class="projectViewButton" href="#projectView"></a></li>')
-                .append('<li><a class="layoutViewButton" href="#layoutView"></a></li>')
-                .append('<li><a class="codeViewButton" href="#codeView"></a></li>')
-                .append('<li><a class="liveViewButton" href="#liveView"></a></li>');
+                .append('<li><a class="projectViewButton" href="#projectView">Projects</a></li>')
+                .append('<li><a class="layoutViewButton" href="#layoutView">Layout</a></li>')
+                .append('<li><a class="codeViewButton" href="#codeView">Code</a></li>')
+                .append('<li><a class="liveViewButton" href="#liveView">Preview</a></li>');
 
             // Add the view plugins
             this.ui.projectView = $('<div/>').appendTo(container)
@@ -315,6 +315,10 @@
                 .addClass('view live flex1');
             this.ui.liveView.append('<div class="stage flex1 vbox">');
 
+            this.ui.eventHandlerView = $('<div/>').appendTo(container)
+                .attr('id', 'eventHandlerView')
+                .addClass('view eventHandler');
+
             $('.pageView').each( function () {
                 $(this).pageView();
                 $(this).pageView('option', 'model', ADM);
@@ -330,6 +334,11 @@
                 $(this).propertyView('option', 'model', ADM);
             });
 
+            $('.eventHandler').each( function() {
+                $(this).eventHandlerView();
+                $(this).eventHandlerView('option', 'model', ADM);
+            })
+
             $('.paletteView').each( function () {
                 $(this).paletteView();
                 widget._bindResizeEvent(this, 'paletteView');
@@ -431,6 +440,7 @@
             this.ui.layoutView = $('.view.layout').eq(0);
             this.ui.codeView = $('.view.code').eq(0);
             this.ui.liveView = $('.view.live').eq(0);
+            this.ui.eventHandlerView = $('.view.eventHandler').eq(0);
             this.ui.tools = $('.tools-primary').eq(0);
             this.ui.extras = $('.tools-secondary').eq(0);
         },