Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace uses of "dropdown" with respective ViewComponent #5907

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

Replace uses of "dropdown" with respective ViewComponent #5907

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
f6cba70
moved three dots icon from component to html.erb
iamronakgupta Jun 29, 2024
5db3caf
updated: button css classes added to dropdown as variable
iamronakgupta Jun 29, 2024
9fef6a2
dropdown component added to filter status button
iamronakgupta Jun 29, 2024
130bbc8
action menu dropdown button replaced with component
iamronakgupta Jun 29, 2024
da11c46
status options class added to make filters work
iamronakgupta Jun 29, 2024
f488c1a
supervisor dropdown button in volunteer index replaced with dropdown …
iamronakgupta Jun 29, 2024
4b85dae
assigned to transition aged youth dropdown button replaced with dropd…
iamronakgupta Jun 29, 2024
23ba785
'has extra language' dropdown button replaced with dropdown component
iamronakgupta Jun 29, 2024
957dc23
minor fix
iamronakgupta Jun 29, 2024
c9c5124
status dropdown button replaced with component in casa case
iamronakgupta Jun 29, 2024
937f1c7
'assigned to volunteer' button replaced with dropdown component
iamronakgupta Jul 3, 2024
4d5736f
'assigned to more than 1 volunteer' button replaced with dropdown com…
iamronakgupta Jul 3, 2024
d0ef511
'transition aged youth' button replaced with dropdown component
iamronakgupta Jul 3, 2024
5792d22
'casa case prefix' button replaced with dropdown component
iamronakgupta Jul 3, 2024
bd439b3
header profile dropdown replaced with dropdown component
iamronakgupta Jul 4, 2024
9511292
'occurred at' dropdown button replaced with component
iamronakgupta Jul 5, 2024
68aff5a
margin right added to span
iamronakgupta Jul 5, 2024
8fb7d62
spec fixed for dropdown menu component
iamronakgupta Jul 12, 2024
c0045a8
bootsrap style added
iamronakgupta Jul 22, 2024
1ef8ed2
button_label function optimized
iamronakgupta Jul 22, 2024
fce7d90
klass replaced with container_klass for dropdown component parameter
iamronakgupta Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions app/assets/stylesheets/shared/dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@
padding: 8px;
}

.supervisor-options {
min-width: 15rem;
}

.language-icon {
cursor: context-menu;
font-size: 1.5rem;
Expand Down
7 changes: 1 addition & 6 deletions app/components/dropdown_menu_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
<div class="dropdown <%= @class %>">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button class="btn btn-secondary dropdown-toggle <%= @button_class %>" style="display: flex; align-items: center;" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be done with bootstrap styles? d-flex and align-items-center? I would prefer to avoid combining styling via classes and via style attributes.

<% if icon? %>
<%= render_icon %>
<% else %>
<svg width="5" height="20" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<title><%= @menu_title %></title>
<path d="M2.5 0.9375C1.82292 0.9375 1.23698 1.17188 0.742187 1.64063C0.247396 2.10938 -7.68364e-08 2.69531 -1.07571e-07 3.39844C-1.38306e-07 4.10156 0.247396 4.70052 0.742187 5.19531C1.23698 5.6901 1.82292 5.9375 2.5 5.9375C3.17708 5.9375 3.76302 5.6901 4.25781 5.19531C4.7526 4.70052 5 4.10156 5 3.39844C5 2.69531 4.7526 2.10938 4.25781 1.64063C3.76302 1.17188 3.17708 0.9375 2.5 0.9375ZM2.5 7.5C1.82292 7.5 1.23698 7.7474 0.742187 8.24219C0.247395 8.73698 -3.66538e-07 9.32292 -3.96134e-07 10C-4.25731e-07 10.6771 0.247395 11.263 0.742187 11.7578C1.23698 12.2526 1.82292 12.5 2.5 12.5C3.17708 12.5 3.76302 12.2526 4.25781 11.7578C4.7526 11.263 5 10.6771 5 10C5 9.32292 4.7526 8.73698 4.25781 8.24219C3.76302 7.7474 3.17708 7.5 2.5 7.5ZM2.5 14.0625C1.82292 14.0625 1.23698 14.3099 0.742187 14.8047C0.247395 15.2995 -6.53963e-07 15.8984 -6.84698e-07 16.6016C-7.15432e-07 17.3047 0.247395 17.8906 0.742187 18.3594C1.23698 18.8281 1.82292 19.0625 2.5 19.0625C3.17708 19.0625 3.76302 18.8281 4.25781 18.3594C4.7526 17.8906 5 17.3047 5 16.6016C5 15.8984 4.7526 15.2995 4.25781 14.8047C3.76302 14.3099 3.17708 14.0625 2.5 14.0625Z" fill="#5D657B" />
</svg>
Comment on lines -5 to -9
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the logic for moving this out?

The three dots is a bit of a weird default but I believe we should have a default icon so it is more in line with most of our buttons (such as a chevron-down)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There were two reasons of it.

  1. There are some dropdowns which are not using any icons so having default icons making no sense in that case. eg filters dropdowns in supervisor#index volunteers#index
  2. Only one dropdown button was using this three dots icons.

If keeping this as default, we have to add one more variable in component to not render icons for 1st case.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense. Moving it out is a good idea, I didn't realize that dropdown-toggle adds a ::after element that is a chevron by default.

<% end %>
<%= button_label %>
</button>
Expand Down
5 changes: 3 additions & 2 deletions app/components/dropdown_menu_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
class DropdownMenuComponent < ViewComponent::Base
renders_one :icon

def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, klass: nil)
def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, klass: nil, button_klass: nil)
@menu_title = menu_title
@render_check = render_check
@hide_label = hide_label
@icon_name = icon_name
@class = klass
@button_class = button_klass
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

button_class makes sense. Lets take that 1 step further and lets make klass container_class

end

def render_icon
Expand All @@ -26,6 +27,6 @@ def render?
end

def button_label
content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : nil)
content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : "mr-5")
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : "mr-5")
content_tag(:span, @menu_title, class: ["mr-5", {"sr-only" => @hide_label}])

could do this via https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-token_list

end
end
149 changes: 61 additions & 88 deletions app/views/casa_cases/_filter.html.erb
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These div wrappers should be li for accessibility reasons.

Original file line number Diff line number Diff line change
Expand Up @@ -2,101 +2,74 @@
<div class="row casa-case-filters">
<div class="col-sm-12 flex align-items-center">
<h4 class="pull-left my-1 mr-2">Filter by:</h4>
<div class="dropdown pull-left mx-2 my-1">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Status
</button>
<div class="dropdown-menu status-options" aria-labelledby="dropdownMenuButton1">
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "status_option_active", "Active", true,
class: "form-check-input",
data: { value: "Active" } %>
<%= label_tag "status_option_active", "Active", class: "form-check-label" %>
</div>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "status_option_inactive", "Inactive", false,
class: "form-check-input",
data: { value: "Inactive" } %>
<%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
</div>
<%= render(DropdownMenuComponent.new(menu_title: "Status", klass: "pull-left mx-2 my-1 status-options")) do %>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "status_option_active", "Active", true,
class: "form-check-input",
data: { value: "Active" } %>
<%= label_tag "status_option_active", "Active", class: "form-check-label" %>
</div>
</div>
<div class="dropdown pull-left mx-2 my-1">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Assigned to Volunteer
</button>
<div class="dropdown-menu assigned-to-volunteer-options" aria-labelledby="dropdownMenuButton2">
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "assigned_to_volunteer_option_yes", "Yes", true,
class: "form-check-input",
data: { value: "Yes" } %>
<%= label_tag "assigned_to_volunteer_option_yes", "Yes", class: "form-check-label" %>
</div>
<div class="dropdown-item form-check form-check checkbox-style">
<%= check_box_tag "assigned_to_volunteer_option_no", "No", true,
class: "form-check-input",
data: { value: "No" } %>
<%= label_tag "assigned_to_volunteer_option_no", "No", class: "form-check-label" %>
</div>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "status_option_inactive", "Inactive", false,
class: "form-check-input",
data: { value: "Inactive" } %>
<%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
</div>
</div>
<div class="dropdown pull-left mx-2 my-1">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Assigned to more than 1 Volunteer
</button>
<div class="dropdown-menu more-than-one-volunteer-options" aria-labelledby="dropdownMenuButton3">
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "more_than_one_volunteer_option_yes", "Yes", true,
class: "form-check-input",
data: { value: "Yes" } %>
<%= label_tag "more_than_one_volunteer_option_yes", "Yes", class: "form-check-label" %>
</div>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "more_than_one_volunteer_option_no", "No", true,
class: "form-check-input",
data: { value: "No" } %>
<%= label_tag "more_than_one_volunteer_option_no", "No", class: "form-check-label" %>
</div>
<% end %>
<%= render(DropdownMenuComponent.new(menu_title: "Assigned to Volunteer", klass: "pull-left mx-2 my-1 assigned-to-volunteer-options")) do %>
<div class="dropdown-item form-check checkbox-style">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the outer elements within the dropdowns should be li instead of div.

<%= check_box_tag "assigned_to_volunteer_option_yes", "Yes", true,
class: "form-check-input",
data: { value: "Yes" } %>
<%= label_tag "assigned_to_volunteer_option_yes", "Yes", class: "form-check-label" %>
</div>
</div>
<div class="dropdown pull-left mx-2 my-1">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Assigned to Transition Aged Youth
</button>
<div class="dropdown-menu transition-youth-options" aria-labelledby="dropdownMenuButton4">
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "transition_youth_option_yes", "Yes 🦋", true,
class: "form-check-input",
data: { value: "Yes 🦋" } %>
<%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
</div>
<div class="dropdown-item form-check form-check checkbox-style">
<%= check_box_tag "assigned_to_volunteer_option_no", "No", true,
class: "form-check-input",
data: { value: "No" } %>
<%= label_tag "assigned_to_volunteer_option_no", "No", class: "form-check-label" %>
</div>
<% end %>
<%= render(DropdownMenuComponent.new(menu_title: "Assigned to more than 1 Volunteer", klass: "pull-left mx-2 my-1 more-than-one-volunteer-options")) do %>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "more_than_one_volunteer_option_yes", "Yes", true,
class: "form-check-input",
data: { value: "Yes" } %>
<%= label_tag "more_than_one_volunteer_option_yes", "Yes", class: "form-check-label" %>
</div>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "more_than_one_volunteer_option_no", "No", true,
class: "form-check-input",
data: { value: "No" } %>
<%= label_tag "more_than_one_volunteer_option_no", "No", class: "form-check-label" %>
</div>
<% end %>
<%= render(DropdownMenuComponent.new(menu_title: "Assigned to Transition Aged Youth", klass: "pull-left mx-2 my-1 transition-youth-options")) do %>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "transition_youth_option_yes", "Yes 🦋", true,
class: "form-check-input",
data: { value: "Yes 🦋" } %>
<%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
</div>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "transition_youth_option_no", "No", true,
class: "form-check-input",
data: { value: "No 🐛" } %>
<%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %>
</div>
<% end %>
<%= render(DropdownMenuComponent.new(menu_title: "Casa Case Prefix", klass: "pull-left mx-2 my-1 case-number-prefix-options")) do %>
<% ["CINA", "None", "TPR"].each do |option| %>
<div class="dropdown-item form-check checkbox-style">
<%= check_box_tag "transition_youth_option_no", "No", true,
<% option_for_name = option.downcase.gsub(/[^a-z]+/, '') -%>
<% tag_name = "case_case_prefix_option_#{option_for_name}" -%>
<%= check_box_tag tag_name, option, true,
class: "form-check-input",
data: { value: "No 🐛" } %>
<%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %>
data: { value: option } %>
<%= label_tag tag_name, option, class: "form-check-label" %>
</div>
</div>
</div>
<div class="dropdown pull-left mx-2 my-1">
<% unless current_user.volunteer? %>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Casa Case Prefix
</button>
<% end %>
<div class="dropdown-menu case-number-prefix-options" aria-labelledby="dropdownMenuButton5">
<% ["CINA", "None", "TPR"].each do |option| %>
<div class="dropdown-item form-check checkbox-style">
<% option_for_name = option.downcase.gsub(/[^a-z]+/, '') -%>
<% tag_name = "case_case_prefix_option_#{option_for_name}" -%>
<%= check_box_tag tag_name, option, true,
class: "form-check-input",
data: { value: option } %>
<%= label_tag tag_name, option, class: "form-check-label" %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
</div>
Expand Down
9 changes: 8 additions & 1 deletion app/views/casa_org/_contact_topics.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,14 @@
<%= contact_topic.active ? "Yes" : "No" %>
</td>
<td>
<%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", hide_label: true)) do %>
<%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", hide_label: true)) do |component| %>
<% component.with_icon do %>
<svg width="5" height="20" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<title><%= "Actions Menu" %></title>
<path d="M2.5 0.9375C1.82292 0.9375 1.23698 1.17188 0.742187 1.64063C0.247396 2.10938 -7.68364e-08 2.69531 -1.07571e-07 3.39844C-1.38306e-07 4.10156 0.247396 4.70052 0.742187 5.19531C1.23698 5.6901 1.82292 5.9375 2.5 5.9375C3.17708 5.9375 3.76302 5.6901 4.25781 5.19531C4.7526 4.70052 5 4.10156 5 3.39844C5 2.69531 4.7526 2.10938 4.25781 1.64063C3.76302 1.17188 3.17708 0.9375 2.5 0.9375ZM2.5 7.5C1.82292 7.5 1.23698 7.7474 0.742187 8.24219C0.247395 8.73698 -3.66538e-07 9.32292 -3.96134e-07 10C-4.25731e-07 10.6771 0.247395 11.263 0.742187 11.7578C1.23698 12.2526 1.82292 12.5 2.5 12.5C3.17708 12.5 3.76302 12.2526 4.25781 11.7578C4.7526 11.263 5 10.6771 5 10C5 9.32292 4.7526 8.73698 4.25781 8.24219C3.76302 7.7474 3.17708 7.5 2.5 7.5ZM2.5 14.0625C1.82292 14.0625 1.23698 14.3099 0.742187 14.8047C0.247395 15.2995 -6.53963e-07 15.8984 -6.84698e-07 16.6016C-7.15432e-07 17.3047 0.247395 17.8906 0.742187 18.3594C1.23698 18.8281 1.82292 19.0625 2.5 19.0625C3.17708 19.0625 3.76302 18.8281 4.25781 18.3594C4.7526 17.8906 5 17.3047 5 16.6016C5 15.8984 4.7526 15.2995 4.25781 14.8047C3.76302 14.3099 3.17708 14.0625 2.5 14.0625Z" fill="#5D657B" />
</svg>
<% end %>

<li><%= link_to "Edit", edit_contact_topic_path(contact_topic), class: "dropdown-item" %></li>
<li><%= render(Modal::OpenLinkComponent.new(text: "Delete", target: id, klass: "dropdown-item")) %></li>
<% end %>
Expand Down
97 changes: 44 additions & 53 deletions app/views/layouts/_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,8 @@

</div>

<div class="profile-box ml-15">
<button
class="dropdown-toggle bg-transparent border-0"
type="button"
id="profile"
data-bs-toggle="dropdown"
aria-expanded="false">
<%= render(DropdownMenuComponent.new(menu_title: current_user.display_name, hide_label: true, klass: "profile-box ml-15", button_klass: "bg-transparent border-0")) do |component| %>
<% component.with_icon do %>
<div class="profile-info">
<div class="info">
<h6><%= current_user.display_name %>
Expand All @@ -57,56 +52,52 @@
</div>
</div>
</div>
<i class="lni lni-chevron-down"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="profile">
<li>
<span>
<strong>Role: <%= current_role %></strong>
</span>
</li>
<li>
<span>
<strong> <%= current_user.email %></strong>
</span>
</li>
<li>
<%= link_to edit_users_path do %>
<i class="lni lni-pencil"></i>
Edit Profile
<% end %>
</li>
<li>
<%= link_to notifications_path do %>
<i class="lni lni-envelope"></i>
Messages
<% end %>
</li>
<% if policy(:application).modify_organization? %>
<li>
<%= link_to edit_casa_org_path(current_organization) do %>
<i class="lni lni-cogs mr-10"></i>
Edit Organization
<% end %>
</li>
<i class="lni lni-chevron-down text-dark"></i>
<% end %>
<li>
<span>
<strong>Role: <%= current_role %></strong>
</span>
</li>
<li>
<span>
<strong> <%= current_user.email %></strong>
</span>
</li>
<li>
<%= link_to edit_users_path do %>
<i class="lni lni-pencil"></i>
Edit Profile
<% end %>
</li>
<li>
<%= link_to notifications_path do %>
<i class="lni lni-envelope"></i>
Messages
<% end %>
</li>
<% if policy(:application).modify_organization? %>
<li>
<% help_url = current_user.volunteer? ? help_volunteers_url : help_admins_supervisors_url %>
<%= link_to help_url, target: :_blank do %>
<i class="lni lni-question-circle"></i>
Help
<% end %>
</li>
<li>
<%= link_to destroy_user_session_path do %>
<i class="lni lni-exit"></i>
Sign Out
<%= link_to edit_casa_org_path(current_organization) do %>
<i class="lni lni-cogs mr-10"></i>
Edit Organization
<% end %>
</li>
</ul>
</div>
<% end %>
<li>
<% help_url = current_user.volunteer? ? help_volunteers_url : help_admins_supervisors_url %>
<%= link_to help_url, target: :_blank do %>
<i class="lni lni-question-circle"></i>
Help
<% end %>
</li>
<li>
<%= link_to destroy_user_session_path do %>
<i class="lni lni-exit"></i>
Sign Out
<% end %>
</li>
<% end %>
</div>
</div>
</div>
Expand Down
7 changes: 3 additions & 4 deletions app/views/reimbursements/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,8 @@
</select>
</div>
<!-- Occurred at filter -->
<div class="dropdown pull-left mr-2" data-filter="occurred_at">
<%= render partial: "filter_trigger", locals: { title: "Occurred at" } %>
<div class="dropdown-menu">
<%= render(DropdownMenuComponent.new(menu_title: "Occurred at", klass: "pull-left mr-2")) do %>
<div data-filter="occurred_at">
<%= render partial: "occurred_at_filter_input", locals: {
label: "Starting from",
name: :occurred_at_starting
Expand All @@ -48,7 +47,7 @@
name: :occurred_at_ending
} %>
</div>
</div>
<% end %>
</div>
</div>
</div>
Expand Down
Loading