Measurements#new form improvements

app/assets/stylesheets/application.css

@@ -111,7 +111,6 @@ textarea {
 }
 .button,
 button,
-fieldset,
 input,
 select,
 textarea {
@@ -126,14 +125,25 @@ textarea {
 .tab > svg,
 button > svg {
   height: 1.8em;
-  padding-right: 0.4em;
   width: 1.8em;
 }
+.button > svg:not(:last-child),
+.tab > svg:not(:last-child),
+button > svg:not(:last-child) {
+  padding-right: 0.4em;
+}
 fieldset {
   padding: 0.4em;
 }
 legend {
   color: var(--color-gray);
+  display: flex;
+  gap: 0.4em;
+  width: 100%;
+}
+legend span {
+  align-content: center;
+  flex-grow: 1;
 }
 
 /* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
@@ -204,6 +214,7 @@ textarea:focus-visible {
   accent-color: var(--color-dark-blue);
   background-color: var(--color-focus-gray);
 }
+fieldset,
 input[type=text]:read-only,
 textarea:read-only {
   border: none;
@@ -429,6 +440,9 @@ table.items .actions {
   gap: 0.4em;
   justify-content: end;
 }
+table.items .actions.centered {
+  justify-content: center;
+}
 table.items tr.dropzone {
   position: relative;
 }
@@ -519,6 +533,11 @@ table.items select:focus-visible {
   color: black;
 }
 
+form a[name=cancel] {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
+}
 form table.items {
   border: none;
 }

app/helpers/application_helper.rb

@@ -98,7 +98,7 @@ module ApplicationHelper
 
     def submit_default_value
       svg_name = object ? (object.persisted? ? 'update' : 'plus-circle-outline') : ''
-      @template.svg_tag("pictograms/#{svg_name}") + super
+      @template.svg_tag("pictograms/#{svg_name}", super)
     end
 
     def except_pattern(value, pattern = nil)
@@ -122,10 +122,11 @@ module ApplicationHelper
     form_with(**options, &block)
   end
 
-  def svg_tag(source, options = {})
-    content_tag :svg, options do
+  def svg_tag(source, label, options = {})
+    svg_tag = content_tag :svg, options do
       tag.use(href: "#{image_path(source + ".svg")}#icon")
     end
+    label.blank? ? svg_tag : svg_tag + tag.span(label)
   end
 
   def navigation_menu
@@ -138,7 +139,7 @@ module ApplicationHelper
 
     menu_tabs.map do |name, image, status, css_class|
       if current_user.at_least(status)
-        link_to svg_tag("pictograms/#{image}") + t("#{name}.navigation"),
+        link_to svg_tag("pictograms/#{image}", t("#{name}.navigation")),
           {controller: "/#{name}", action: "index"},
           class: class_names('tab', css_class, active: name == current_tab)
       end
@@ -203,7 +204,7 @@ module ApplicationHelper
   private
 
   def link_or_button_options(type, name, image = nil, html_options)
-    name = (image ? svg_tag("pictograms/#{image}") : '') + name.to_s
+    name = svg_tag("pictograms/#{image}", name) if image
 
     html_options[:class] = class_names(
       html_options[:class],

app/models/quantity.rb

@@ -165,6 +165,6 @@ class Quantity < ApplicationRecord
   end
 
   def relative_pathname(ancestor)
-    pathname.delete_prefix(ancestor&.pathname || '')
+    pathname.delete_prefix(ancestor ? ancestor.pathname + PATHNAME_DELIMITER : '')
   end
 end

app/views/measurements/_form.html.erb

@@ -15,7 +15,7 @@
       </td>
 
       <td class="actions">
-        <%= image_button_tag t(:delete), 'delete-outline', class: 'dangerous',
+        <%= image_button_tag '', 'delete-outline', class: 'dangerous',
           formaction: discard_new_measurement_path(readout.quantity),
           formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
         <%= form.hidden_field :quantity_id %>

app/views/measurements/_form_frame.html.erb

@@ -1,21 +1,16 @@
-<%= tabular_form_with url: new_measurement_path, html: {id: :new_readouts_form} do %>
-  <% if @readouts&.present? %>
-    <fieldset>
-      <%= tag.legend id: :new_readouts_form_legend %>
-      <table class="items centered">
-        <tbody id="readouts">
-          <tr id="new_readouts_actions">
-            <td></td>
-            <td></td>
-            <td><div class="actions"><%= button_tag %></div></td>
-            <td><div class="actions">
-              <%= image_link_to t(:cancel), "close-outline", measurements_path,
-                class: 'dangerous', name: :cancel,
-                onclick: render_turbo_stream('form_close') %>
-            </div></td>
-          </tr>
-        </tbody>
-      </table>
-    </fieldset>
-  <% end %>
+<%= tabular_fields_for Readout.new do |form| %>
+  <fieldset>
+    <legend>
+      <%= tag.span id: :new_readouts_form_legend %>
+      <%= image_link_to '', "close-outline", measurements_path, name: :cancel,
+        class: 'dangerous', onclick: render_turbo_stream('form_close') %>
+    </legend>
+    <table class="items centered">
+      <tbody id="readouts">
+        <tr id="new_readouts_actions">
+          <td colspan="4"><div class="actions centered"><%= form.button %></div></td>
+        </tr>
+      </tbody>
+    </table>
+  </fieldset>
 <% end %>

app/views/measurements/index.html.erb

@@ -1,15 +1,16 @@
 <div class="topside vflex">
   <% if current_user.at_least(:active) %>
-    <%= render partial: 'form_frame' %>
     <%# TODO: show hint when no quantities/units defined %>
+    <%= tabular_form_with url: new_measurement_path,
+      html: {id: :new_readouts_form} do |f| %>
+    <% end %>
     <div class="hflex">
       <%= select_tag :id, options_from_collection_for_select(
         @quantities, :id, ->(q){ sanitize('&emsp;' * q.depth + q.name) }
       ), form: :new_readouts_form %>
       <% common_options = {form: :new_readouts_form, formmethod: :get,
                            formnovalidate: true, data: {turbo_stream: true}} %>
-      <%= image_button_tag t('.new_quantity'), 'plus-outline',
-        formaction: new_measurement_path, **common_options -%>
+      <%= image_button_tag t('.new_quantity'), 'plus-outline', **common_options -%>
       <%= image_button_tag t('.new_children'), 'plus-multiple-outline',
         formaction: new_measurement_path(:children), **common_options -%>
       <%= image_button_tag t('.new_subtree'), 'plus-multiple-outline',

app/views/measurements/new.turbo_stream.erb

@@ -1,4 +1,4 @@
-<%= turbo_stream.replace :new_readouts_form do %>
+<%= turbo_stream.update :new_readouts_form do %>
   <%= render partial: 'form_frame' %>
 <% end if @prev_quantities.empty? %>
 

app/views/users/registrations/edit.html.erb

@@ -1,5 +1,5 @@
 <% content_for :navigation, flush: true do %>
-  <%= link_to svg_tag("pictograms/arrow-left-bold-outline") + t(:back),
+  <%= link_to svg_tag("pictograms/arrow-left-bold-outline", t(:back)),
     request.referer.present? ? :back : root_path, class: 'tab' %>
 <% end %>