Auto Update Feature CSS Style Issue Fix (adobe#14295)

* Auto Update Feature Css Bug Fix * Adding Missed Files * Changed the caluclation of content Container Size * Added Fix for Issue adobe#14219 and adobe#14223 * Added missed changes * Addressed Update Status Style Issue * Addressed Review Comments * Addressed Review Comments
zxfcfj · May 9, 2018 · 68aa861 · 68aa861
1 parent a383712
commit 68aa861
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 2 deletions.
diff --git a/src/extensions/default/AutoUpdate/UpdateInfoBar.js b/src/extensions/default/AutoUpdate/UpdateInfoBar.js
@@ -28,7 +28,8 @@ define(function (require, exports, module) {
         Mustache            = brackets.getModule("thirdparty/mustache/mustache"),
         EventDispatcher     = brackets.getModule("utils/EventDispatcher"),
         UpdateBarHtml       = require("text!htmlContent/updateBar.html"),
-        Strings             = brackets.getModule("strings");
+        Strings             = brackets.getModule("strings"),
+        _                  =  brackets.getModule("thirdparty/lodash");
 
     EventDispatcher.makeEventDispatcher(exports);
 
@@ -80,6 +81,7 @@ define(function (require, exports, module) {
             $updateBar.remove();
         }
         $(window.document).off("keydown.AutoUpdate");
+        $(window).off('resize.AutoUpdateBar');
     }
 
     /**
@@ -97,6 +99,9 @@ define(function (require, exports, module) {
         var $updateBar = $('#update-bar'),
             $updateContent = $updateBar.find('#update-content'),
             $contentContainer = $updateBar.find('#content-container'),
+            $buttonContainer = $updateBar.find('#button-container'),
+            $iconContainer = $updateBar.find('#icon-container'),
+            $closeIconContainer = $updateBar.find('#close-icon-container'),
             $heading = $updateBar.find('#heading'),
             $description = $updateBar.find('#description'),
             $restart = $updateBar.find('#update-btn-restart'),
@@ -113,6 +118,29 @@ define(function (require, exports, module) {
                 }
             }
         }
+        // Content Container Width between Icon Container and Button Container or Close Icon Container
+        // will be assigned when window will be rezied.
+        var resizeContentContainer = function () {
+            if($updateContent.length > 0 && $contentContainer.length > 0 && $updateBar.length > 0) {
+                var newWidth = $updateBar.outerWidth() - 38;
+                if($buttonContainer.length > 0) {
+                    newWidth = newWidth- $buttonContainer.outerWidth();
+                }
+                if($iconContainer.length > 0) {
+                    newWidth = newWidth - $iconContainer.outerWidth();
+                }
+                if($closeIconContainer.length > 0) {
+                    newWidth = newWidth - $closeIconContainer.outerWidth();
+                }
+
+                $contentContainer.css({
+                    "maxWidth": newWidth
+                });
+            }
+        };
+
+        resizeContentContainer();
+        $(window).on('resize.AutoUpdateBar', _.debounce(resizeContentContainer, 150));
 
         //Event handlers on the Update Bar
 

diff --git a/src/extensions/default/AutoUpdate/UpdateStatus.js b/src/extensions/default/AutoUpdate/UpdateStatus.js
@@ -77,7 +77,8 @@ define(function (require, exports, module) {
     function displayProgress(statusObj) {
         statusObj.spans.forEach(function (span) {
             if (span.id === 'percent') {
-                var bgval = 'linear-gradient(to right, #1474BF ' + span.val + ', rgba(0, 0, 0, 0) 0%';
+                var bgColor = $('#status-bar').css('backgroundColor'),
+                    bgval = 'linear-gradient(to right, #1474BF ' + span.val + ', ' + bgColor + ' 0%';
                 $('#update-status').css('background', bgval);
             }
         });

diff --git a/src/extensions/default/AutoUpdate/main.js b/src/extensions/default/AutoUpdate/main.js
@@ -524,6 +524,7 @@ define(function (require, exports, module) {
     function enableCheckForUpdateEntry(enable) {
         var cfuCommand = CommandManager.get(Commands.HELP_CHECK_FOR_UPDATE);
         cfuCommand.setEnabled(enable);
+        UpdateNotification.enableUpdateNotificationIcon(enable);
     }
 
     /**

diff --git a/src/extensions/default/AutoUpdate/styles/styles.css b/src/extensions/default/AutoUpdate/styles/styles.css
@@ -30,6 +30,11 @@
     min-width: 9%;
     width: auto;
     text-align: center;
+    background: #fff;
+}
+
+.dark #update-status {
+    background: #1c1c1e;
 }
 
 #update-status p {
@@ -156,6 +161,7 @@
     float: right;
     padding: 4px 15px;
     border: 1px solid #EAEAEA;
+    border-radius: 3px;
     font-size: 14px;
     text-align: center;
     font-family: 'SourceSansPro';

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -754,6 +754,9 @@ a, img {
 
 #update-notification {
     .sprite-icon(0, 0, 24px, 24px, "images/updateSprites.svg");
+    &.update-in-progress {
+        .sprite-icon(0, 0, 24px, 24px, "images/updateSpritesGrayed.svg");
+    }
 }
 
 #toolbar-go-live {

diff --git a/src/styles/images/updateSpritesGrayed.svg b/src/styles/images/updateSpritesGrayed.svg
diff --git a/src/utils/UpdateNotification.js b/src/utils/UpdateNotification.js
@@ -372,6 +372,19 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     *
+     * @param {boolean} enable when false Update Notification Icon in
+                        TollBar will grayed and Click will be blocked.
+                        when true icon will be green and clickable.
+     */
+    function enableUpdateNotificationIcon(enable) {
+        var $updateNotification = $("#update-notification");
+        _addedClickHandler = !enable;
+
+        $updateNotification.toggleClass("update-in-progress", !enable);
+    }
+
     /**
      * Check for updates. If "force" is true, update notification dialogs are always displayed
      * (if an update is available). If "force" is false, the update notification is only
@@ -535,4 +548,5 @@ define(function (require, exports, module) {
     exports.resetToDefaultUpdateHandler = resetToDefaultUpdateHandler;
     exports.launchAutomaticUpdate = launchAutomaticUpdate;
     exports.checkForUpdate        = checkForUpdate;
+    exports.enableUpdateNotificationIcon = enableUpdateNotificationIcon;
 });