From f9e53decb084445c48d12a0f91fc7f58b2deacc4 Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 21 May 2025 17:25:07 +0530 Subject: [PATCH 1/5] feat: switch between sign in and profile popup when sign-in or log-out buttons are clicked --- src/extensionsIntegrated/Phoenix/profile-menu.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix/profile-menu.js b/src/extensionsIntegrated/Phoenix/profile-menu.js index 4b4e6e927b..c055f6f460 100644 --- a/src/extensionsIntegrated/Phoenix/profile-menu.js +++ b/src/extensionsIntegrated/Phoenix/profile-menu.js @@ -13,7 +13,7 @@ define(function (require, exports, module) { let isPopupVisible = false; // if user is logged in we show the profile menu, otherwise we show the login menu - const isLoggedIn = false; + let isLoggedIn = false; const defaultLoginData = { welcomeTitle: "Welcome to Phoenix Code", @@ -37,10 +37,16 @@ define(function (require, exports, module) { function _handleSignInBtnClick() { console.log("User clicked sign in button"); + closePopup(); // need to close the current popup to show the new one + isLoggedIn = true; + showProfilePopup(); } function _handleSignOutBtnClick() { console.log("User clicked sign out"); + closePopup(); + isLoggedIn = false; + showLoginPopup(); } function _handleContactSupportBtnClick() { @@ -129,7 +135,6 @@ define(function (require, exports, module) { // event handlers for buttons $popup.find("#phoenix-signin-btn").on("click", function () { _handleSignInBtnClick(); - closePopup(); }); $popup.find("#phoenix-support-btn").on("click", function () { @@ -187,7 +192,6 @@ define(function (require, exports, module) { $popup.find("#phoenix-signout-btn").on("click", function () { _handleSignOutBtnClick(); - closePopup(); }); // handle window resize to reposition popup From f38a576f764a8f32f050f121f78ce2def2027794 Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 21 May 2025 17:35:40 +0530 Subject: [PATCH 2/5] fix: close popup when clicked anywhere outside the popup --- .../Phoenix/profile-menu.js | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/extensionsIntegrated/Phoenix/profile-menu.js b/src/extensionsIntegrated/Phoenix/profile-menu.js index c055f6f460..66319d375d 100644 --- a/src/extensionsIntegrated/Phoenix/profile-menu.js +++ b/src/extensionsIntegrated/Phoenix/profile-menu.js @@ -15,6 +15,9 @@ define(function (require, exports, module) { // if user is logged in we show the profile menu, otherwise we show the login menu let isLoggedIn = false; + // this is to handle document click events to close popup + let documentClickHandler = null; + const defaultLoginData = { welcomeTitle: "Welcome to Phoenix Code", signInBtnText: "Sign in to your account", @@ -68,6 +71,12 @@ define(function (require, exports, module) { $popup = null; isPopupVisible = false; } + + // we need to remove document click handler if it already exists + if (documentClickHandler) { + $(document).off("mousedown", documentClickHandler); + documentClickHandler = null; + } } /** @@ -100,6 +109,29 @@ define(function (require, exports, module) { } } + /** + * this function is responsible to set up a click handler to close the popup when clicking outside + */ + function _setupDocumentClickHandler() { + // remove any existing handlers + if (documentClickHandler) { + $(document).off("mousedown", documentClickHandler); + } + + // add the new click handler + documentClickHandler = function (event) { + // if the click is outside the popup and not on the profile button (which toggles the popup) + if ($popup && !$popup[0].contains(event.target) && !$("#user-profile-button")[0].contains(event.target)) { + closePopup(); + } + }; + + // this is needed so we don't close the popup immediately as the profile button is clicked + setTimeout(function() { + $(document).on("mousedown", documentClickHandler); + }, 100); + } + /** * Shows the sign-in popup when the user is not logged in * @param {Object} loginData - Data to populate the template (optional) @@ -148,6 +180,8 @@ define(function (require, exports, module) { positionPopup(); } }); + + _setupDocumentClickHandler(); } /** @@ -200,6 +234,8 @@ define(function (require, exports, module) { positionPopup(); } }); + + _setupDocumentClickHandler(); } /** From 18d9d6ede3c1af50b0bb7bbba94b47a05281eb5b Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 21 May 2025 17:58:41 +0530 Subject: [PATCH 3/5] fix: made user profile size consistent to other icons --- src/styles/brackets.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/brackets.less b/src/styles/brackets.less index b7a211f244..6934f7a47a 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -670,7 +670,8 @@ a, img { } .user { - background-image: url("images/circle-user-solid.svg"); + background: url("images/circle-user-solid.svg") center no-repeat; + background-size: 20px 20px; } #editor-holder { From c14a55c7f25d6213bba306d1701781fdccd8f741 Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 21 May 2025 18:09:29 +0530 Subject: [PATCH 4/5] refactor: made profile popup buttons consistent to the rest of the UI --- .../Phoenix/html/login-dialog.html | 4 +- .../Phoenix/html/profile-panel.html | 6 +- src/styles/Extn-UserProfile.less | 108 +++++++----------- 3 files changed, 49 insertions(+), 69 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix/html/login-dialog.html b/src/extensionsIntegrated/Phoenix/html/login-dialog.html index dbe692d262..c3aa32c031 100644 --- a/src/extensionsIntegrated/Phoenix/html/login-dialog.html +++ b/src/extensionsIntegrated/Phoenix/html/login-dialog.html @@ -3,12 +3,12 @@

{{welcomeTitle}}

-
- diff --git a/src/extensionsIntegrated/Phoenix/html/profile-panel.html b/src/extensionsIntegrated/Phoenix/html/profile-panel.html index 52dc6fcb59..633628f811 100644 --- a/src/extensionsIntegrated/Phoenix/html/profile-panel.html +++ b/src/extensionsIntegrated/Phoenix/html/profile-panel.html @@ -21,17 +21,17 @@
- - - diff --git a/src/styles/Extn-UserProfile.less b/src/styles/Extn-UserProfile.less index 5ab1ac49e9..1b77c79fae 100644 --- a/src/styles/Extn-UserProfile.less +++ b/src/styles/Extn-UserProfile.less @@ -96,6 +96,7 @@ width: 100%; text-align: left; padding: 8px 12px; + margin: 3px 0; i { margin-right: 8px; @@ -108,11 +109,28 @@ } } - .btn { - margin: 5px 0; + .btn.dialog-button { + background-color: @bc-btn-bg; + color: @bc-text; + border: 1px solid @bc-btn-border; + border-radius: @bc-border-radius; + box-shadow: inset 0 1px @bc-highlight-hard; + font-size: (@baseFontSize + 1); + font-weight: @font-weight-semibold; + margin: 3px 0; transition: background-color 0.2s ease; - &.btn-primary { + &:not(:disabled):not(.disabled):hover { + background-color: lighten(@bc-btn-bg, 5%); + color: @bc-text; + } + + &:active:not([disabled]) { + background-color: @bc-btn-bg-down; + box-shadow: inset 0 1px 0 @bc-shadow-small; + } + + &.primary { background-color: @bc-primary-btn-bg; border: 1px solid @bc-primary-btn-border; box-shadow: inset 0 1px 0 @bc-highlight; @@ -124,46 +142,16 @@ margin-right: 5px; } - &:hover { + &:not(:disabled):not(.disabled):hover { background-color: lighten(@bc-primary-btn-bg, 10%); + color: @bc-text-alt; } - &:active { + &:active:not([disabled]) { background-color: @bc-primary-btn-bg-down; box-shadow: inset 0 1px 0 @bc-shadow-small; } } - - &.btn-default { - background-color: @bc-btn-bg; - border: 1px solid @bc-btn-border; - box-shadow: inset 0 1px 0 @bc-highlight; - - &:hover { - background-color: lighten(@bc-btn-bg, 10%); - } - - &:active { - background-color: @bc-btn-bg-down; - box-shadow: inset 0 1px 0 @bc-shadow-small; - } - } - - &.btn-link { - background: none; - border: none; - box-shadow: none; - color: @bc-text-thin-quiet; - - i { - margin-right: 5px; - } - - &:hover { - color: @bc-text; - text-decoration: none; - } - } } } @@ -197,46 +185,38 @@ } } - .btn { - &.btn-primary { + .btn.dialog-button { + background-color: @dark-bc-btn-bg; + border: 1px solid @dark-bc-btn-border; + box-shadow: inset 0 1px 0 @dark-bc-highlight; + color: @dark-bc-text; + + &:not(:disabled):not(.disabled):hover { + background-color: lighten(@dark-bc-btn-bg, 10%); + color: @dark-bc-text; + } + + &:active:not([disabled]) { + background-color: @dark-bc-btn-bg-down; + box-shadow: inset 0 1px 0 @dark-bc-shadow-small; + } + + &.primary { background-color: @dark-bc-primary-btn-bg; border: 1px solid @dark-bc-primary-btn-border; box-shadow: inset 0 1px 0 @dark-bc-highlight; color: @dark-bc-text-alt; - &:hover { + &:not(:disabled):not(.disabled):hover { background-color: lighten(@dark-bc-primary-btn-bg, 10%); + color: @dark-bc-text-alt; } - &:active { + &:active:not([disabled]) { background-color: @dark-bc-primary-btn-bg-down; box-shadow: inset 0 1px 0 @dark-bc-shadow-small; } } - - &.btn-default { - background-color: @dark-bc-btn-bg; - border: 1px solid @dark-bc-btn-border; - box-shadow: inset 0 1px 0 @dark-bc-highlight; - color: @dark-bc-text; - - &:hover { - background-color: lighten(@dark-bc-btn-bg, 10%); - } - - &:active { - background-color: @dark-bc-btn-bg-down; - box-shadow: inset 0 1px 0 @dark-bc-shadow-small; - } - } - - &.btn-link { - color: @dark-bc-text-thin-quiet; - - &:hover { - color: @dark-bc-text; - } - } } } From f62e063905b222404a474e73133ae30fce60f4f0 Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 21 May 2025 18:20:18 +0530 Subject: [PATCH 5/5] fix: progress bar not properly visible in light theme --- src/styles/Extn-UserProfile.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/Extn-UserProfile.less b/src/styles/Extn-UserProfile.less index 1b77c79fae..575f53e667 100644 --- a/src/styles/Extn-UserProfile.less +++ b/src/styles/Extn-UserProfile.less @@ -79,11 +79,13 @@ background-color: @bc-input-bg; border-radius: 4px; overflow: hidden; + border: 1px solid @bc-btn-border; + box-sizing: border-box; .progress-fill { height: 100%; background-color: @bc-primary-btn-bg; - border-radius: 4px; + border-radius: 3px; } } @@ -179,6 +181,7 @@ .progress-bar { background-color: @dark-bc-input-bg; + border-color: @dark-bc-btn-border; .progress-fill { background-color: @dark-bc-primary-btn-bg;