Merge pull request #5921 from adobe/larz/modal-transition

UI Polish

Author: redmunds

src/editor/InlineTextEditor.js

@@ -244,6 +244,7 @@ define(function (require, exports, module) {
         // dirty indicator, with file path stored on it
         var $dirtyIndicatorDiv = $("<div/>")
             .addClass("dirty-indicator")
+            .html("&bull;")
             .width(0); // initialize indicator as hidden
         $dirtyIndicatorDiv.data("fullPath", doc.file.fullPath);
 

src/extensions/default/InlineColorEditor/css/main.css

@@ -80,7 +80,7 @@
 }
 .color-editor aside ul.swatches li:focus {
     outline: none;
-    box-shadow: 0 0 0 2px #6fb5f1;
+    box-shadow: 0 0 0 1px #94ceff;
     border-radius: 2px;
 }
 .color-editor aside ul.swatches li .swatch-bg {
@@ -148,7 +148,7 @@
 }
 .color-editor section .color-selection-field .selector-base:focus {
     outline: none;
-    box-shadow: 0 0 0 5px #6fb5f1;
+    box-shadow: 0 0 0 5px #94ceff;
     border-radius: 10px;
 }
 .color-editor section .color-selection-field .selector {
@@ -181,7 +181,7 @@
 }
 .color-editor section .slider .selector-base:focus {
     outline: none;
-    box-shadow: 0 0 0 5px #6fb5f1;
+    box-shadow: 0 0 0 5px #94ceff;
     border-radius: 1px;
 }
 .color-editor section .slider .selector {
@@ -210,7 +210,7 @@
     width: 118px;
     height: 23px;
     margin-right: 5px;
-    border-color: #aaa;
+    border-color: #b2b5b5;
     box-sizing: border-box;
     display: inline-block;
     color: #222;
@@ -219,8 +219,8 @@
     display: inline-block;
     height: 23px;
     padding: 0 0 0 4px;
-    border: 1px solid #9c9e9e;
-    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
+    border: 1px solid #b2b5b5;
+    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
     background: #fff;
     font-family: "SourceSansPro";
     font-size: 12px;
@@ -232,8 +232,8 @@
 .color-editor section footer input:focus {
     background: #fff;
     outline: none;
-    box-shadow: 0 0 0 2px #6fb5f1;
-    border: 1px solid #0940fd;
+    box-shadow: 0 0 0 1px #94ceff;
+    border: 1px solid #2893ef;
     z-index: 911;
 }
 @media all and (-webkit-min-device-pixel-ratio : 2), (min-device-pixel-ratio : 2) {
@@ -284,21 +284,21 @@
     padding: 2px 4px 4px;
     height: 15px;
     font-size: 12px;
-    text-shadow: 0 1px #fff;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
     background-color: #e5e9e9;
-    border: 1px solid #9c9e9e;
+    border: 1px solid #b2b5b5;
     border-right: 1px solid transparent;
     margin-left: -3px;
 
-    box-shadow: inset 0 1px 0 #fff;
+    box-shadow: inset 0 1px 0 #f3f3f3;
 }
 
 .color-editor .button-bar a:focus, .color-editor .button-bar li.selected a:focus{
     outline: none;
     position: relative;
-    border: 1px solid #0940fd;
-    border-right: 1px solid #063dfa !important; /* we need this !important, sorry! */
-    box-shadow: 0 0 0 2px #65aeed;
+    border: 1px solid #2893ef;
+    border-right: 1px solid #2893ef !important; /* we need this !important, sorry! */
+    box-shadow: 0 0 0 1px #94ceff;
     z-index: 999;
 }
 .color-editor .button-bar li:first-child {
@@ -310,13 +310,13 @@
     border-bottom-left-radius: 3px;
 }
 .color-editor .button-bar li:last-child a {
-    border-right: 1px solid #9c9e9e;
+    border-right: 1px solid #b2b5b5;
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 }
 .color-editor .button-bar li.selected a {
     background-color: #d3d7d7;
-    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
     background-image: none;
 }
 .color-editor .button-bar li.disabled a {

src/extensions/default/RecentProjects/main.js

@@ -114,7 +114,7 @@ define(function (require, exports, module) {
      * Create the "delete" button that shows up when you hover over a project.
      */
     function renderDelete() {
-        return $("<div id='recent-folder-delete' class='trash-icon'></div>")
+        return $("<div id='recent-folder-delete' class='trash-icon'>&times;</div>")
             .mouseup(function (e) {
                 // Don't let the click bubble upward.
                 e.stopPropagation();
@@ -458,7 +458,7 @@ define(function (require, exports, module) {
 
     AppInit.htmlReady(function () {
         $("#project-title")
-            .wrap("<div id='project-dropdown-toggle'></div>")
+            .wrap("<div id='project-dropdown-toggle' class='btn-alt-quiet'></div>")
             .after("<span class='dropdown-arrow'></span>");
 
         var cmenuAdapter = {

src/extensions/default/RecentProjects/styles/close-btn.svg

@@ -1,32 +1,30 @@
-#project-dropdown {
-    border-radius: 3px;
-    box-shadow: 0 3px 9px rgba(0, 0, 0, .3);
-    border: none;
-}
 .dropdown-arrow {
     display: inline-block;
-    width: 5px;
-    height: 10px;
+    width: 7px;
+    height: 5px;
     margin-left: 4px;
     background-image: url("down-arrow.svg");
+    background-repeat: no-repeat;
     position: relative;
-    top: 1px;
+    top: 0;
 }
 
 .trash-icon {
     position: absolute;
     left: 7px;
     width: 16px;
     height: 16px;
-    background-image: url("close-btn.svg");
-    background-position: 0 0;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.5);
+    line-height: 15px;
+    text-align: center;
 }
+
 .trash-icon:hover {
-    background-position: -15px 0;
+    color: rgba(0, 0, 0, 1);
 }
 
 #project-dropdown-toggle {
-    border: 1px solid transparent;
     display: inline-block;
     /* adjust margins to keep position #project-title position stable after extension is loaded */
     margin: -3px 0px -2px -6px;
@@ -41,12 +39,6 @@
     line-height: 21px;
 }
 
-#project-dropdown-toggle:hover {
-    border-radius: 3px;
-    border: 1px solid #2d2f31;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
-    text-decoration: none;
-}
 #project-dropdown-toggle:hover .dropdown-arrow {
     background-image: url("down-arrow.svg");
 }

src/extensions/default/RecentProjects/styles/down-arrow.svg

@@ -8,7 +8,7 @@
             <li><a href="#installed" class="installed" data-toggle="tab"><img src="styles/images/extension-manager-installed.svg"/><br/>{{Strings.EXTENSIONS_INSTALLED_TITLE}}</a><span class="notification"></span></li>
         </ul>
         <div>
-            <button class="search-clear"></button>
+            <button class="search-clear">&times;</button>
             <input class="search" type="text" placeholder="{{EXTENSION_SEARCH_PLACEHOLDER}}">
         </div>
     </div>

src/extensions/default/RecentProjects/styles/styles.css

@@ -42,7 +42,7 @@
     <div class="main-view">
         <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-forceleft=".content">
             <div id="working-set-header">{{WORKING_FILES}}
-                <div id="working-set-option-btn"></div>
+                <div id="working-set-option-btn" class="btn-alt-quiet"></div>
             </div>
             <div id="open-files-container">
                 <!-- This will contain runtime-generated <li>'s for each file in the working set -->