first commit

core/themes/claro/templates/media-library/details--media-library-add-form-selected-media.html.twig

@@ -0,0 +1,11 @@
+{% extends "details.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override for the "Additional selected media" area of the modal media
+ * library dialog.
+ *
+ * @see template_preprocess_details()
+ */
+#}
+{% set attributes = attributes.addClass('media-library-add-form__selected-media') %}

core/themes/claro/templates/media-library/fieldset--media-library-widget.html.twig

@@ -0,0 +1,24 @@
+{% extends 'fieldset.html.twig' %}
+{#
+/**
+ * @file
+ * Theme override for the media library widget.
+ *
+ * @see claro_preprocess_fieldset__media_library_widget()
+ * @see claro_preprocess_fieldset()
+ * @see template_preprocess_fieldset()
+ */
+#}
+{% macro media_library_prefix(prefix) %}
+  {% if prefix.empty_selection %}
+    <p class="media-library-widget-empty-text">{{ prefix }}</p>
+  {% else %}
+    {{ prefix }}
+  {% endif %}
+{% endmacro %}
+{%
+  set attributes = attributes.addClass('media-library-widget')
+%}
+{%
+  set prefix = _self.media_library_prefix(prefix)
+%}

core/themes/claro/templates/media-library/item-list--media-library-add-form-media-list.html.twig

@@ -0,0 +1,35 @@
+{#
+/**
+ * @file
+ * Theme override for a list of new, unsaved media items being added in the
+ * modal media library dialog.
+ *
+ * Renders the item list without a wrapper div.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - title: The title of the list.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ * - attributes: HTML attributes to be applied to the list.
+ * - empty: A message to display when there are no items. Allowed value is a
+ *   string or render array.
+ * - context: A list of contextual data associated with the list. May contain:
+ *   - list_style: The custom list style.
+ *
+ * @see claro_preprocess_item_list__media_library_add_form_media_list()
+ * @see template_preprocess_item_list()
+ */
+#}
+{% if items -%}
+  {%- if title is not empty -%}
+    <h3>{{ title }}</h3>
+  {%- endif -%}
+  <{{ list_type }}{{ attributes.addClass('media-library-add-form__added-media') }}>
+  {%- for item in items -%}
+    <li{{ item.attributes.addClass('media-library-add-form__media') }}>{{ item.value }}</li>
+  {%- endfor -%}
+  </{{ list_type }}>
+{%- endif %}

core/themes/claro/templates/media-library/media--media-library.html.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Theme override of a media item in the media library.
+ *
+ * This is used for media that the user can select from the grid of media
+ * items. It is not used for items that have already been selected in the
+ * corresponding field widget, or for items that have been previously selected
+ * before adding new media to the library.
+ *
+ * Available variables:
+ * - media: The entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - entity.getEntityTypeId() will return the entity type ID.
+ *   - entity.hasField('field_example') returns TRUE if the entity includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   Calling other methods, such as entity.delete(), will result in an exception.
+ *   See \Drupal\Core\Entity\EntityInterface for a full list of methods.
+ * - name: Name of the media.
+ * - content: Media content.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - attributes: HTML attributes for the containing element.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - url: Direct URL of the media.
+ * - preview_attributes: HTML attributes for the preview wrapper.
+ * - metadata_attributes: HTML attributes for the expandable metadata area.
+ * - status: Whether or not the Media is published.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+<article{{ attributes.addClass('media-library-item__preview-wrapper') }}>
+  {% if content %}
+    <div{{ preview_attributes.addClass('media-library-item__preview js-media-library-item-preview') }}>
+      {{ content|without('name') }}
+    </div>
+    {% if not status %}
+      <div class="media-library-item__status">{{ "unpublished"|t }}</div>
+    {% endif %}
+    <div{{ metadata_attributes.addClass('media-library-item__attributes') }}>
+      <div class="media-library-item__name">
+        {{ name }}
+      </div>
+    </div>
+  {% endif %}
+</article>

core/themes/claro/templates/media-library/views-view--media-library.html.twig

@@ -0,0 +1,97 @@
+{#
+/**
+ * @file
+ * Theme override for the media_library view template.
+ *
+ * Exposed filters precede views header.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A css-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   Javascript.
+ *
+ * @see template_preprocess_views_view()
+ */
+#}
+{%
+  set classes = [
+    'view',
+    'view-' ~ id|clean_class,
+    'view-id-' ~ id,
+    'view-display-id-' ~ display_id,
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if title %}
+    {{ title }}
+  {% endif %}
+  {{ title_suffix }}
+  {% if exposed %}
+    <div class="view-filters">
+      {{ exposed }}
+    </div>
+  {% endif %}
+  {% if header %}
+    <div class="view-header">
+      {{ header }}
+    </div>
+  {% endif %}
+  {% if attachment_before %}
+    <div class="attachment attachment-before">
+      {{ attachment_before }}
+    </div>
+  {% endif %}
+
+  {% if rows %}
+    <div class="view-content">
+      {{ rows }}
+    </div>
+  {% elseif empty %}
+    <div class="view-empty">
+      {{ empty }}
+    </div>
+  {% endif %}
+
+  {% if pager %}
+    {{ pager }}
+  {% endif %}
+  {% if attachment_after %}
+    <div class="attachment attachment-after">
+      {{ attachment_after }}
+    </div>
+  {% endif %}
+  {% if more %}
+    {{ more }}
+  {% endif %}
+  {% if footer %}
+    <div class="view-footer">
+      {{ footer }}
+    </div>
+  {% endif %}
+  {% if feed_icons %}
+    <div class="feed-icons">
+      {{ feed_icons }}
+    </div>
+  {% endif %}
+</div>

core/themes/claro/templates/media-library/views-view-unformatted--media-library.html.twig

@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Theme override for the media_library display of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ */
+#}
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+<div class="media-library-views-form__rows">
+  {% for row in rows %}
+    {%
+      set row_classes = [
+        default_row_class ? 'views-row',
+        'media-library-item',
+        'media-library-item--grid',
+      ]
+    %}
+    <div{{ row.attributes.addClass(row_classes) }}>
+      {{- row.content -}}
+    </div>
+  {% endfor %}
+</div>