trestle 0.10.0.pre → 0.10.0

data/frontend/css/layout/_sidebar.scss

@@ -1,9 +1,19 @@
 @use "sass:math";
 
+.app-wrapper {
+  --sidebar-width: #{$sidebar-width};
+  --sidebar-width-collapsed: #{$sidebar-width-collapsed};
+  --sidebar-padding: #{$sidebar-padding};
+  --sidebar-padding-collapsed: #{$sidebar-padding-collapsed};
+  --sidebar-transition-duration: #{$sidebar-transition-duration};
+  --sidebar-transition-timing: ease-out;
+  --sidebar-bg: #{$sidebar-bg};
+}
+
 .app-sidebar {
-  background: $sidebar-bg;
+  background: var(--sidebar-bg);
 
-  width: $sidebar-width;
+  width: var(--sidebar-width);
   padding: 0;
 
   flex-shrink: 0;
@@ -15,6 +25,8 @@
   flex-wrap: nowrap;
 
   align-items: stretch;
+
+  transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
 }
 
 .app-sidebar-header {
@@ -25,10 +37,12 @@
   display: flex;
   align-items: stretch;
 
+  overflow: hidden;
+
   .navbar-toggler {
-    --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-bg};
-    --bs-navbar-toggler-color: #{$sidebar-mobile-toggle-border-color};
-    --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-border-color};
+    --#{$prefix}navbar-toggler-bg: #{$sidebar-mobile-toggle-bg};
+    --#{$prefix}navbar-toggler-color: #{$sidebar-mobile-toggle-border-color};
+    --#{$prefix}navbar-toggler-border-color: #{$sidebar-mobile-toggle-border-color};
 
     outline: none;
 
@@ -37,28 +51,29 @@
     margin-left: math.div($grid-gutter-width, 2);
     margin-right: math.div($grid-gutter-width, 2);
 
-    background: var(--bs-navbar-toggler-bg);
+    background: var(--#{$prefix}navbar-toggler-bg);
 
     &:hover, &:focus {
-      --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
-      --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
+      --#{$prefix}navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
+      --#{$prefix}navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
     }
   }
 
   .navbar-toggler-icon {
-    --bs-navbar-toggler-icon-bg: #{$sidebar-mobile-toggle-icon-bg};
+    --#{$prefix}navbar-toggler-icon-bg: #{$sidebar-mobile-toggle-icon-bg};
   }
 }
 
 .app-sidebar-title {
-  flex: 1;
+  flex: 1 0 var(--sidebar-width);
+  width: var(--sidebar-width);
 
   display: flex;
   align-items: center;
 
-  padding: 10px 15px;
+  padding: var(--sidebar-padding);
 
-  font-size: 1.4rem;
+  font-size: 1.25rem;
   font-weight: 500;
   text-shadow: rgba(black, 0.5) 0 1px 1px;
   color: white;
@@ -72,7 +87,7 @@
     max-height: 100%;
 
     & + .title-large {
-      margin-left: 10px;
+      margin-left: 0.75rem;
     }
   }
 
@@ -112,8 +127,9 @@
   color: $sidebar-toggle-color;
   border: none;
 
-  font-size: 1.4rem;
-  padding: 10px 20px;
+  font-size: 1.25rem;
+  width: var(--sidebar-width-collapsed);
+  padding: 0.625rem;
 
   cursor: pointer;
 
@@ -138,19 +154,13 @@
   }
 
   .app-wrapper {
-    margin-left: -$sidebar-width;
-    margin-right: 0;
+    width: calc(100% + var(--sidebar-width));
 
-    &.animate {
-      transition: all $sidebar-transition-duration ease-out;
-      transition-property: margin-left, margin-right;
-    }
-  }
+    translate: calc(var(--sidebar-width) * -1);
+    transition: translate var(--sidebar-transition-duration) ease-out;
 
-  .mobile-nav-expanded {
-    .app-wrapper {
-      margin-left: 0;
-      margin-right: -$sidebar-width;
+    .mobile-nav-expanded & {
+      translate: 0;
     }
   }
 
@@ -161,14 +171,14 @@
   .app-sidebar-header {
     position: absolute;
     top: 0;
-    left: $sidebar-width;
+    left: var(--sidebar-width);
     right: 0;
     z-index: 1;
   }
 
   .app-sidebar-title {
     justify-content: center;
-    padding: 10px 5px;
+    padding: var(--sidebar-padding-collapsed);
 
     // Match right margin with navbar toggler width:
     // (margin + border + font-size * icon-width + padding)
@@ -182,14 +192,17 @@
 
 @include media-breakpoint-between(md, xl) {
   .app-sidebar {
-    width: $sidebar-width-collapsed;
+    width: var(--sidebar-width-collapsed);
 
     .app-sidebar-header {
       text-align: center;
     }
 
     .app-sidebar-title {
-      padding: 10px 5px;
+      width: var(--sidebar-width-collapsed);
+      flex-basis: var(--sidebar-width-collapsed);
+
+      padding: var(--sidebar-padding-collapsed);
       justify-content: center;
 
       img {
@@ -210,14 +223,17 @@
     }
 
     .sidebar-expanded & {
-      width: $sidebar-width;
+      width: var(--sidebar-width);
 
       .app-sidebar-header {
         text-align: left;
       }
 
       .app-sidebar-title {
-        padding: 10px 15px;
+        width: var(--sidebar-width);
+        flex-basis: var(--sidebar-width);
+
+        padding: var(--sidebar-padding);
         justify-content: flex-start;
 
         img {
@@ -243,14 +259,17 @@
 @include media-breakpoint-up(xl) {
   .app-sidebar {
     .sidebar-collapsed & {
-      width: $sidebar-width-collapsed;
+      width: var(--sidebar-width-collapsed);
 
       .app-sidebar-header {
         text-align: center;
       }
 
       .app-sidebar-title {
-        padding: 10px 5px;
+        width: var(--sidebar-width-collapsed);
+        flex-basis: var(--sidebar-width-collapsed);
+
+        padding: var(--sidebar-padding-collapsed);
         justify-content: center;
 
         img {
@@ -272,3 +291,10 @@
     }
   }
 }
+
+@media (prefers-reduced-motion) {
+  .app-sidebar,
+  .app-wrapper {
+    transition: none;
+  }
+}

data/frontend/css/variables/_bootstrap.scss

@@ -23,7 +23,7 @@ $min-contrast-ratio: 1.7;
 $enable-shadows: true;
 
 // Decrease default grid spacing
-$grid-gutter-width: 1.375rem;
+$grid-gutter-width: 1.25rem;
 
 
 // Characters which are escaped by the escape-svg function
@@ -49,15 +49,17 @@ $link-decoration: none;
 $headings-font-weight:   400;
 $headings-margin-bottom: 1rem;
 
-$h1-font-size: 2rem;
-$h2-font-size: 1.75rem;
-$h3-font-size: 1.5rem;
-$h4-font-size: 1.25rem;
-$h5-font-size: 1.1rem;
-$h6-font-size: 1rem;
+$font-size-base: 0.875rem;
+
+$h1-font-size: 1.75rem;
+$h2-font-size: 1.5rem;
+$h3-font-size: 1.25rem;
+$h4-font-size: 1.125rem;
+$h5-font-size: 0.95rem;
+$h6-font-size: 0.875rem;
 
 $hr-color: rgba(black, 0.375);
-$hr-margin-y: 1.5rem;
+$hr-margin-y: 1.25rem;
 
 
 // Navs
@@ -80,8 +82,11 @@ $nav-tabs-link-active-color: $body-color;
 
 // Navbar
 
-$navbar-toggler-padding-x: 0.4rem;
-$navbar-dark-color:        rgba(white, 0.75);
+$navbar-light-color: rgba(white, 0.75);
+$navbar-dark-color:  rgba(white, 0.75);
+
+$navbar-toggler-padding-x:   0.375rem;
+$navbar-toggler-focus-width: 0.25rem;
 
 
 // Breadcrumbs
@@ -94,7 +99,7 @@ $breadcrumb-divider-color: #cccccc;
 
 // Tables
 
-$table-cell-padding-x: 0.625rem;
+$table-cell-padding-x: 0.5rem;
 $table-cell-padding-y: 0.375rem;
 
 $table-bg:           transparent;
@@ -105,7 +110,7 @@ $table-border-color: rgba(black, 0.13);
 
 // Alerts
 
-$alert-padding-y:     1.5rem;
+$alert-padding-y:     1.25rem;
 $alert-border-radius: 0.1rem;
 
 
@@ -134,7 +139,8 @@ $badge-padding-x: 0.6em;
 
 // Buttons
 
-$btn-padding-x-sm: 0.65rem;
+$btn-padding-x-sm: 0.625rem;
+$btn-padding-y-sm: 0.25rem;
 
 
 // Forms
@@ -163,7 +169,7 @@ $form-check-padding-start: $form-check-input-width + 0.6em;
 $form-switch-width: 2.25em;
 $form-switch-focus-color: #aaaaaa;
 
-$form-select-padding-x-sm: 0.62rem;
+$form-select-padding-x-sm: 0.625rem;
 $form-select-padding-x-lg: 0.75rem;
 
 
@@ -175,7 +181,7 @@ $dropdown-box-shadow:        $box-shadow-sm;
 $dropdown-arrow-width:       7px;
 $dropdown-arrow-outer-width: $dropdown-arrow-width + 1px;
 $dropdown-header-color:      #111111;
-$dropdown-font-size:         0.9rem;
+$dropdown-font-size:         0.8125rem;
 
 $dropdown-link-active-bg:    var(--primary);
 
@@ -208,24 +214,27 @@ $tooltip-color: white;
 
 // Popovers
 
-$popover-font-size:      0.9rem;
+$popover-font-size:      0.75rem;
 $popover-box-shadow:     $dropdown-box-shadow;
 
 $popover-header-bg:      #f7f7f7;
 $popover-header-border:  #ebebeb;
 
+$popover-header-padding-x: 0.625rem;
+$popover-header-padding-y: 0.375rem;
+
+$popover-body-padding-x: 0.625rem;
 $popover-body-padding-y: 0.5rem;
-$popover-body-padding-x: 0.75rem;
 
 $popover-arrow-width:    $dropdown-arrow-width;
 
 
 // Modals
 
-$modal-inner-padding:    1.5rem;
+$modal-inner-padding:    1.25rem;
 
-$modal-header-padding-x: 1.5rem;
-$modal-header-padding-y: 1.05rem;
+$modal-header-padding-x: 1.25rem;
+$modal-header-padding-y: 1rem;
 
 $modal-content-bg: white;
 $modal-content-border-radius: 0;
@@ -262,7 +271,7 @@ $s2bs5-clear-hover-bg-lg: $s2bs5-clear-bg-lg;
 $s2bs5-clear-tag-icon:    $btn-close-bg;
 $s2bs5-clear-tag-bg:      transparent escape-svg($s2bs5-clear-tag-icon) center / $s2b25-clear-height-sm auto no-repeat;
 
-$s2bs5-padding-x: 0.75rem;
+$s2bs5-padding-x: 0.625rem;
 $s2bs5-padding-y: 0.375rem;
 
 $s2bs5-multi-item-padding-x: 0.375rem;

data/frontend/css/variables/_trestle.scss

@@ -21,7 +21,7 @@ $theme-bg-variations: (
 $header-bg:    white;
 $header-color: #333333;
 
-$header-height: 50px;
+$header-height: 3.125rem;
 
 
 // Footer
@@ -29,13 +29,15 @@ $header-height: 50px;
 $footer-bg:    #f9f9f9;
 $footer-color: #888888;
 
+$footer-padding: 0.375rem 1.25rem;
+
 
 // Sidebar
 
 $sidebar-bg:            #222222;
 $sidebar-hover-bg:      #1a1a1a;
 $sidebar-active-bg:     #393939;
-$sidebar-active-border: 4px;
+$sidebar-active-border: 0.25rem;
 
 $sidebar-link-color:  #919191;
 $sidebar-group-color: #595959;
@@ -56,10 +58,13 @@ $sidebar-mobile-toggle-active-border-width: $sidebar-mobile-toggle-border-width;
 $sidebar-mobile-toggle-active-border-color: $sidebar-mobile-toggle-border-color;
 $sidebar-mobile-toggle-active-border:       $sidebar-mobile-toggle-border-width solid $sidebar-mobile-toggle-active-border-color;
 
-$sidebar-width:           250px;
-$sidebar-width-collapsed: 54px;
+$sidebar-width:           15.625rem;
+$sidebar-width-collapsed: 3.5rem;
+
+$sidebar-padding:           0.5rem 0.875rem;
+$sidebar-padding-collapsed: 0.5rem 0.25rem;
 
-$sidebar-transition-duration: 250ms;
+$sidebar-transition-duration: 200ms;
 
 
 // Content
@@ -67,23 +72,21 @@ $sidebar-transition-duration: 250ms;
 $content-header-bg:  #fafafa;
 $content-sidebar-bg: #f9f9f9;
 
-$content-sidebar-width: 285px;
+$content-sidebar-width: 17.5rem;
 
-$main-content-header-bg:      $content-sidebar-bg;
-$main-content-header-padding: 12px 20px;
-$main-content-header-border:  1px solid rgba(black, 0.1);
+$main-content-header-bg:     $content-sidebar-bg;
+$main-content-header-border: 1px solid rgba(black, 0.1);
 
-$main-content-footer-bg:      $content-sidebar-bg;
-$main-content-footer-padding: 12px 20px;
-$main-content-footer-border:  1px solid rgba(black, 0.1);
+$main-content-footer-bg:     $content-sidebar-bg;
+$main-content-footer-border: 1px solid rgba(black, 0.1);
 
 
 // Typography
 
 $headings-border: 1px solid rgba(black, 0.1);
 
-$header-font-size-scale: 0.925;
-$sidebar-font-size-scale: 0.925;
+$header-font-size-scale: 0.8125;
+$sidebar-font-size-scale: 0.8125;
 
 $badge-hover-scale: -15%;
 
@@ -96,13 +99,13 @@ $tag-border-scale:       0;
 $tag-hover-bg-scale:     -15%;
 $tag-hover-border-scale: 15%;
 
-$tag-spacing-x: 0.325rem;
-$tag-spacing-y: 0.25rem;
+$tag-spacing-x: 0.25rem;
+$tag-spacing-y: 0.2rem;
 
 
 // Scopes
 
-$scope-padding:      0.25rem 0.675rem;
+$scope-padding:      0.2rem 0.625rem;
 
 $scope-color:        rgba(black, 0.4);
 $scope-bg:           rgba(black, 0.035);

data/frontend/js/controllers/batch_action_controller.js

@@ -0,0 +1,59 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  static outlets = ['checkbox-select']
+
+  connect () {
+    if (!this.hasCheckboxSelectOutlet) {
+      // Set default outlet if none specified
+      this.element.setAttribute(`data-${this.identifier}-checkbox-select-outlet`, '.trestle-table')
+    }
+
+    this.baseHref = this.element.href
+
+    this.update()
+  }
+
+  update () {
+    this.toggleEnabled()
+    this.updateHref()
+  }
+
+  toggleEnabled () {
+    this.element.classList.toggle('disabled', this.checkboxes.length === 0)
+  }
+
+  updateHref () {
+    this.element.href = this.hrefWithSelectedIds
+  }
+
+  get checkboxes () {
+    if (this.hasCheckboxSelectOutlet) {
+      return this.checkboxSelectOutlet.checked
+    } else {
+      return []
+    }
+  }
+
+  get selectedIds () {
+    return this.checkboxes.map(c => c.value)
+  }
+
+  get hrefWithSelectedIds () {
+    const ids = this.selectedIds
+
+    if (ids.length) {
+      return `${this.baseHref}?ids=${ids.join(',')}`
+    } else {
+      return this.baseHref
+    }
+  }
+
+  checkboxSelectOutletConnected (outlet, element) {
+    element.addEventListener('checkbox-select:change', this.update.bind(this))
+  }
+
+  checkboxSelectOutletDisconnected (outlet, element) {
+    element.removeEventListener('checkbox-select:change', this.update.bind(this))
+  }
+}

data/frontend/js/controllers/checkbox_select_controller.js

@@ -5,6 +5,7 @@ export default class extends ApplicationController {
 
   toggle () {
     this.updateSelectAllState()
+    this.dispatch('change')
   }
 
   toggleAll () {
@@ -13,6 +14,8 @@ export default class extends ApplicationController {
     this.checkboxTargets.forEach((checkbox) => {
       checkbox.checked = isChecked
     })
+
+    this.dispatch('change')
   }
 
   updateSelectAllState () {

data/frontend/js/controllers/confirm_delete_controller.js

@@ -3,9 +3,9 @@ import ConfirmController from './confirm_controller'
 import { i18n } from '../core/i18n'
 
 export default class extends ConfirmController {
-  static values = {
-    confirmLabel: i18n['trestle.confirmation.delete'] || 'Delete'
-  }
-
   static defaultConfirmClass = 'btn-danger'
+
+  get confirmLabel () {
+    return this.confirmLabelValue || i18n.t('trestle.confirmation.delete', { defaultValue: 'Delete' })
+  }
 }

data/frontend/js/controllers/gallery_controller.js

@@ -1,6 +1,8 @@
 import LightboxController from './lightbox_controller'
 
 export default class extends LightboxController {
+  static targets = ["image"]
+
   get options () {
     return {
       ...super.options,

data/frontend/js/controllers/lightbox_controller.js

@@ -26,8 +26,6 @@ const VideoIframeUrl = {
 }
 
 export default class extends ApplicationController {
-  static targets = ["image"]
-
   static values = {
     animationType: { type: String, default: 'zoom' },
     animationDuration: { type: Number, default: 150 },

data/lib/trestle/engine.rb

@@ -1,3 +1,5 @@
+require "turbo-rails"
+
 module Trestle
   class Engine < ::Rails::Engine
     isolate_namespace Trestle
@@ -30,22 +32,6 @@ module Trestle
       end
     end
 
-    initializer "turbo.mimetype" do
-      Mime::Type.register "text/vnd.turbo-stream.html", :turbo_stream unless Mime[:turbo_stream]
-    end
-
-    initializer "turbo.renderer" do
-      ActiveSupport.on_load(:action_controller) do
-        # Compatibility fix for Rails 5.2
-        delegate :media_type, to: "@_response" unless instance_methods.include?(:media_type)
-
-        ActionController::Renderers.add :turbo_stream do |turbo_streams_html, options|
-          self.content_type = Mime[:turbo_stream] if media_type.nil?
-          turbo_streams_html
-        end
-      end
-    end
-
     config.to_prepare do
       Engine.reset_helpers!
     end
@@ -55,6 +41,22 @@ module Trestle
       reloader.install(app) unless app.config.eager_load
     end
 
+    # For compatibility with the `sassc-rails`` gem, register a custom compressor that excludes the
+    # Trestle admin stylesheets as a) they are already minimized and b) libsass is not compatible with
+    # some of the newer CSS syntax that is used.
+    #
+    # To avoid this being necessary, it is recommended that either
+    #   1) `sassc-rails` is removed from the Gemfile (if not required),
+    #   2) the `sassc-embedded` gem is added to the Gemfile, or
+    #   3) `sassc-rails` is replaced with `dartsass-sprockets`
+    config.assets.configure do |env|
+      if original_compressor = config.assets.css_compressor
+        require "trestle/sprockets_compressor"
+        original_compressor = Sprockets.compressors['text/css'][original_compressor] if original_compressor.is_a?(Symbol)
+        config.assets.css_compressor = Trestle::SprocketsCompressor.new(original_compressor)
+      end
+    end if defined?(SassC::Rails)
+
     def reset_helpers!
       @helpers = nil
     end

data/lib/trestle/form/renderer.rb

@@ -14,7 +14,7 @@ module Trestle
       include Hook::Helpers
 
       # Whitelisted helpers will concatenate their result to the output buffer when called.
-      WHITELISTED_HELPERS = [:row, :col, :render, :tab, :table, :divider, :h1, :h2, :h3, :h4, :h5, :h6, :card, :panel, :well]
+      WHITELISTED_HELPERS = [:row, :col, :render, :tab, :table, :divider, :h1, :h2, :h3, :h4, :h5, :h6, :card, :panel, :well, :turbo_frame_tag]
 
       # Raw block helpers will pass their block argument directly to the method without wrapping it in a new output buffer.
       RAW_BLOCK_HELPERS = [:table, :toolbar]

data/lib/trestle/resource/toolbar.rb

@@ -5,20 +5,30 @@ module Trestle
         delegate :admin, :instance, to: :@template
         delegate :translate, :t, to: :admin
 
-        def new
-          link(t("buttons.new", default: "New %{model_name}"), action: :new, style: :light, icon: "fa fa-plus", class: "btn-new-resource") if action?(:new)
+        def new(label: t("buttons.new", default: "New %{model_name}"), **attrs)
+          return unless action?(:new)
+
+          defaults = { action: :new, style: :light, icon: "fa fa-plus", class: "btn-new-resource" }
+          link(label, defaults.merge(attrs))
         end
 
-        def save
-          button(t("buttons.save", default: "Save %{model_name}"), style: :success)
+        def save(label: t("buttons.save", default: "Save %{model_name}"), **attrs)
+          defaults = { style: :success }
+          button(label, defaults.merge(attrs))
         end
 
-        def delete
-          link(t("buttons.delete", default: "Delete %{model_name}"), instance, action: :destroy, style: :danger, icon: "fa fa-trash", data: { turbo_method: "delete", controller: "confirm-delete", confirm_delete_placement_value: "bottom" }) if action?(:destroy)
+        def delete(label: t("buttons.delete", default: "Delete %{model_name}"), **attrs)
+          return unless action?(:destroy)
+
+          defaults = Trestle::Options.new(action: :destroy, style: :danger, icon: "fa fa-trash", data: { turbo_method: "delete", turbo_frame: "_top", controller: "confirm-delete", confirm_delete_placement_value: "bottom" })
+          link(label, instance, defaults.merge(attrs))
         end
 
-        def dismiss
-          button(t("buttons.ok", default: "OK"), style: :light, data: { bs_dismiss: "modal" }) if @template.modal_request?
+        def dismiss(label: t("buttons.ok", default: "OK"), **attrs)
+          return unless @template.modal_request?
+
+          defaults = Trestle::Options.new(type: :button, style: :light, data: { bs_dismiss: "modal" })
+          button(label, defaults.merge(attrs))
         end
         alias ok dismiss
 

data/lib/trestle/sprockets_compressor.rb

@@ -0,0 +1,16 @@
+module Trestle
+  class SprocketsCompressor
+    def initialize(original_compressor, excluded_files: ["trestle/admin"])
+      @original_compressor = original_compressor
+      @excluded_files = excluded_files
+    end
+
+    def call(input)
+      if @excluded_files.include?(input[:name])
+        input[:data]
+      else
+        @original_compressor.call(input)
+      end
+    end
+  end
+end

data/lib/trestle/toolbar/context.rb

@@ -21,11 +21,10 @@ module Trestle
       end
 
     private
-      def respond_to_missing?(name, include_all=false)
-        builder.respond_to?(name) || super
-      end
+      def self.ruby2_keywords(*)
+      end unless respond_to?(:ruby2_keywords, true)
 
-      def method_missing(name, *args, &block)
+      ruby2_keywords def method_missing(name, *args, &block)
         result = builder.send(name, *args, &block)
 
         if builder.builder_methods.include?(name)
@@ -34,6 +33,10 @@ module Trestle
           result
         end
       end
+
+      def respond_to_missing?(name, include_all=false)
+        builder.respond_to?(name) || super
+      end
     end
   end
 end