maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

RFC#50-P3 Navigation Item Focus (Styling and Behaviour) (#12936)

Browse source 
* feat: add the nested sidebar with some elements

* feat: create a tabbed nav item menu

* feat: add the tabbed nav_item partial to the views that need tabbed nav items

* fix: change variable back

* feat: style the sidebar a bit more

* chore: add some more styles

* feat: add a spec for the nested navigational items

* refactor: a more dynamic tabbed admin helper

* feat: add some more nav items

* fix: controller for reports

* refactor: shorthand if statement

* chore: add the whitespace back

* refactor: rubocop fixes

* chore: use any

* chore: remove whitespace

* refactor: rename the variable

* refactor: use a DSL style admin helper

* chore: variable renaming and routes

* rubocop: fixes

* refactor: move files to more apt places

* chore: keep overview as it was previously

* Update app/views/admin/secrets/index.html.erb

Co-authored-by: Michael Kohl <me@citizen428.net>

* Update app/views/admin/shared/_tabbed_navbar.erb

Co-authored-by: Michael Kohl <me@citizen428.net>

* Update app/views/admin/badges/index.html.erb

Co-authored-by: Michael Kohl <me@citizen428.net>

* chore: disable blocklength

* refactor: move the logic to the model instead of in the view

* chore: remove get_ prefix

* chore: move the request mangling to a helper that finds the controller and scope

* Update app/helpers/admin_helper.rb

Co-authored-by: rhymes <rhymes@hey.com>

* Update app/helpers/admin_helper.rb

Co-authored-by: rhymes <rhymes@hey.com>

* refactor: Address feedback

* oops

* oops use tr

* feat: update specs

* feat: make the navbar a dropdown

* feat: add a cursor pointer to the dropdown

* feat: add the icons which results in changed data structure

* fix: badge achievements

* feat: rename to an html file, show and collapse links + show active links

* chore: rename tabbed view to an html file

* fix: scope should be apps not app

* feat: add icons for the admin menu

* feat: increase the margin left

* feat: move the overview into the feature flag block and add an icon

* chore:remove files

* chore: indent

* feat: update crayons -link to have no text-decoration

* feat: current link for a scope with one controller

* Update app/lib/menu.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* Update app/models/admin_menu.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* refactor: we added svg to the builder so remove it from creating the hash

* feat: undo change to crayons and add it to the admin stylesheet

* Update app/views/admin/shared/_nested_sidebar.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* refactor: change to use ul and li's + a button

* chore: add bracket to next line

* feat: add aria-page

* chore: remove brackets

* feat: added focus specifically for the sidebar

* Update app/views/admin/shared/_nested_sidebar.html.erb

Co-authored-by: Jamie Gaskins <jgaskins@hey.com>

* chore: remove additional title

* Update app/assets/stylesheets/admin.scss

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/admin/shared/_nested_sidebar.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/layouts/admin.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* feat: use focus for browsers that dont support focus-visible (I'm looking at you Safari) and move it within the crayons-link so we dont see it on mouse click

Co-authored-by: Michael Kohl <me@citizen428.net>
Co-authored-by: rhymes <rhymes@hey.com>
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
Co-authored-by: Jamie Gaskins <jgaskins@hey.com>
This commit is contained in:
Ridhwana 2021-03-10 13:07:16 +02:00 • committed by GitHub
parent 0289caa0aa
commit 45c0d84e48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 110 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/images/dashboard-line.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 21V11h8v10h-8zM3 13V3h8v10H3zm6-2V5H5v6h4zM3 21v-6h8v6H3zm2-2h4v-2H5v2zm10 0h4v-6h-4v6zM13 3h8v6h-8V3zm2 2v2h4V5h-4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 222 B

1
app/assets/images/flashlight-line.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 170 B

1
app/assets/images/group-2-line.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M9.55 11.5a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5zm.45 8.248V16.4c0-.488.144-.937.404-1.338a6.473 6.473 0 0 0-5.033 1.417A8.012 8.012 0 0 0 10 19.749zM4.453 14.66A8.462 8.462 0 0 1 9.5 13c1.043 0 2.043.188 2.967.532.878-.343 1.925-.532 3.033-.532 1.66 0 3.185.424 4.206 1.156a8 8 0 1 0-15.253.504zm14.426 1.426C18.486 15.553 17.171 15 15.5 15c-2.006 0-3.5.797-3.5 1.4V20a7.996 7.996 0 0 0 6.88-3.914zM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm3.5-9.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 617 B

1
app/assets/images/palette-line.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 2c5.522 0 10 3.978 10 8.889a5.558 5.558 0 0 1-5.556 5.555h-1.966c-.922 0-1.667.745-1.667 1.667 0 .422.167.811.422 1.1.267.3.434.689.434 1.122C13.667 21.256 12.9 22 12 22 6.478 22 2 17.522 2 12S6.478 2 12 2zm-1.189 16.111a3.664 3.664 0 0 1 3.667-3.667h1.966A3.558 3.558 0 0 0 20 10.89C20 7.139 16.468 4 12 4a8 8 0 0 0-.676 15.972 3.648 3.648 0 0 1-.513-1.86zM7.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm9 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM12 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 590 B

1
app/assets/images/shield-flash-line.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3.783 2.826L12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976zM5 4.604v9.185a4 4 0 0 0 1.781 3.328L12 20.597l5.219-3.48A4 4 0 0 0 19 13.79V4.604L12 3.05 5 4.604zM13 10h3l-5 7v-5H8l5-7v5z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 366 B

1
app/assets/images/stack-line.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 493 B

1
app/assets/images/tools-line.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M5.33 3.271a3.5 3.5 0 0 1 4.254 4.963l10.709 10.71-1.414 1.414-10.71-10.71a3.502 3.502 0 0 1-4.962-4.255L5.444 7.63a1.5 1.5 0 1 0 2.121-2.121L5.329 3.27zm10.367 1.884l3.182-1.768 1.414 1.414-1.768 3.182-1.768.354-2.12 2.121-1.415-1.414 2.121-2.121.354-1.768zm-6.718 8.132l1.414 1.414-5.303 5.303a1 1 0 0 1-1.492-1.327l.078-.087 5.303-5.303z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 442 B

1
app/assets/images/user-line.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 262 B

37
app/assets/stylesheets/admin.scss
View file

@ -188,3 +188,40 @@ label {
.data_update_script__status {
min-width: 120px;
}
// Navbar links have text-decorations that are being
// rendered from boostrap. We want to remove these to be
// consistent with links in the crayons design system.
.admin__left-sidebar {
.crayons-link {
text-decoration: none;
&:hover {
text-decoration: none;
}
&:focus {
outline: 2px auto blue;
}
&:focus-visible {
outline: 2px auto blue;
}
&:focus:not(:focus-visible) {
outline: none;
}
}
button {
border: 0;
width: 100%;
background: transparent;
}
ul {
list-style: none;
padding: 0;
}
}

4
app/lib/menu.rb
View file

@ -13,8 +13,8 @@ class Menu
@items = {}
end
def scope(name, children)
@items[name] = children
def scope(name, svg, children)
@items[name] = { svg: "#{svg}.svg", children: children }
end
def item(name:, controller: name, children: [])

26
app/models/admin_menu.rb
View file

@ -2,11 +2,11 @@ class AdminMenu
# On second level navigation with more children, we reference the default tabs controller. i.e look at developer_tools
# rubocop:disable Metrics/BlockLength
ITEMS = Menu.define do
scope :people, [
scope :people, "group-2-line", [
item(name: "people", controller: "users"),
]
scope :content_manager, [
scope :content_manager, "dashboard-line", [
item(name: "posts", controller: "articles"),
item(name: "badges", children: [
item(name: "library", controller: "badges"),
@ -17,7 +17,7 @@ class AdminMenu
item(name: "tags"),
]
scope :customization, [
scope :customization, "tools-line", [
item(name: "config"),
item(name: "html variants", controller: "html_variants"),
item(name: "display ads"),
@ -25,11 +25,11 @@ class AdminMenu
item(name: "pages"),
]
scope :admin_team, [
scope :admin_team, "user-line", [
item(name: "admin team", controller: "permissions"),
]
scope :moderation, [
scope :moderation, "shield-flash-line", [
item(name: "reports"),
item(name: "mods"),
item(name: "moderator actions ads", controller: "moderator_actions"),
@ -37,7 +37,7 @@ class AdminMenu
# item(name: "interaction limits", controller: "" )
]
scope :advanced, [
scope :advanced, "flashlight-line", [
item(name: "broadcasts"),
item(name: "response templates"),
item(name: "sponsorships"),
@ -48,7 +48,7 @@ class AdminMenu
]),
]
scope :apps, [
scope :apps, "palette-line", [
item(name: "chat channels"),
item(name: "events"),
item(name: "listings"),
@ -57,20 +57,20 @@ class AdminMenu
end
# rubocop:enable Metrics/BlockLength
def self.nested_menu_items(group_name, child_nav_item)
ITEMS[group_name.to_sym].each do |items|
return items if items[:controller] == child_nav_item
def self.nested_menu_items(scope_name, nav_item)
ITEMS.dig(scope_name.to_sym, :children).each do |items|
return items if items[:controller] == nav_item
next unless items[:children]&.any?
items[:children].each do |child|
return items if child[:controller] == child_nav_item
return items if child[:controller] == nav_item
end
end
end
def self.nested_menu_items_from_request(request)
group, child_nav_item = request.path.split("/").last(2)
nested_menu_items(group, child_nav_item)
scope, nav_item = request.path.split("/").last(2)
nested_menu_items(scope, nav_item)
end
end

18
app/views/admin/shared/_nested_sidebar.erb
View file

@ -1,18 +0,0 @@
<% menu_items.each do |group_name, group| %>
<% if group.length == 1 %>
<a class="crayons-link crayons-link--block"
href="/admin/<%= group[0][:controller] %>"
>
<%= display_name(group_name) %>
</a>
<% else %>
<div class="ml-2"><%= display_name(group_name) %></div>
<% group.each do |item| %>
<a class="crayons-link crayons-link--block ml-6"
href="/admin/<%= group_name %>/<%= item[:controller] %>"
>
<%= item[:name].to_s.titleize %>
</a>
<% end %>
<% end %>
<% end %>

36
app/views/admin/shared/_nested_sidebar.html.erb Normal file
View file

@ -0,0 +1,36 @@
<% menu_items.each do |group_name, group| %>
<li>
<% if group[:children].length == 1 %>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if deduced_controller(request) == group[:children][0][:controller] %>"
href="/admin/<%= group[:children][0][:controller] %>"
aria-page="<%= "page" if deduced_controller(request) == group[:children][0][:controller] %>"
>
<%= inline_svg_tag("#{group[:svg]}", aria: true, class: "dropdown-icon crayons-icon") %>
<%= display_name(group_name) %>
</a>
<% else %>
<button class="crayons-link crayons-link--block cursor-pointer <%= "crayons-link--current" if deduced_scope(request) == group_name.to_s %>"
data-toggle="collapse"
data-target="#<%= group_name %>"
aria-expanded="<%= (deduced_scope(request) == group_name.to_s).to_s %>"
aria-controls="<%= group_name %>"
>
<%= inline_svg_tag(group[:svg], aria: true, class: "dropdown-icon crayons-icon") %>
<%= display_name(group_name) %>
</button>
<ul id="<%= group_name %>"
class="<%= (deduced_scope(request) == group_name.to_s) ? "expand show" : "collapse hide" %>"
<% group[:children].each do |item| %>
<li>
<a class="crayons-link crayons-link--block ml-7 <%= "fw-bold" if deduced_controller(request) == item[:controller].to_s %>"
href="/admin/<%= group_name %>/<%= item[:controller] %>"
aria-page="<%= "page" if deduced_controller(request) == item[:controller].to_s %>"
>
<%= item[:name].to_s.titleize %>
</a>
</li>
<% end %>
</ul>
<% end %>
</li>
<% end %>

1
app/views/admin/shared/_tabbed_navbar.erb → app/views/admin/shared/_tabbed_navbar.html.erb
View file

@ -15,5 +15,4 @@
</nav>
</div>
</header>
<% end %>

18
app/views/layouts/admin.html.erb
View file

@ -51,14 +51,22 @@
</header>
<div class="crayons-layout crayons-layout--2-cols">
<div class="crayons-layout__left-sidebar">
<div class="admin__left-sidebar crayons-layout__left-sidebar">
<nav class="hidden m:block">
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if controller.controller_name == "overview" %>" href="/admin/">
Overview
</a>
<% if FeatureFlag.enabled?(:admin_restructure) %>
<%= render "admin/shared/nested_sidebar", menu_items: AdminMenu::ITEMS %>
<ul>
<li>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if controller.controller_name == "overview" %>" href="/admin/" aria-page="<%= "page" if controller.controller_name == "overview" %>">
<%= inline_svg_tag("stack-line.svg", aria: true, class: "dropdown-icon crayons-icon") %>
Overview
</a>
</li>
<%= render "admin/shared/nested_sidebar", menu_items: AdminMenu::ITEMS %>
</ul>
<% else %>
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if controller.controller_name == "overview" %>" href="/admin/">
Overview
</a>
<%= render "admin/shared/navbar", menu_items: admin_menu_items %>
<% if FeatureFlag.enabled?(:data_update_scripts) %>
<p class="crayons-field__description mt-4 mb-3">Tech Resources</p>

2
config/routes.rb
View file

@ -219,7 +219,7 @@ Rails.application.routes.draw do
resources :webhook_endpoints, only: :index
end
scope path: :app do
scope path: :apps do
resources :chat_channels, only: %i[index create update destroy] do
member do
delete :remove_user