From 50cdc47ab13c9059b2e4b90663e982c497d65d48 Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 16 May 2025 13:32:49 +0530 Subject: [PATCH 1/6] feat: replace phoenix code support button with user profile button --- src/extensionsIntegrated/Phoenix/main.js | 8 ++++---- src/nls/root/strings.js | 1 + src/styles/brackets.less | 4 ++++ src/styles/images/circle-user-solid.svg | 1 + 4 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 src/styles/images/circle-user-solid.svg diff --git a/src/extensionsIntegrated/Phoenix/main.js b/src/extensionsIntegrated/Phoenix/main.js index 94f0015324..ff6ad241d6 100644 --- a/src/extensionsIntegrated/Phoenix/main.js +++ b/src/extensionsIntegrated/Phoenix/main.js @@ -38,17 +38,17 @@ define(function (require, exports, module) { let $icon; function _addToolbarIcon() { - const helpButtonID = "help-button"; + const helpButtonID = "user-profile-button"; $icon = $("") .attr({ id: helpButtonID, href: "#", - class: "help", - title: Strings.CMD_SUPPORT + class: "user", + title: Strings.CMD_USER_PROFILE }) .appendTo($("#main-toolbar .bottom-buttons")); $icon.on('click', ()=>{ - Phoenix.app.openURLInDefaultBrowser(brackets.config.support_url); + console.log("User profile button was clicked"); }); } function _showUnSupportedBrowserDialogue() { diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 7b996f7da4..4f4fe37d5d 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -626,6 +626,7 @@ define({ "CMD_AUTO_UPDATE": "Auto Update", "CMD_HOW_TO_USE_BRACKETS": "How to Use {APP_NAME}", "CMD_SUPPORT": "{APP_NAME} Support", + "CMD_USER_PROFILE": "User Profile", "CMD_DOCS": "Help, Getting Started", "CMD_SUGGEST": "Suggest a Feature", "CMD_REPORT_ISSUE": "Report Issue", diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 6b4b43a611..5b1e38e825 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -672,6 +672,10 @@ a, img { background-image: url("images/discuss-icon.svg"); } +.user { + background-image: url("images/circle-user-solid.svg"); +} + #editor-holder { position: relative; diff --git a/src/styles/images/circle-user-solid.svg b/src/styles/images/circle-user-solid.svg new file mode 100644 index 0000000000..836691525d --- /dev/null +++ b/src/styles/images/circle-user-solid.svg @@ -0,0 +1 @@ + From 977d1bf6b2869b1d3787502b15f1852f1a98ea6e Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 16 May 2025 18:01:03 +0530 Subject: [PATCH 2/6] feat: user profile implementation --- .../Phoenix/html/login-dialog.html | 17 ++ .../Phoenix/html/profile-panel.html | 39 ++++ src/extensionsIntegrated/Phoenix/main.js | 5 +- .../Phoenix/profile-menu.js | 190 ++++++++++++++++++ src/styles/brackets.less | 1 + src/styles/user-profile.less | 29 +++ 6 files changed, 279 insertions(+), 2 deletions(-) create mode 100644 src/extensionsIntegrated/Phoenix/html/login-dialog.html create mode 100644 src/extensionsIntegrated/Phoenix/html/profile-panel.html create mode 100644 src/extensionsIntegrated/Phoenix/profile-menu.js create mode 100644 src/styles/user-profile.less diff --git a/src/extensionsIntegrated/Phoenix/html/login-dialog.html b/src/extensionsIntegrated/Phoenix/html/login-dialog.html new file mode 100644 index 0000000000..a06d7dfdce --- /dev/null +++ b/src/extensionsIntegrated/Phoenix/html/login-dialog.html @@ -0,0 +1,17 @@ +
+
+

Welcome to Phoenix Code

+
+
+ +
+ +
+
+
diff --git a/src/extensionsIntegrated/Phoenix/html/profile-panel.html b/src/extensionsIntegrated/Phoenix/html/profile-panel.html new file mode 100644 index 0000000000..9eb2cda00d --- /dev/null +++ b/src/extensionsIntegrated/Phoenix/html/profile-panel.html @@ -0,0 +1,39 @@ +
+
+
+
+ CA +
+
+
Charly A.
+
Paid Plan
+
+
+
+
+
+
+ AI quota used + 7,000 / 10,000 tokens +
+
+
+
+
+ + + + + + +
+
diff --git a/src/extensionsIntegrated/Phoenix/main.js b/src/extensionsIntegrated/Phoenix/main.js index ff6ad241d6..5bb8dcacbc 100644 --- a/src/extensionsIntegrated/Phoenix/main.js +++ b/src/extensionsIntegrated/Phoenix/main.js @@ -32,7 +32,8 @@ define(function (require, exports, module) { Strings = require("strings"), Dialogs = require("widgets/Dialogs"), NotificationUI = require("widgets/NotificationUI"), - DefaultDialogs = require("widgets/DefaultDialogs"); + DefaultDialogs = require("widgets/DefaultDialogs"), + ProfileMenu = require("./profile-menu"); const PERSIST_STORAGE_DIALOG_DELAY_SECS = 60000; let $icon; @@ -48,7 +49,7 @@ define(function (require, exports, module) { }) .appendTo($("#main-toolbar .bottom-buttons")); $icon.on('click', ()=>{ - console.log("User profile button was clicked"); + ProfileMenu.init(); }); } function _showUnSupportedBrowserDialogue() { diff --git a/src/extensionsIntegrated/Phoenix/profile-menu.js b/src/extensionsIntegrated/Phoenix/profile-menu.js new file mode 100644 index 0000000000..5b8a83d62b --- /dev/null +++ b/src/extensionsIntegrated/Phoenix/profile-menu.js @@ -0,0 +1,190 @@ +define(function (require, exports, module) { + const loginTemplate = require("text!./html/login-dialog.html"); + const profileTemplate = require("text!./html/profile-panel.html"); + + // for the popup DOM element + let $popup = null; + + // this is to track whether the popup is visible or not + let isPopupVisible = false; + + // if user is logged in we show the profile menu, otherwise we show the login menu + const isLoggedIn = false; + + function _handleSignInBtnClick() { + console.log("User clicked sign in button"); + } + + function _handleSignOutBtnClick() { + console.log("User clicked sign out"); + } + + function _handleContactSupportBtnClick() { + Phoenix.app.openURLInDefaultBrowser(brackets.config.support_url); + } + + function _handleAccountDetailsBtnClick() { + console.log("User clicked account details"); + } + + /** + * Close the popup if it's open + * this is called at various instances like when the user click on the profile icon even if the popup is open + * or when user clicks somewhere else on the document + */ + function closePopup() { + if ($popup) { + $popup.remove(); + $popup = null; + isPopupVisible = false; + + // remove global click handler + $(document).off("click.profilePopup"); + } + } + + /** + * handle clicks outside the popup to close it + */ + function handleDocumentClick(e) { + // If popup exists and click is outside the popup + if ($popup && $popup.length && !$popup[0].contains(e.target)) { + // If the click is not on the user-profile-button (which would toggle the popup) + if (e.target.id !== "user-profile-button" && !$(e.target).closest("#user-profile-button").length) { + closePopup(); + } + } + } + + /** + * this function is to position the popup near the profile button + */ + function positionPopup() { + const $profileButton = $("#user-profile-button"); + + if ($profileButton.length && $popup) { + const buttonPos = $profileButton.offset(); + const popupWidth = $popup.outerWidth(); + const windowWidth = $(window).width(); + + // pos above the profile button + let top = buttonPos.top - $popup.outerHeight() - 10; + + // If popup would go off the right edge of the window, align right edge of popup with right edge of button + let left = Math.min( + buttonPos.left - popupWidth + $profileButton.outerWidth(), + windowWidth - popupWidth - 10 + ); + + // never go off left edge + left = Math.max(10, left); + + $popup.css({ + top: top + "px", + left: left + "px" + }); + } + } + + /** + * Shows the sign-in popup when the user is not logged in + */ + function showLoginPopup() { + // If popup is already visible, just close it + if (isPopupVisible) { + closePopup(); + return; + } + + // create the popup element + closePopup(); // close any existing popup first + $popup = $(loginTemplate); + $("body").append($popup); + isPopupVisible = true; + + // Position the popup + positionPopup(); + + // event handlers for buttons + $popup.find("#phoenix-signin-btn").on("click", function () { + _handleSignInBtnClick(); + closePopup(); + }); + + $popup.find("#phoenix-support-btn").on("click", function () { + _handleContactSupportBtnClick(); + closePopup(); + }); + + // Set up global click handler to close popup when clicking outside + // Delay attaching to avoid immediate closing + setTimeout(function () { + $(document).on("click.profilePopup", handleDocumentClick); + }, 0); + } + + /** + * Shows the user profile popup when the user is logged in + */ + function showProfilePopup() { + // If popup is already visible, just close it + if (isPopupVisible) { + closePopup(); + return; + } + + closePopup(); + $popup = $(profileTemplate); + $("body").append($popup); + isPopupVisible = true; + positionPopup(); + + $popup.find("#phoenix-account-btn").on("click", function () { + _handleAccountDetailsBtnClick(); + closePopup(); + }); + + $popup.find("#phoenix-support-btn").on("click", function () { + _handleContactSupportBtnClick(); + closePopup(); + }); + + $popup.find("#phoenix-signout-btn").on("click", function () { + _handleSignOutBtnClick(); + closePopup(); + }); + + // Set up global click handler to close popup when clicking outside + // Delay attaching to avoid immediate closing + setTimeout(function () { + $(document).on("click.profilePopup", handleDocumentClick); + }, 0); + } + + /** + * Toggle the profile popup based on the user's login status + * this function is called inside the src/extensionsIntegrated/Phoenix/main.js when user clicks on the profile icon + */ + function init() { + // check if the popup is already visible or not. if visible close it + if (isPopupVisible) { + closePopup(); + return; + } + + if (isLoggedIn) { + showProfilePopup(); + } else { + showLoginPopup(); + } + + // handle window resize to reposition popup + $(window).on("resize.profilePopup", function () { + if (isPopupVisible) { + positionPopup(); + } + }); + } + + exports.init = init; +}); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 5b1e38e825..7deb9ff685 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -44,6 +44,7 @@ @import "Extn-TabBar.less"; @import "Extn-DisplayShortcuts.less"; @import "Extn-CSSColorPreview.less"; +@import "user-profile.less"; /* Overall layout */ diff --git a/src/styles/user-profile.less b/src/styles/user-profile.less new file mode 100644 index 0000000000..b6ce9f2f46 --- /dev/null +++ b/src/styles/user-profile.less @@ -0,0 +1,29 @@ +.profile-popup { + background-color: #2c2c2c; + color: #ffffff; + border-radius: 6px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + width: 300px; + overflow: hidden; + position: absolute; + z-index: 9999; + + .popup-header { + padding: 15px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .popup-body { + padding: 15px; + } + + .popup-title { + margin: 0; + font-size: 18px; + font-weight: normal; + } +} + +.dark .profile-popup { + background-color: #1d1f21; +} From 9a1e2106d653e95613737f004bb7b0bebb7b7517 Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 16 May 2025 19:02:12 +0530 Subject: [PATCH 3/6] fix: remove hard-coded values for easier integration --- .../Phoenix/html/login-dialog.html | 6 +- .../Phoenix/html/profile-panel.html | 18 +++--- .../Phoenix/profile-menu.js | 57 ++++++++++++++++--- 3 files changed, 60 insertions(+), 21 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix/html/login-dialog.html b/src/extensionsIntegrated/Phoenix/html/login-dialog.html index a06d7dfdce..3bbb928a6c 100644 --- a/src/extensionsIntegrated/Phoenix/html/login-dialog.html +++ b/src/extensionsIntegrated/Phoenix/html/login-dialog.html @@ -1,16 +1,16 @@
-

Welcome to Phoenix Code

+

{{welcomeTitle}}

diff --git a/src/extensionsIntegrated/Phoenix/html/profile-panel.html b/src/extensionsIntegrated/Phoenix/html/profile-panel.html index 9eb2cda00d..d4eaf8a093 100644 --- a/src/extensionsIntegrated/Phoenix/html/profile-panel.html +++ b/src/extensionsIntegrated/Phoenix/html/profile-panel.html @@ -2,38 +2,38 @@
- CA + {{initials}}
-
Charly A.
-
Paid Plan
+
{{userName}}
+
{{planName}}
- AI quota used - 7,000 / 10,000 tokens + {{quotaLabel}} + {{quotaUsed}} / {{quotaTotal}} {{quotaUnit}}
-
+
diff --git a/src/extensionsIntegrated/Phoenix/profile-menu.js b/src/extensionsIntegrated/Phoenix/profile-menu.js index 5b8a83d62b..3df2c9848a 100644 --- a/src/extensionsIntegrated/Phoenix/profile-menu.js +++ b/src/extensionsIntegrated/Phoenix/profile-menu.js @@ -1,4 +1,7 @@ define(function (require, exports, module) { + const Mustache = require("thirdparty/mustache/mustache"); + + // HTML templates const loginTemplate = require("text!./html/login-dialog.html"); const profileTemplate = require("text!./html/profile-panel.html"); @@ -9,7 +12,27 @@ 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; + const isLoggedIn = true; + + const defaultLoginData = { + welcomeTitle: "Welcome to Phoenix Code", + signInBtnText: "Sign in to your account", + supportBtnText: "Contact support" + }; + + const defaultProfileData = { + initials: "CA", + userName: "Charly A.", + planName: "Paid Plan", + quotaLabel: "AI quota used", + quotaUsed: "7,000", + quotaTotal: "10,000", + quotaUnit: "tokens", + quotaPercent: 70, + accountBtnText: "Account details", + supportBtnText: "Contact support", + signOutBtnText: "Sign out" + }; function _handleSignInBtnClick() { console.log("User clicked sign in button"); @@ -88,21 +111,28 @@ define(function (require, exports, module) { /** * Shows the sign-in popup when the user is not logged in + * @param {Object} loginData - Data to populate the template (optional) */ - function showLoginPopup() { + function showLoginPopup(loginData) { // If popup is already visible, just close it if (isPopupVisible) { closePopup(); return; } + // Merge provided data with defaults + const templateData = $.extend({}, defaultLoginData, loginData || {}); + // create the popup element closePopup(); // close any existing popup first - $popup = $(loginTemplate); + + // Render template with data + const renderedTemplate = Mustache.render(loginTemplate, templateData); + $popup = $(renderedTemplate); + $("body").append($popup); isPopupVisible = true; - // Position the popup positionPopup(); // event handlers for buttons @@ -125,16 +155,24 @@ define(function (require, exports, module) { /** * Shows the user profile popup when the user is logged in + * @param {Object} profileData - Data to populate the template (optional) */ - function showProfilePopup() { + function showProfilePopup(profileData) { // If popup is already visible, just close it if (isPopupVisible) { closePopup(); return; } + // Merge provided data with defaults + const templateData = $.extend({}, defaultProfileData, profileData || {}); + closePopup(); - $popup = $(profileTemplate); + + // Render template with data + const renderedTemplate = Mustache.render(profileTemplate, templateData); + $popup = $(renderedTemplate); + $("body").append($popup); isPopupVisible = true; positionPopup(); @@ -164,8 +202,9 @@ define(function (require, exports, module) { /** * Toggle the profile popup based on the user's login status * this function is called inside the src/extensionsIntegrated/Phoenix/main.js when user clicks on the profile icon + * @param {Object} data - Data to populate the templates (optional) */ - function init() { + function init(data) { // check if the popup is already visible or not. if visible close it if (isPopupVisible) { closePopup(); @@ -173,9 +212,9 @@ define(function (require, exports, module) { } if (isLoggedIn) { - showProfilePopup(); + showProfilePopup(data); } else { - showLoginPopup(); + showLoginPopup(data); } // handle window resize to reposition popup From bd8cd0f11d16fe349a779cdf486654140f33d252 Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 16 May 2025 19:13:21 +0530 Subject: [PATCH 4/6] refactor: improve styles to align the UI with rest of Phoenix --- .../Phoenix/html/login-dialog.html | 10 +- .../Phoenix/html/profile-panel.html | 30 +-- .../Phoenix/profile-menu.js | 2 +- src/styles/user-profile.less | 239 +++++++++++++++++- 4 files changed, 249 insertions(+), 32 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix/html/login-dialog.html b/src/extensionsIntegrated/Phoenix/html/login-dialog.html index 3bbb928a6c..dbe692d262 100644 --- a/src/extensionsIntegrated/Phoenix/html/login-dialog.html +++ b/src/extensionsIntegrated/Phoenix/html/login-dialog.html @@ -3,13 +3,13 @@

{{welcomeTitle}}

- -
-
diff --git a/src/extensionsIntegrated/Phoenix/html/profile-panel.html b/src/extensionsIntegrated/Phoenix/html/profile-panel.html index d4eaf8a093..52dc6fcb59 100644 --- a/src/extensionsIntegrated/Phoenix/html/profile-panel.html +++ b/src/extensionsIntegrated/Phoenix/html/profile-panel.html @@ -1,38 +1,38 @@
-
-
+
-
-
+
+
{{quotaLabel}} {{quotaUsed}} / {{quotaTotal}} {{quotaUnit}}
-
-
+
+
- - -
diff --git a/src/extensionsIntegrated/Phoenix/profile-menu.js b/src/extensionsIntegrated/Phoenix/profile-menu.js index 3df2c9848a..87414c3ee7 100644 --- a/src/extensionsIntegrated/Phoenix/profile-menu.js +++ b/src/extensionsIntegrated/Phoenix/profile-menu.js @@ -12,7 +12,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 = true; + const isLoggedIn = false; const defaultLoginData = { welcomeTitle: "Welcome to Phoenix Code", diff --git a/src/styles/user-profile.less b/src/styles/user-profile.less index b6ce9f2f46..da74633e48 100644 --- a/src/styles/user-profile.less +++ b/src/styles/user-profile.less @@ -1,29 +1,246 @@ +@import "brackets_variables.less"; + .profile-popup { - background-color: #2c2c2c; - color: #ffffff; - border-radius: 6px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + background-color: @bc-menu-bg; + color: @bc-menu-text; + border-radius: @bc-border-radius; + box-shadow: 0 3px 9px @bc-shadow; width: 300px; overflow: hidden; position: absolute; - z-index: 9999; + z-index: @z-index-brackets-context-menu-base; + animation: dropdown 90ms cubic-bezier(0, .97, .2, .99); + transform-origin: 0 0; .popup-header { - padding: 15px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 12px 15px; + border-bottom: 1px solid @bc-menu-separator; } .popup-body { - padding: 15px; + padding: 12px 15px; } .popup-title { margin: 0; - font-size: 18px; - font-weight: normal; + font-size: 16px; + font-weight: @font-weight-semibold; + color: @bc-menu-text; + } + + .user-profile-header { + display: flex; + align-items: center; + } + + .user-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + background-color: @bc-primary-btn-bg; + color: @bc-text-alt; + display: flex; + align-items: center; + justify-content: center; + margin-right: 15px; + font-weight: @font-weight-semibold; + font-size: 16px; + } + + .user-info { + display: flex; + flex-direction: column; + } + + .user-name { + font-weight: @font-weight-semibold; + color: @bc-menu-text; + } + + .user-plan { + color: #3c3; + font-size: 16px; + } + + .quota-section { + margin-bottom: 20px; + } + + .quota-header { + display: flex; + justify-content: space-between; + margin-bottom: 5px; + font-size: 13px; + } + + .progress-bar { + width: 100%; + height: 8px; + background-color: @bc-input-bg; + border-radius: 4px; + overflow: hidden; + + .progress-fill { + height: 100%; + background-color: @bc-primary-btn-bg; + border-radius: 4px; + } + } + + .support-link { + margin-top: 20px; + text-align: center; + } + + .menu-button { + width: 100%; + text-align: left; + padding: 8px 12px; + + i { + margin-right: 8px; + width: 20px; + text-align: center; + } + + &.signout { + color: #f55; + } + } + + .btn { + margin: 5px 0; + transition: background-color 0.2s ease; + + &.btn-primary { + background-color: @bc-primary-btn-bg; + border: 1px solid @bc-primary-btn-border; + box-shadow: inset 0 1px 0 @bc-highlight; + color: @bc-text-alt; + width: 100%; + padding: 10px 0; + + i { + margin-right: 5px; + } + + &:hover { + background-color: lighten(@bc-primary-btn-bg, 10%); + } + + &:active { + 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; + } + } } } .dark .profile-popup { - background-color: #1d1f21; + background-color: @dark-bc-menu-bg; + color: @dark-bc-menu-text; + box-shadow: 0 3px 9px @dark-bc-shadow; + + .popup-header { + border-bottom: 1px solid @dark-bc-menu-separator; + } + + .popup-title { + color: @dark-bc-menu-text; + } + + .user-avatar { + background-color: @dark-bc-primary-btn-bg; + color: @dark-bc-text-alt; + } + + .user-name { + color: @dark-bc-menu-text; + } + + .progress-bar { + background-color: @dark-bc-input-bg; + + .progress-fill { + background-color: @dark-bc-primary-btn-bg; + } + } + + .btn { + &.btn-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 { + background-color: lighten(@dark-bc-primary-btn-bg, 10%); + } + + &:active { + 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; + } + } + } +} + +@keyframes dropdown { + 0% { opacity: 0.5; transform: translate3d(0, 0, 0) scale(0.5); } + 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } From a4b1ac98105ae5d84b5663b6636b7599f25623df Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 16 May 2025 23:18:44 +0530 Subject: [PATCH 5/6] fix: changed styles file name to follow convention --- src/styles/{user-profile.less => Extn-UserProfile.less} | 0 src/styles/brackets.less | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/styles/{user-profile.less => Extn-UserProfile.less} (100%) diff --git a/src/styles/user-profile.less b/src/styles/Extn-UserProfile.less similarity index 100% rename from src/styles/user-profile.less rename to src/styles/Extn-UserProfile.less diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 7deb9ff685..9ecea92488 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -44,7 +44,7 @@ @import "Extn-TabBar.less"; @import "Extn-DisplayShortcuts.less"; @import "Extn-CSSColorPreview.less"; -@import "user-profile.less"; +@import "Extn-UserProfile.less"; /* Overall layout */ From e5c8cb017c341938ec0c61019099f103aab0e341 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 17 May 2025 00:38:34 +0530 Subject: [PATCH 6/6] fix: use popup manager api's and improve readability --- .../Phoenix/profile-menu.js | 60 ++++++++----------- src/styles/Extn-UserProfile.less | 4 +- src/styles/brackets.less | 4 -- 3 files changed, 28 insertions(+), 40 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix/profile-menu.js b/src/extensionsIntegrated/Phoenix/profile-menu.js index 87414c3ee7..4b4e6e927b 100644 --- a/src/extensionsIntegrated/Phoenix/profile-menu.js +++ b/src/extensionsIntegrated/Phoenix/profile-menu.js @@ -1,5 +1,6 @@ define(function (require, exports, module) { const Mustache = require("thirdparty/mustache/mustache"); + const PopUpManager = require("widgets/PopUpManager"); // HTML templates const loginTemplate = require("text!./html/login-dialog.html"); @@ -57,25 +58,9 @@ define(function (require, exports, module) { */ function closePopup() { if ($popup) { - $popup.remove(); + PopUpManager.removePopUp($popup); $popup = null; isPopupVisible = false; - - // remove global click handler - $(document).off("click.profilePopup"); - } - } - - /** - * handle clicks outside the popup to close it - */ - function handleDocumentClick(e) { - // If popup exists and click is outside the popup - if ($popup && $popup.length && !$popup[0].contains(e.target)) { - // If the click is not on the user-profile-button (which would toggle the popup) - if (e.target.id !== "user-profile-button" && !$(e.target).closest("#user-profile-button").length) { - closePopup(); - } } } @@ -135,6 +120,12 @@ define(function (require, exports, module) { positionPopup(); + PopUpManager.addPopUp($popup, function() { + $popup.remove(); + $popup = null; + isPopupVisible = false; + }, true, { closeCurrentPopups: true }); + // event handlers for buttons $popup.find("#phoenix-signin-btn").on("click", function () { _handleSignInBtnClick(); @@ -146,11 +137,12 @@ define(function (require, exports, module) { closePopup(); }); - // Set up global click handler to close popup when clicking outside - // Delay attaching to avoid immediate closing - setTimeout(function () { - $(document).on("click.profilePopup", handleDocumentClick); - }, 0); + // handle window resize to reposition popup + $(window).on("resize.profilePopup", function () { + if (isPopupVisible) { + positionPopup(); + } + }); } /** @@ -177,6 +169,12 @@ define(function (require, exports, module) { isPopupVisible = true; positionPopup(); + PopUpManager.addPopUp($popup, function() { + $popup.remove(); + $popup = null; + isPopupVisible = false; + }, true, { closeCurrentPopups: true }); + $popup.find("#phoenix-account-btn").on("click", function () { _handleAccountDetailsBtnClick(); closePopup(); @@ -192,11 +190,12 @@ define(function (require, exports, module) { closePopup(); }); - // Set up global click handler to close popup when clicking outside - // Delay attaching to avoid immediate closing - setTimeout(function () { - $(document).on("click.profilePopup", handleDocumentClick); - }, 0); + // handle window resize to reposition popup + $(window).on("resize.profilePopup", function () { + if (isPopupVisible) { + positionPopup(); + } + }); } /** @@ -216,13 +215,6 @@ define(function (require, exports, module) { } else { showLoginPopup(data); } - - // handle window resize to reposition popup - $(window).on("resize.profilePopup", function () { - if (isPopupVisible) { - positionPopup(); - } - }); } exports.init = init; diff --git a/src/styles/Extn-UserProfile.less b/src/styles/Extn-UserProfile.less index da74633e48..5ab1ac49e9 100644 --- a/src/styles/Extn-UserProfile.less +++ b/src/styles/Extn-UserProfile.less @@ -9,7 +9,7 @@ overflow: hidden; position: absolute; z-index: @z-index-brackets-context-menu-base; - animation: dropdown 90ms cubic-bezier(0, .97, .2, .99); + animation: user-profile-dropdown-animation 90ms cubic-bezier(0, .97, .2, .99); transform-origin: 0 0; .popup-header { @@ -240,7 +240,7 @@ } } -@keyframes dropdown { +@keyframes user-profile-dropdown-animation { 0% { opacity: 0.5; transform: translate3d(0, 0, 0) scale(0.5); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 9ecea92488..2d09b8f41d 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -669,10 +669,6 @@ a, img { background-image: url("images/share-fill.svg"); } -.help { - background-image: url("images/discuss-icon.svg"); -} - .user { background-image: url("images/circle-user-solid.svg"); }