chore: move line:ch status to left of statusbar. move git icon out of…

… statusbar We decided to use bottom of right toolbar to toggle bottom panels. Icons on status bar was not preferred by users we surveyed. statusbar real estate was also less, so would have needed to hide icons or provided drop ups with confusing ux if we placed icons on statusbar. Changed colors of icons to match other toolbar icons. layout fixes for toolbar selected icons.
phcode-dev · Jan 12, 2025 · 9629bbc · 9629bbc
1 parent 2bda86a
commit 9629bbc
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 35 deletions.
diff --git a/src/editor/EditorStatusBar.js b/src/editor/EditorStatusBar.js
@@ -630,7 +630,5 @@ define(function (require, exports, module) {
         LanguageManager.on("languageAdded languageModified", _populateLanguageDropdown);
         _onActiveEditorChange(null, EditorManager.getActiveEditor(), null);
         StatusBar.show();
-        $("#status-menu").attr("title", Strings.STATUSBAR_SHOW_PANELS);
-        $(".git-status-icon").attr("title", Strings.STATUSBAR_SHOW_GIT);
     });
 });
diff --git a/src/index.html b/src/index.html
@@ -860,14 +860,9 @@
         </div>
         <div id="status-bar" class="statusbar no-focus">
             <div id="status-phoenix">
-                <div id="status-menu" class="forced-hidden">
-                    <i class="fa-solid fa-chevron-up"></i>
-                </div>
-                <div class="status-tab forced-hidden">
-                    <i class="fa-solid fa-terminal"></i>
-                </div>
-                <div class="status-tab forced-hidden git-status-icon">
-                    <i class="fa-solid fa-code-branch"></i>
+                <div id="status-info" class="info" >
+                    <div id="status-cursor"></div>
+                    <div id="status-file"></div>
                 </div>
             </div>
             <div id="status-indicators" class="indicators">
@@ -880,10 +875,6 @@
                 <div id="status-language"></div>
                 <div id="status-encoding"></div>
                 <div id="status-overwrite"></div>
-                <div id="status-info" class="info" >
-                    <div id="status-cursor"></div>
-                    <div id="status-file"></div>
-                </div>
                 <div id="status-tasks" class="forced-hidden global-indicator">
                     <div class="spinner spin"></div>
                 </div>

diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -425,8 +425,6 @@ define({
     "STATUSBAR_TASKS_PAUSE": "Pause",
     "STATUSBAR_TASKS_STOP": "Stop",
     "STATUSBAR_TASKS_RESTART": "Restart",
-    "STATUSBAR_SHOW_PANELS": "Show Panels",
-    "STATUSBAR_SHOW_GIT": "Git Panel",
 
     // CodeInspection: errors/warnings
     "ERRORS_NO_FILE": "No File Open",

diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -368,7 +368,7 @@ a, img {
     /* dropdown button styling */
     .btn-status-bar {
         border: 0;
-        background-color: inherit;
+        background-color: unset;
         color: inherit;
         font: inherit;
         height: inherit;
@@ -406,23 +406,31 @@ a, img {
         border-right: 1px solid @bc-panel-border;
 
         .dark & {
-            border-left: unset;
             border-right: 1px solid @dark-bc-panel-separator;
         }
         float: left;
-        padding: unset;
-        width: 35px;
         text-align: center;
     }
+    > div:hover{
+        background-color: @bc-status-btn-hover;
+        .dark & {
+            background-color: @dark-bc-status-btn-hover;
+        }
+        cursor: pointer;
+    }
+    > div:only-child {
+        border-right: unset;
+    }
 }
 
-
-#status-menu:hover, .status-tab:hover{
-    background-color: @bc-status-btn-hover;
-    .dark & {
-        background-color: @dark-bc-status-btn-hover;
+#status-indicators {
+    > div:hover{
+        background-color: @bc-status-btn-hover;
+        .dark & {
+            background-color: @dark-bc-status-btn-hover;
+        }
+        cursor: pointer;
     }
-    cursor: pointer;
 }
 
 #status-indent > * {
@@ -472,7 +480,6 @@ a, img {
 }
 
 #status-overwrite {
-    transition: background-color 3s;
     background-color: rgba(255, 255, 255, 0);
     color: @bc-text;
     cursor: pointer;
@@ -621,8 +628,24 @@ a, img {
 }
 
 #status-overwrite.flash {
-    transition: background-color 1s;
-    background-color: rgb(120, 178, 242);
+    animation: brightenFade 2s ease-in-out;
+}
+
+@keyframes brightenFade {
+    0% {
+        background-color: transparent;
+    }
+    15% {
+        background-color: rgb(120, 178, 242);
+        color: black;
+    }
+    30% {
+        background-color: rgb(120, 178, 242);
+        color: black;
+    }
+    100% {
+        background-color: transparent;
+    }
 }
 
 

diff --git a/src/styles/brackets_core_ui_variables.less b/src/styles/brackets_core_ui_variables.less
@@ -224,7 +224,7 @@
 @dark-bc-panel-bg-text-highlight:    #000;
 @dark-bc-panel-border:               #000;
 @dark-bc-panel-separator:            #343434;
-@dark-bc-status-btn-hover:           rgba(255, 255, 255, 0.05);
+@dark-bc-status-btn-hover:           rgba(255, 255, 255, 0.04);
 
 // Default Button
 @dark-bc-btn-bg:                     #3f3f3f;

diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
@@ -247,8 +247,8 @@ a:focus {
 
     .selected-button{
         background-color: @plugin-panel-bg !important;
-        margin-left: 2px !important;
-        margin-right: 0px !important;
+        margin-left: 3px !important;
+        margin-right: 0 !important;
     }
 
     .buttons,
@@ -325,7 +325,7 @@ a:focus {
         text-overflow: ellipsis;
     }
 
-    .buttons {
+    .buttons, .bottom-buttons {
         margin: @toolbar-top-gap-px 0 0 4px;
 
         span, a {

diff --git a/src/styles/images/discuss-icon.svg b/src/styles/images/discuss-icon.svg
diff --git a/src/styles/images/share-fill.svg b/src/styles/images/share-fill.svg