administrate 1.0.0.beta3 → 1.0.0

data/app/assets/stylesheets/administrate/base/_typography.scss

@@ -32,11 +32,6 @@ a,
   text-decoration-skip-ink: auto;
   transition: color $base-duration $base-timing;
 
-  /* stylelint-disable selector-no-qualifying-type */
-  &.link--danger {
-    color: $red;
-  }
-
   &:hover {
     color: mix($black, $action-color, 25%);
   }
@@ -45,6 +40,14 @@ a,
     outline: $focus-outline;
     outline-offset: $focus-outline-offset;
   }
+  /* stylelint-disable selector-no-qualifying-type */
+  &.link--danger {
+    color: $red;
+  }
+
+  &.link--danger:hover {
+    color: mix($black, $red, 20%);
+  }
 }
 
 hr {

data/app/assets/stylesheets/administrate/components/_buttons.scss

@@ -42,6 +42,14 @@ button,
   }
 }
 
+
+form.button_to { /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */
+  .link {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 .button--alt {
   background-color: transparent;
   border: $base-border;
@@ -52,12 +60,29 @@ button,
 .button--danger {
   background-color: $red;
 
-  &:hover {
+  &:not(.link):hover {
     background-color: mix($black, $red, 20%);
     color: $white;
   }
+
+  &:not(.link):disabled:hover {
+    background-color: mix($black, $red, 20%);
+  }
 }
 
 .button--nav {
   margin-bottom: $base-spacing;
 }
+
+.button--tooltip {
+  background: none;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+  padding: 0;
+
+  /* stylelint-disable declaration-no-important */
+  &:hover {
+    background-color: unset !important;
+  }
+}

data/app/assets/stylesheets/administrate/components/_cells.scss

@@ -3,7 +3,7 @@
   margin-left: 5px;
 
   svg {
-    fill: $hint-grey;
+    color: $hint-grey;
     height: 13px;
     transition: transform $base-duration $base-timing;
     width: 13px;
@@ -41,7 +41,14 @@
   transform: rotate(180deg);
 }
 
+.cell-label--action-button {
+  white-space: nowrap;
+  width: 1rem;
+}
+
 .cell-data--number,
 .cell-label--number {
   text-align: right;
+  white-space: nowrap;
+  width: 1rem;
 }

data/app/assets/stylesheets/administrate/components/_search.scss

@@ -15,7 +15,6 @@ $search-icon-size: 1rem;
 }
 
 .search__eyeglass-icon {
-  fill: $grey-7;
   height: $search-icon-size;
   left: $search-icon-size;
   position: absolute;
@@ -34,13 +33,55 @@ $search-icon-size: 1rem;
 }
 
 .search__clear-icon {
-  fill: $grey-5;
+  color: $grey-5;
   height: $search-icon-size;
   position: absolute;
   transition: fill $base-duration $base-timing;
   width: $search-icon-size;
 
   &:hover {
-    fill: $action-color;
+    color: $action-color;
   }
 }
+
+.search__tooltip {
+  anchor-name: --tooltip-anchor;
+  margin-right: 2rem;
+
+  svg {
+    color: $grey-5;
+    height: 24px;
+    width: 24px;
+
+    &:hover {
+      color: $action-color;
+    }
+  }
+}
+
+.search__tooltip-popover {
+  background-color: $blue;
+  border-color: $blue;
+  border-radius: $base-border-radius;
+  color: $white;
+  padding: 2rem;
+  width: max-content;
+}
+
+
+/* We can remove this stylelint disable (and the css-anchor-positioning polyfill)
+   when position-anchor becomes widely available */
+
+/* stylelint-disable property-no-unknown */
+.search__tooltip-popover-positioning {
+  left: anchor(center);
+  margin: 1rem;
+  position: fixed;
+  position-anchor: --tooltip-anchor;
+  top: anchor(bottom);
+  transform: translateX(-50%);
+}
+
+.search__tooltip-popover-value {
+  opacity: 0.5;
+}

data/app/assets/stylesheets/administrate-internal/docs.scss

@@ -1,14 +1,16 @@
-$blue: #53adc6;
-$red: #cf726e;
-$green: #5bc89e;
-$white: #f0f0f0;
-
-$code-black: #202020;
-$code-white: #e0e0dc;
-$code-green: #b0bf82;
-$code-blue: #8fbdcc;
-$code-yellow: #f8d29d;
-$code-red: #b95c56;
+:root {
+  --blue: #53adc6;
+  --red: #cf726e;
+  --green: #5bc89e;
+  --white: #f0f0f0;
+
+  --code-black: #202020;
+  --code-white: #e0e0dc;
+  --code-green: #b0bf82;
+  --code-blue: #8fbdcc;
+  --code-yellow: #f8d29d;
+  --code-red: #b95c56;
+}
 
 html,
 body {
@@ -30,7 +32,7 @@ h3 {
 }
 
 a {
-  color: $blue;
+  color: var(--blue);
   text-decoration: none;
 }
 
@@ -58,8 +60,8 @@ a {
 }
 
 .flash-wrapper {
-  background-color: $red;
-  color: $white;
+  background-color: var(--red);
+  color: var(--white);
   padding: 1em;
 
   .flash {
@@ -75,19 +77,19 @@ code {
   padding: 0.4em 0.2em 0;
 
   &.hljs {
-    background-color: $code-black;
-    color: $code-white;
+    background-color: var(--code-black);
+    color: var(--code-white);
     padding-left: 1rem;
 
-    .hljs-string { color: $code-green; }
-    .hljs-subst { color: $code-white; }
-    .hljs-constant { color: $code-blue; }
-    .hljs-symbol { color: $code-red; }
-    .hljs-keyword { color: $code-yellow; }
+    .hljs-string { color: var(--code-green); }
+    .hljs-subst { color: var(--code-white); }
+    .hljs-constant { color: var(--code-blue); }
+    .hljs-symbol { color: var(--code-red); }
+    .hljs-keyword { color: var(--code-yellow); }
 
     .hljs-title,
-    .hljs-parent { color: $code-blue; }
+    .hljs-parent { color: var(--code-blue); }
 
-    .hljs-tag { color: $code-yellow; }
+    .hljs-tag { color: var(--code-yellow); }
   }
 }

data/app/controllers/administrate/application_controller.rb

@@ -10,12 +10,14 @@ module Administrate
       resources = order.apply(resources)
       resources = paginate_resources(resources)
       page = Administrate::Page::Collection.new(dashboard, order: order)
+      filters = Administrate::Search.new(scoped_resource, dashboard, search_term).valid_filters
 
       render locals: {
         resources: resources,
         search_term: search_term,
         page: page,
-        show_search_bar: show_search_bar?
+        show_search_bar: show_search_bar?,
+        filters: filters
       }
     end
 
@@ -120,15 +122,6 @@ module Administrate
     end
     helper_method :existing_action?
 
-    # @deprecated Use {#existing_action} instead. Note that, in
-    #   {#existing_action}, the order of parameters is reversed and
-    #   there is no default value for the `resource` parameter.
-    def valid_action?(action_name, resource = resource_class)
-      Administrate.warn_of_deprecated_authorization_method(__method__)
-      existing_action?(resource, action_name)
-    end
-    helper_method :valid_action?
-
     def routes
       @routes ||= Namespace.new(namespace).routes.to_set
     end
@@ -141,16 +134,18 @@ module Administrate
       @order ||= Administrate::Order.new(
         sorting_attribute,
         sorting_direction,
-        association_attribute: order_by_field(
+        sorting_column: sorting_column(
           dashboard_attribute(sorting_attribute)
         )
       )
     end
 
-    def order_by_field(dashboard)
-      return unless dashboard.try(:options)
+    def sorting_column(dashboard_attribute)
+      return unless dashboard_attribute.try(:options)
 
-      dashboard.options.fetch(:order, nil)
+      dashboard_attribute.options.fetch(:sorting_column) {
+        dashboard_attribute.options.fetch(:order, nil)
+      }
     end
 
     def dashboard_attribute(attribute)
@@ -261,14 +256,6 @@ module Administrate
     end
     helper_method :authorized_action?
 
-    # @deprecated Use {#authorized_action} instead. Note that the order of
-    #   parameters is reversed in {#authorized_action}.
-    def show_action?(action, resource)
-      Administrate.warn_of_deprecated_authorization_method(__method__)
-      authorized_action?(resource, action)
-    end
-    helper_method :show_action?
-
     def new_resource(params = {})
       resource_class.new(params)
     end

data/app/controllers/concerns/administrate/punditize.rb

@@ -41,15 +41,7 @@ module Administrate
             "Invalid #<#{policy_scope_class}> constructor is called")
         end
 
-        if policy_scope.respond_to? :resolve_admin
-          Administrate.deprecator.warn(
-            "Pundit policy scope `resolve_admin` method is deprecated. " \
-            "Please use a namespaced pundit policy instead."
-          )
-          policy_scope.resolve_admin
-        else
-          policy_scope.resolve
-        end
+        policy_scope.resolve
       end
 
       def pundit_model(record)

data/app/helpers/administrate/application_helper.rb

@@ -9,7 +9,15 @@ module Administrate
 
     def render_field(field, locals = {})
       locals[:field] = field
-      render locals: locals, partial: field.to_partial_path
+      if (prefix = find_partial_prefix(field))
+        render locals: locals, partial: "#{prefix}/#{field.page}"
+      end
+    end
+
+    def find_partial_prefix(field)
+      field.partial_prefixes.detect do |prefix|
+        lookup_context.template_exists?(field.page, [prefix], true)
+      end
     end
 
     def requireness(field)

data/app/views/administrate/application/_collection.html.erb

@@ -23,25 +23,35 @@ to display a collection of resources in an HTML table.
     <tr>
       <% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
         <th class="cell-label
-        cell-label--<%= attr_type.html_class %>
-        cell-label--<%= collection_presenter.ordered_html_class(attr_name) %>
-        cell-label--<%= "#{collection_presenter.resource_name}_#{attr_name}" %>"
-        scope="col"
-        aria-sort="<%= sort_order(collection_presenter.ordered_html_class(attr_name)) %>">
-        <%= link_to(sanitized_order_params(page, collection_field_name).merge(
-          collection_presenter.order_params_for(attr_name, key: collection_field_name)
-        )) do %>
-        <%= t(
-          "helpers.label.#{collection_presenter.resource_name}.#{attr_name}",
-          default: resource_class.human_attribute_name(attr_name).titleize,
-        ) %>
-            <% if collection_presenter.ordered_by?(attr_name) %>
-              <span class="cell-label__sort-indicator cell-label__sort-indicator--<%= collection_presenter.ordered_html_class(attr_name) %>">
-                <svg aria-hidden="true">
-                  <use xlink:href="#icon-up-caret" />
-                </svg>
-              </span>
+          cell-label--<%= attr_type.html_class %>
+          cell-label--<%= collection_presenter.ordered_html_class(attr_name) %>
+          cell-label--<%= "#{collection_presenter.resource_name}_#{attr_name}" %>"
+          scope="col"
+          <% if attr_type.sortable? %>
+            aria-sort="<%= sort_order(collection_presenter.ordered_html_class(attr_name)) %>"
+          <% end %>
+        >
+          <% if attr_type.sortable? %>
+            <%= link_to(params: sanitized_order_params(page, collection_field_name).merge(
+              collection_presenter.order_params_for(attr_name, key: collection_field_name)
+            )) do %>
+              <%= t(
+                "helpers.label.#{collection_presenter.resource_name}.#{attr_name}",
+                default: resource_class.human_attribute_name(attr_name).titleize,
+              ) %>
+              <% if collection_presenter.ordered_by?(attr_name) %>
+                <span class="cell-label__sort-indicator cell-label__sort-indicator--<%= collection_presenter.ordered_html_class(attr_name) %>">
+                  <svg aria-hidden="true">
+                    <use xlink:href="#icon-up-caret" />
+                  </svg>
+                </span>
+              <% end %>
             <% end %>
+          <% else %>
+            <%= t(
+              "helpers.label.#{collection_presenter.resource_name}.#{attr_name}",
+              default: resource_class.human_attribute_name(attr_name).titleize,
+            ) %>
           <% end %>
         </th>
       <% end %>
@@ -59,7 +69,7 @@ to display a collection of resources in an HTML table.
     <% resources.each do |resource| %>
       <tr class="js-table-row"
           <% if accessible_action?(resource, :show) %>
-            <%= %(tabindex=0 role=link data-url=#{polymorphic_path([namespace, resource])}) %>
+            <%= %(tabindex=0 data-url=#{polymorphic_path([namespace, resource])}) %>
           <% end %>
           >
         <% collection_presenter.attributes_for(resource).each do |attribute| %>

data/app/views/administrate/application/_collection_header_actions.html.erb

@@ -1,4 +1,4 @@
 <% [existing_action?(collection_presenter.resource_name, :edit),
     existing_action?(collection_presenter.resource_name, :destroy)].count(true).times do %>
-  <th scope="col"></th>
+  <th scope="col" class="cell-label--action-button"></th>
 <% end %>

data/app/views/administrate/application/_collection_item_actions.html.erb

@@ -1,5 +1,5 @@
 <% if existing_action?(collection_presenter.resource_name, :edit) %>
-  <td><%= link_to(
+  <td class="cell-label--action-button"><%= link_to(
     t("administrate.actions.edit"),
     [:edit, namespace, resource],
     class: "action-edit",
@@ -7,7 +7,7 @@
 <% end %>
 
 <% if existing_action?(collection_presenter.resource_name, :destroy) %>
-  <td><%= button_to(
+  <td class="cell-label--action-button"><%= button_to(
     t("administrate.actions.destroy"),
     [namespace, resource],
     class: "link link--danger",

data/app/views/administrate/application/_form.html.erb

@@ -14,7 +14,7 @@ and renders all form fields for a resource's editable attributes.
 [1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Form
 %>
 
-<%= form_for([namespace, page.resource], html: { class: "form" }) do |f| %>
+<%= form_with(model: page.resource, url: [namespace, page.resource], scope: page.resource, local: true, class: "form") do |f| %>
   <% if page.resource.errors.any? %>
     <div id="error_explanation">
       <h2>

data/app/views/administrate/application/_icons.html.erb

@@ -1,13 +1,21 @@
 <svg hidden xmlns="http://www.w3.org/2000/svg">
-  <symbol id="icon-cancel" viewBox="0 0 48 48">
-    <path fill-rule="evenodd" d="M24 19.757l-8.485-8.485c-.784-.783-2.047-.782-2.827 0l-1.417 1.416c-.777.777-.78 2.046.002 2.827L19.757 24l-8.485 8.485c-.783.784-.782 2.047 0 2.827l1.416 1.417c.777.777 2.046.78 2.827-.002L24 28.243l8.485 8.485c.784.783 2.047.782 2.827 0l1.417-1.416c.777-.777.78-2.046-.002-2.827L28.243 24l8.485-8.485c.783-.784.782-2.047 0-2.827l-1.416-1.417c-.777-.777-2.046-.78-2.827.002L24 19.757zM24 47c12.703 0 23-10.297 23-23S36.703 1 24 1 1 11.297 1 24s10.297 23 23 23z" />
+  <symbol id="icon-cancel" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>
   </symbol>
 
-  <symbol id="icon-eyeglass" viewBox="0 0 48 48">
-    <path d="M27.885 32.515c-2.864 1.966-6.333 3.116-10.07 3.116C7.976 35.63 0 27.656 0 17.817 0 7.976 7.976 0 17.816 0S35.63 7.976 35.63 17.816c0 3.736-1.15 7.205-3.115 10.07l14.53 14.53c1.278 1.277 1.275 3.352 0 4.628-1.28 1.278-3.353 1.278-4.63 0l-14.53-14.53zm-10.07-3.736c6.056 0 10.964-4.91 10.964-10.964 0-6.055-4.91-10.964-10.964-10.964-6.055 0-10.964 4.91-10.964 10.964 0 6.055 4.91 10.963 10.964 10.963z" />
+  <symbol id="icon-eyeglass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8"></circle>
+    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
   </symbol>
 
-  <symbol id="icon-up-caret" viewBox="0 0 48 48">
-    <path d="M2.988 33.02c-1.66 0-1.943-.81-.618-1.824l20-15.28c.878-.672 2.31-.67 3.188 0l20.075 15.288c1.316 1.003 1.048 1.816-.62 1.816H2.987z" />
+  <symbol id="icon-up-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="18 15 12 9 6 15"></polyline>
   </symbol>
+
+  <symbol id="icon-question-mark" viewBox="0 0 24 24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+  <symbol>
 </svg>

data/app/views/administrate/application/_index_header.html.erb

@@ -15,6 +15,25 @@
       search_term: search_term,
       resource_name: display_resource_name(page.resource_name)
     ) %>
+
+    <% if filters.any? %>
+      <div data-controller="tooltip">
+        <button data-tooltip-target="tooltip" popovertarget="search-tooltip" class="button--tooltip search__tooltip">
+          <svg role="img">
+            <use xlink:href="#icon-question-mark" />
+          </svg>
+        </button>
+
+        <div data-tooltip-target="popover" popover id="search-tooltip" role="tooltip" class="search__tooltip-popover search__tooltip-popover-positioning">
+          <p><strong>Use filters to refine your search</strong></p>
+          <ul>
+            <% filters.keys.each do |filter_key| %>
+            <li><%= filter_key %>:<span class="search__tooltip-popover-value">&lt;value&gt;</span></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    <% end %>
   <% end %>
 
   <div>

data/app/views/administrate/application/index.html.erb

@@ -29,6 +29,7 @@ It renders the `_table` partial to display details about the resources.
     search_term: search_term,
     page: page,
     show_search_bar: show_search_bar,
+    filters: filters,
   )
 %>
 

data/app/views/fields/has_many/_form.html.erb

@@ -16,7 +16,7 @@ and is augmented with [Selectize].
   Contains helper methods for displaying a collection select box.
 
 [1]: http://www.rubydoc.info/gems/administrate/Administrate/Field/HasMany
-[Selectize]: http://brianreavis.github.io/selectize.js
+[Selectize]: https://github.com/selectize/selectize.js
 %>
 
 <div class="field-unit__label">

data/app/views/fields/has_one/_form.html.erb

@@ -30,6 +30,12 @@ The form will be rendered as nested_from to parent relationship.
           <div class="field-unit field-unit--<%= attribute.html_class %>">
             <%= render_field attribute, f: has_one_f %>
           </div>
+          <% hint_key = "administrate.field_hints.#{field.name}.#{attribute.name}" %>
+          <% if I18n.exists?(hint_key) -%>
+            <div class="field-unit__hint">
+              <%= I18n.t(hint_key) %>
+            </div>
+          <% end -%>
         <% end %>
       </fieldset>
 

data/app/views/fields/polymorphic/_form.html.erb

@@ -22,7 +22,7 @@ This partial renders an input element for polymorphic relationships.
 
   <div class="field-unit__field">
     <%= pf.hidden_field(:type, value: field.class.name) %>
-    <%= pf.select(:value, {}, data: {controller: field.html_controller}) do %>
+    <%= pf.select(:value, nil, {}, data: {controller: field.html_controller}) do %>
       <%= grouped_options_for_select(field.associated_resource_grouped_options, field.selected_global_id, prompt: true) %>
     <% end %>
   </div>