From d317333d93ad33dd9627ce97d7868606e737a11a Mon Sep 17 00:00:00 2001
From: Meeninath Dhobale <59791-meeni_dhobale@users.noreply.drupalcode.org>
Date: Sun, 23 Jun 2024 18:06:24 +0000
Subject: [PATCH] Improvement in UI for Media.

---
 dist/css/components/media_library.css         | 32 ++++++++
 styles/components/media_library.scss          | 32 ++++++++
 .../media/media-reference-help.html.twig      | 73 +++++++++++++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 templates/media/media-reference-help.html.twig

diff --git a/dist/css/components/media_library.css b/dist/css/components/media_library.css
index 2aa1baa2e..29787d722 100644
--- a/dist/css/components/media_library.css
+++ b/dist/css/components/media_library.css
@@ -439,6 +439,16 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library-
   }
 }
 
+.js-media-library-widget .fieldset__label {
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+}
+
+.js-media-library-widget .media-library-selection {
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
+}
+
 @media (min-width: 80em) {
   .media-library-selection .media-library-item--grid {
     width: 20%;
@@ -487,3 +497,25 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library-
   color: var(--gin-color-text-light);
 }
 
+.media-library-new-widget .fieldset__label {
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+}
+
+.media-library-new-widget .label {
+  font-size: var(--gin-font-size-l);
+  font-weight: var(--gin-font-weight-bold);
+  color: var(--gin-color-title);
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
+}
+
+.media-library-new-widget .description {
+  font-size: var(--gin-font-size-s);
+  color: var(--gin-color-text-light);
+}
+
+.media-library-new-widget .form-type--entity-autocomplete {
+  margin-block: var(--gin-spacing-s);
+}
+
diff --git a/styles/components/media_library.scss b/styles/components/media_library.scss
index 4950e9478..7a6bb72db 100644
--- a/styles/components/media_library.scss
+++ b/styles/components/media_library.scss
@@ -412,6 +412,16 @@ fieldset.media-library-widget {
   }
 }
 
+.js-media-library-widget {
+  .fieldset__label {
+    margin-block-end: 0;
+  }
+
+  .media-library-selection {
+    margin-block-start: 0;
+  }
+}
+
 .media-library-selection .media-library-item--grid {
   @include mq(wide) {
     width: 20%;
@@ -459,3 +469,25 @@ fieldset.media-library-widget {
 .media-library-selected-count {
   color: var(--gin-color-text-light);
 }
+
+.media-library-new-widget {
+  .fieldset__label {
+    margin-block-end: 0;
+  }
+
+  .label {
+    font-size: var(--gin-font-size-l);
+    font-weight: var(--gin-font-weight-bold);
+    color: var(--gin-color-title);
+    margin-block-start: 0;
+  }
+
+  .description {
+    font-size: var(--gin-font-size-s);
+    color: var(--gin-color-text-light);
+  }
+
+  .form-type--entity-autocomplete {
+    margin-block: var(--gin-spacing-s);
+  }
+}
diff --git a/templates/media/media-reference-help.html.twig b/templates/media/media-reference-help.html.twig
new file mode 100644
index 000000000..dabdea4a6
--- /dev/null
+++ b/templates/media/media-reference-help.html.twig
@@ -0,0 +1,73 @@
+{#
+/**
+ * @file
+ * Theme override for media reference fields.
+ *
+ * @see template_preprocess_field_multiple_value_form()
+ */
+#}
+{%
+  set classes = [
+    'media-library-new-widget',
+    'js-form-item',
+    'form-item',
+    'js-form-wrapper',
+    'form-wrapper',
+    'fieldset',
+  ]
+%}
+<fieldset{{ attributes.addClass(classes) }}>
+  {%
+    set legend_classes = [
+      'fieldset__legend',
+      'fieldset__legend--visible',
+    ]
+  %}
+  {%
+    set legend_span_classes = [
+      'fieldset__label',
+      required ? 'js-form-required',
+      required ? 'form-required',
+    ]
+  %}
+  {# Always wrap fieldset legends in a <span> for CSS positioning. #}
+  <legend{{ legend_attributes.addClass(legend_classes) }}>
+    <span{{ legend_span_attributes.addClass(legend_span_classes) }}>{{ original_label }}</span>
+  </legend>
+
+  <div class="js-form-item fieldset__wrapper">
+    {% if media_add_help %}
+      <h4{{ header_attributes.addClass('label') }}>
+        {% trans %}
+          Create new media
+        {% endtrans %}
+      </h4>
+      <div class="description">
+        {{ media_add_help }}
+      </div>
+    {% endif %}
+
+    {% if multiple %}
+      {{ table }}
+    {% else %}
+      {% for element in elements %}
+        {{ element }}
+      {% endfor %}
+    {% endif %}
+
+    <div{{ description.attributes.addClass('description') }}>
+      {% if multiple and description.content %}
+        <ul>
+          <li>{{ media_list_help }} {{ media_list_link }} {{ allowed_types_help }}</li>
+          <li>{{ description.content }}</li>
+        </ul>
+      {% else %}
+        {{ media_list_help }} {{ media_list_link }} {{ allowed_types_help }}
+      {% endif %}
+      {% if multiple and button %}
+        <div class="clearfix">{{ button }}</div>
+      {% endif %}
+    </div>
+
+  </div>
+</fieldset>
-- 
GitLab