-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extract a Spotlight::TabPanelComponent for building bootstrap tab panels
- Loading branch information
Showing
31 changed files
with
817 additions
and
951 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <%= tag.div role: 'tabpanel', class: @classes.join(' '), id: @id, data: @data do %> | ||
| <%= content %> | ||
| <% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| module Spotlight | ||
| # Component for a single tab panel pane, with responsibility for also building | ||
| # out the tab panel's control | ||
| class TabComponent < ViewComponent::Base | ||
| def initialize(id:, label:, active: false, label_data: {}) | ||
| super | ||
|
|
||
| @id = id | ||
| @label = label | ||
| @active = active | ||
| @classes = ['tab-pane', ('active' if active)].compact | ||
| @label_data = label_data | ||
| end | ||
|
|
||
| def render_label | ||
| tag.li role: 'presentation', class: 'nav-item' do | ||
| link_to @label, | ||
| "##{@id}", | ||
| aria: { | ||
| controls: @id | ||
| }, | ||
| role: 'tab', | ||
| data: { toggle: 'tab' }.merge(@label_data), | ||
| class: ['nav-link', ('active' if @active)].compact.join(' ') | ||
| end | ||
| end | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <% tabs_content = capture do %> | ||
| <ul class="nav nav-tabs" role="tablist"> | ||
| <% tabs.each do |tab| %> | ||
| <%= tab.render_label %> | ||
| <% end %> | ||
| </ul> | ||
| <% end %> | ||
| <%= tabs_content if @tab_position == :outside %> | ||
|
|
||
| <div role="tabpanel"> | ||
| <%= tabs_content if @tab_position == :inside %> | ||
|
|
||
| <div class="tab-content"> | ||
| <% tabs.each do |tab| %> | ||
| <%= tab %> | ||
| <% end %> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| module Spotlight | ||
| # Component for building out a basic tabbed interface | ||
| class TabPanelComponent < ViewComponent::Base | ||
| renders_many :tabs, Spotlight::TabComponent | ||
|
|
||
| def initialize(tab_position: :inside) | ||
| super | ||
| @tab_position = tab_position | ||
| end | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,9 @@ | ||
| <div role="tabpanel" class="tab-pane" id="delete"> | ||
| <div class="alert alert-danger"> | ||
| <h2 class="alert-heading h4"><%= t(:".heading") %></h2> | ||
| <div class="row"> | ||
| <p class='col-9'><%= t(:".warning_html", export_link: link_to(t(:'spotlight.exhibits.export.download'), spotlight.edit_exhibit_path(current_exhibit, anchor: 'export'))) %></p> | ||
| <div class='col-3'> | ||
| <%= delete_link current_exhibit, class: 'btn btn-secondary' %> | ||
| </div> | ||
| <div class="alert alert-danger"> | ||
| <h2 class="alert-heading h4"><%= t(:".heading") %></h2> | ||
| <div class="row"> | ||
| <p class='col-9'><%= t(:".warning_html", export_link: link_to(t(:'spotlight.exhibits.export.download'), spotlight.edit_exhibit_path(current_exhibit, anchor: 'export'))) %></p> | ||
| <div class='col-3'> | ||
| <%= delete_link current_exhibit, class: 'btn btn-secondary' %> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,6 @@ | ||
| <div role="tabpanel" class="tab-pane <%= 'active' if @tab == 'export' %>" id="export"> | ||
| <div class="row col-md-12"> | ||
| <p class="instructions"><%= t :'.instructions' %></p> | ||
| <div class="primary-actions"> | ||
| <%= link_to t(:'.download'), get_exhibit_path(current_exhibit, format: 'json'), class: 'btn btn-primary' %> | ||
| </div> | ||
| <div class="row col-md-12"> | ||
| <p class="instructions"><%= t :'.instructions' %></p> | ||
| <div class="primary-actions"> | ||
| <%= link_to t(:'.download'), get_exhibit_path(current_exhibit, format: 'json'), class: 'btn btn-primary' %> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,14 @@ | ||
| <div role="tabpanel" class="tab-pane <%= 'active' if @tab == 'import' %>" id="import"> | ||
| <%= bootstrap_form_for [:import, current_exhibit], html: { class: 'clearfix', multipart: true } do |f| %> | ||
| <div class="row col-md-12"> | ||
| <p class="instructions"><%= t :'.instructions' %></p> | ||
| <div class="form-group"> | ||
| <%= file_field_tag :file, class: 'form-control' %> | ||
| <%= hidden_field_tag :tab, 'import' %> | ||
| </div> | ||
| <div class="form-actions"> | ||
| <div class="primary-actions"> | ||
| <%= f.submit t(:'.button'), class: 'btn btn-primary' %> | ||
| </div> | ||
| <%= bootstrap_form_for [:import, current_exhibit], html: { class: 'clearfix', multipart: true } do |f| %> | ||
| <div class="row col-md-12"> | ||
| <p class="instructions"><%= t :'.instructions' %></p> | ||
| <div class="form-group"> | ||
| <%= file_field_tag :file, class: 'form-control' %> | ||
| <%= hidden_field_tag :tab, 'import' %> | ||
| </div> | ||
| <div class="form-actions"> | ||
| <div class="primary-actions"> | ||
| <%= f.submit t(:'.button'), class: 'btn btn-primary' %> | ||
| </div> | ||
| </div> | ||
| <% end %> | ||
| </div> | ||
| </div> | ||
| <% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,57 @@ | ||
| <div role="tabpanel" class="tab-pane <%= 'active' if @tab == 'language' %>" id="language"> | ||
| <p class="instructions"><%= t :'spotlight.exhibits.languages.selection_instructions' %></p> | ||
| <p class="instructions"><%= t :'spotlight.exhibits.languages.selection_instructions' %></p> | ||
|
|
||
| <%= bootstrap_form_for [current_exhibit, Spotlight::Language.new], layout: :horizontal, html: { class: 'row' }, label_col: "col-sm-3", control_col: "col-sm-9" do |f| %> | ||
| <div class='col-sm-6'> | ||
| <%= f.select('locale', add_exhibit_language_dropdown_options, prompt: t('.selection_prompt')) %> | ||
| <%= hidden_field_tag :tab, 'language' %> | ||
| </div> | ||
| <div class='col-sm-6'> | ||
| <%= f.submit nil, class: 'btn btn-primary' %> | ||
| </div> | ||
| <% end %> | ||
| <%= bootstrap_form_for [current_exhibit, Spotlight::Language.new], layout: :horizontal, html: { class: 'row' }, label_col: "col-sm-3", control_col: "col-sm-9" do |f| %> | ||
| <div class='col-sm-6'> | ||
| <%= f.select('locale', add_exhibit_language_dropdown_options, prompt: t('.selection_prompt')) %> | ||
| <%= hidden_field_tag :tab, 'language' %> | ||
| </div> | ||
| <div class='col-sm-6'> | ||
| <%= f.submit nil, class: 'btn btn-primary' %> | ||
| </div> | ||
| <% end %> | ||
|
|
||
| <h2 class="mt-4"><%= t :'spotlight.exhibits.languages.current_header' %></h2> | ||
| <h2 class="mt-4"><%= t :'spotlight.exhibits.languages.current_header' %></h2> | ||
|
|
||
| <% if current_exhibit.languages.any? && current_exhibit.languages.last.persisted? %> | ||
| <p class="instructions"><%= t :'spotlight.exhibits.languages.current_instructions' %></p> | ||
| <% if current_exhibit.languages.any? && current_exhibit.languages.last.persisted? %> | ||
| <p class="instructions"><%= t :'spotlight.exhibits.languages.current_instructions' %></p> | ||
|
|
||
| <%= bootstrap_form_for current_exhibit, layout: :horizontal do |f| %> | ||
| <div class="row"> | ||
| <div class="col-md-8"> | ||
| <table class="table table-striped"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col"><%= t('.table_heading.language') %></th> | ||
| <th scope="col" class='text-center'><%= t('.table_heading.public') %></th> | ||
| <th scope="col" class='text-center'><%= t('.table_heading.action') %></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <% current_exhibit.languages.each do |language| %> | ||
| <%= f.fields_for :languages, language do |languages| %> | ||
| <tr> | ||
| <td><%= t("locales.#{language.locale}") %></td> | ||
| <td class='text-center'> | ||
| <div class='checkbox'> | ||
| <%= languages.label :public, class: 'sr-only' %> | ||
| <%= languages.check_box_without_bootstrap :public %> | ||
| </div> | ||
| </td> | ||
| <td class='text-center'><%= link_to t('.remove'), exhibit_language_path(current_exhibit, language), method: :delete, data: { confirm: t('.modal.confirm') }, class: 'btn btn-sm btn-danger' %></td> | ||
| </tr> | ||
| <% end %> | ||
| <%= bootstrap_form_for current_exhibit, layout: :horizontal do |f| %> | ||
| <div class="row"> | ||
| <div class="col-md-8"> | ||
| <table class="table table-striped"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col"><%= t('.table_heading.language') %></th> | ||
| <th scope="col" class='text-center'><%= t('.table_heading.public') %></th> | ||
| <th scope="col" class='text-center'><%= t('.table_heading.action') %></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <% current_exhibit.languages.each do |language| %> | ||
| <%= f.fields_for :languages, language do |languages| %> | ||
| <tr> | ||
| <td><%= t("locales.#{language.locale}") %></td> | ||
| <td class='text-center'> | ||
| <div class='checkbox'> | ||
| <%= languages.label :public, class: 'sr-only' %> | ||
| <%= languages.check_box_without_bootstrap :public %> | ||
| </div> | ||
| </td> | ||
| <td class='text-center'><%= link_to t('.remove'), exhibit_language_path(current_exhibit, language), method: :delete, data: { confirm: t('.modal.confirm') }, class: 'btn btn-sm btn-danger' %></td> | ||
| </tr> | ||
| <% end %> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| <% end %> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| <div class="form-actions"> | ||
| <div class="primary-actions"> | ||
| <%= hidden_field_tag :tab, 'language' %> | ||
| <%= f.submit nil, class: 'btn btn-primary' %> | ||
| </div> | ||
| </div> | ||
| <div class="form-actions"> | ||
| <div class="primary-actions"> | ||
| <%= hidden_field_tag :tab, 'language' %> | ||
| <%= f.submit nil, class: 'btn btn-primary' %> | ||
| </div> | ||
| <% end %> | ||
| <% else %> | ||
| <p><%= t('.no_languages_help_text') %></p> | ||
| </div> | ||
| <% end %> | ||
| </div> | ||
| <% else %> | ||
| <p><%= t('.no_languages_help_text') %></p> | ||
| <% end %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <%= render 'tags', tags: @exhibits.published.all_tags %> | ||
| <%= render 'exhibits', exhibits: @published_exhibits %> | ||
| <% if @published_exhibits.total_count > @published_exhibits.size %> | ||
| <nav class="d-flex justify-content-center"> | ||
| <ul class="pagination"> | ||
| <li class="page-item"><%= link_to_previous_page @published_exhibits, t('views.pagination.previous').html_safe, class: 'page-link' %></li> | ||
| <li class="page-item"><%= link_to_next_page @published_exhibits, t('views.pagination.next').html_safe, class: 'page-link' %></li> | ||
| </ul> | ||
| </nav> | ||
| <% end %> |
Oops, something went wrong.