Merge pull request #3634 from adobe/larz/quick-open-tweaks

Visual tweaks for the quick open drop-down.
adobe · May 12, 2013 · d6522da · d6522da
2 parents 4fda143 + cc37dbb
commit d6522da
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 36 deletions.
diff --git a/src/editor/EditorManager.js b/src/editor/EditorManager.js
@@ -57,7 +57,6 @@ define(function (require, exports, module) {
         PerfUtils           = require("utils/PerfUtils"),
         Editor              = require("editor/Editor").Editor,
         InlineTextEditor    = require("editor/InlineTextEditor").InlineTextEditor,
-        ViewUtils           = require("utils/ViewUtils"),
         Strings             = require("strings");
 
     /** @type {jQueryObject} DOM node that contains all editors (visible and hidden alike) */
@@ -529,17 +528,11 @@ define(function (require, exports, module) {
             container = _editorHolder.get(0);
 
         var perfTimerName = PerfUtils.markStart("EditorManager._onCurrentDocumentChange():\t" + (!doc || doc.file.fullPath));
-
-        // Remove scroller-shadow from the current editor
-        if (_currentEditor) {
-            ViewUtils.removeScrollerShadow(container, _currentEditor);
-        }
 
         // Update the UI to show the right editor (or nothing), and also dispose old editor if no
         // longer needed.
         if (doc) {
             _showEditor(doc);
-            ViewUtils.addScrollerShadow(container, _currentEditor);
         } else {
             _showNoEditor();
         }

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -104,7 +104,8 @@ a, img {
 }
 
 #titlebar, .modal-bar {
-    .box-shadow(0 1px 1px 0 fadeout(@bc-black, 90%));
+    border-bottom: 1px solid @tc-gray-panel-border;
+    box-shadow: @tc-small-shadow-bottom;
 
     // Make sure the bottom box-shadow goes above the editor (position: relative needed to start a new stacking group)
     position: relative;
@@ -456,10 +457,6 @@ a, img {
     }
 }
 
-#editor-holder .scroller-shadow {
-    width: 100%;
-}
-
 .scroller-shadow {
     background-size: 100%;
     background-repeat: no-repeat;
@@ -713,8 +710,8 @@ a, img {
 
     font-family: @fontstack-sans-serif;
     font-size: 13px;
-    color: @content-color;
-    background: #eee;
+    color: @tc-text;
+    background: @tc-gray-panel;
     padding: 5px 4px 4px 14px;
     overflow: hidden;
 
@@ -726,14 +723,12 @@ a, img {
 
 .modal-bar input {
     font-family: @fontstack-sans-serif;
-    border: 1px solid @content-color-weaker;
     outline: none;
-    background: @background-color-3;
     width: 20em;
     margin: .3em .3em;
-    color: inherit;
     &.no-results {
-        background-color: mix(@background-color-3, #FF0000, 70%);
+        border: 1px solid #bc0023;
+        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(255, 0, 120, 0.5);        
     }
 }
 
@@ -774,39 +769,51 @@ a, img {
 
 .smart_autocomplete_container {
 
-    border: 1px solid #999;
-    background-color: #FFFFFF;
+    // the borders show up even if the container is empty, must set height to zero using JS.
+    border: 1px solid @tc-gray-panel-border;
+
+    background-color: @tc-gray-panel;
+    border-radius: 0 0 4px 4px;
+    box-shadow: @tc-normal-shadow-bottom;
+
+    // so that border won't show when height is 0.
+    box-sizing: border-box; 
+
+    // using this to fix the spacing that breaks item seperators and had to use !important to override inline css
+    width: 400px !important;  
 
     /* smart auto complete doesn't correctly position the container
      * so these specific padding and margin values are necessary*/
-    padding: 0px 8px 0px 0px;
-    margin: 9px 0px 0px 0px;
+    padding: 0px;
+    margin: 9px 0 0;
 
     .quick-open-path {
+        color: #666;
         font-size: 11px;
-        color: gray;
+        letter-spacing: 0.04em;
+        line-height: 11px;
     }
 
     li {
-        color: black;
-        border-bottom: 1px solid;
+        color: #222;
+        line-height: 15px;
         list-style: none;
         cursor: default;
-        padding: 0px 2px 0px 4px;
+        padding: 6px 10px;
+    }
+
+    li:nth-child(odd) {
+        background-color: #e6e9e9;
+    }
+
+    li.smart_autocomplete_highlight {
+        background-color: @tc-highlight;
     }
 }
 
-li.smart_autocomplete_highlight {
-    background-color: #e0f0fa;
-}
-
-.quicksearch-pathmatch {
-    font-weight: bold;
-    color: #555;
-}
-
+.quicksearch-pathmatch,
 .quicksearch-namematch {
-    font-weight: bold;
+    font-weight: @font-weight-semibold;
 }
 
 

diff --git a/src/styles/brackets_colors.less b/src/styles/brackets_colors.less
@@ -64,3 +64,22 @@
 @bc-light-blue:  #d8e0e8;
 @bc-cyan:        #2aa198;
 @bc-green:       #859900;
+
+// TopCoat colors and styles, putting them here for now; let me know if there's a better place for these. 
+@tc-gray-panel:                    #dfe2e2;
+@tc-gray-panel-border:             rgba(0, 0, 0, 0.12);
+@tc-gray-panel-bevel:              inset 0 1px 0 rgba(255, 255, 255, 0.6);
+@tc-gray-panel-top-bar:            #d4d7d7;
+@tc-gray-panel-top-bar-shadow:     1px solid rgba(0, 0, 0, 0.03);
+@tc-gray-component-border:         #9c9e9e;
+@tc-gray-component-focused-border: #0940fd;
+
+@tc-small-shadow-top:          0 -1px 3px rgba(0, 0, 0, 0.12);
+@tc-small-shadow-bottom:       0 1px 3px rgba(0, 0, 0, 0.12);
+@tc-normal-shadow-bottom:      0 5px 10px rgba(0, 0, 0, 0.1);
+@tc-highlight:                 #e0f0fa;
+@tc-hover-highlight:           rgba(255, 255, 255, 0.6);
+@tc-text:                      #454545;
+@tc-call-to-action:            #288edf;
+@tc-call-to-action-text:       #ffffff;
+
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
@@ -563,6 +563,29 @@
     }
 }
 
+/* Input */
+input {
+    background-color: #fff;
+    border: 1px solid #9c9e9e;
+    .border-radius(3px);
+    @shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
+
+    // Placeholder text gets special styles; can't be bundled together though for some reason
+    &::-webkit-input-placeholder {
+        color: #888;
+    }
+    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    &:focus,
+    &.focused {
+        outline: 0;
+        background-color: #fff;
+        color: #000;
+        text-shadow: none;
+        border: 1px solid @tc-gray-component-focused-border;
+        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12), 0 0 0 2px #6fb5f1;
+    }
+}
+
 /* Twipsy tooltips */
 .twipsy-inner {
     max-width: none;
@@ -592,6 +615,7 @@
 
     // Focus state for keyboard and accessibility
     &:focus {
+        border: 1px solid @tc-gray-component-focused-border;
         box-shadow: inset 0 1px 0 #fff, 0 0 0 2px #6fb5f1;
         outline: none;
     }
@@ -612,6 +636,7 @@
         }    
 
         &:focus {
+            border: 1px solid @tc-gray-component-focused-border;
             box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
             outline: none;
         }