Add new style tray editor

editor/sass/colors.scss

@@ -14,6 +14,8 @@
  * limitations under the License.
  **/
 
+$background-color: #f3f3f3;
+
 $form-placeholder-color: #bbbbbb;
 $form-text-color: #444;
 $form-input-focus-color:  rgba(85,150,230,0.8);
@@ -45,6 +47,8 @@ $workspace-button-color-hover: #666;
 $workspace-button-color-active: #666;
 $workspace-button-color-selected: #AAA;
 
+$workspace-button-color-focus-outline: rgba(85,150,230,0.2);
+
 $typedInput-button-background: #efefef;
 $typedInput-button-background-hover: #ddd;
 $typedInput-button-background-active: #e3e3e3;

editor/sass/editor.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 
-.dialog-form, #dialog-form, #dialog-config-form {
+.dialog-form,#dialog-form, #dialog-config-form {
     margin: 0;
     height: 100%;
 }

editor/sass/mixins.scss

@@ -62,10 +62,13 @@
         background: $workspace-button-background-active;
         cursor: default;
     }
-
     .button-group &:not(:first-child) {
         border-left: none;
     }
+
+    &:focus {
+        outline: 1px solid $workspace-button-color-focus-outline;
+    }
 }
 @mixin workspace-button-toggle {
     @include workspace-button;

editor/sass/sidebar.scss

@@ -22,6 +22,7 @@
     width: 315px;
     background: #fff;
     box-sizing: border-box;
+    z-index: 100;
     @include component-border;
 }
 
@@ -46,13 +47,15 @@
     right: 315px;
     bottom:10px;
     width: 7px;
-    background: url(images/grip.png) no-repeat 50% 50%;
+    z-index: 101;
+    background: $background-color url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
 }
 
 .sidebar-closed > #sidebar { display: none; }
 .sidebar-closed > #sidebar-separator { right: 0px !important; }
 .sidebar-closed > #workspace { right: 7px !important; }
+.sidebar-closed > #editor-stack { right: 8px !important; }
 
 #sidebar .button {
     @include workspace-button;

editor/sass/style.scss

@@ -52,7 +52,7 @@ body {
     font-size: 14px;
     font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
     padding-top: 100px;
-    background: #f3f3f3;
+    background: $background-color;
 }
 
 #main-container {

editor/sass/workspace.scss

@@ -50,6 +50,64 @@
     margin-right: 35px;
 }
 
+#editor-stack {
+    position: absolute;
+    margin: 0;
+    top: 0;
+    bottom: 0px;
+    right: 323px;
+    width: 0;
+}
+.editor-tray {
+    position:absolute;
+    margin: 0;
+    top: 0;
+    min-width: 500px;
+    width: auto;
+    right: -1000px;
+    bottom: 0;
+    background: #fff;
+    border-left: 1px solid $primary-border-color;
+    border-bottom: 1px solid $primary-border-color;
+    box-sizing: content-box;
+    box-shadow: -1px 0 10px rgba(0,0,0,0.1);
+}
+.editor-tray.open {
+    right: 0;
+}
+.editor-tray-body {
+    width: auto;
+    padding: 20px;
+    min-width: 500px;
+    box-sizing: border-box;
+    overflow-y: scroll;
+}
+.editor-tray-header {
+    padding: 10px;
+    box-sizing: border-box;
+    font-weight: bold;
+    height: 40px;
+    border-bottom: 1px solid $primary-border-color;
+    background: $palette-header-background;
+}
+.editor-tray-footer {
+    @include component-footer;
+    height: auto;
+    padding: 8px;
+    button {
+        @include workspace-button;
+        padding: 0.4em 1em;
+    }
+
+}
+#editor-shade {
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    background: rgba(220,220,220,0.5);
+}
 #workspace-add-tab {
     position: absolute;
     box-sizing: border-box;