trestle 0.9.9 → 0.10.0

data/frontend/css/variables/_bootstrap.scss

@@ -1,17 +1,13 @@
 // Color system
 
-$theme-colors: (
-  "primary": #4d6bb2,
-  "success": #7dc67d,
-  "info":    #7ccde5,
-  "warning": #f3bd71,
-  "danger":  #e17572,
-  "light":   #bbbbbb,
-  "dark":    #444444,
-
-  // Backwards compatibility
-  "default": #bbbbbb
-);
+$primary:   #4d6bb2;
+$secondary: #6c757d;
+$success:   #7dc67d;
+$info:      #7ccde5;
+$warning:   #f3bd71;
+$danger:    #e17572;
+$light:     #bbbbbb;
+$dark:      #444444;
 
 
 // Body
@@ -20,78 +16,121 @@ $body-bg:    #f3f3f3;
 $body-color: #333333;
 
 
-// Set a specific jump point for requesting color jumps
-$theme-color-interval: 5% !default;
-
-// Increase default color threshold for light vs dark
-$yiq-contrasted-threshold: 200;
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
+$min-contrast-ratio: 1.7;
 
 // Enable box shadows
 $enable-shadows: true;
 
 // Decrease default grid spacing
-$grid-gutter-width: 10px * 2;
+$grid-gutter-width: 1.25rem;
+
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+
+// Components
+
+$box-shadow: soft-shadow(1rem, 1.5em, rgba(black, 0.25));
+$box-shadow-sm: soft-shadow(0.5rem, 0.75em, rgba(black, 0.075), $layers: 4);
 
 
 // Typography
 
+$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-margin-y: 1.5rem;
+$hr-color: rgba(black, 0.375);
+$hr-margin-y: 1.25rem;
 
 
 // Navs
 
+$nav-pills-link-active-bg: var(--primary);
+
 $nav-tabs-border-radius: 0;
 $nav-tabs-border-width:  0;
 
-$nav-tabs-link-bg:    #eeeeee;
-$nav-tabs-link-color: #555555;
+// (non-Bootstrap variables)
+$nav-tabs-link-bg:          #eeeeee;
+$nav-tabs-link-color:       #555555;
+$nav-tabs-link-hover-bg:    #eaeaea;
+$nav-tabs-link-hover-color: #505050;
+$nav-tabs-link-transition:  color .1s ease-in-out, background-color .1s ease-in-out;
 
-$nav-tabs-link-active-bg:  white;
+$nav-tabs-link-active-bg:    white;
 $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
 
 $breadcrumb-padding-y:     0;
 $breadcrumb-padding-x:     0;
-$breadcrumb-bg:            transparent;
 $breadcrumb-active-color:  #777777;
 $breadcrumb-divider-color: #cccccc;
 
 
 // Tables
 
-$table-cell-padding: 6px 8px;
-$table-accent-bg:    rgba(black, 0.02);
+$table-cell-padding-x: 0.5rem;
+$table-cell-padding-y: 0.375rem;
+
+$table-bg:           transparent;
+$table-striped-bg:   rgba(black, 0.02);
 $table-hover-bg:     rgba(black, 0.04);
 $table-border-color: rgba(black, 0.13);
 
-$table-bg-level:     -11;
-$table-border-level: -7;
-
 
 // Alerts
 
-$alert-padding-y:     1.5rem;
+$alert-padding-y:     1.25rem;
 $alert-border-radius: 0.1rem;
 
 
+// Progress bars
+
+$progress-bar-bg: var(--primary);
+
+
+// List group
+
+$list-group-bg: white;
+$list-group-active-bg: var(--primary);
+
+
+// Close
+
+$btn-close-color: white;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+
+
 // Badges
 
 $badge-padding-y: 0.35em;
@@ -100,44 +139,60 @@ $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
 
-$input-border-color: #cccccc;
+$input-bg:           white;
 $input-disabled-bg:  #fafafa;
 
-$input-box-shadow: none;
+$input-border-color: #cccccc;
 
 $input-placeholder-color: #999999;
 
 $input-group-addon-bg: #eeeeee;
 
-$form-feedback-invalid-color: darken(theme-color("danger"), 20%);
+$form-feedback-invalid-color: shade-color($danger, 10%);
 
 $form-feedback-margin-top: 0.5rem;
 $form-feedback-font-size:  90%;
 
+$form-label-font-weight: bold;
+
 $form-text-color: #666666;
 
-$custom-control-indicator-size:         1.15rem;
-$custom-control-indicator-border-width: 1px;
+$form-check-input-width: 1.25em;
+$form-check-padding-start: $form-check-input-width + 0.6em;
 
-$custom-control-gutter: 0.6rem;
+$form-switch-width: 2.25em;
+$form-switch-focus-color: #aaaaaa;
 
-$custom-switch-width: 2.25rem;
-$custom-switch-indicator-size: calc(#{em($custom-control-indicator-size)} - #{$custom-control-indicator-border-width * 4}) !default;
+$form-select-padding-x-sm: 0.625rem;
+$form-select-padding-x-lg: 0.75rem;
 
 
 // Dropdowns
 
+$dropdown-bg:                white;
 $dropdown-spacer:            0.5rem;
-$dropdown-box-shadow:        0 3px 6px rgba(black, 0.175);
+$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);
+
+$dropdown-dark-bg:           #222222;
+$dropdown-dark-divider-bg:   rgba(white, 0.15);
+
+
+// Pagination
+
+$pagination-bg:          white;
+$pagination-disabled-bg: white;
 
 
 // Cards
@@ -146,20 +201,42 @@ $card-bg:            rgba(white, 0.5);
 $card-border-radius: 0;
 
 
+// Accordion
+
+$accordion-bg:                white;
+$accordion-icon-active-color: #111111;
+
+
+// Tooltips
+
+$tooltip-color: white;
+
+
 // Popovers
 
-$popover-box-shadow:  $dropdown-box-shadow;
-$popover-arrow-width: $dropdown-arrow-width;
-$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-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;
 $modal-content-border-width:  0;
 
@@ -172,4 +249,30 @@ $modal-lg: 900px;
 
 // Select2 Bootstrap Theme
 
-$s2bs-btn-default-border: #cccccc;
+$s2bs5-border-color: #ced4da;
+
+$s2bs5-item-active-bg: tint-color($primary, 90%);
+
+$s2b25-clear-width: 0.5rem;
+$s2b25-clear-height: 0.5rem;
+$s2b25-clear-height-sm: 0.5rem;
+$s2b25-clear-height-lg: 1rem;
+
+$s2bs5-clear-icon:        str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)});
+$s2bs5-clear-bg:          transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height auto no-repeat;
+$s2bs5-clear-hover-bg:    $s2bs5-clear-bg;
+
+$s2bs5-clear-bg-sm:       transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height-sm auto no-repeat;
+$s2bs5-clear-hover-bg-sm: $s2bs5-clear-bg-sm;
+
+$s2bs5-clear-bg-lg:       transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height-lg auto no-repeat;
+$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.625rem;
+$s2bs5-padding-y: 0.375rem;
+
+$s2bs5-multi-item-padding-x: 0.375rem;
+$s2bs5-multi-item-padding-y: 0;

data/frontend/css/variables/_maps.scss

@@ -0,0 +1,15 @@
+// Update color maps
+
+$custom-colors: (
+  // Backwards compatibility
+  "default": #bbbbbb
+);
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+
+// Disable box shadows on form controls.
+// This is done after importing the default Bootstrap variables as a null value would be overwritten.
+
+$input-box-shadow: null;
+$form-select-box-shadow: null;

data/frontend/css/variables/_trestle.scss

@@ -1,7 +1,19 @@
 // Default theme
 
-$theme-bg: theme-color("primary");
-$error-bg: theme-color("danger");
+$theme-bg: $primary;
+$error-bg: $danger;
+
+$theme-bg-variations: (
+  default:  -20%,
+
+  dark:     -35%,
+  darker:   -50%,
+  darkest:  -65%,
+
+  light:    0,
+  lighter:  15%,
+  lightest: 30%
+);
 
 
 // Header
@@ -9,7 +21,7 @@ $error-bg: theme-color("danger");
 $header-bg:    white;
 $header-color: #333333;
 
-$header-height: 50px;
+$header-height: 3.125rem;
 
 
 // Footer
@@ -17,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;
@@ -31,21 +45,26 @@ $sidebar-group-color: #595959;
 $sidebar-toggle-bg:    rgba(black, 0.25);
 $sidebar-toggle-color: rgba(white, 0.5);
 
-$sidebar-mobile-toggle-bg:     transparent;
-$sidebar-mobile-toggle-color:  white;
-$sidebar-mobile-toggle-border: 1px solid rgba($sidebar-mobile-toggle-color, 0.15);
+$sidebar-mobile-toggle-color:   white;
+$sidebar-mobile-toggle-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$sidebar-mobile-toggle-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
 
-$sidebar-mobile-toggle-active-bg:     rgba($sidebar-mobile-toggle-color, 0.1);
-$sidebar-mobile-toggle-active-border: $sidebar-mobile-toggle-border;
+$sidebar-mobile-toggle-bg:           transparent;
+$sidebar-mobile-toggle-border-width: 1px;
+$sidebar-mobile-toggle-border-color: rgba($sidebar-mobile-toggle-color, 0.15);
+$sidebar-mobile-toggle-border:       $sidebar-mobile-toggle-border-width solid $sidebar-mobile-toggle-border-color;
 
-$sidebar-mobile-toggle-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$sidebar-mobile-toggle-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
+$sidebar-mobile-toggle-active-bg:           rgba($sidebar-mobile-toggle-color, 0.1);
+$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-transition-duration: 250ms;
+$sidebar-padding:           0.5rem 0.875rem;
+$sidebar-padding-collapsed: 0.5rem 0.25rem;
 
-$sidebar-font-size-scale: 0.925;
+$sidebar-transition-duration: 200ms;
 
 
 // Content
@@ -53,31 +72,40 @@ $sidebar-font-size-scale: 0.925;
 $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-border: 1px solid rgba(black, 0.1);
 
-$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-footer-bg:     $content-sidebar-bg;
+$main-content-footer-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);
+
+// Typography
+
+$headings-border: 1px solid rgba(black, 0.1);
+
+$header-font-size-scale: 0.8125;
+$sidebar-font-size-scale: 0.8125;
+
+$badge-hover-scale: -15%;
 
 
 // Tags
 
-$tag-color:        white;
-$tag-bg:           lighten(theme-color("primary"), 10%);
-$tag-border:       theme-color("primary");
+$tag-bg-scale:           -30%;
+$tag-border-scale:       0;
+
+$tag-hover-bg-scale:     -15%;
+$tag-hover-border-scale: 15%;
 
-$tag-hover-color:  white;
-$tag-hover-bg:     theme-color("primary");
-$tag-hover-border: darken(theme-color("primary"), 10%);
+$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);
@@ -101,25 +129,29 @@ $alert-danger-bg:      #de7471;
 $alert-danger-color:   white;
 $alert-danger-border:  #d85956;
 
-$alert-info-bg:        darken(theme-color("info"), 10%);
+$alert-info-bg:        shade-color($info, 10%);
 $alert-info-color:     white;
-$alert-info-border:    darken($alert-info-bg, 10%);
+$alert-info-border:    shade-color($alert-info-bg, 5%);
 
-$alert-warning-bg:     darken(theme-color("warning"), 5%);
+$alert-warning-bg:     shade-color($warning, 5%);
 $alert-warning-color:  white;
-$alert-warning-border: darken($alert-warning-bg, 5%);
+$alert-warning-border: shade-color($alert-warning-bg, 5%);
 
-$alert-light-bg:       theme-color("light");
+$alert-light-bg:       $light;
 $alert-light-color:    $body-color;
-$alert-light-border:   darken($alert-light-bg, 5%);
+$alert-light-border:   shade-color($alert-light-bg, 5%);
 
-$alert-dark-bg:        theme-color("dark");
+$alert-dark-bg:        $dark;
 $alert-dark-color:     white;
-$alert-dark-border:    darken($alert-dark-bg, 10%);
+$alert-dark-border:    shade-color($alert-dark-bg, 20%);
 
-$alert-primary-bg:     darken(theme-color("primary"), 5%);
+$alert-primary-bg:     shade-color($primary, 10%);
 $alert-primary-color:  white;
-$alert-primary-border: darken($alert-primary-bg, 10%);
+$alert-primary-border: shade-color($alert-primary-bg, 10%);
+
+$alert-secondary-bg:     shade-color($secondary, 10%);
+$alert-secondary-color:  white;
+$alert-secondary-border: shade-color($alert-secondary-bg, 10%);
 
 
 // Modals

data/frontend/js/controllers/application_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+import { fetchWithErrorHandling, fetchTurboStream } from '../core/fetch'
+
+export default class extends Controller {
+  fetch (url, options = {}) {
+    return fetchWithErrorHandling(url, options)
+  }
+
+  fetchTurboStream (url, options = {}) {
+    return fetchTurboStream(url, options)
+  }
+
+  get csrfToken () {
+    return document.querySelector("[name='csrf-token']").content
+  }
+}

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

@@ -0,0 +1,46 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  static targets = ['checkbox', 'selectAll']
+
+  toggle () {
+    this.updateSelectAllState()
+    this.dispatch('change')
+  }
+
+  toggleAll () {
+    const isChecked = this.selectAllTarget.checked
+
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.checked = isChecked
+    })
+
+    this.dispatch('change')
+  }
+
+  updateSelectAllState () {
+    const checked = this.checked
+    const checkboxes = this.checkboxTargets
+
+    if (checked.length === checkboxes.length) {
+      // All checked
+      this.selectAllTarget.indeterminate = false
+      this.selectAllTarget.checked = true
+    } else if (checked.length == 0) {
+      // None checked
+      this.selectAllTarget.indeterminate = false
+      this.selectAllTarget.checked = false
+    } else {
+      // Some checked
+      this.selectAllTarget.indeterminate = true
+    }
+  }
+
+  get checked () {
+    return this.checkboxTargets.filter((checkbox) => checkbox.checked)
+  }
+
+  get unchecked () {
+    return this.checkboxTargets.filter((checkbox) => !checkbox.checked)
+  }
+}