trestle 0.9.9 → 0.10.0.pre2

data/app/views/trestle/resource/_form.html.erb

@@ -1,4 +1,9 @@
 <% if admin.form -%>
+  <% if admin.form.modal? && modal_options = admin.form.options[:modal] %>
+    <% modal_options!(class: modal_options[:class]) %>
+    <% modal_options!(controller: modal_options[:controller]) %>
+  <% end %>
+
   <%= admin.form.render(self, instance) %>
 <% else %>
   <p><%= t("trestle.onboarding.no_form", default: "Please define a form block or create a <code>_form.html</code> partial.").html_safe %></p>

data/app/views/trestle/resource/create.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.replace admin.build_instance({}, params), template: "trestle/resource/#{instance.persisted? ? "show" : "new"}" %>

data/app/views/trestle/resource/destroy.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.close_modal instance %>

data/app/views/trestle/resource/edit.html.erb

@@ -5,12 +5,16 @@
 
 <% toolbar(:primary) do |t| %>
   <%= t.save_or_dismiss(:update) %>
+  <%= hook("edit.toolbar.primary", t) %>
 <% end %>
 
 <% toolbar(:secondary) do |t| %>
   <%= t.delete %>
+  <%= hook("edit.toolbar.secondary", t) %>
 <% end %>
 
-<%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
-  <%= render partial: "form", layout: dialog_request? ? "dialog" : "layout" %>
+<%= resource_turbo_frame(instance) do %>
+  <%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
+    <%= render partial: "form", layout: modal_request? ? "modal" : "layout" %>
+  <% end %>
 <% end %>

data/app/views/trestle/resource/index.html.erb

@@ -2,6 +2,11 @@
 
 <% toolbar(:primary) do |t| %>
   <%= t.new %>
+  <%= hook("index.toolbar.primary", t) %>
+<% end %>
+
+<% toolbar(:secondary) do |t| %>
+  <%= hook("index.toolbar.secondary", t) %>
 <% end %>
 
 <% content_for(:utilities) do %>
@@ -9,17 +14,19 @@
 <% end if admin.scopes.any? %>
 
 <%= render layout: "layout" do %>
-  <% if hook?("resource.index.header") %>
-    <header class="main-content-header">
-      <%= hook("resource.index.header") %>
-    </header>
-  <% end %>
+  <%= index_turbo_frame do %>
+    <% if hook?("resource.index.header") %>
+      <header class="main-content-header">
+        <%= hook("resource.index.header") %>
+      </header>
+    <% end %>
 
-  <%= render "trestle/table/table", table: admin.table, collection: collection %>
+    <%= render "trestle/table/table", table: admin.table, collection: collection %>
 
-  <footer class="main-content-footer">
-    <%= hook("resource.index.footer") %>
+    <footer class="main-content-footer">
+      <%= hook("resource.index.footer") %>
 
-    <%= pagination collection: collection, entry_name: admin.model_name, remote: admin.pagination_options[:ajax] %>
-  </footer>
+      <%= pagination collection: collection, entry_name: admin.model_name, remote: admin.pagination_options[:ajax] %>
+    </footer>
+  <% end %>
 <% end %>

data/app/views/trestle/resource/new.html.erb

@@ -5,8 +5,15 @@
 
 <% toolbar(:primary) do |t| %>
   <%= t.save_or_dismiss(:create) %>
+  <%= hook("new.toolbar.primary", t) %>
 <% end %>
 
-<%= trestle_form_for instance, url: admin.path(:create), method: :post do |f| %>
-  <%= render partial: "form", layout: dialog_request? ? "dialog" : "layout" %>
+<% toolbar(:secondary) do |t| %>
+  <%= hook("new.toolbar.secondary", t) %>
+<% end %>
+
+<%= resource_turbo_frame(instance) do %>
+  <%= trestle_form_for instance, url: admin.path(:create), method: :post do |f| %>
+    <%= render partial: "form", layout: modal_request? ? "modal" : "layout" %>
+  <% end %>
 <% end %>

data/app/views/trestle/resource/show.html.erb

@@ -5,12 +5,16 @@
 
 <% toolbar(:primary) do |t| %>
   <%= t.save_or_dismiss(:update) %>
+  <%= hook("show.toolbar.primary", t) %>
 <% end %>
 
 <% toolbar(:secondary) do |t| %>
   <%= t.delete %>
+  <%= hook("show.toolbar.secondary", t) %>
 <% end %>
 
-<%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
-  <%= render partial: "form", layout: dialog_request? ? "dialog" : "layout" %>
+<%= resource_turbo_frame(instance) do %>
+  <%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
+    <%= render partial: "form", layout: modal_request? ? "modal" : "layout" %>
+  <% end %>
 <% end %>

data/app/views/trestle/resource/update.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.replace instance, template: "trestle/resource/show" %>

data/app/views/trestle/shared/_sidebar.html.erb

@@ -1,6 +1,6 @@
-<aside class="app-sidebar navbar-expand-md" id="app-sidebar">
+<aside class="app-sidebar navbar navbar-expand-md" id="app-sidebar" data-controller="sidebar mobile-sidebar">
   <header class="app-sidebar-header">
-    <button class="navbar-toggler" type="button" aria-controls="app-sidebar" aria-expanded="false" aria-label="<%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %>">
+    <button class="navbar-toggler" type="button" aria-controls="app-sidebar" aria-expanded="false" aria-label="<%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %>" data-action="mobile-sidebar#toggle">
       <span class="navbar-toggler-icon"></span>
     </button>
 
@@ -9,19 +9,19 @@
     <% end %>
   </header>
 
-  <div class="app-sidebar-inner">
-    <nav class="app-nav">
+  <div class="app-sidebar-inner" data-sidebar-target="inner">
+    <nav class="app-nav" data-controller="navigation">
       <% Trestle.navigation(self).each do |group, items| %>
         <%= content_tag(:ul, class: ("collapsed" if group.present? && navigation_group_collapsed?(group)), data: { group: group.id }) do %>
           <% if group.present? %>
-            <li class="nav-header"><%= link_to group.label, "##{group.id}" %></li>
+            <li class="nav-header"><%= link_to content_tag(:span, group.label), "##{group.id}", data: { action: "navigation#toggle" } %></li>
           <% end %>
 
           <% items.each do |item| %>
-            <%= content_tag(:li, class: ("active" if current_navigation_item?(item))) do %>
-              <%= link_to item.path, item.html_options do %>
+            <%= content_tag(:li, class: ["nav-item", ("active" if current_navigation_item?(item))]) do %>
+              <%= link_to item.path, item.html_options.merge(data: { controller: "navigation-tooltip" }) do %>
                 <%= icon("nav-icon", item.icon) %>
-                <span class="nav-label"><%= item.label %></span>
+                <span class="nav-label" data-navigation-tooltip-target="label"><%= item.label %></span>
 
                 <%= content_tag(:span, item.badge.text, class: ["badge", item.badge.html_class]) if item.badge? %>
               <% end %>
@@ -31,8 +31,8 @@
       <% end %>
     </nav>
 
-    <button class="toggle-sidebar">
-      <span class="sr-only"><%= t("trestle.ui.toggle_sidebar", default: "Toggle sidebar") %></span>
+    <button class="toggle-sidebar" data-action="sidebar#toggle">
+      <span class="visually-hidden"><%= t("trestle.ui.toggle_sidebar", default: "Toggle sidebar") %></span>
     </button>
   </div>
 </aside>

data/frontend/css/components/_alerts.scss

@@ -3,9 +3,7 @@
   align-items: center;
 
   h3 {
-    margin-top: 0;
-    margin-bottom: 2px;
-    font-size: 1.5rem;
+    margin-bottom: 0.125rem;
     font-weight: 600;
   }
 
@@ -13,47 +11,60 @@
     margin-bottom: 0;
   }
 
+  code {
+    color: var(--#{$prefix}alert-color);
+  }
+
   a {
-    color: white;
+    color: var(--#{$prefix}alert-link-color, white);
+
+    &:hover, &:focus {
+      color: var(--#{$prefix}alert-link-hover-color, inherit);
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    --#{$prefix}alert-padding-y: 0.875rem;
   }
 
   @include media-breakpoint-down(sm) {
-    padding: ($alert-padding-y * 0.75) ($alert-padding-x * 0.75);
+    --#{$prefix}alert-padding-x: 0.625rem;
+    --#{$prefix}alert-padding-y: 0.75rem;
 
     h3 {
-      font-size: 1.25rem;
+      font-size: 1.125rem;
     }
 
     p {
-      font-size: 0.85rem;
+      font-size: 0.75rem;
     }
   }
 }
 
 .alert-icon {
-  margin-right: $alert-padding-x;
+  margin-right: var(--#{$prefix}alert-padding-x);
 
-  font-size: 40px;
-  width: 40px;
+  font-size: 2.375rem;
+  width: 2.375rem;
 
   text-align: center;
 
   @include media-breakpoint-down(sm) {
-    margin-left: $alert-padding-x * 0.25;
-    margin-right: $alert-padding-x * 0.75;
+    margin-left: calc(var(--#{$prefix}alert-padding-x) * 0.25);
+    margin-right: calc(var(--#{$prefix}alert-padding-x) * 0.75);
 
-    font-size: 32px;
-    width: 32px;
+    font-size: 2rem;
+    width: 2rem;
   }
 }
 
 .alert-dismissable {
   position: relative;
 
-  .close {
+  .btn-close {
     position: absolute;
-    top: 0.75rem;
-    right: $alert-padding-x;
+    top: calc(var(--#{$prefix}alert-padding-y) * 0.5);
+    right: var(--#{$prefix}alert-padding-x);
 
     color: white;
     opacity: 0.5;
@@ -64,8 +75,7 @@
     }
 
     @include media-breakpoint-down(sm) {
-      top: 0.375rem;
-      right: $alert-padding-x * 0.75;
+      right: calc(var(--#{$prefix}alert-padding-x) * 0.5);
     }
   }
 }
@@ -74,21 +84,11 @@
 // Alert colors
 
 @mixin alert-variant($background, $border, $color) {
-  color: $color;
-  background: $background;
-  border-color: $border;
-
-  a {
-    color: $color;
-
-    &:hover, &:focus {
-      color: mix($color, $background, 80%);
-    }
-  }
-
-  code {
-    color: $color;
-  }
+  --#{$prefix}alert-color: #{$color};
+  --#{$prefix}alert-bg: #{$background};
+  --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{$color};
+  --#{$prefix}alert-link-hover-color: #{mix($color, $background, 80%)};
 }
 
 .alert-success {
@@ -119,6 +119,10 @@
   @include alert-variant($alert-primary-bg, $alert-primary-border, $alert-primary-color);
 }
 
+.alert-secondary {
+  @include alert-variant($alert-secondary-bg, $alert-secondary-border, $alert-secondary-color);
+}
+
 
 // Debug errors
 
@@ -130,15 +134,15 @@
   &:after {
     @include icon-fa($fa-var-caret-down);
     font-size: 0.75rem;
-    margin-left: 5px;
+    margin-left: 0.25rem;
   }
 }
 
 .debug-errors {
   ul {
     list-style: none;
-    margin: 5px 0 0 0;
-    padding: 0 0 0 5px;
+    margin: 0.25rem 0 0 0;
+    padding: 0 0 0 0.25rem;
     border-left: 4px solid rgba(white, 0.25);
   }
 }

data/frontend/css/components/_avatar.scss

@@ -1,11 +1,15 @@
 .avatar {
+  --avatar-bg: #ccc;
+  --avatar-size: 2.5rem;
+  --avatar-fallback-font-size: 0.75rem;
+
   display: inline-block;
   position: relative;
 
-  width: 40px;
-  height: 40px;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
 
-  background: #ccc;
+  background: var(--avatar-bg);
   border-radius: 50%;
   box-shadow: rgba(black, 0.25) 0 1px 0;
 
@@ -37,21 +41,17 @@
     align-items: center;
     justify-content: center;
 
-    font-size: 0.8rem;
+    font-size: var(--avatar-fallback-font-size);
     font-weight: 500;
   }
 }
 
 .avatar-sm {
-  width: 24px !important;
-  height: 24px !important;
+  --avatar-size: 1.5rem;
+  --avatar-fallback-font-size: 0.625rem;
 }
 
 .avatar-lg {
-  width: 64px !important;
-  height: 64px !important;
-
-  .avatar-fallback {
-    font-size: 1.5rem;
-  }
+  --avatar-size: 4rem;
+  --avatar-fallback-font-size: 1.5rem;
 }

data/frontend/css/components/_background.scss

@@ -1,47 +1,19 @@
 %textured-bg {
-  background-image: url(../images/bright-squares.png), linear-gradient(rgba(white, 0.05), rgba(black, 0.05));
+  background-image: var(--theme-texture), var(--theme-gradient);
   background-repeat: repeat, no-repeat;
 }
 
-
-.theme-bg {
-  @extend %textured-bg;
-  background-color: $theme-bg;
-}
-
-
-.theme-bg-dark {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval);
-}
-
-.theme-bg-darker {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval * 2);
+@each $variation, $lightness in $theme-bg-variations {
+  .theme-bg-#{$variation} {
+    @extend %textured-bg;
+    background-color: adjust-theme-hsl(primary, $lightness: $lightness);
+  }
 }
 
-.theme-bg-darkest {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval * 3);
-}
-
-
-.theme-bg-light {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval);
-}
-
-.theme-bg-lighter {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval * 2);
-}
-
-.theme-bg-lightest {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval * 3);
+.theme-bg {
+  @extend .theme-bg-default;
 }
 
-
 .error-bg {
   @extend %textured-bg;
   background-color: $error-bg;

data/frontend/css/components/_badges.scss

@@ -0,0 +1,31 @@
+@mixin badge-variant(
+  $background,
+  $color: color-contrast($background),
+  $hover-background: shift-color($background, $badge-hover-scale)
+) {
+  --#{$prefix}badge-bg: #{$background};
+  --#{$prefix}badge-color: #{$color};
+  --#{$prefix}badge-hover-bg: #{$hover-background};
+}
+
+.badge {
+  background: var(--#{$prefix}badge-bg);
+
+  @at-root a#{&} {
+    &:hover,
+    &:focus {
+      color: var(--#{$prefix}badge-color);
+      background-color: var(--#{$prefix}badge-hover-bg);
+    }
+  }
+}
+
+.badge-pill {
+  border-radius: $border-radius-pill;
+}
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

data/frontend/css/components/_breadcrumbs.scss

@@ -1,40 +1,19 @@
 .breadcrumb {
-  font-size: 0.85rem;
+  --#{$prefix}breadcrumb-font-size: 0.75rem;
+  --#{$prefix}breadcrumb-item-padding-x: 0.35rem;
 
-  .active, .active a {
-    font-weight: normal;
-    color: $breadcrumb-active-color;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    font-size: 0.75rem;
+  @include media-breakpoint-down(md) {
+    --#{$prefix}breadcrumb-font-size: 0.625rem;
+    --#{$prefix}breadcrumb-item-padding-x: 0.25rem;
   }
 }
 
-// Fine-tune spacing between breadcrumb separators
-
 .breadcrumb-item {
-  + .breadcrumb-item {
-    &::before {
-      padding-right: 0.35rem;
-    }
+  a {
+    font-weight: normal;
   }
-}
-
-// Reduce breadcrumb separator spacing on mobile
-
-@include media-breakpoint-down(sm) {
-  .breadcrumb-item {
-    + .breadcrumb-item {
-      padding-left: $breadcrumb-item-padding / 2;
 
-      &::before {
-        padding-right: $breadcrumb-item-padding / 4;
-      }
-    }
+  &.active a {
+    color: inherit;
   }
 }

data/frontend/css/components/_buttons.scss

@@ -3,9 +3,10 @@
 
   &.loading {
     &::before {
+      display: inline-block;
       @include icon-fa($fa-var-spinner);
       @extend .fa-spin;
-      margin-right: 10px;
+      margin-right: 0.625rem;
     }
   }
 
@@ -13,7 +14,7 @@
     font-size: 90%;
 
     + .btn-label {
-      margin-left: 5px;
+      margin-left: 0.25rem;
     }
   }
 }
@@ -22,11 +23,11 @@
 // Alternative delete button (no background color until hover)
 
 .btn-delete {
-  color: theme-color("danger");
+  color: $danger;
 
   &:hover, &:focus {
-    color: color-yiq(theme-color("danger"));
-    background: theme-color("danger");
+    color: color-contrast($danger);
+    background: $danger;
   }
 }
 
@@ -39,7 +40,7 @@
   }
 
   .btn-label {
-    @include sr-only;
+    @include visually-hidden;
   }
 }
 
@@ -125,7 +126,7 @@
 
   @include button-child-visible('icon', '> i') {
     > i + .btn-label {
-      margin-left: 5px;
+      margin-left: 0.25rem;
     }
   };
 

data/frontend/css/components/_datepicker.scss

@@ -4,12 +4,14 @@
   right: 0;
   z-index: 4;
 
-  width: 34px;
-  height: 34px;
-  line-height: 34px;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
   text-align: center;
 
   color: #ccc;
+  background: none;
+  border: none;
 
   &:hover, &:focus {
     color: #aaa;
@@ -47,7 +49,7 @@
     margin-top: $dropdown-spacer;
 
     &::after {
-      border-bottom-color: mix($theme-bg, white, 95%);
+      border-bottom-color: tint-color($theme-bg, 95%);
     }
   }
 
@@ -55,7 +57,7 @@
     margin-top: -$dropdown-spacer;
   }
 
-  &.showTimeInput.hasTime {
+  &.hasTime {
     .flatpickr-time {
       border-radius: 0 0 5px 5px;
     }
@@ -66,7 +68,7 @@
       border-bottom-color: white;
     }
 
-    &.showTimeInput.hasTime {
+    &.hasTime {
       .flatpickr-time {
         border-top: 0;
         border-radius: 5px;
@@ -85,8 +87,10 @@
 
   .flatpickr-prev-month,
   .flatpickr-next-month {
+    line-height: 1;
+
     &:hover svg {
-      fill: lighten(theme-color("primary"), 15%);
+      fill: tint-color($primary, 50%);
     }
   }
 }
@@ -130,16 +134,16 @@ span.flatpickr-weekday {
 .flatpickr-day.selected.nextMonthDay,
 .flatpickr-day.startRange.nextMonthDay,
 .flatpickr-day.endRange.nextMonthDay {
-  background: theme-color("primary");
-  border-color: theme-color("primary");
+  background: var(--primary);
+  border-color: var(--primary);
 }
 
 .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
 .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
-  box-shadow: -10px 0 0 theme-color("primary");
+  box-shadow: -10px 0 0 var(--primary);
 }
 
 .flatpickr-day.week.selected {
-  box-shadow: -5px 0 0 theme-color("primary"), 5px 0 0 theme-color("primary");
+  box-shadow: -5px 0 0 var(--primary), 5px 0 0 var(--primary);
 }