From d9e0c15738ec9ea2cbc1d2ddfdd6462bebc8fda2 Mon Sep 17 00:00:00 2001
From: Ruben Daniels <ruben@c9.io>
Date: Mon, 28 Sep 2015 14:54:56 -0700
Subject: [PATCH] Fix resize issue in save as dialog. Restyle it

---
 plugins/c9.ide.dialog.file/file.xml           | 26 +++++-----
 plugins/c9.ide.keys/editor.js                 |  1 -
 .../themes/default-flat-dark.less             | 47 +++++++++++--------
 .../themes/default-flat-light.less            |  2 +-
 .../themes/flat-dark.less                     | 40 ++++++++++------
 plugins/c9.ide.preferences/experimental.js    |  1 -
 plugins/c9.ide.preferences/general.js         |  1 -
 plugins/c9.ide.preferences/project.js         |  1 -
 plugins/c9.ide.ui/lib/flexbox.js              |  1 +
 9 files changed, 68 insertions(+), 52 deletions(-)

diff --git a/plugins/c9.ide.dialog.file/file.xml b/plugins/c9.ide.dialog.file/file.xml
index aca5d66f..590bd4f5 100644
--- a/plugins/c9.ide.dialog.file/file.xml
+++ b/plugins/c9.ide.dialog.file/file.xml
@@ -18,18 +18,18 @@
           class     = "filesave-inner-padding"
           padding   = "5">
             <div>
-              <a:hsplitbox
-                id        = "boxFilename"
-                align     = "center"
-                padding   = "5"
-                height    = "28" >
-                  <a:label class="lblFilename" width="70" margin="5 0 0 0">Filename:</a:label>
-                  <a:textbox
-                    id           = "txtFilename"
-                    flex         = "7"
-                    class        = "ace_searchbox tb_textbox searchbox searchTxt tb_console tb_textboxInitial"
-                    focusselect  = "true" />
-              </a:hsplitbox>
+                <a:hsplitbox
+                  id        = "boxFilename"
+                  align     = "center"
+                  padding   = "5"
+                  height    = "28" >
+                    <a:label class="lblFilename" width="70" margin="5 0 0 0">Filename:</a:label>
+                    <a:textbox
+                      id           = "txtFilename"
+                      flex         = "7"
+                      class        = "ace_searchbox tb_textbox searchbox searchTxt tb_console tb_textboxInitial"
+                      focusselect  = "true" />
+                </a:hsplitbox>
             </div>
             
             <div class="dgLikeContaier" margin="5 0 5 0" flex="1">
@@ -50,7 +50,7 @@
                   focusselect  = "true" />
             </a:hbox>
             
-            <a:hbox edge="23 0 0" pack="end" padding="8">
+            <a:hbox edge="13 0 0" pack="end" padding="8">
                   <!--class    = "btnIconOnly smallCaption newFolder"-->
                 <a:button
                   id       = "btnCreateFolder"
diff --git a/plugins/c9.ide.keys/editor.js b/plugins/c9.ide.keys/editor.js
index 9f60eb5c..654e7ddd 100644
--- a/plugins/c9.ide.keys/editor.js
+++ b/plugins/c9.ide.keys/editor.js
@@ -167,7 +167,6 @@ define(function(require, exports, module) {
                     title: "Introduction",
                     position: 1,
                     node: intro = new ui.bar({
-                        height: 149,
                         "class" : "intro",
                         style: "padding:12px;position:relative;"
                     })
diff --git a/plugins/c9.ide.layout.classic/themes/default-flat-dark.less b/plugins/c9.ide.layout.classic/themes/default-flat-dark.less
index 5a492f48..b7c7ab55 100644
--- a/plugins/c9.ide.layout.classic/themes/default-flat-dark.less
+++ b/plugins/c9.ide.layout.classic/themes/default-flat-dark.less
@@ -582,7 +582,7 @@
 // Dialog
 @dialog-border-radius: 4px;
 @dialog-shadow: none;
-@dialog-background-color: darken(#3f3f3f, @darken-chrome);
+@dialog-background-color: darken(@element-border, @darken-chrome);
 
 @dialog-header-color: darken(#e0e3e8, @darken-chrome);
 @dialog-header-height: 52px;
@@ -594,13 +594,13 @@
 @dialog-header-font-size: 16px;
 @dialog-header-font-weight: normal;
 
-@dialog-content-background: darken(#3f3f3f, @darken-chrome);
+@dialog-content-background: darken(@element-border, @darken-chrome);
 @dialog-content-dark-background-color: @dialog-content-background;
 @dialog-content-dark-gradient: linear-gradient(top, transparent 0%, transparent 100%);
 @dialog-content-dark-border-top: 0;
 
 @dialog-footer-height: 40px;
-@dialog-footer-background: darken(#3f3f3f, @darken-chrome);
+@dialog-footer-background: darken(@element-border, @darken-chrome);
 @dialog-footer-shadow: none;
 
 @dialog-button-background-position-hover: -14px 0;
@@ -812,8 +812,8 @@
 @spinner-color: darken(#e0e3e8, @darken-chrome);
 @spinner-plus: "spinner_plus_dark.png";
 @spinner-min: "spinner_min_dark.png";
-@spinner-background: darken(#323232, @darken-chrome);
-@spinner-border-color: darken(#323232, @darken-chrome);
+@spinner-background: darken(@element-background, @darken-chrome);
+@spinner-border-color: darken(@element-background, @darken-chrome);
 @spinner-focus-border-color: darken(#1c1c1c, @darken-chrome);
 @spinner-focus-box-shadow: none;
 @spinner-button-hover-background: darken(rgba(0,0,0,0.1), @darken-chrome);
@@ -822,7 +822,7 @@
 @textarea-line-height: 18px;
 @textarea-padding: 10px;
 @textarea-border-radius: 4px;
-@textarea-gradient: linear-gradient(center, #323232 50%, #323232 100%);
+@textarea-gradient: linear-gradient(center, @element-background 50%, @element-background 100%);
 @textarea-box-shadow: none;
 @textarea-font-family: @general-font-family;
 @textarea-font-size: 12px;
@@ -1060,9 +1060,9 @@
 @textbox-close-button: "btnclose_flat_light.png";
 
 @textbox-color: darken(#cecece, @darken-chrome); //darken(#e0e3e8, @darken-chrome);
-@textbox-background: darken(#393939, @darken-chrome); //darken(#F2F2F2, @darken-chrome);
+@textbox-background: @element-background;
 @textbox-box-shadow: none;
-@textbox-border-color: darken(#252625, @darken-chrome);
+@textbox-border-color: transparent;
 @textbox-initial-color: darken(#828282, @darken-chrome);
 @textbox-initial-text-shadow: none;
 @textbox-disabled-color: darken(#555, @darken-chrome);
@@ -1127,7 +1127,7 @@
 @preference-menu-button-icon-top: 7px;
 @preference-menu-button-icon-height: 25px;
 
-@preferences-nav-border: 0px solid darken(#3f3f3f, @darken-chrome);
+@preferences-nav-border: 0px solid darken(@element-border, @darken-chrome);
 @preferences-nav-background: darken(#303130, @darken-chrome);
 @preferences-nav-shadow-color: transparent;
 @preferences-nav-main-color: darken(#e0e3e8, @darken-chrome);
@@ -1149,7 +1149,7 @@
 @preferences-nav-link-active-color: @highlight-color;
 
 @preferences-text-shadow: none;
-@preferences-background: darken(#3f3f3f, @darken-chrome);
+@preferences-background: darken(@element-border, @darken-chrome);
 @preferences-border-top-color: transparent;
 @preferences-border-top-color-light: transparent;
 @preferences-border-bottom-color: transparent;
@@ -1192,7 +1192,7 @@
 @preferences-datagrid-highlight-column-color: transparent;
 
 @preferences-filter-box-background: lightgrey;
-@preferences-intro-padding: 12px 12px 32px 12px;
+@preferences-intro-padding: 12px;
 @preferences-intro-title-text-shadow: none;
 @preferences-intro-title-padding: 8px 0 6px 47px;
 @preferences-intro-color: darken(#e0e3e8, @darken-chrome);
@@ -1230,18 +1230,18 @@
 @dropdown-black-font-family: @general-font-family;
 @dropdown-black-font-size: 13px;
 @dropdown-black-button-width: 24px;
-@dropdown-black-color: darken(#c0dabe, @darken-chrome);
+@dropdown-black-color: darken(@element-highlight-color, @darken-chrome);
 @dropdown-black-selected-color: darken(#D8FC68, @darken-chrome);
 @dropdown-black-border-color: transparent;
-@dropdown-black-background: darken(#323232, @darken-chrome);
-@dropdown-black-divider-left: darken(#3f3f3f, @darken-chrome);
+@dropdown-black-background: darken(@element-background, @darken-chrome);
+@dropdown-black-divider-left: darken(@element-border, @darken-chrome);
 @dropdown-black-divider-right: transparent;
 @dropdown-black-box-shadow: none;
 @dropdown-black-container-shadow: none;
-@dropdown-black-gradient-start: darken(#323232, @darken-chrome);
-@dropdown-black-gradient-stop: darken(#323232, @darken-chrome);
-@dropdown-black-hover-gradient-start: darken(#2F2F2F, @darken-chrome);
-@dropdown-black-hover-gradient-stop: darken(#2F2F2F, @darken-chrome);
+@dropdown-black-gradient-start: darken(@element-background, @darken-chrome);
+@dropdown-black-gradient-stop: darken(@element-background, @darken-chrome);
+@dropdown-black-hover-gradient-start: darken(@element-background-hover, @darken-chrome);
+@dropdown-black-hover-gradient-stop: darken(@element-background-hover, @darken-chrome);
 @dropdown-black-active-gradient-start: darken(#2d2d2d, @darken-chrome);
 @dropdown-black-active-gradient-stop: darken(#2d2d2d, @darken-chrome);
 
@@ -1710,4 +1710,13 @@
 @form-bar-border-bottom: 1px solid black;
 @form-bar-box-shadow: 0 1px @border-highlight;
 
-@panel-settings-changes-top: 46px;
\ No newline at end of file
+@panel-settings-changes-top: 46px;
+
+/*******/
+
+@element-background: #303030;
+@element-border: #3f3f3f;
+@element-chrome-highlight: #dadada;
+@element-chrome-text-color: #767676;
+@element-highlight-color: #c0dabe;
+@element-background-hover: #282828;
\ No newline at end of file
diff --git a/plugins/c9.ide.layout.classic/themes/default-flat-light.less b/plugins/c9.ide.layout.classic/themes/default-flat-light.less
index 95c5dd70..4ff3ba6b 100644
--- a/plugins/c9.ide.layout.classic/themes/default-flat-light.less
+++ b/plugins/c9.ide.layout.classic/themes/default-flat-light.less
@@ -1192,7 +1192,7 @@
 @preferences-datagrid-highlight-column-color: transparent;
 
 @preferences-filter-box-background: lightgrey;
-@preferences-intro-padding: 12px 12px 32px 12px;
+@preferences-intro-padding: 12px;
 @preferences-intro-title-text-shadow: none;
 @preferences-intro-title-padding: 8px 0 6px 47px;
 @preferences-intro-color: darken(#333, @darken-chrome);
diff --git a/plugins/c9.ide.layout.classic/themes/flat-dark.less b/plugins/c9.ide.layout.classic/themes/flat-dark.less
index 522ef628..47a26df0 100644
--- a/plugins/c9.ide.layout.classic/themes/flat-dark.less
+++ b/plugins/c9.ide.layout.classic/themes/flat-dark.less
@@ -125,57 +125,67 @@
 }
 
 .dgLikeContaier {
-    background-color: #393939;
-    border: @filesave-tree-border;
+    background-color: @element-background;
+    border: 1px solid @element-background;
     box-shadow: none;
 }
 
 .cboffline{
-    background: #323232;
-    border: 1px solid #323232;
+    background: @element-background;
+    border: 1px solid @element-background;
 }
 .cboffline:after{
-    background: #dadada;
-    border: 1px solid #dadada;
+    background: @element-chrome-highlight;
+    border: 1px solid @element-chrome-highlight;
 }
 .cbofflineChecked{
-    background: #323232;
-    border-color: #323232;
+    background: @element-background;
+    border-color: @element-background;
 }
 .cbofflineChecked:after{
     border-color: #97c974;
     background-color: #97c974;
 }
 .cboffline:hover{
-    background: #2F2F2F;
+    background: @element-background-hover;
 }
 
 .spinner{
-    border: 1px solid #323232;
-    background: #323232;
+    border: 1px solid @element-background;
+    background: @element-background;
 }
 
 .spinner .buttons .minus{
     font-size: 16px;
     padding: 4px 9px;
     color: #767676;
-    border-right: 1px solid #3f3f3f;
+    border-right: 1px solid @element-border;
 }
 .spinner .buttons .plus{
     font-size: 15px;
     padding: 4px 7px;
     color: #767676;
-    border-left: 1px solid #3f3f3f;
+    border-left: 1px solid @element-border;
 }
 .spinner .buttons .minus:hover{
-    background: #2F2F2F;
+    background: @element-background-hover;
     color: #f07272;
 }
 .spinner .buttons .plus:hover{
-    background: #2F2F2F;
+    background: @element-background-hover;
     color: #98c878;
 }
 
+.searchbox .sbtb_middle:hover, 
+.searchboxFocus .sbtb_middle,
+.bar-preferences .tbsimpleFocus,
+.tbsimpleFocus,
+.tbsimple:hover{
+    background: @element-background-hover;
+    border: 1px solid transparent;
+}
+
+
 @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
     
 }
\ No newline at end of file
diff --git a/plugins/c9.ide.preferences/experimental.js b/plugins/c9.ide.preferences/experimental.js
index 15d233b0..d7f84b52 100644
--- a/plugins/c9.ide.preferences/experimental.js
+++ b/plugins/c9.ide.preferences/experimental.js
@@ -37,7 +37,6 @@ define(function(require, exports, module) {
                 title: "Introduction",
                 position: 1,
                 node: intro = new ui.bar({
-                    height: 102,
                     "class" : "intro",
                     style: "padding:12px;position:relative;"
                 })
diff --git a/plugins/c9.ide.preferences/general.js b/plugins/c9.ide.preferences/general.js
index 1c656659..97ec35ac 100644
--- a/plugins/c9.ide.preferences/general.js
+++ b/plugins/c9.ide.preferences/general.js
@@ -35,7 +35,6 @@ define(function(require, exports, module) {
                 title: "Introduction",
                 position: 1,
                 node: intro = new ui.bar({
-                    height: 102,
                     "class" : "intro",
                     style: "padding:12px;position:relative;"
                 })
diff --git a/plugins/c9.ide.preferences/project.js b/plugins/c9.ide.preferences/project.js
index bc28a828..20380af9 100644
--- a/plugins/c9.ide.preferences/project.js
+++ b/plugins/c9.ide.preferences/project.js
@@ -33,7 +33,6 @@ define(function(require, exports, module) {
                 title: "Introduction",
                 position: 1,
                 node: intro = new ui.bar({
-                    height: 102,
                     "class" : "intro",
                     style: "padding:12px;position:relative;"
                 })
diff --git a/plugins/c9.ide.ui/lib/flexbox.js b/plugins/c9.ide.ui/lib/flexbox.js
index f092e5f0..0280092b 100644
--- a/plugins/c9.ide.ui/lib/flexbox.js
+++ b/plugins/c9.ide.ui/lib/flexbox.js
@@ -406,6 +406,7 @@ apf.vbox = function(struct, tagName) {
                         this.$altExt.appendChild(this.$ext);
                         this.$altExt.style.boxSizing = "border-box";
                         this.$altExt.style.display = apf.CSS_DISPLAY_FLEX;
+                        this.$altExt.style.flexDirection = this.parentNode.$vbox ? "column" : "row";
                         this.$altExt.style[apf.CSSPREFIX + "BoxOrient"] = "vertical";
                         this.$ext.style[apf.CSS_FLEX_PROP] = 1;
                         var size = this.parentNode.$vbox ? "height" : "width";