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

[deploy] Make the mobile Navigation icons configurable (#9056)

Browse source 
* chore: make the icons dynamic from site config

* feat: update the navbar icons

* feat: update the descriptions

* chore: update the icons

* chore: update the names to be more reflective

* chore: freeze  mutable objects assigned to constants

* chore: update Line is too long.

* icons

* update lightning icon

* chore: read from file

* path here is relative, so use Rails root

* revert to original icons and run svgo on it

* no newline

* feat: update height, width
This commit is contained in:
Ridhwana 2020-07-08 20:09:48 +02:00 • committed by GitHub
parent bac350e877
commit 6029948c1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 77 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/images/lightning.svg
View file

@ -1,3 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.934 216.934">
<path d="M179.508 91.769a7.5 7.5 0 00-6.95-4.681h-32.323l26.743-77.131a7.5 7.5 0 00-12.373-7.777L39.089 116.98a7.499 7.499 0 005.288 12.82h32L47.26 206.781a7.499 7.499 0 0012.238 8.034L177.782 99.969a7.5 7.5 0 001.726-8.2zM73.196 180.61l21.051-55.657a7.5 7.5 0 00-7.015-10.153H62.563l79.623-79.13-19.575 56.462a7.5 7.5 0 007.085 9.957h24.37l-80.87 78.521z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.934 216.934" height="24" width="24"><path d="M179.508 91.769a7.5 7.5 0 00-6.95-4.681h-32.323l26.743-77.131a7.5 7.5 0 00-12.373-7.777L39.089 116.98a7.499 7.499 0 005.288 12.82h32L47.26 206.781a7.499 7.499 0 0012.238 8.034L177.782 99.969a7.5 7.5 0 001.726-8.2zM73.196 180.61l21.051-55.657a7.5 7.5 0 00-7.015-10.153H62.563l79.623-79.13-19.575 56.462a7.5 7.5 0 007.085 9.957h24.37l-80.87 78.521z"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 441 B

After

Width:  |  Height:  |  Size: 458 B

4
app/assets/images/stack.svg
View file

@ -1,3 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M398.044 29.719C359.712 10.555 309.267 0 256.001 0c-53.271 0-103.719 10.555-142.05 29.721-43.457 21.73-67.39 52.497-67.39 86.635v279.288c0 34.138 23.933 64.906 67.392 86.636C152.285 501.446 202.732 512 256.002 512c53.266 0 103.711-10.555 142.043-29.721 43.46-21.732 67.393-52.498 67.393-86.636V116.355c.001-34.138-23.934-64.904-67.394-86.636zM256.001 46.548c93.229 0 162.889 36.855 162.889 69.808 0 32.953-69.66 69.809-162.889 69.809-93.23 0-162.892-36.857-162.892-69.809 0-32.953 69.661-69.808 162.892-69.808zm162.89 349.095c0 32.953-69.662 69.809-162.891 69.809-93.23 0-162.892-36.856-162.892-69.809v-18.58c6.348 4.292 13.294 8.346 20.844 12.121 38.332 19.167 88.779 29.721 142.05 29.721 53.266 0 103.711-10.555 142.043-29.721 7.552-3.777 14.498-7.829 20.846-12.121v18.58zm.002-93.095h-.002c0 32.953-69.66 69.809-162.889 69.809-93.23 0-162.892-36.857-162.892-69.809v-18.58c6.348 4.292 13.294 8.343 20.844 12.119 38.332 19.168 88.779 29.722 142.05 29.722 53.266 0 103.711-10.555 142.043-29.722 7.552-3.777 14.498-7.829 20.846-12.123v18.584zm0-93.097h-.002c0 32.954-69.66 69.811-162.889 69.811-93.23 0-162.892-36.856-162.892-69.811v-18.579c6.348 4.292 13.294 8.343 20.844 12.118 38.331 19.167 88.779 29.721 142.05 29.721 53.266 0 103.711-10.555 142.043-29.721 7.552-3.777 14.498-7.829 20.846-12.121v18.582z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="24" width="24"><path d="M398.044 29.719C359.712 10.555 309.267 0 256.001 0c-53.271 0-103.719 10.555-142.05 29.721-43.457 21.73-67.39 52.497-67.39 86.635v279.288c0 34.138 23.933 64.906 67.392 86.636C152.285 501.446 202.732 512 256.002 512c53.266 0 103.711-10.555 142.043-29.721 43.46-21.732 67.393-52.498 67.393-86.636V116.355c.001-34.138-23.934-64.904-67.394-86.636zM256.001 46.548c93.229 0 162.889 36.855 162.889 69.808 0 32.953-69.66 69.809-162.889 69.809-93.23 0-162.892-36.857-162.892-69.809 0-32.953 69.661-69.808 162.892-69.808zm162.89 349.095c0 32.953-69.662 69.809-162.891 69.809-93.23 0-162.892-36.856-162.892-69.809v-18.58c6.348 4.292 13.294 8.346 20.844 12.121 38.332 19.167 88.779 29.721 142.05 29.721 53.266 0 103.711-10.555 142.043-29.721 7.552-3.777 14.498-7.829 20.846-12.121v18.58zm.002-93.095h-.002c0 32.953-69.66 69.809-162.889 69.809-93.23 0-162.892-36.857-162.892-69.809v-18.58c6.348 4.292 13.294 8.343 20.844 12.119 38.332 19.168 88.779 29.722 142.05 29.722 53.266 0 103.711-10.555 142.043-29.722 7.552-3.777 14.498-7.829 20.846-12.123v18.584zm0-93.097h-.002c0 32.954-69.66 69.811-162.889 69.811-93.23 0-162.892-36.856-162.892-69.811v-18.579c6.348 4.292 13.294 8.343 20.844 12.118 38.331 19.167 88.779 29.721 142.05 29.721 53.266 0 103.711-10.555 142.043-29.721 7.552-3.777 14.498-7.829 20.846-12.121v18.582z"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

5
app/assets/stylesheets/articles.scss
View file

@ -331,6 +331,11 @@
}
}
.nav-icon {
width: 24px;
height: 24px;
}
// Loading // TODO
.loading {
padding: calc(3vw + 15px) 0px 60px;

2
app/controllers/internal/configs_controller.rb
View file

@ -131,6 +131,8 @@ class Internal::ConfigsController < Internal::ApplicationController
logo_svg
main_social_image
secondary_logo_url
left_navbar_svg_icon
right_navbar_svg_icon
]
end

6
app/models/site_config.rb
View file

@ -11,6 +11,9 @@ class SiteConfig < RailsSettings::Base
# the cache, or call SiteConfig.clear_cache
cache_prefix { "v1" }
STACK_ICON = File.read(Rails.root.join("app/assets/images/stack.svg")).freeze
LIGHTNING_ICON = File.read(Rails.root.join("app/assets/images/lightning.svg")).freeze
# API Tokens
field :health_check_token, type: :string
@ -59,6 +62,9 @@ class SiteConfig < RailsSettings::Base
field :logo_svg, type: :string
field :secondary_logo_url, type: :string
field :left_navbar_svg_icon, type: :string, default: STACK_ICON
field :right_navbar_svg_icon, type: :string, default: LIGHTNING_ICON
# Mascot
field :mascot_user_id, type: :integer, default: 1
field :mascot_image_url, type: :string

8
app/views/articles/index.html.erb
View file

@ -42,7 +42,9 @@
<header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden" id="on-page-nav-butt-left" aria-label="nav-button-left">
<%= inline_svg_tag("stack.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Left sidebar") %>
<div class="crayons-icon nav-icon ">
<%= SiteConfig.left_navbar_svg_icon.html_safe %>
</div>
</button>
<div class="flex-1 flex items-center justify-between">
<h2 class="fs-l fw-heavy">Posts</h2>
@ -68,7 +70,9 @@
</div>
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="nav-button-right">
<%= inline_svg_tag("lightning.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Right sidebar") %>
<div class="crayons-icon nav-icon ">
<%= SiteConfig.right_navbar_svg_icon.html_safe %>
</div>
</button>
</header>

8
app/views/articles/tag_index.html.erb
View file

@ -39,7 +39,9 @@
<div class="articles-list" id="articles-list">
<header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden" id="on-page-nav-butt-left" aria-label="nav-button-left">
<%= inline_svg_tag("stack.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Left sidebar") %>
<div class="crayons-icon nav-icon ">
<%= SiteConfig.left_navbar_svg_icon.html_safe %>
</div>
</button>
<% if user_signed_in? %>
<div class="flex-1 flex items-center justify-between">
@ -71,7 +73,9 @@
<% end %>
<button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="nav-button-right">
<%= inline_svg_tag("lightning.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Right sidebar") %>
<div class="crayons-icon nav-icon ">
<%= SiteConfig.right_navbar_svg_icon.html_safe %>
</div>
</button>
</header>

44
app/views/internal/configs/show.html.erb
View file

@ -324,6 +324,7 @@
<div class="alert alert-info">Used as the site favicon</div>
<img alt="favicon" class="preview" src="<%= SiteConfig.favicon_url %>" />
</div>
<div class="form-group">
<%= internal_config_label :logo_png %>
<%= f.text_field :logo_png,
@ -335,6 +336,7 @@
<img class="preview" src="<%= SiteConfig.logo_png %>" />
<% end %>
</div>
<div class="form-group">
<%= internal_config_label :logo_svg %>
<%= f.text_area :logo_svg,
@ -348,15 +350,39 @@
<% end %>
</div>
<%= internal_config_label :secondary_logo_url %>
<%= f.text_field :secondary_logo_url,
class: "form-control",
value: SiteConfig.secondary_logo_url,
placeholder: "https://image.url" %>
<div class="alert alert-info">Used as the primary sticker image </div>
<% if SiteConfig.secondary_logo_url.present? %>
<img alt="secondary logo image" class="img-fluid" src="<%= SiteConfig.secondary_logo_url %>" />
<% end %>
<div class="form-group">
<%= internal_config_label :secondary_logo_url %>
<%= f.text_field :secondary_logo_url,
class: "form-control",
value: SiteConfig.secondary_logo_url,
placeholder: "https://image.url" %>
<div class="alert alert-info">Used as the secondary logo </div>
<% if SiteConfig.secondary_logo_url.present? %>
<img alt="secondary logo image" class="img-fluid" src="<%= SiteConfig.secondary_logo_url %>" />
<% end %>
</div>
<div class="form-group">
<%= internal_config_label :left_navbar_svg_icon %>
<%= f.text_area :left_navbar_svg_icon,
class: "form-control",
value: SiteConfig.left_navbar_svg_icon,
rows: 6,
placeholder: "<svg ...></svg>" %>
<div class="alert alert-info">The SVG icon used to expand the left navbar navigation menu. Should be a max of 24x24px.</div>
<%= SiteConfig.left_navbar_svg_icon.html_safe %>
</div>
<div class="form-group">
<%= internal_config_label :right_navbar_svg_icon %>
<%= f.text_area :right_navbar_svg_icon,
class: "form-control",
value: SiteConfig.right_navbar_svg_icon,
rows: 6,
placeholder: "<svg ...></svg>" %>
<div class="alert alert-info">The SVG icon used to expand the right navbar navigation menu. Should be a max of 24x24px.</div>
<%= SiteConfig.right_navbar_svg_icon.html_safe %>
</div>
</div>
</div>
</div>

4
app/views/users/show.html.erb
View file

@ -185,7 +185,9 @@
<div class="articles-list" id="articles-list">
<div class="on-page-nav-controls user-nav-controls" id="on-page-nav-controls">
<button class="on-page-nav-butt on-page-nav-butt-left" id="on-page-nav-butt-left" aria-label="nav-button-left">
<img src="<%= asset_path "stack.svg" %>" alt="left-sidebar-nav">
<div class="crayons-icon nav-icon">
<%= SiteConfig.left_navbar_svg_icon.html_safe %>
</div>
</button>
<button class="on-page-nav-butt on-page-nav-butt-right" style="margin-top:-1px;" id="on-page-nav-butt-right" aria-label="nav-button-right">
<img style="height:28px;width:28px;" src="<%= asset_path "ribbon.svg" %>" alt="right-sidebar-nav">

12
spec/requests/internal/configs_spec.rb
View file

@ -203,6 +203,18 @@ RSpec.describe "/internal/config", type: :request do
expect(SiteConfig.secondary_logo_url).to eq(expected_image_url)
end
it "updates left_navbar_svg_icon" do
expected_svg = "<svg height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3'/></svg>"
post "/internal/config", params: { site_config: { left_navbar_svg_icon: expected_svg }, confirmation: confirmation_message }
expect(SiteConfig.left_navbar_svg_icon).to eq(expected_svg)
end
it "updates right_navbar_svg_icon" do
expected_svg = "<svg height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='1'/></svg>"
post "/internal/config", params: { site_config: { right_navbar_svg_icon: expected_svg }, confirmation: confirmation_message }
expect(SiteConfig.right_navbar_svg_icon).to eq(expected_svg)
end
it "rejects update without proper confirmation" do
expected_image_url = "https://dummyimage.com/300x300"
expect do