Issue #101: Image library facelift.

Fixes #101.
backdrop-contrib · Jan 10, 2024 · c4eb150 · c4eb150
1 parent 442f684
commit c4eb150
Show file tree

Hide file tree

Showing 4 changed files with 223 additions and 0 deletions.
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
@@ -5998,6 +5998,90 @@ fieldset.vbo-fieldset-select-all > .fieldset-wrapper {
   font-size: var(--gin-font-size-s);
 }
 
+/* Image Library */
+
+.image-library-choose-file {
+  border: none;
+  background: transparent;
+  margin: 5px;
+  padding: 5px;
+  height: auto;
+  border-radius: var(--gin-border-m);
+}
+
+.image-library-choose-file .image-library-filename {
+  position: relative;
+  color: var(--gin-color-text);
+  word-break: break-all;
+  text-overflow: initial;
+  white-space: initial;
+  overflow: visible;
+  margin: 0;
+  max-width: 100%;
+  max-height: none;
+  font-size: var(--gin-font-size-m);
+  display: block;
+}
+
+.image-library-choose-file .image-wrap {
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: var(--gin-border-m);
+  border: 3px solid transparent;
+  transition: var(--gin-transition-fast);
+  display: flex;
+}
+
+.image-library-choose-file .image-wrap img {
+  object-fit: cover;
+  object-position: center center;
+  min-width: calc(100% + 6px);
+  max-width: calc(100% + 6px);
+  max-height: calc(100% + 6px);
+  aspect-ratio: 1;
+  position: inherit;
+  box-shadow: none;
+  background-color: var(--gin-bg-layer);
+  transition: var(--gin-transition-fast);
+}
+
+.image-library-choose-file:hover, .image-library-choose-file:focus {
+  background-color: transparent;
+  border: none;
+}
+
+.image-library-choose-file:hover .image-wrap, .image-library-choose-file:focus .image-wrap {
+  border-color: var(--gin-color-primary-hover);
+}
+
+.image-library-choose-file:hover .image-wrap img, .image-library-choose-file:focus .image-wrap img {
+  object-fit: contain;
+}
+
+.image-library-choose-file.image-library-image-selected {
+  background: none;
+  border: none;
+}
+
+.image-library-choose-file.image-library-image-selected .image-wrap {
+  border-color: var(--gin-color-primary-active);
+  opacity: 1;
+}
+
+.view-image-library.view-display-id-default > .view-filters .views-exposed-form {
+  margin-bottom: 0;
+}
+
+.view-image-library.view-display-id-default > .view-content {
+  display: flex;
+  flex-flow: row wrap;
+  margin-top: 0;
+}
+
+.view-image-library.view-display-id-default > .view-content:has(.image-library-image-selected) .image-library-choose-file:not(.image-library-image-selected) {
+  opacity: .5;
+}
+
 .layout-editor-block {
   box-shadow: var(--gin-shadow-l1);
   border-radius: var(--gin-border-m);

diff --git a/styles/base/_backdrop-overrides.scss b/styles/base/_backdrop-overrides.scss
@@ -579,6 +579,7 @@ fieldset.collapsible.collapsed {
   .search-reset {
     line-height: inherit;
   }
+
   .table-filter {
     background-color: transparent;
     border: none;
@@ -597,3 +598,90 @@ fieldset.vbo-fieldset-select-all {
   color: var(--gin-color-text-light);
   font-size: var(--gin-font-size-s);
 }
+
+/* Image Library */
+.image-library-choose-file {
+  border: none;
+  background: transparent;
+  margin: 5px;
+  padding: 5px;
+  height: auto;
+  border-radius: var(--gin-border-m);
+
+  .image-library-filename {
+    position: relative;
+    color: var(--gin-color-text);
+    word-break: break-all;
+    text-overflow: initial;
+    white-space: initial;
+    overflow: visible;
+    margin: 0;
+    max-width: 100%;
+    max-height: none;
+    font-size: var(--gin-font-size-m);
+    display: block;
+  }
+
+  .image-wrap {
+    aspect-ratio: 1;
+    overflow: hidden;
+    border-radius: var(--gin-border-m);
+    border: 3px solid transparent;
+    transition: var(--gin-transition-fast);
+    display: flex;
+
+    img {
+      object-fit: cover;
+      object-position: center center;
+      min-width: calc(100% + 6px);
+      max-width: calc(100% + 6px);
+      max-height: calc(100% + 6px);
+      aspect-ratio: 1;
+      position: inherit;
+      box-shadow: none;
+      background-color: var(--gin-bg-layer);
+      transition: var(--gin-transition-fast);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: transparent;
+    border: none;
+
+    .image-wrap {
+      border-color: var(--gin-color-primary-hover);
+
+      img {
+        object-fit: contain;
+      }
+    }
+  }
+  &.image-library-image-selected {
+    background: none;
+    border: none;
+    .image-wrap {
+      border-color: var(--gin-color-primary-active);
+      opacity: 1;
+    }
+  }
+}
+
+.view-image-library.view-display-id-default {
+  > .view-filters {
+    .views-exposed-form {
+      margin-bottom: 0;
+    }
+  }
+  > .view-content {
+    display: flex;
+    flex-flow: row wrap;
+    margin-top: 0;
+
+    &:has(.image-library-image-selected) {
+      .image-library-choose-file:not(.image-library-image-selected) {
+        opacity: .5;
+      }
+    }
+  }
+}
diff --git a/template.php b/template.php
@@ -527,3 +527,13 @@ function gin_pager_link($variables) {
   $attributes['href'] = url($_GET['q'], array('query' => $query));
   return '<a' . backdrop_attributes($attributes) . '>' . check_plain($text) . '</a>';
 }
+
+/**
+ * Implements hook_views_pre_render().
+ */
+function gin_views_pre_render(&$view) {
+  if ($view->name == 'image_library') {
+    $view->field["uri"]->options["image_style"] = 'medium';
+    $view->field["uri"]->options["thumbnail_style"] = 'medium';
+  }
+}
diff --git a/templates/views/views-view-fields--image-library.tpl.php b/templates/views/views-view-fields--image-library.tpl.php
@@ -0,0 +1,41 @@
+<?php
+/**
+ * @file
+ * Default simple view template to all the fields as a row.
+ *
+ * - $view: The view in use.
+ * - $fields: an array of $field objects. Each one contains:
+ *   - $field->content: The output of the field.
+ *   - $field->raw: The raw data for the field, if it exists. This is NOT output safe.
+ *   - $field->class: The safe class id to use.
+ *   - $field->handler: The Views field handler object controlling this field. Do not use
+ *     var_export to dump this object, as it can't handle the recursion.
+ *   - $field->inline: Whether or not the field should be inline.
+ *   - $field->inline_html: either div or span based on the above flag.
+ *   - $field->wrapper_prefix: A complete wrapper containing the inline_html to use.
+ *   - $field->wrapper_suffix: The closing tag for the wrapper.
+ *   - $field->separator: an optional separator that may appear before a field.
+ *   - $field->label: The wrap label text to use.
+ *   - $field->label_html: The full HTML of the label to use including
+ *     configured element type.
+ * - $row: The raw result object from the query, with all data it fetched.
+ *
+ * @ingroup views_templates
+ */
+?>
+<?php foreach ($fields as $id => $field): ?>
+  <?php if (!empty($field->separator)): ?>
+    <?php print $field->separator; ?>
+  <?php endif; ?>
+
+  <?php print $field->wrapper_prefix; ?>
+    <?php print $field->label_html; ?>
+    <?php if ($id == 'fid'): ?>
+      <div class="image-wrap">
+        <?php print $field->content; ?>
+      </div>
+    <?php else: ?>
+      <?php print $field->content; ?>
+    <?php endif; ?>
+  <?php print $field->wrapper_suffix; ?>
+<?php endforeach; ?>