first commit

core/themes/claro/templates/views/views-mini-pager.html.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Theme override for a views mini-pager.
+ *
+ * Available variables:
+ * - heading_id: Pagination heading ID.
+ * - pagination_heading_level: The heading level to use for the pager.
+ * - items: List of pager items.
+ *
+ * @see template_preprocess_views_mini_pager()
+ */
+#}
+{%
+  set pager_action_classes = [
+    'pager__link',
+    'pager__link--mini',
+    'pager__link--action-link'
+  ]
+%}
+{% if items.previous or items.next %}
+  <nav{{ attributes.addClass('pager').setAttribute('role', 'navigation').setAttribute('aria-labelledby', heading_id) }}>
+    <{{ pagination_heading_level }} id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</{{ pagination_heading_level }}>
+    <ul{{ content_attributes.addClass('pager__items', 'js-pager__items') }}>
+      {% if items.previous %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--mini pager__item--action pager__item--previous">
+            <a{{ items.previous.attributes.addClass(pager_action_classes).setAttribute('title', 'Go to previous page'|t).setAttribute('href', items.previous.href) }}>
+              <span class="visually-hidden">{{ 'Previous page'|t }}</span>
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+
+      {% if items.current %}
+        <li class="pager__item pager__item--mini pager__item--current">
+          <span class="visually-hidden">
+            {{ 'Current page'|t }}
+          </span>
+          {{ items.current }}
+        </li>
+      {% endif %}
+
+      {% if items.next %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--mini pager__item--action pager__item--next">
+            <a{{ items.next.attributes.addClass(pager_action_classes).setAttribute('title', 'Go to next page'|t).setAttribute('href', items.next.href) }}>
+              <span class="visually-hidden">{{ 'Next page'|t }}</span>
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+    </ul>
+  </nav>
+{% endif %}

core/themes/claro/templates/views/views-ui-build-group-filter-form.html.twig

@@ -0,0 +1,59 @@
+{#
+/**
+ * @file
+ * Theme override for Views UI build group filter form.
+ *
+ * Available variables:
+ * - form: A render element representing the form. Contains the following:
+ *   - form_description: The exposed filter's description.
+ *   - expose_button: The button to toggle the expose filter form.
+ *   - group_button: Toggle options between single and grouped filters.
+ *   - label: A filter label input field.
+ *   - description: A filter description field.
+ *   - value: The filters available values.
+ *   - optional: A checkbox to require this filter or not.
+ *   - remember: A checkbox to remember selected filter value(s) (per user).
+ *   - widget: Radio Buttons to select the filter widget.
+ *   - add_group: A button to add another row to the table.
+ *   - more: A details element for additional field exposed filter fields.
+ * - table: A rendered table element of the group filter form.
+ *
+ * @see template_preprocess_views_ui_build_group_filter_form()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ form.form_description }}
+{{ form.expose_button }}
+{{ form.group_button }}
+<div class="views-config-group-region">
+  <div class="views-group-box">
+    {{ form.optional }}
+    {{ form.remember }}
+  </div>
+  <div class="views-group-box">
+    {{ form.widget }}
+    {{ form.label }}
+    {{ form.description }}
+  </div>
+</div>
+{#
+  Render the rest of the form elements excluding elements that are rendered
+  elsewhere.
+#}
+{{ form|without(
+    'form_description',
+    'expose_button',
+    'group_button',
+    'optional',
+    'remember',
+    'widget',
+    'label',
+    'description',
+    'add_group',
+    'more'
+  )
+}}
+{{ table }}
+{{ form.add_group }}
+{{ form.more }}

core/themes/claro/templates/views/views-ui-display-tab-bucket.html.twig

@@ -0,0 +1,39 @@
+{#
+/**
+ * @file
+ * Theme override for each "box" on the display query edit screen.
+ *
+ * Available variables:
+ * - attributes: HTML attributes to apply to the container element.
+ * - actions: Action links such as "Add", "And/Or, Rearrange" for the content.
+ * - title: The title of the bucket, e.g. "Fields", "Filter Criteria", etc.
+ * - content: Content items such as fields or settings in this container.
+ * - name: The name of the bucket, e.g. "Fields", "Filter Criteria", etc.
+ * - overridden: A boolean indicating the setting has been overridden from the
+ *   default.
+ *
+ * @see template_preprocess_views_ui_display_tab_bucket()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'views-ui-display-tab-bucket',
+    name ? name|clean_class,
+    overridden ? 'overridden',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {% if title or actions %}
+    <div class="views-ui-display-tab-bucket__header{% if actions %} views-ui-display-tab-bucket__header--actions{% endif %}">
+    {% if title -%}
+      <h3 class="views-ui-display-tab-bucket__title">{{ title }}</h3>
+    {%- endif %}
+    {% if actions -%}
+      <div class="views-ui-display-tab-bucket__actions">{{ actions }}</div>
+    {%- endif %}
+    </div>
+  {% endif %}
+  {{ content }}
+</div>

core/themes/claro/templates/views/views-ui-display-tab-setting.html.twig

@@ -0,0 +1,36 @@
+{#
+/**
+ * @file
+ * Theme override for Views UI display tab settings.
+ *
+ * Template for each row inside the "boxes" on the display query edit screen.
+ *
+ * Available variables:
+ * - attributes: HTML attributes such as class for the container.
+ * - description: The description or label for this setting.
+ * - settings_links: A list of links for this setting.
+ * - defaulted: A boolean indicating the setting is in its default state.
+ * - overridden: A boolean indicating the setting has been overridden from the
+ *   default.
+ *
+ * @see template_preprocess_views_ui_display_tab_setting()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'views-display-setting',
+    'views-ui-display-tab-setting',
+    defaulted ? 'defaulted',
+    overridden ? 'overridden',
+]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {% if description -%}
+    <span class="label">{{ description }}</span>
+  {%- endif %}
+  {% if settings_links %}
+    {{ settings_links|safe_join('<span class="label label--separator">&nbsp;|&nbsp;</span>') }}
+  {% endif %}
+</div>

core/themes/claro/templates/views/views-ui-expose-filter-form.html.twig

@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Theme override for exposed filter form.
+ *
+ * Available variables:
+ * - form_description: The exposed filter's description.
+ * - expose_button: The button to toggle the expose filter form.
+ * - group_button: Toggle options between single and grouped filters.
+ * - required: A checkbox to require this filter or not.
+ * - label: A filter label input field.
+ * - description: A filter description field.
+ * - operator: The operators for how the filters value should be treated.
+ *   - #type: The operator type.
+ * - value: The filters available values.
+ * - use_operator: Checkbox to allow the user to expose the operator.
+ * - more: A details element for additional field exposed filter fields.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ form.form_description }}
+{{ form.expose_button }}
+{{ form.required }}
+{{ form.group_button }}
+{{ form.label }}
+{{ form.description }}
+
+{{ form.operator }}
+{{ form.value }}
+
+{% if form.use_operator %}
+  <div class="views-config-group-region">
+    <div class="views-group-box">
+      {{ form.use_operator }}
+      {{ form.operator_limit_selection }}
+      {{ form.operator_list }}
+      {{ form.operator_id }}
+    </div>
+{% endif %}
+
+{#
+  Collect a list of elements printed to exclude when printing the
+  remaining elements.
+#}
+{% set remaining_form = form|without(
+  'form_description',
+  'expose_button',
+  'group_button',
+  'required',
+  'label',
+  'description',
+  'operator',
+  'value',
+  'use_operator',
+  'more',
+  'admin_label',
+  'operator_limit_selection',
+  'operator_list',
+  'operator_id'
+  )
+%}
+
+{#
+  Only output the right column markup if there's a left column to begin with.
+#}
+{% if form.operator['#type'] %}
+    <div class="views-group-box">
+      {{ remaining_form }}
+    </div>
+{% else %}
+  {{ remaining_form }}
+{% endif %}
+
+{% if form.use_operator %}
+  </div>
+{% endif %}
+
+{{ form.admin_label }}
+
+{{ form.more }}

core/themes/claro/templates/views/views-ui-view-preview-section--exposed.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme override for a views UI preview section.
+ *
+ * Available variables:
+ * - title: The human readable section title.
+ * - links: A list of contextual links.
+ * - content: The content for this section preview.
+ *
+ * @see template_preprocess_views_ui_view_preview_section()
+ *
+ * @ingroup themeable
+ */
+#}
+<h1 class="section-title">{{ title }}</h1>
+{% if links %}
+  <div class="contextual">{{ links }}</div>
+{% endif %}
+<div class="views-exposed-form views-exposed-form--preview">
+  {{ content }}
+</div>

core/themes/claro/templates/views/views-view-table.html.twig

@@ -0,0 +1,120 @@
+{#
+/**
+ * @file
+ * Theme override for displaying a view as a table.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ *   - class: HTML classes that can be used to style contextually through CSS.
+ * - title : The title of this group of rows.
+ * - header: The table header columns.
+ *   - attributes: Remaining HTML attributes for the element.
+ *   - content: HTML classes to apply to each header cell, indexed by
+ *   the header's key.
+ *   - default_classes: A flag indicating whether default classes should be
+ *     used.
+ * - caption_needed: Is the caption tag needed.
+ * - caption: The caption for this table.
+ * - accessibility_description: Extended description for the table details.
+ * - accessibility_summary: Summary for the table details.
+ * - rows: Table row items. Rows are keyed by row number.
+ *   - attributes: HTML classes to apply to each row.
+ *   - columns: Row column items. Columns are keyed by column number.
+ *     - attributes: HTML classes to apply to each column.
+ *     - content: The column content.
+ *   - default_classes: A flag indicating whether default classes should be
+ *     used.
+ * - responsive: A flag indicating whether table is responsive.
+ * - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
+ *
+ * @see template_preprocess_views_view_table()
+ */
+#}
+{%
+  set classes = [
+    'views-table',
+    'views-view-table',
+    'cols-' ~ header|length,
+    responsive ? 'responsive-enabled',
+    sticky ? 'position-sticky sticky-header',
+  ]
+%}
+<table{{ attributes.addClass(classes) }}>
+  {% if caption_needed %}
+    <caption>
+    {% if caption %}
+      {{ caption }}
+    {% else %}
+      {{ title }}
+    {% endif %}
+    {% if (summary_element is not empty) %}
+      {{ summary_element }}
+    {% endif %}
+    </caption>
+  {% endif %}
+  {% if header %}
+    <thead>
+      <tr>
+        {% for key, column in header %}
+          {% if column.default_classes %}
+            {%
+              set column_classes = [
+                'views-field',
+                'views-field-' ~ fields[key],
+              ]
+            %}
+          {% endif %}
+          <th{{ column.attributes.addClass(column_classes).setAttribute('scope', 'col') }}>
+            {%- if column.wrapper_element -%}
+              <{{ column.wrapper_element }}>
+                {%- if column.url -%}
+                  <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
+                {%- else -%}
+                  {{ column.content }}{{ column.sort_indicator }}
+                {%- endif -%}
+              </{{ column.wrapper_element }}>
+            {%- else -%}
+              {%- if column.url -%}
+                <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
+              {%- else -%}
+                {{- column.content }}{{ column.sort_indicator }}
+              {%- endif -%}
+            {%- endif -%}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+  {% endif %}
+  <tbody>
+    {% for row in rows %}
+      <tr{{ row.attributes }}>
+        {% for key, column in row.columns %}
+          {% if column.default_classes %}
+            {%
+              set column_classes = [
+                'views-field'
+              ]
+            %}
+            {% for field in column.fields %}
+              {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
+            {% endfor %}
+          {% endif %}
+          <td{{ column.attributes.addClass(column_classes) }}>
+            {%- if column.wrapper_element -%}
+              <{{ column.wrapper_element }}>
+              {% for content in column.content %}
+                {{ content.separator }}{{ content.field_output }}
+              {% endfor %}
+              </{{ column.wrapper_element }}>
+            {%- else -%}
+              {% for content in column.content %}
+                {{- content.separator }}{{ content.field_output -}}
+              {% endfor %}
+            {%- endif %}
+          </td>
+        {% endfor %}
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>