Merge pull request #2308 from MushroomObserver/refactor-obs-form-with…

…-collapsible-panels

Refactor obs form with collapsible panels

app/assets/stylesheets/Admin.scss

@@ -9,7 +9,7 @@ $LOGO_BG_COLOR:               yellow;
 $LOGO_HOVER_FG_COLOR:         purple;
 $LOGO_HOVER_BG_COLOR:         yellow;
 
-$LEFT_BAR_BORDER_COLOR:       #545454; // gray
+$LEFT_BAR_BORDER_COLOR:       #535454; // gray
 $LEFT_BAR_BORDER_RADIUS:      0px;
 $LEFT_BAR_HEADER_FG_COLOR:    black;
 $LEFT_BAR_HEADER_BG_COLOR:    yellow;

app/assets/stylesheets/Agaricus.scss

@@ -1,7 +1,7 @@
 @import "defaults";
 
 $augustus_cap:         #ECCF95;
-$brasiliensis_gills_1: #A06362; // #A06463
+$brasiliensis_gills_1: #BF6362; // #A06463
 $brasiliensis_gills_2: #743931;
 $campestris_cap:       #F6F0F2;
 $cupreobrunneus_gills: #3B2821;

app/assets/stylesheets/Amanita.scss

@@ -13,7 +13,7 @@ $calyptroderma_middle_cap:        #c18346;
 $muscaria_background:             #cc2616;
 $muscaria_foreground:             #fff8c6;
 $velosa_background:               #dd9d5f;
-$velosa_light_veil:               #fce9d3; // faebd4
+$velosa_light_veil:               #f9e9d3; // faebd4
 $velosa_dark_veil:                #f4d5a6;
 $novinupta_background:            #d1afa5;
 $pachycolea_background:           #383138;

app/assets/stylesheets/BlackOnWhite.scss

@@ -4,7 +4,7 @@
 
 $LOGO_BORDER_COLOR:                 #DDDDDD;
 $LEFT_BAR_BORDER_COLOR:             #DDDDDD;
-$TOP_BAR_BORDER_COLOR:              #D9DaDa;
+$TOP_BAR_BORDER_COLOR:              #D9D9Da;
 $LIST_BORDER_COLOR:                 #DDDDDD;
 $BUTTON_HOVER_BORDER_COLOR:         #CCCCCC;
 $BUTTON_BG_COLOR:                   #CCCCCC;

app/assets/stylesheets/Cantharellaceae.scss

@@ -11,7 +11,7 @@ $tubaeformis_hymenium:          #c2914c;
 $tubaeformis_bright_stipe:      #ffb230;
 $tubaeformis_dark_stipe:        #4b2e0c;
 $tubaeformis_light_stipe:       #e5bb67;
-$cornucopioides_dark_hymenium:  #12120c; // image 465 #10110b
+$cornucopioides_dark_hymenium:  #12120d; // image 465 #10110b
 $cornucopioides_light_hymenium: #9b9690;
 $cornucopioides_dark_cap:       #4f4337;
 $cornucopioides_light_cap:      #826c57;

app/assets/stylesheets/Hygrocybe.scss

@@ -1,6 +1,6 @@
 @import "defaults";
 
-$conica_stain:          #34352d; // #37372f
+$conica_stain:          #34342d; // #37372f
 $conica_cap_red:        #a31404;
 $conica_cap_orange:     #dd6226;
 $conica_cap_yellow:     #ffbf01;

app/assets/stylesheets/Sudo.scss

@@ -1,6 +1,6 @@
 @import "defaults";
 
-$BODY_BG_COLOR:               #DE7300; // #DD7700
+$BODY_BG_COLOR:               #DE7200; // #DD7700
 
 $LOGO_BORDER_COLOR:           black;
 $LOGO_BORDER_WIDTH:           2px; // vs 1px in default

app/assets/stylesheets/mo/_icons.scss

@@ -99,11 +99,13 @@
 }
 
 // This is for the stateful icon_link_to helper
-.icon-link {
+.icon-link,
+.panel-collapse-trigger {
   .active-icon, .active-label {
     display: none;
   }
-  &.active {
+  &.active,
+  &.collapsed {
     .link-icon:not(.active-icon),
     .sr-only:not(.active-label) {
       display: none;

app/helpers/autocompleter_helper.rb

@@ -21,33 +21,39 @@ def autocompleter_field(**args)
       data: { autocompleter_target: "input" }
     }.deep_merge(args.except(*autocompleter_outer_args))
     ac_args[:class] = class_names("dropdown", args[:class])
-    ac_args[:wrap_data] = autocompleter_wrap_data(args)
+    # inner form-group wrap, because dropdown is position-absolute
+    ac_args[:wrap_data] = { autocompleter_target: "wrap" }
     ac_args[:label_after] = autocompleter_label_after(args)
     ac_args[:label_end] = autocompleter_label_end(args)
-    ac_args[:append] = autocompleter_append(args)
-
-    if args[:textarea] == true
-      text_area_with_label(**ac_args)
-    else
-      text_field_with_label(**ac_args)
+    ac_args[:append] = autocompleter_dropdown
+
+    tag.div(id: args[:controller_id],
+            data: autocompleter_controller_data(args)) do
+      if args[:textarea] == true
+        concat(text_area_with_label(**ac_args))
+      else
+        concat(text_field_with_label(**ac_args))
+      end
+      concat(args[:append])
     end
   end
 
   # Any arg not on this list gets sent to the text field/area.
   def autocompleter_outer_args
-    [:wrap_data, :type, :separator, :textarea, :hidden_value, :hidden_data,
-     :create_text, :keep_text, :edit_text, :find_text, :create, :create_path,
-     :map_outlet, :geocode_outlet]
+    [:controller_data, :controller_id, :type, :separator, :textarea,
+     :hidden_value, :hidden_data, :create_text, :keep_text, :edit_text,
+     :find_text, :create, :create_path, :map_outlet, :geocode_outlet].freeze
   end
 
-  def autocompleter_wrap_data(args)
+  # This data goes on the outer div (controller element), not the input field.
+  def autocompleter_controller_data(args)
     {
-      controller: :autocompleter, type: args[:type],
+      controller: :autocompleter,
+      type: args[:type],
       separator: args[:separator],
       autocompleter_map_outlet: args[:map_outlet],
-      autocompleter_geocode_outlet: args[:geocode_outlet],
-      autocompleter_target: "wrap"
-    }.deep_merge(args[:wrap_data] || {})
+      autocompleter_geocode_outlet: args[:geocode_outlet]
+    }.deep_merge(args[:outer_data] || {})
   end
 
   def autocompleter_label_after(args)
@@ -68,13 +74,6 @@ def autocompleter_label_end(args)
     end
   end
 
-  def autocompleter_append(args)
-    capture do
-      concat(autocompleter_dropdown)
-      concat(args[:append])
-    end
-  end
-
   def autocompleter_has_id_indicator
     link_icon(:check, title: :autocompleter_has_id.l,
                       class: "ml-3 px-2 text-success has-id-indicator",

app/helpers/content_helper.rb

@@ -76,212 +76,4 @@ def content_tag_unless(condition, name, content_or_options_with_block = nil,
     content_tag_if(!condition, name, content_or_options_with_block,
                    options, escape, &block)
   end
-
-  # Wrap an html object in '<span title="blah">' tag.  This has the effect of
-  # giving it context help (mouse-over popup) in most modern browsers.
-  #
-  #   <%= help_tooltip(label, title: "Click here to do something.") %>
-  #
-  def help_tooltip(label, **args)
-    args[:data] ||= {}
-    tag.span(label, title: args[:title],
-                    class: class_names("context-help", args[:class]),
-                    data: { toggle: "tooltip" }.merge(args[:data]))
-  end
-
-  # make a help-note styled element, like a div, p, or span
-  def help_note(element = :span, string = "")
-    content_tag(element, string, class: "help-note mr-3")
-  end
-
-  # make a help-block styled element, like a div, p
-  def help_block(element = :div, string = "", **args, &block)
-    content = block ? capture(&block) : string
-    html_options = {
-      class: class_names("help-block", args[:class])
-    }.deep_merge(args.except(:class))
-
-    content_tag(element, html_options) { content }
-  end
-
-  # draw a help block with an arrow
-  def help_block_with_arrow(direction = nil, **args, &block)
-    div_class = "well well-sm help-block position-relative"
-    div_class += " mt-3" if direction == "up"
-
-    tag.div(class: div_class, id: args[:id]) do
-      concat(capture(&block).to_s)
-      if direction
-        arrow_class = "arrow-#{direction}"
-        arrow_class += " hidden-xs" unless args[:mobile]
-        concat(tag.div("", class: arrow_class))
-      end
-    end
-  end
-
-  def collapse_help_block(direction = nil, string = nil, **args, &block)
-    div_class = "well well-sm help-block position-relative"
-    div_class += " mt-3" if direction == "up"
-    content = block ? capture(&block) : string
-
-    tag.div(class: "collapse", id: args[:id]) do
-      tag.div(class: div_class) do
-        concat(content)
-        if direction
-          arrow_class = "arrow-#{direction}"
-          arrow_class += " hidden-xs" unless args[:mobile]
-          concat(tag.div("", class: arrow_class))
-        end
-      end
-    end
-  end
-
-  def collapse_info_trigger(id, **args)
-    link_to(link_icon(:question), "##{id}",
-            class: class_names("info-collapse-trigger", args[:class]),
-            role: "button", data: { toggle: "collapse" },
-            aria: { expanded: "false", controls: id })
-  end
-
-  def panel_block(**args, &block)
-    heading = panel_block_heading(args)
-    footer = panel_block_footer(args)
-    content = capture(&block).to_s
-
-    tag.div(
-      class: class_names("panel panel-default", args[:class]),
-      **args.except(:class, :inner_class, :inner_id, :heading, :heading_links)
-    ) do
-      concat(heading)
-      if content.present?
-        concat(tag.div(class: class_names("panel-body", args[:inner_class]),
-                       id: args[:inner_id]) do
-                 concat(content)
-               end)
-      end
-      concat(footer)
-    end
-  end
-
-  def panel_block_heading(args)
-    if args[:heading]
-      tag.div(class: "panel-heading") do
-        tag.h4(class: "panel-title") do
-          els = [args[:heading]]
-          if args[:heading_links].present?
-            els << tag.span(args[:heading_links], class: "float-right")
-          end
-          els.safe_join
-        end
-      end
-    else
-      ""
-    end
-  end
-
-  def panel_block_footer(args)
-    if args[:footer]
-      tag.div(class: "panel-footer") do
-        args[:footer]
-      end
-    else
-      ""
-    end
-  end
-
-  def alert_block(level = :warning, string = "")
-    content_tag(:div, string, class: "alert alert-#{level}")
-  end
-
-  # Create a div for notes.
-  #
-  #   <%= notes_panel(html) %>
-  #
-  #   <% notes_panel() do %>
-  #     Render stuff in here.  Note lack of "=" in line above.
-  #   <% end %>
-  #
-  def notes_panel(msg = nil, &block)
-    msg = capture(&block) if block
-    result = tag.div(msg, class: "panel-body")
-    wrapper = tag.div(result, class: "panel panel-default dotted-border")
-    if block
-      concat(wrapper)
-    else
-      wrapper
-    end
-  end
-
-  # Bootstrap tablist
-  def tab_nav(**args, &block)
-    if args[:tabs]
-      content = capture do
-        args[:tabs].each do |tab|
-          concat(tab_item(tab[:name], id: tab[:id], active: tab[:active]))
-        end
-      end
-    elsif block
-      content = capture(&block).to_s
-    else
-      content = ""
-    end
-    style = args[:style] || "pills"
-
-    tag.ul(
-      role: "tablist",
-      class: class_names("nav nav-#{style}", args[:class]),
-      **args.except(:class, :style)
-    ) do
-      content
-    end
-  end
-
-  # Bootstrap "tab" item in ul/li tablist
-  def tab_item(name, **args)
-    active = args[:active] ? "active" : nil
-    disabled = args[:disabled] ? "disabled" : nil
-
-    tag.li(
-      role: "presentation",
-      class: class_names(active, disabled, args[:class])
-    ) do
-      tab_link(name, **args.except(:active, :disabled, :class))
-    end
-  end
-
-  # Bootstrap tab - just the link. Use for independent tab (e.g. button).
-  def tab_link(name, **args)
-    classes = args[:button] ? "btn btn-default" : "nav-link"
-
-    link_to(
-      name, "##{args[:id]}-tab-pane",
-      role: "tab", id: "#{args[:id]}-tab", class: classes,
-      data: { toggle: "tab" }, aria: { controls: "#{args[:id]}-tab-pane" }
-    )
-  end
-
-  # Bootstrap tabpanel wrapper
-  def tab_content(**args, &block)
-    content = capture(&block).to_s
-
-    tag.div(class: class_names("tab-content", args[:class]),
-            **args.except(:class)) do
-      content
-    end
-  end
-
-  # Bootstrap tabpanel
-  def tab_panel(**args, &block)
-    content = capture(&block).to_s
-    active = args[:active] ? "in active" : nil
-
-    tag.div(
-      role: "tabpanel", id: "#{args[:id]}-tab-pane",
-      class: class_names("tab-pane fade", active, args[:class]),
-      aria: { labelledby: "#{args[:id]}-tab" },
-      **args.except(:class, :id)
-    ) do
-      content
-    end
-  end
 end