From 4b0e6ae3d8b4763ced276c733f4180ec6c0ffe4e Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Wed, 28 Feb 2024 13:07:49 +0530 Subject: [PATCH] actions_popover: Use the new "popover-menu" theme. Fixes part of #28699. --- web/src/message_actions_popover.js | 3 +- web/styles/app_variables.css | 2 +- web/styles/popovers.css | 16 +- web/templates/popovers/actions_popover.hbs | 246 +++++++++++---------- 4 files changed, 143 insertions(+), 124 deletions(-) diff --git a/web/src/message_actions_popover.js b/web/src/message_actions_popover.js index 33fbdbaab5..98fcccf206 100644 --- a/web/src/message_actions_popover.js +++ b/web/src/message_actions_popover.js @@ -24,7 +24,7 @@ import * as unread_ops from "./unread_ops"; let message_actions_popover_keyboard_toggle = false; function get_action_menu_menu_items() { - const $current_actions_popover_elem = $("[data-tippy-root] .actions_popover"); + const $current_actions_popover_elem = $("[data-tippy-root] #message-actions-menu-dropdown"); if (!$current_actions_popover_elem) { blueslip.error("Trying to get menu items when action popover is closed."); return undefined; @@ -71,6 +71,7 @@ export function toggle_message_actions_menu(message) { export function initialize() { popover_menus.register_popover_menu(".actions_hover .message-actions-menu-button", { + theme: "popover-menu", // 320px is our minimum supported width for mobile. We will allow the value to flex // to a max of 350px but we shouldn't make the popover wider than this. maxWidth: "min(max(320px, 100vw), 350px)", diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 5edbc9ca8f..427bc9e84a 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -208,7 +208,7 @@ --color-background-unread-counter-dot: var( --color-background-unread-counter ); - --color-background-unread-counter-popover-menu: hsl(200deg 100% 40%); + --color-background-unread-counter-popover-menu: var(--color-icon-purple); --color-border-unread-counter: var(--color-background-unread-counter); --color-border-unread-counter-popover-menu: inherit; --color-background-tab-picker-container: hsl(0deg 0% 0% / 7%); diff --git a/web/styles/popovers.css b/web/styles/popovers.css index 2bb8567bd3..3fedce159a 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -314,7 +314,6 @@ ul { &.user-card-popover-actions i, - &.actions_popover i, &.streams_popover i, &.topics_popover i { display: inline-block; @@ -351,18 +350,23 @@ ul { } } -.actions_popover { +#message-actions-menu-dropdown { .mark_as_unread { .unread_count { /* The icon for this menu item is in the form of an unread count from the left sidebar. We reuse much of the shared styling, but need to override some of the defaults set in app_components.css. */ - display: inline; + display: inline-block; float: unset; - line-height: 14px; - font-size: 11px; + padding: 0; + width: 16px; + height: 16px; + line-height: 16px; + font-size: 12px; font-weight: 600; - margin-right: 2px; + border-radius: 4px; + color: hsl(0deg 0% 100%); + text-align: center; background-color: var( --color-background-unread-counter-popover-menu ); diff --git a/web/templates/popovers/actions_popover.hbs b/web/templates/popovers/actions_popover.hbs index caded1d92d..d90ab745df 100644 --- a/web/templates/popovers/actions_popover.hbs +++ b/web/templates/popovers/actions_popover.hbs @@ -1,118 +1,132 @@ {{! Contents of the "message actions" popup }} - +