From bc3d48616e610fa47bd9265ecb9e01a4a9a1b44b Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Fri, 13 Oct 2023 10:51:35 +0000 Subject: [PATCH] gear_menu: Migrate to use tippy. --- web/e2e-tests/lib/common.ts | 3 +- web/e2e-tests/navigation.test.ts | 2 +- web/e2e-tests/user-deactivation.test.ts | 6 +- web/src/click_handlers.js | 72 +--------- web/src/gear_menu.js | 146 ++++++++++++++++++-- web/src/hotkey.js | 11 +- web/src/invite.ts | 5 - web/src/personal_menu_popover.js | 7 +- web/src/popover_menus.js | 9 ++ web/src/server_events_dispatch.js | 4 +- web/styles/app_components.css | 6 - web/styles/dark_theme.css | 12 -- web/styles/popovers.css | 101 +++++++++++++- web/styles/settings.css | 2 +- web/styles/zulip.css | 176 +++++------------------- web/templates/gear_menu.hbs | 8 -- web/templates/gear_menu_popover.hbs | 2 +- web/templates/navbar.hbs | 6 +- web/tests/dispatch.test.js | 2 +- web/tests/hotkey.test.js | 6 +- 20 files changed, 295 insertions(+), 291 deletions(-) delete mode 100644 web/templates/gear_menu.hbs diff --git a/web/e2e-tests/lib/common.ts b/web/e2e-tests/lib/common.ts index 55ed1a8fec..4f3df4767b 100644 --- a/web/e2e-tests/lib/common.ts +++ b/web/e2e-tests/lib/common.ts @@ -548,7 +548,8 @@ export async function manage_organization(page: Page): Promise { await page.waitForSelector(menu_selector, {visible: true}); await page.click(menu_selector); - const organization_settings = '.dropdown-menu a[href="#organization"]'; + const organization_settings = '.link-item a[href="#organization"]'; + await page.waitForSelector(organization_settings, {visible: true}); await page.click(organization_settings); await page.waitForSelector("#settings_overlay_container.show", {visible: true}); diff --git a/web/e2e-tests/navigation.test.ts b/web/e2e-tests/navigation.test.ts index 79ec4430c7..66b419717c 100644 --- a/web/e2e-tests/navigation.test.ts +++ b/web/e2e-tests/navigation.test.ts @@ -42,7 +42,7 @@ async function navigate_to_subscriptions(page: Page): Promise { await open_menu(page); - const manage_streams_selector = '.dropdown-menu a[href^="#streams"]'; + const manage_streams_selector = '.link-item a[href^="#streams"]'; await page.waitForSelector(manage_streams_selector, {visible: true}); await page.click(manage_streams_selector); diff --git a/web/e2e-tests/user-deactivation.test.ts b/web/e2e-tests/user-deactivation.test.ts index e949247a36..366bcae103 100644 --- a/web/e2e-tests/user-deactivation.test.ts +++ b/web/e2e-tests/user-deactivation.test.ts @@ -8,7 +8,11 @@ async function navigate_to_user_list(page: Page): Promise { const menu_selector = "#settings-dropdown"; await page.waitForSelector(menu_selector, {visible: true}); await page.click(menu_selector); - await page.click('.dropdown-menu a[href="#organization"]'); + + const organization_settings = '.link-item a[href="#organization"]'; + await page.waitForSelector(organization_settings, {visible: true}); + await page.click(organization_settings); + await page.waitForSelector("#settings_overlay_container.show", {visible: true}); await page.click("li[data-section='user-list-admin']"); } diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js index 3dbdd9ff36..545fe2131e 100644 --- a/web/src/click_handlers.js +++ b/web/src/click_handlers.js @@ -1,22 +1,18 @@ import $ from "jquery"; import tippy from "tippy.js"; -import WinChan from "winchan"; // You won't find every click handler here, but it's a good place to start! import render_buddy_list_tooltip_content from "../templates/buddy_list_tooltip_content.hbs"; import * as activity_ui from "./activity_ui"; -import * as blueslip from "./blueslip"; import * as browser_history from "./browser_history"; import * as buddy_data from "./buddy_data"; -import * as channel from "./channel"; import * as compose from "./compose"; import * as compose_actions from "./compose_actions"; import * as compose_reply from "./compose_reply"; import * as compose_state from "./compose_state"; import {media_breakpoints_num} from "./css_variables"; -import * as dark_theme from "./dark_theme"; import * as emoji_picker from "./emoji_picker"; import * as hash_util from "./hash_util"; import * as hashchange from "./hashchange"; @@ -760,48 +756,6 @@ export function initialize() { }, ); - // WEBATHENA - - $("body").on("click", ".webathena_login", (e) => { - $("#zephyr-mirror-error").removeClass("show"); - const principal = ["zephyr", "zephyr"]; - WinChan.open( - { - url: "https://webathena.mit.edu/#!request_ticket_v1", - relay_url: "https://webathena.mit.edu/relay.html", - params: { - realm: "ATHENA.MIT.EDU", - principal, - }, - }, - (err, r) => { - if (err) { - blueslip.warn(err); - return; - } - if (r.status !== "OK") { - blueslip.warn(r); - return; - } - - channel.post({ - url: "/accounts/webathena_kerberos_login/", - data: {cred: JSON.stringify(r.session)}, - success() { - $("#zephyr-mirror-error").removeClass("show"); - }, - error() { - $("#zephyr-mirror-error").addClass("show"); - }, - }); - }, - ); - $("#settings-dropdown").dropdown("toggle"); - e.preventDefault(); - e.stopPropagation(); - }); - // End Webathena code - // disable the draggability for left-sidebar components $("#stream_filters, #left-sidebar-navigation-list").on("dragstart", (e) => { e.target.blur(); @@ -823,36 +777,12 @@ export function initialize() { // Don't focus links on context menu. $("body").on("contextmenu", "a", (e) => e.target.blur()); - // GEAR MENU - - $("body").on("click", ".change-language-spectator, .language_selection_widget button", (e) => { + $("body").on("click", ".language_selection_widget button", (e) => { e.preventDefault(); e.stopPropagation(); settings_display.launch_default_language_setting_modal(); }); - // We cannot update recipient bar color using dark_theme.enable/disable due to - // it being called before message lists are initialized and the order cannot be changed. - // Also, since these buttons are only visible for spectators which doesn't have events, - // if theme is changed in a different tab, the theme of this tab remains the same. - $("body").on("click", "#gear-menu .dark-theme", (e) => { - // Allow propagation to close gear menu. - e.preventDefault(); - requestAnimationFrame(() => { - dark_theme.enable(); - message_lists.update_recipient_bar_background_color(); - }); - }); - - $("body").on("click", "#gear-menu .light-theme", (e) => { - // Allow propagation to close gear menu. - e.preventDefault(); - requestAnimationFrame(() => { - dark_theme.disable(); - message_lists.update_recipient_bar_background_color(); - }); - }); - $("body").on("click", "#header-container .brand", (e) => { e.preventDefault(); e.stopPropagation(); diff --git a/web/src/gear_menu.js b/web/src/gear_menu.js index c41644d6f8..86a2be2b53 100644 --- a/web/src/gear_menu.js +++ b/web/src/gear_menu.js @@ -1,8 +1,17 @@ import $ from "jquery"; +import WinChan from "winchan"; -import render_gear_menu from "../templates/gear_menu.hbs"; +import render_gear_menu_popover from "../templates/gear_menu_popover.hbs"; +import * as blueslip from "./blueslip"; +import * as channel from "./channel"; +import * as dark_theme from "./dark_theme"; +import * as message_lists from "./message_lists"; +import * as popover_menus from "./popover_menus"; import * as popover_menus_data from "./popover_menus_data"; +import * as popovers from "./popovers"; +import * as settings_display from "./settings_display"; +import {parse_html} from "./ui_util"; /* For various historical reasons there isn't one @@ -77,23 +86,132 @@ The click handler uses "[data-overlay-trigger]" as the selector and then calls browser_history.go_to_location. */ +function render(instance) { + const rendered_gear_menu = render_gear_menu_popover( + popover_menus_data.get_gear_menu_content_context(), + ); + instance.setContent(parse_html(rendered_gear_menu)); +} + export function initialize() { - const rendered_gear_menu = render_gear_menu(popover_menus_data.get_gear_menu_content_context()); - $("#navbar-buttons").html(rendered_gear_menu); + popover_menus.register_popover_menu("#gear-menu", { + placement: "bottom", + offset: [-50, 0], + popperOptions: { + strategy: "fixed", + modifiers: [ + { + name: "eventListeners", + options: { + scroll: false, + }, + }, + ], + }, + onMount(instance) { + const $popper = $(instance.popper); + $popper.addClass("navbar-dropdown-tippy"); + popover_menus.popover_instances.gear_menu = instance; + $(".focus-dropdown").on("focus", (e) => { + e.preventDefault(); + $("#gear-menu-dropdown").find(".org-version a").trigger("focus"); + }); + + $popper.on("click", ".webathena_login", (e) => { + $("#zephyr-mirror-error").removeClass("show"); + const principal = ["zephyr", "zephyr"]; + WinChan.open( + { + url: "https://webathena.mit.edu/#!request_ticket_v1", + relay_url: "https://webathena.mit.edu/relay.html", + params: { + realm: "ATHENA.MIT.EDU", + principal, + }, + }, + (err, r) => { + if (err) { + blueslip.warn(err); + return; + } + if (r.status !== "OK") { + blueslip.warn(r); + return; + } + + channel.post({ + url: "/accounts/webathena_kerberos_login/", + data: {cred: JSON.stringify(r.session)}, + success() { + $("#zephyr-mirror-error").removeClass("show"); + }, + error() { + $("#zephyr-mirror-error").addClass("show"); + }, + }); + }, + ); + instance.hide(); + e.preventDefault(); + e.stopPropagation(); + }); + + $popper.on("click", ".change-language-spectator", (e) => { + instance.hide(); + e.preventDefault(); + e.stopPropagation(); + settings_display.launch_default_language_setting_modal(); + }); + + // We cannot update recipient bar color using dark_theme.enable/disable due to + // it being called before message lists are initialized and the order cannot be changed. + // Also, since these buttons are only visible for spectators which doesn't have events, + // if theme is changed in a different tab, the theme of this tab remains the same. + $popper.on("click", "#gear-menu-dropdown .dark-theme", (e) => { + instance.hide(); + e.preventDefault(); + e.stopPropagation(); + requestAnimationFrame(() => { + dark_theme.enable(); + message_lists.update_recipient_bar_background_color(); + }); + }); + + $popper.on("click", "#gear-menu-dropdown .light-theme", (e) => { + instance.hide(); + e.preventDefault(); + e.stopPropagation(); + requestAnimationFrame(() => { + dark_theme.disable(); + message_lists.update_recipient_bar_background_color(); + }); + }); + }, + onShow: render, + onHidden(instance) { + instance.destroy(); + popover_menus.popover_instances.gear_menu = undefined; + }, + }); } -export function open() { - $("#settings-dropdown").trigger("click"); - // there are invisible li tabs, which should not be clicked. - $("#gear-menu").find("li:not(.invisible) a").eq(0).trigger("focus"); +export function toggle() { + if (popover_menus.is_gear_menu_popover_displayed()) { + popovers.hide_all(); + return; + } + + // Since this can be called via hotkey, we need to + // hide any other popovers that may be open before. + if (popovers.any_active()) { + popovers.hide_all(); + } + + $("#gear-menu").trigger("click"); } -export function is_open() { - return $(".dropdown").hasClass("open"); -} - -export function close() { - if (is_open()) { - $(".dropdown").removeClass("open"); +export function rerender() { + if (popover_menus.is_gear_menu_popover_displayed()) { + render(popover_menus.get_gear_menu_instance()); } } diff --git a/web/src/hotkey.js b/web/src/hotkey.js index a4174e7cbb..69a776eb4e 100644 --- a/web/src/hotkey.js +++ b/web/src/hotkey.js @@ -289,11 +289,6 @@ export function process_escape_key(e) { return true; } - if (gear_menu.is_open()) { - gear_menu.close(); - return true; - } - if (processing_text()) { if (activity_ui.searching()) { activity_ui.escape_search(); @@ -736,12 +731,12 @@ export function process_hotkey(e, hotkey) { return false; } - if (hotkey.message_view_only && gear_menu.is_open()) { + if (hotkey.message_view_only && popover_menus.is_gear_menu_popover_displayed()) { // Inside the gear menu, we don't process most hotkeys; the // exception is that the gear_menu hotkey should toggle the // menu closed again. if (event_name === "gear_menu") { - gear_menu.close(); + gear_menu.toggle(); return true; } return false; @@ -897,7 +892,7 @@ export function process_hotkey(e, hotkey) { search.initiate_search(); return true; case "gear_menu": - gear_menu.open(); + gear_menu.toggle(); return true; case "show_shortcuts": // Show keyboard shortcuts page browser_history.go_to_location("keyboard-shortcuts"); diff --git a/web/src/invite.ts b/web/src/invite.ts index ed95cbe7d3..72537be3c8 100644 --- a/web/src/invite.ts +++ b/web/src/invite.ts @@ -275,11 +275,6 @@ function open_invite_user_modal(e: JQuery.ClickEvent): void e.stopPropagation(); e.preventDefault(); - const $gear_menu = $("#gear-menu"); - if ($gear_menu.hasClass("open")) { - $gear_menu.removeClass("open"); - } - const time_unit_choices = ["minutes", "hours", "days", "weeks"]; const html_body = render_invite_user_modal({ is_admin: page_params.is_admin, diff --git a/web/src/personal_menu_popover.js b/web/src/personal_menu_popover.js index 0f588c6fa4..dfa86e4e32 100644 --- a/web/src/personal_menu_popover.js +++ b/web/src/personal_menu_popover.js @@ -3,7 +3,6 @@ import tippy from "tippy.js"; import render_personal_menu from "../templates/personal_menu.hbs"; -import * as gear_menu from "./gear_menu"; import * as narrow from "./narrow"; import {page_params} from "./page_params"; import * as people from "./people"; @@ -38,13 +37,9 @@ export function initialize() { }, onMount(instance) { const $popper = $(instance.popper); - $popper.addClass("personal-menu-tippy"); + $popper.addClass("navbar-dropdown-tippy"); popover_menus.popover_instances.personal_menu = instance; - // Workaround for the gear menu not being a tippy popover - // and thus not auto-closing. - gear_menu.close(); - tippy(".clear_status", { placement: "top", appendTo: document.body, diff --git a/web/src/popover_menus.js b/web/src/popover_menus.js index d6a5bd1bf9..b84ab52da9 100644 --- a/web/src/popover_menus.js +++ b/web/src/popover_menus.js @@ -36,6 +36,7 @@ export const popover_instances = { send_later: null, change_visibility_policy: null, personal_menu: null, + gear_menu: null, }; /* Keyboard UI functions */ @@ -98,6 +99,14 @@ export function is_compose_enter_sends_popover_displayed() { return popover_instances.compose_enter_sends?.state.isVisible; } +export function is_gear_menu_popover_displayed() { + return popover_instances.gear_menu?.state.isVisible; +} + +export function get_gear_menu_instance() { + return popover_instances.gear_menu; +} + function get_popover_items_for_instance(instance) { const $current_elem = $(instance.popper); const class_name = $current_elem.attr("class"); diff --git a/web/src/server_events_dispatch.js b/web/src/server_events_dispatch.js index 5061fd90ea..a15f37ed63 100644 --- a/web/src/server_events_dispatch.js +++ b/web/src/server_events_dispatch.js @@ -258,7 +258,7 @@ export function dispatch_normal_event(event) { if (event.property === "invite_to_realm_policy") { settings_invites.update_invite_user_panel(); sidebar_ui.update_invite_user_option(); - gear_menu.initialize(); + gear_menu.rerender(); } const stream_creation_settings = [ @@ -289,7 +289,7 @@ export function dispatch_normal_event(event) { if (key === "create_multiuse_invite_group") { settings_invites.update_invite_user_panel(); sidebar_ui.update_invite_user_option(); - gear_menu.initialize(); + gear_menu.rerender(); } if (key === "edit_topic_policy") { diff --git a/web/styles/app_components.css b/web/styles/app_components.css index 2b17168be6..f43c46aa12 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -674,12 +674,6 @@ div.overlay { } } -.white_zulip_icon_without_text { - display: inline-block; - background-image: url("../images/logo/white-zulip-logo-without-text.svg"); - background-size: cover; -} - .only-visible-for-spectators { display: none; } diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index c59a329378..b4043d67a7 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -691,13 +691,6 @@ opacity: 0.2; } - #gear_menu_about_zulip { - .white_zulip_icon_without_text { - filter: invert(10%) sepia(16%) saturate(175%) hue-rotate(194deg) - brightness(99%) contrast(89%); - } - } - .spectator-view #gear-menu-dropdown { .dark-theme { display: none; @@ -706,11 +699,6 @@ .light-theme { display: block; } - - #gear-menu { - .dropdown-menu a:hover { - color: hsl(0deg 0% 100%); - } } .nav .dropdown-menu::after { diff --git a/web/styles/popovers.css b/web/styles/popovers.css index 6111ac7986..b9f886a3cd 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -1034,6 +1034,10 @@ ul { } } +#personal-menu-dropdown { + padding-bottom: 5px; +} + .personal-menu-header { display: flex; flex-flow: row nowrap; @@ -1192,6 +1196,92 @@ ul { width: 16px; height: 16px; } + + .zulip-icon { + position: relative; + top: -1px; + } +} + +#gear-menu-dropdown { + padding: 5px 0; + box-shadow: var(--box-shadow-gear-menu); + + .org-info { + padding: 4px 0 5px; + + & li { + display: flex; + justify-content: center; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 16px; /* 114.286% */ + letter-spacing: 0.28px; + + &:focus-within { + background: var(--color-background-hover-dropdown-menu); + } + + & a { + padding: 2px 0; + flex-grow: 1; + text-align: center; + text-decoration: none; + + &:hover { + background: var(--color-background-hover-dropdown-menu); + outline: none; + } + + &:focus { + border-radius: 4px; + /* Override the default focus style */ + outline: 1px solid var(--color-outline-focus) !important; + outline-offset: -1px; + } + + &:active { + background: var(--color-background-active-dropdown-menu); + } + } + } + + .org-url { + margin-bottom: 7px; + } + + .org-name, + .org-plan a { + color: var(--color-text-dropdown-menu); + } + + .org-name { + font-size: 17px; + font-weight: 600; + line-height: 22px; + } + + .org-plan, + .org-upgrade { + font-size: 14px; + } + + .org-upgrade, + .org-url { + color: var(--color-gear-menu-lighter-text); + } + + .org-upgrade a, + .org-version a { + color: var(--color-gear-menu-blue-text); + } + } + + .light-theme, + .dark-theme { + display: none; + } } ul.navbar-dropdown-menu-outer-list { @@ -1203,6 +1293,10 @@ ul.navbar-dropdown-menu-outer-list { &:last-child { border-bottom: none; + + & > ul { + padding-bottom: 0; + } } & > ul { @@ -1214,13 +1308,6 @@ ul.navbar-dropdown-menu-outer-list { } } -#gear-menu-dropdown { - .light-theme, - .dark-theme { - display: none; - } -} - .spectator-view { #gear-menu-dropdown .dark-theme { display: block; diff --git a/web/styles/settings.css b/web/styles/settings.css index 0ca40f89f5..6c85cfe641 100644 --- a/web/styles/settings.css +++ b/web/styles/settings.css @@ -1207,7 +1207,7 @@ $option_title_width: 180px; font-size: 1.2em; } -.invite-user-link i { +.invite-user-link .fa-user-plus { text-decoration: none; margin-right: 5px; } diff --git a/web/styles/zulip.css b/web/styles/zulip.css index 4783963c1d..e4a4ee7eb5 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -316,6 +316,15 @@ body { 0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 9%), 0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 9%), 0 41px 80px 0 hsl(0deg 0% 0% / 13%); + --box-shadow-gear-menu: 0 2.7798px 4.1129px 0 hsl(0deg 0% 0% / 10%), + 0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%), + 0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%), + 0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%), + 0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%), + 0 41px 80px 0 hsl(0deg 0% 0% / 20%); + --color-navbar-icon: hsl(240deg 20% 50%); + --color-gear-menu-lighter-text: hsl(0deg 0% 40%); + --color-gear-menu-blue-text: hsl(217deg 100% 50%); } %dark-theme { @@ -464,6 +473,9 @@ body { 0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%), 0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%), 0 41px 80px 0 hsl(0deg 0% 0% / 20%); + --color-navbar-icon: hsl(240deg 35% 60%); + --color-gear-menu-lighter-text: hsl(0deg 0% 50%); + --color-gear-menu-blue-text: hsl(217deg 100% 65%); } @media screen { @@ -766,59 +778,6 @@ p.n-margin { } } -#gear-menu .dropdown-menu { - .org-name, - .org-url { - padding: 0 20px; - } - - .org-info { - text-align: center; - - & a { - white-space: normal; - } - } - - .org-name { - font-size: large; - font-weight: bold; - } - - .org-url { - line-height: 100%; - color: hsl(0deg 0% 52%); - } - - .org-version { - padding-top: 3px; - white-space: normal; - } - - .org-upgrade { - color: hsl(226deg 82% 60%); - - & a { - padding: 0; - } - } - - .org-plan, - .org-upgrade { - & a { - line-height: 16px; - } - } - - .plan-separator { - line-height: 8px; - } - - .small-font-size { - font-size: 12px; - } -} - .recent_view_container #recent_view_table { margin-top: var(--navbar-fixed-height); } @@ -1177,10 +1136,6 @@ strong { position: relative; } -#gear-menu .light-theme { - display: none; -} - /* .dropdown-menu from v2.3.2 + https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d basic idea of this fix is to remove decorations from :hover and apply them only @@ -1266,29 +1221,6 @@ li.actual-dropdown-menu i { margin-right: 3px; } -#gear_menu_about_zulip { - .white_zulip_icon_without_text { - position: relative; - top: 3px; - width: 14px; - height: 14px; - margin-right: 3px; - filter: invert(20%) sepia(11%) saturate(0%) hue-rotate(272deg) - brightness(20%) contrast(95%); - } - - .about_zulip_text { - position: relative; - top: 1.4px; - } - - :hover { - .white_zulip_icon_without_text { - filter: none; - } - } -} - td.pointer { vertical-align: top; padding-top: 10px; @@ -2321,47 +2253,6 @@ div.focused-message-list { } } -#navbar-buttons { - white-space: nowrap; - display: inline-block; - float: right; - - & ul.nav { - margin: 0; - - .dropdown-toggle, - li.active .dropdown-toggle { - font-size: 20px; - color: inherit; - opacity: 0.5; - text-shadow: none; - padding-left: 0 !important; - background-color: inherit; - box-shadow: inherit; - display: block; - position: absolute; - right: 6px; - top: -3px; - } - - .dropdown-toggle:hover, - li.active .dropdown-toggle:hover { - opacity: 1; - } - - & li.dropdown.open .dropdown-toggle { - background: none; - opacity: 1; - text-shadow: none; - } - - & li.dropdown li.divider { - margin-left: 15px; - margin-right: 15px; - } - } -} - #streamlist-toggle { display: none; position: absolute; @@ -2432,12 +2323,6 @@ div.focused-message-list { } } -#gear-menu .zulip-icon-language { - position: relative; - top: 2.5px; - left: -0.5px; -} - .nav .dropdown-menu a, .typeahead.dropdown-menu a { color: inherit; @@ -3091,9 +2976,9 @@ select.invite-as { margin-right: 85px; } - #navbar-buttons { - position: absolute; - right: 45px; + #gear-menu { + position: relative; + right: 40px; } } @@ -3244,8 +3129,7 @@ select.invite-as { margin-right: 65px; } - #navbar-buttons { - position: absolute; + #gear-menu { right: 35px; } } @@ -3265,7 +3149,6 @@ select.invite-as { } #streamlist-toggle, - #navbar-buttons, #message_view_header, #searchbox, .header { @@ -3287,11 +3170,6 @@ select.invite-as { padding-bottom: 0; } - #navbar-buttons ul.nav .dropdown-toggle, - #navbar-buttons ul.nav li.active .dropdown-toggle { - top: -8px; - } - .column-right #personal-menu .header-button-avatar { width: 20px; height: 20px; @@ -3511,8 +3389,7 @@ select.invite-as { } } -.header-button, -#navbar-buttons #settings-dropdown { +.header-button { width: var(--header-height); height: var(--header-height); display: flex; @@ -3521,6 +3398,23 @@ select.invite-as { position: relative; top: 0; right: 0; + + &:hover, + &:focus { + text-decoration: none; + } + + .zulip-icon { + color: var(--color-navbar-icon); + } + + .zulip-icon-gear { + font-size: 18px; + } + + .zulip-icon-triple-users { + font-size: 20px; + } } #personal-menu { @@ -3534,7 +3428,7 @@ select.invite-as { } } -.personal-menu-tippy { +.navbar-dropdown-tippy { .tippy-box { border: 0; } diff --git a/web/templates/gear_menu.hbs b/web/templates/gear_menu.hbs deleted file mode 100644 index a3a5c7126b..0000000000 --- a/web/templates/gear_menu.hbs +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/web/templates/gear_menu_popover.hbs b/web/templates/gear_menu_popover.hbs index c12bfd5063..e1c9bb9bf6 100644 --- a/web/templates/gear_menu_popover.hbs +++ b/web/templates/gear_menu_popover.hbs @@ -1,4 +1,4 @@ -