Skip to content

Commit c4eb150

Browse files
larynlaryn
committed
Issue #101: Image library facelift.
Fixes #101.
1 parent 442f684 commit c4eb150

File tree

4 files changed

+223
-0
lines changed

4 files changed

+223
-0
lines changed

‎dist/css/base/gin.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5998,6 +5998,90 @@ fieldset.vbo-fieldset-select-all > .fieldset-wrapper {
59985998
font-size: var(--gin-font-size-s);
59995999
}
60006000

6001+
/* Image Library */
6002+
6003+
.image-library-choose-file {
6004+
border: none;
6005+
background: transparent;
6006+
margin: 5px;
6007+
padding: 5px;
6008+
height: auto;
6009+
border-radius: var(--gin-border-m);
6010+
}
6011+
6012+
.image-library-choose-file .image-library-filename {
6013+
position: relative;
6014+
color: var(--gin-color-text);
6015+
word-break: break-all;
6016+
text-overflow: initial;
6017+
white-space: initial;
6018+
overflow: visible;
6019+
margin: 0;
6020+
max-width: 100%;
6021+
max-height: none;
6022+
font-size: var(--gin-font-size-m);
6023+
display: block;
6024+
}
6025+
6026+
.image-library-choose-file .image-wrap {
6027+
aspect-ratio: 1;
6028+
overflow: hidden;
6029+
border-radius: var(--gin-border-m);
6030+
border: 3px solid transparent;
6031+
transition: var(--gin-transition-fast);
6032+
display: flex;
6033+
}
6034+
6035+
.image-library-choose-file .image-wrap img {
6036+
object-fit: cover;
6037+
object-position: center center;
6038+
min-width: calc(100% + 6px);
6039+
max-width: calc(100% + 6px);
6040+
max-height: calc(100% + 6px);
6041+
aspect-ratio: 1;
6042+
position: inherit;
6043+
box-shadow: none;
6044+
background-color: var(--gin-bg-layer);
6045+
transition: var(--gin-transition-fast);
6046+
}
6047+
6048+
.image-library-choose-file:hover, .image-library-choose-file:focus {
6049+
background-color: transparent;
6050+
border: none;
6051+
}
6052+
6053+
.image-library-choose-file:hover .image-wrap, .image-library-choose-file:focus .image-wrap {
6054+
border-color: var(--gin-color-primary-hover);
6055+
}
6056+
6057+
.image-library-choose-file:hover .image-wrap img, .image-library-choose-file:focus .image-wrap img {
6058+
object-fit: contain;
6059+
}
6060+
6061+
.image-library-choose-file.image-library-image-selected {
6062+
background: none;
6063+
border: none;
6064+
}
6065+
6066+
.image-library-choose-file.image-library-image-selected .image-wrap {
6067+
border-color: var(--gin-color-primary-active);
6068+
opacity: 1;
6069+
}
6070+
6071+
.view-image-library.view-display-id-default > .view-filters .views-exposed-form {
6072+
margin-bottom: 0;
6073+
}
6074+
6075+
.view-image-library.view-display-id-default > .view-content {
6076+
display: flex;
6077+
flex-flow: row wrap;
6078+
margin-top: 0;
6079+
}
6080+
6081+
.view-image-library.view-display-id-default > .view-content:has(.image-library-image-selected) .image-library-choose-file:not(.image-library-image-selected) {
6082+
opacity: .5;
6083+
}
6084+
60016085
.layout-editor-block {
60026086
box-shadow: var(--gin-shadow-l1);
60036087
border-radius: var(--gin-border-m);

‎styles/base/_backdrop-overrides.scss

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -579,6 +579,7 @@ fieldset.collapsible.collapsed {
579579
.search-reset {
580580
line-height: inherit;
581581
}
582+
582583
.table-filter {
583584
background-color: transparent;
584585
border: none;
@@ -597,3 +598,90 @@ fieldset.vbo-fieldset-select-all {
597598
color: var(--gin-color-text-light);
598599
font-size: var(--gin-font-size-s);
599600
}
601+
602+
/* Image Library */
603+
.image-library-choose-file {
604+
border: none;
605+
background: transparent;
606+
margin: 5px;
607+
padding: 5px;
608+
height: auto;
609+
border-radius: var(--gin-border-m);
610+
611+
.image-library-filename {
612+
position: relative;
613+
color: var(--gin-color-text);
614+
word-break: break-all;
615+
text-overflow: initial;
616+
white-space: initial;
617+
overflow: visible;
618+
margin: 0;
619+
max-width: 100%;
620+
max-height: none;
621+
font-size: var(--gin-font-size-m);
622+
display: block;
623+
}
624+
625+
.image-wrap {
626+
aspect-ratio: 1;
627+
overflow: hidden;
628+
border-radius: var(--gin-border-m);
629+
border: 3px solid transparent;
630+
transition: var(--gin-transition-fast);
631+
display: flex;
632+
633+
img {
634+
object-fit: cover;
635+
object-position: center center;
636+
min-width: calc(100% + 6px);
637+
max-width: calc(100% + 6px);
638+
max-height: calc(100% + 6px);
639+
aspect-ratio: 1;
640+
position: inherit;
641+
box-shadow: none;
642+
background-color: var(--gin-bg-layer);
643+
transition: var(--gin-transition-fast);
644+
}
645+
}
646+
647+
&:hover,
648+
&:focus {
649+
background-color: transparent;
650+
border: none;
651+
652+
.image-wrap {
653+
border-color: var(--gin-color-primary-hover);
654+
655+
img {
656+
object-fit: contain;
657+
}
658+
}
659+
}
660+
&.image-library-image-selected {
661+
background: none;
662+
border: none;
663+
.image-wrap {
664+
border-color: var(--gin-color-primary-active);
665+
opacity: 1;
666+
}
667+
}
668+
}
669+
670+
.view-image-library.view-display-id-default {
671+
> .view-filters {
672+
.views-exposed-form {
673+
margin-bottom: 0;
674+
}
675+
}
676+
> .view-content {
677+
display: flex;
678+
flex-flow: row wrap;
679+
margin-top: 0;
680+
681+
&:has(.image-library-image-selected) {
682+
.image-library-choose-file:not(.image-library-image-selected) {
683+
opacity: .5;
684+
}
685+
}
686+
}
687+
}

‎template.php

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -527,3 +527,13 @@ function gin_pager_link($variables) {
527527
$attributes['href'] = url($_GET['q'], array('query' => $query));
528528
return '<a' . backdrop_attributes($attributes) . '>' . check_plain($text) . '</a>';
529529
}
530+
531+
/**
532+
* Implements hook_views_pre_render().
533+
*/
534+
function gin_views_pre_render(&$view) {
535+
if ($view->name == 'image_library') {
536+
$view->field["uri"]->options["image_style"] = 'medium';
537+
$view->field["uri"]->options["thumbnail_style"] = 'medium';
538+
}
539+
}

‎templates/views/views-view-fields--image-library.tpl.php

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?php
2+
/**
3+
* @file
4+
* Default simple view template to all the fields as a row.
5+
*
6+
* - $view: The view in use.
7+
* - $fields: an array of $field objects. Each one contains:
8+
* - $field->content: The output of the field.
9+
* - $field->raw: The raw data for the field, if it exists. This is NOT output safe.
10+
* - $field->class: The safe class id to use.
11+
* - $field->handler: The Views field handler object controlling this field. Do not use
12+
* var_export to dump this object, as it can't handle the recursion.
13+
* - $field->inline: Whether or not the field should be inline.
14+
* - $field->inline_html: either div or span based on the above flag.
15+
* - $field->wrapper_prefix: A complete wrapper containing the inline_html to use.
16+
* - $field->wrapper_suffix: The closing tag for the wrapper.
17+
* - $field->separator: an optional separator that may appear before a field.
18+
* - $field->label: The wrap label text to use.
19+
* - $field->label_html: The full HTML of the label to use including
20+
* configured element type.
21+
* - $row: The raw result object from the query, with all data it fetched.
22+
*
23+
* @ingroup views_templates
24+
*/
25+
?>
26+
<?php foreach ($fields as $id => $field): ?>
27+
<?php if (!empty($field->separator)): ?>
28+
<?php print $field->separator; ?>
29+
<?php endif; ?>
30+
31+
<?php print $field->wrapper_prefix; ?>
32+
<?php print $field->label_html; ?>
33+
<?php if ($id == 'fid'): ?>
34+
<div class="image-wrap">
35+
<?php print $field->content; ?>
36+
</div>
37+
<?php else: ?>
38+
<?php print $field->content; ?>
39+
<?php endif; ?>
40+
<?php print $field->wrapper_suffix; ?>
41+
<?php endforeach; ?>

0 commit comments

Comments
 (0)