jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Factor out popup menu component.

Browse Source 
Factor out the popup menu inside user tooltips into a reusable
component.
This commit is contained in:
evazion
2021-01-19 20:22:41 -06:00
parent 90567bfc61
commit ccae422961
9 changed files with 87 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/popup_menu_component.rb Normal file
View File

@@ -0,0 +1,7 @@
# frozen_string_literal: true
class PopupMenuComponent < ApplicationComponent
include ViewComponent::SlotableV2
renders_many :items
end

11
app/components/popup_menu_component/popup_menu_component.html.erb Normal file
View File

@@ -0,0 +1,11 @@
<div class="popup-menu">
<a class="popup-menu-button" href="javascript:void(0)">
<i class="fas fa-ellipsis-h"></i>
</a>
<ul class="popup-menu-content">
<% items.each do |item| %>
<li><%= item %></li>
<% end %>
</ul>
</div>

26
app/components/popup_menu_component/popup_menu_component.js Normal file
View File

@@ -0,0 +1,26 @@
import { delegate } from 'tippy.js';
import 'tippy.js/dist/tippy.css';
class PopupMenuComponent {
static initialize() {
delegate("body", {
allowHTML: true,
interactive: true,
theme: "common-tooltip",
target: "a.popup-menu-button",
placement: "bottom-start",
trigger: "click",
content: PopupMenuComponent.content,
});
}
static content(element) {
let $content = $(element).parents(".popup-menu").find(".popup-menu-content");
$content.show();
return $content.get(0);
}
}
$(document).ready(PopupMenuComponent.initialize);
export default PopupMenuComponent;

23
app/components/popup_menu_component/popup_menu_component.scss Normal file
View File

@@ -0,0 +1,23 @@
div.popup-menu {
a.popup-menu-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
color: var(--muted-text-color);
&:hover {
background-color: var(--subnav-menu-background-color);
}
}
ul.popup-menu-content {
display: none;
.icon {
width: 1.5em;
}
}
}

1
app/javascript/packs/application.js
View File

@@ -39,6 +39,7 @@ export { default as CurrentUser } from '../src/javascripts/current_user.js';
export { default as Dtext } from '../src/javascripts/dtext.js';
export { default as IqdbQuery } from '../src/javascripts/iqdb_queries.js';
export { default as Note } from '../src/javascripts/notes.js';
export { default as PopupMenuComponent } from "../../components/popup_menu_component/popup_menu_component.js";
export { default as Post } from '../src/javascripts/posts.js.erb';
export { default as PostModeMenu } from '../src/javascripts/post_mode_menu.js';
export { default as PostTooltip } from '../src/javascripts/post_tooltips.js';

13
app/javascript/src/javascripts/user_tooltips.js
View File

@@ -25,19 +25,6 @@ UserTooltip.initialize = function () {
onShow: UserTooltip.on_show,
onHide: UserTooltip.on_hide,
});
delegate("#user-tooltips", {
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) {

20
app/javascript/src/styles/specific/user_tooltips.scss
View File

@@ -57,29 +57,11 @@
font-size: 0.75em;
}
a.user-tooltip-menu-button {
color: var(--muted-text-color);
div.popup-menu {
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;
}
}
}

1
app/views/layouts/default.html.erb
View File

@@ -93,6 +93,7 @@
<div id="tooltips">
<div id="post-tooltips"></div>
<div id="user-tooltips"></div>
<div id="popup-menus"></div>
</div>
<script type="application/javascript">

43
app/views/users/show.html+tooltip.erb
View File

@@ -44,54 +44,45 @@
<% end %>
</div>
<a class="user-tooltip-menu-button" href="javascript:void(0)">
<i class="fas fa-ellipsis-h"></i>
</a>
<ul class="user-tooltip-menu">
<li>
<%= render PopupMenuComponent.new do |menu| %>
<%= menu.item do %>
<%= link_to new_dmail_path(dmail: { to_id: @user.id }) do %>
<i class="icon far fa-envelope"></i>
Send Message
<i class="icon far fa-envelope"></i> Send Message
<% end %>
</li>
<% end %>
<% if !@user.is_platinum? %>
<li>
<%= menu.item do %>
<%= link_to new_user_upgrade_path(user_id: @user.id) do %>
<i class="icon fas fa-gift"></i>
Gift Upgrade
<i class="icon fas fa-gift"></i> Gift Upgrade
<% end %>
</li>
<% end %>
<% end %>
<% if policy(UserFeedback.new(user: @user)).create? %>
<li>
<%= menu.item do %>
<%= link_to new_user_feedback_path(user_feedback: { user_id: @user.id }) do %>
<i class="icon fas fa-file-signature"></i>
Give Feedback
<i class="icon fas fa-file-signature"></i> Give Feedback
<% end %>
</li>
<% end %>
<% end %>
<% if policy(CurrentUser.user).promote? %>
<li>
<%= menu.item do %>
<%= link_to edit_admin_user_path(@user.id) do %>
<i class="icon fas fa-user-plus"></i>
Promote User
<i class="icon fas fa-user-plus"></i> Promote User
<% end %>
</li>
<% end %>
<% end %>
<% if policy(Ban.new(user: @user)).create? %>
<li>
<%= menu.item do %>
<%= link_to new_ban_path(ban: { user_id: @user.id }) do %>
<i class="icon fas fa-user-slash"></i>
Ban User
<i class="icon fas fa-user-slash"></i> Ban User
<% end %>
</li>
<% end %>
<% end %>
</ul>
<% end %>
</div>
<ul class="user-tooltip-stats">