diff --git a/app/javascript/src/javascripts/user_tooltips.js b/app/javascript/src/javascripts/user_tooltips.js index 091ff9b51..cc0a9f3b9 100644 --- a/app/javascript/src/javascripts/user_tooltips.js +++ b/app/javascript/src/javascripts/user_tooltips.js @@ -25,6 +25,19 @@ UserTooltip.initialize = function () { onShow: UserTooltip.on_show, onHide: UserTooltip.on_hide, }); + + delegate("body", { + allowHTML: true, + interactive: true, + theme: "common-tooltip", + target: ".user-tooltip-menu-button", + placement: "bottom", + touch: false, + trigger: "click", + content: (element) => { + return $(element).parents(".user-tooltip").find(".user-tooltip-menu").get(0); + } + }); }; UserTooltip.on_show = async function (instance) { diff --git a/app/javascript/src/styles/specific/user_tooltips.scss b/app/javascript/src/styles/specific/user_tooltips.scss index 2ff6289c4..b7133ef31 100644 --- a/app/javascript/src/styles/specific/user_tooltips.scss +++ b/app/javascript/src/styles/specific/user_tooltips.scss @@ -6,9 +6,9 @@ margin-bottom: 1em; display: grid; grid: - "avatar header-top" - "avatar header-bottom" / - 32px 1fr; + "avatar header-top menu" + "avatar header-bottom menu" / + 32px 1fr 32px; column-gap: 0.25em; .user-tooltip-avatar { @@ -54,6 +54,31 @@ color: var(--muted-text-color); font-size: 0.75em; } + + a.user-tooltip-menu-button { + color: var(--muted-text-color); + grid-area: menu; + align-self: center; + text-align: center; + width: 28px; + height: 28px; + line-height: 28px; + border-radius: 50%; + + &:hover { + background-color: var(--subnav-menu-background-color); + } + } + + > ul.user-tooltip-menu { + display: none; + } + + ul.user-tooltip-menu { + .icon { + width: 1.5em; + } + } } .user-tooltip-stats { diff --git a/app/views/users/show.html+tooltip.erb b/app/views/users/show.html+tooltip.erb index 4b54baf30..bfba26ab2 100644 --- a/app/views/users/show.html+tooltip.erb +++ b/app/views/users/show.html+tooltip.erb @@ -43,6 +43,55 @@ <% end %> <% end %> + + + + + +