trestle 0.9.0 → 0.9.8

data/config/locales/vi.yml

@@ -0,0 +1,101 @@
+vi:
+  trestle:
+    title: "Trestle Admin"
+    footer: "Powered by Trestle"
+    version: "Version"
+
+    helpers:
+      page_entries_info:
+        one_page:
+          display_entries:
+            zero: "Không có %{entry_name} được tìm thấy"
+            one: "Hiển thị <strong>1</strong> %{entry_name}"
+            other: "Hiển thị <strong>tất cả %{count}</strong> %{entry_name}"
+
+        more_pages:
+          display_entries: "Hiển thị %{entry_name} <strong>%{first}&nbsp;-&nbsp;%{last}</strong> của <b>%{total}</b>"
+
+    onboarding:
+      welcome: "Welcome to Trestle"
+      no_admins: "To begin, please create an admin within <code>app/admin</code>."
+      no_template: "To customize this template, please create <code>%{path}</code>."
+      no_form: "Please define a form block or create a <code>_form.html</code> partial."
+
+    ui:
+      toggle_navigation: "Toggle navigation"
+      toggle_sidebar: "Toggle sidebar"
+      toggle_dropdown: "Toggle dropdown"
+
+    dialog:
+      error: "Yêu cầu chưa hoàn thành."
+
+    confirmation:
+      title: "Bạn có chắc?"
+      delete: "Xoá"
+      cancel: "Huỷ"
+
+    file:
+      choose_file: "Chọn tập tin..."
+      browse: "Tải lên"
+
+  admin:
+    titles:
+      index: "Danh sách %{pluralized_model_name}"
+      new: "Tạo mới %{model_name}"
+      edit: Chỉnh sửa %{model_name}"
+
+    buttons:
+      new: "Tạo mới %{model_name}"
+      save: "Lưu %{model_name}"
+      delete: "Xoá %{model_name}"
+      show: "Xem %{model_name}"
+      edit: "Chỉnh sửa %{model_name}"
+      ok: "Đồng ý"
+
+    breadcrumbs:
+      home: "Trang Chủ"
+
+    flash:
+      create:
+        success:
+          title: "Thành công!"
+          message: "%{lowercase_model_name} được tạo mới thành công!"
+
+        failure:
+          title: "Cảnh báo!"
+          message: "Vui lòng chính xác các thông tin bên dưới!"
+
+      update:
+        success:
+          title: "Thành công!"
+          message: "%{lowercase_model_name} đã được cập nhật thành công!"
+
+        failure:
+          title: "Cảnh báo!"
+          message: "Vui lòng chính xác các thông tin bên dưới!."
+
+      destroy:
+        success:
+          title: "Thành công!"
+          message: "%{lowercase_model_name} đã được xoá thành công!"
+
+        failure:
+          title: "Cảnh báo!"
+          message: "Không thể xoá %{lowercase_model_name}."
+
+    table:
+      headers:
+        id: "ID"
+
+    form:
+      select:
+        prompt: "- Chọn %{attribute_name} -"
+
+    format:
+      blank: "Chưa có"
+
+    datepicker:
+      formats:
+        date: "m/d/Y"
+        datetime: "m/d/Y h:i K"
+        time: "h:i K"

data/config/routes.rb

@@ -1,5 +1,5 @@
 Trestle::Engine.routes.draw do
-  Trestle.admins.each do |name, admin|
+  Trestle.registry.each do |admin|
     instance_eval(&admin.routes)
   end
 

data/frontend/css/components/_alerts.scss

@@ -32,13 +32,18 @@
 
 .alert-icon {
   margin-right: $alert-padding-x;
+
   font-size: 40px;
+  width: 40px;
+
+  text-align: center;
 
   @include media-breakpoint-down(sm) {
     margin-left: $alert-padding-x * 0.25;
     margin-right: $alert-padding-x * 0.75;
 
     font-size: 32px;
+    width: 32px;
   }
 }
 
@@ -74,10 +79,16 @@
   border-color: $border;
 
   a {
+    color: $color;
+
     &:hover, &:focus {
       color: mix($color, $background, 80%);
     }
   }
+
+  code {
+    color: $color;
+  }
 }
 
 .alert-success {
@@ -88,6 +99,26 @@
   @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-color);
 }
 
+.alert-info {
+  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-color);
+}
+
+.alert-warning {
+  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-color);
+}
+
+.alert-light {
+  @include alert-variant($alert-light-bg, $alert-light-border, $alert-light-color);
+}
+
+.alert-dark {
+  @include alert-variant($alert-dark-bg, $alert-dark-border, $alert-dark-color);
+}
+
+.alert-primary {
+  @include alert-variant($alert-primary-bg, $alert-primary-border, $alert-primary-color);
+}
+
 
 // Debug errors
 

data/frontend/css/components/_avatar.scss

@@ -41,3 +41,17 @@
     font-weight: 500;
   }
 }
+
+.avatar-sm {
+  width: 24px !important;
+  height: 24px !important;
+}
+
+.avatar-lg {
+  width: 64px !important;
+  height: 64px !important;
+
+  .avatar-fallback {
+    font-size: 1.5rem;
+  }
+}

data/frontend/css/components/_buttons.scss

@@ -1,5 +1,4 @@
 .btn {
-  border-width: 0;
   box-shadow: none;
 
   &.loading {

data/frontend/css/components/_datepicker.scss

@@ -13,6 +13,7 @@
 
   &:hover, &:focus {
     color: #aaa;
+    text-decoration: none;
   }
 
   &::before {

data/frontend/css/components/_fields.scss

@@ -12,6 +12,12 @@
   }
 }
 
+ul.invalid-feedback {
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
 .form-text {
   color: $form-text-color;
   font-size: 0.9rem;

data/frontend/css/components/_modal.scss

@@ -24,6 +24,8 @@
   }
 
   &.background {
+    overflow-y: hidden;
+
     .modal-dialog {
       transform: scale(0.9);
       opacity: 0.75;

data/frontend/css/components/_scopes.scss

@@ -1,44 +1,89 @@
 .scopes {
-  list-style: none;
-
-  margin-top: -0.25rem;
   margin-bottom: 0;
 
-  padding: 0;
+  dd {
+    margin-bottom: 0;
+  }
+
+  &.grouped {
+    @include media-breakpoint-up(md) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+    }
+
+
+    @include media-breakpoint-down(sm) {
+      .scope-group-empty:first-child {
+        display: none;
+      }
+    }
+
+    background: #fafafa;
+
+    dd {
+      padding: 0.375rem 0.5rem 0.375rem;
+    }
+  }
+
+  &.columns {
+    grid-template-rows: auto 1fr;
+    grid-auto-flow: column;
+
+    overflow-x: auto;
+  }
+}
+
+.scope-group {
+  line-height: 2;
+  font-size: 0.85rem;
+  padding: 0.5rem 1rem 0.25rem 0.75rem;
+
+  background: #f7f7f7;
+}
+
+.scope-list {
+  list-style: none;
 
   display: flex;
   flex-wrap: wrap;
 
+  position: relative;
+  align-items: center;
+
+  margin-bottom: 0;
+  padding: 0;
+
   li {
-    margin-top: 0.25rem;
-    margin-right: 0.35rem;
+    margin: 0.125rem 0.35rem 0.125rem 0;
 
     &:last-child {
       margin-right: 0;
     }
   }
+}
 
-  a {
-    background-color: $scope-bg;
+.scope {
+  display: inline-block;
 
-    font-size: 0.8rem;
-    font-weight: normal;
-    white-space: nowrap;
+  background-color: $scope-bg;
 
-    border-radius: 50rem;
-    padding: $scope-padding;
+  font-size: 0.8rem;
+  font-weight: normal;
+  white-space: nowrap;
 
-    &, &:hover, &:focus {
-      color: $scope-color;
-    }
+  border-radius: 50rem;
+  padding: $scope-padding;
 
-    &:hover, &:focus {
-      background-color: $scope-hover-bg;
-      text-decoration: none;
-    }
+  &, &:hover, &:focus {
+    color: $scope-color;
+  }
+
+  &:hover, &:focus {
+    background-color: $scope-hover-bg;
+    text-decoration: none;
   }
 
-  li.active a {
+  &.active {
     &, &:hover, &:focus, strong {
       color: $scope-active-color;
     }

data/frontend/css/components/_table.scss

@@ -24,6 +24,10 @@
   .main-content-sidebar & {
     @include table-container-background($content-sidebar-bg);
   }
+
+  &.loading {
+    opacity: 0.5;
+  }
 }
 
 .trestle-table {
@@ -64,6 +68,22 @@
   .select-row {
     width: 2.5em;
     text-align: center;
+
+    .custom-control {
+      padding-left: 1.5rem;
+    }
+
+    .custom-control-input {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .custom-control-label {
+      &::before,
+      &::after {
+        left: -1.325rem;
+      }
+    }
   }
 
   .actions {

data/frontend/css/components/_tags.scss

@@ -16,6 +16,8 @@
 }
 
 a.tag {
+  font-weight: inherit;
+
   &:hover, &:focus {
     text-decoration: none;
     color: $tag-hover-color;

data/frontend/css/components/_timestamp.scss

@@ -4,7 +4,7 @@
 
   small {
     display: block;
-    color: #666;
+    opacity: 0.75;
   }
 
   &.timestamp-inline,

data/frontend/css/layout/_content.scss

@@ -105,8 +105,7 @@
 
 .utilities {
   display: flex;
-  justify-content: space-between;
-
+  justify-content: flex-start;
   margin-bottom: 10px;
 }
 
@@ -146,6 +145,10 @@
     padding: 15px;
   }
 
+  .utilities {
+    margin-bottom: 10px;
+  }
+
   .main-content-header,
   .main-content-footer {
     flex-direction: column;

data/frontend/css/layout/_sidebar.scss

@@ -16,11 +16,15 @@
   height: $header-height;
 
   display: flex;
-  align-items: center;
+  align-items: stretch;
 
   .navbar-toggler {
     outline: none;
+
+    align-self: center;
+
     margin-left: $grid-gutter-width / 2;
+    margin-right: $grid-gutter-width / 2;
 
     background: $sidebar-mobile-toggle-bg;
     border: $sidebar-mobile-toggle-border;
@@ -42,7 +46,6 @@
   display: flex;
   align-items: center;
 
-  height: 100%;
   padding: 10px 15px;
 
   font-size: 1.4rem;
@@ -155,8 +158,11 @@
 
   .app-sidebar-title {
     justify-content: center;
-    margin-right: 65px;
     padding: 10px 5px;
+
+    // Match right margin with navbar toggler width:
+    // (margin + border + font-size * icon-width + padding)
+    margin-right: calc(#{$grid-gutter-width} + #{$border-width} + #{$navbar-toggler-font-size} * 1.5 + #{$navbar-toggler-padding-x} * 2);
   }
 
   .toggle-sidebar {

data/frontend/css/variables/_bootstrap.scss

@@ -7,6 +7,7 @@ $theme-colors: (
   "warning": #f3bd71,
   "danger":  #e17572,
   "light":   #bbbbbb,
+  "dark":    #444444,
 
   // Backwards compatibility
   "default": #bbbbbb

data/frontend/css/variables/_trestle.scss

@@ -77,14 +77,14 @@ $tag-hover-border: darken(theme-color("primary"), 10%);
 
 // Scopes
 
-$scope-padding:      0.25rem 0.5rem;
+$scope-padding:      0.25rem 0.675rem;
 
-$scope-color:        rgba(black, 0.3);
-$scope-bg:           rgba(black, 0.025);
+$scope-color:        rgba(black, 0.4);
+$scope-bg:           rgba(black, 0.035);
 
-$scope-label-color:  rgba(black, 0.4);
+$scope-label-color:  rgba(black, 0.5);
 
-$scope-hover-color:  rgba(black, 0.3);
+$scope-hover-color:  rgba(black, 0.5);
 $scope-hover-bg:     rgba(black, 0.05);
 
 $scope-active-color: white;
@@ -101,6 +101,26 @@ $alert-danger-bg:      #de7471;
 $alert-danger-color:   white;
 $alert-danger-border:  #d85956;
 
+$alert-info-bg:        darken(theme-color("info"), 10%);
+$alert-info-color:     white;
+$alert-info-border:    darken($alert-info-bg, 10%);
+
+$alert-warning-bg:     darken(theme-color("warning"), 5%);
+$alert-warning-color:  white;
+$alert-warning-border: darken($alert-warning-bg, 5%);
+
+$alert-light-bg:       theme-color("light");
+$alert-light-color:    $body-color;
+$alert-light-border:   darken($alert-light-bg, 5%);
+
+$alert-dark-bg:        theme-color("dark");
+$alert-dark-color:     white;
+$alert-dark-border:    darken($alert-dark-bg, 10%);
+
+$alert-primary-bg:     darken(theme-color("primary"), 5%);
+$alert-primary-color:  white;
+$alert-primary-border: darken($alert-primary-bg, 10%);
+
 
 // Modals
 

data/frontend/js/components/confirmation.js

@@ -15,11 +15,13 @@ init(function (root) {
     copyAttributes: 'href target data-remote data-method data-url data-params data-type'
   }
 
-  const CONFIRM = { ...DEFAULTS,
+  const CONFIRM = {
+    ...DEFAULTS,
     rootSelector: '[data-toggle="confirm"]'
   }
 
-  const DELETE = { ...DEFAULTS,
+  const DELETE = {
+    ...DEFAULTS,
     rootSelector: '[data-toggle="confirm-delete"]',
     btnOkClass: 'btn btn-sm btn-danger',
     btnOkLabel: i18n['trestle.confirmation.delete'] || 'Delete'

data/frontend/js/components/dialog.js

@@ -15,16 +15,24 @@ const TEMPLATE = `
 function createElement () {
   const $el = $(TEMPLATE).appendTo('body')
 
-  $el.modal({ show: false })
+  $el.modal({
+    show: false,
+    focus: false
+  })
 
-  // Remove dialog elements once hidden
   $el.on('hidden.bs.modal', function () {
+    // Restore modal-open class on body if background modals still visible
+    if ($el.prevAll('.modal.show').length) {
+      $(document.body).addClass('modal-open')
+    }
+
+    // Remove dialog elements once hidden
     $el.remove()
   })
 
   // Restore the next visible modal to the foreground
   $el.on('hide.bs.modal', function () {
-    $el.prevAll('.modal.in').last().removeClass('background')
+    $el.prevAll('.modal.show').last().removeClass('background')
   })
 
   // Set X-Trestle-Dialog header on AJAX requests initiated from the dialog
@@ -117,7 +125,7 @@ export default class Dialog {
     this.$el.modal('show')
 
     // Background any existing visible modals
-    this.$el.prevAll('.modal.in').addClass('background')
+    this.$el.prevAll('.modal.show').addClass('background')
   }
 
   hide () {
@@ -125,6 +133,9 @@ export default class Dialog {
   }
 }
 
+// Expose showError as Trestle.Dialog.showError
+Dialog.showError = showError
+
 $(document).on('click', '[data-behavior="dialog"]', function (e) {
   e.preventDefault()
 

data/frontend/js/components/form.js

@@ -22,6 +22,9 @@ init(function (root) {
 
   $form
     .on('ajax:send', function (e) {
+      // Only run when triggered directly on form
+      if (e.target !== this) return
+
       // Disable submit buttons
       $(this).find(':submit').prop('disabled', true)
 
@@ -30,6 +33,9 @@ init(function (root) {
       if (button) { $(button).addClass('loading') }
     })
     .on('ajax:complete', function (e) {
+      // Only run when triggered directly on form
+      if (e.target !== this) return
+
       const xhr = e.detail[0]
 
       // Reset submit buttons
@@ -64,6 +70,9 @@ init(function (root) {
       }
     })
     .on('ajax:success', function (e) {
+      // Only run when triggered directly on form
+      if (e.target !== this) return
+
       const xhr = e.detail[2]
 
       const $context = $(this).closest('[data-context]')

data/frontend/js/components/navigation.js

@@ -0,0 +1,63 @@
+import cookie from '../core/cookie'
+
+const PREFIX = 'trestle:navigation'
+const SEPARATOR = ','
+
+class NavigationCookieStore {
+  addGroup (id, state) {
+    this.updateState(state, (groups) => groups.add(id))
+  }
+
+  removeGroup (id, state) {
+    this.updateState(state, (groups) => groups.delete(id))
+  }
+
+  updateState (state, callback) {
+    const groups = this.getState(state)
+    callback(groups)
+    this.saveState(state, groups)
+  }
+
+  getState (state) {
+    const str = cookie.get(`${PREFIX}:${state}`)
+    return new Set(str.length ? str.split(SEPARATOR) : [])
+  }
+
+  saveState (state, groups) {
+    cookie.set(`${PREFIX}:${state}`, [...groups].join(SEPARATOR))
+  }
+}
+
+class Navigation {
+  constructor () {
+    this.store = new NavigationCookieStore()
+  }
+
+  toggle (list) {
+    if (list.hasClass('collapsed')) {
+      this.expand(list)
+    } else {
+      this.collapse(list)
+    }
+  }
+
+  expand (list) {
+    list.removeClass('collapsed')
+
+    const id = list.data('group')
+
+    this.store.addGroup(id, 'expanded')
+    this.store.removeGroup(id, 'collapsed')
+  }
+
+  collapse (list) {
+    list.addClass('collapsed')
+
+    const id = list.data('group')
+
+    this.store.addGroup(id, 'collapsed')
+    this.store.removeGroup(id, 'expanded')
+  }
+}
+
+export default new Navigation()