From f8747b221c865a27e01b37d6c40e178f4a6a6416 Mon Sep 17 00:00:00 2001 From: abose Date: Sun, 12 Jan 2025 12:10:26 +0530 Subject: [PATCH] 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. --- src/editor/EditorStatusBar.js | 2 - src/index.html | 15 ++----- src/nls/root/strings.js | 2 - src/styles/brackets.less | 49 ++++++++++++++++------ src/styles/brackets_core_ui_variables.less | 2 +- src/styles/brackets_patterns_override.less | 6 +-- src/styles/images/discuss-icon.svg | 2 +- src/styles/images/share-fill.svg | 2 +- 8 files changed, 45 insertions(+), 35 deletions(-) diff --git a/src/editor/EditorStatusBar.js b/src/editor/EditorStatusBar.js index 2ea3489f51..0cd51dd341 100644 --- 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 index 86df666521..4d38db7662 100644 --- a/src/index.html +++ b/src/index.html @@ -860,14 +860,9 @@
-
- -
-
- -
-
- +
+
+
@@ -880,10 +875,6 @@
-
-
-
-
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 803168b3da..d115b006f4 100644 --- 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 index 9d676a4c94..c9e80cf975 100644 --- 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 index 85ee606380..965fd60f85 100644 --- 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 index 56bacb8c2e..5f20034736 100644 --- 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 index 28e59a26f4..8faa00bcab 100644 --- a/src/styles/images/discuss-icon.svg +++ b/src/styles/images/discuss-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/src/styles/images/share-fill.svg b/src/styles/images/share-fill.svg index a6a8b7fcfb..49a82ba984 100644 --- a/src/styles/images/share-fill.svg +++ b/src/styles/images/share-fill.svg @@ -1,3 +1,3 @@ - +