Skip to content

Commit 026e867

Browse files
tischsoictischsoic
authored
IBX-6599: New grid view item design (#911)
1 parent a085e8c commit 026e867

File tree

5 files changed

+135
-72
lines changed

5 files changed

+135
-72
lines changed

‎src/bundle/Resources/public/scss/_grid-view-item.scss‎

Lines changed: 70 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@
22
display: flex;
33
flex-direction: column;
44
position: relative;
5-
padding: calculateRem(16px);
6-
min-height: calculateRem(238px);
75
border: calculateRem(1px) solid $ibexa-color-light;
8-
border-radius: calculateRem(5px);
6+
border-radius: calculateRem(12px);
97
background: $ibexa-color-white;
108
box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-black, 0.05);
119
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
12-
min-width: calculateRem(216px);
13-
max-width: calculateRem(216px);
10+
min-width: calculateRem(290px);
11+
max-width: calculateRem(290px);
1412
margin: 0 calculateRem(14px) calculateRem(32px);
13+
cursor: pointer;
1514

1615
&:link {
1716
text-decoration: none;
@@ -23,92 +22,110 @@
2322
color: $ibexa-color-dark;
2423
border-color: $ibexa-color-dark;
2524
text-decoration: none;
25+
26+
.ibexa-input--checkbox,
27+
.ibexa-input--radio {
28+
border-color: $ibexa-color-primary;
29+
}
2630
}
2731

28-
&__content-type {
29-
position: absolute;
30-
z-index: 2;
31-
top: 0;
32-
left: 0;
33-
width: calculateRem(30px);
34-
height: calculateRem(30px);
35-
background: $ibexa-color-white;
32+
&:active {
33+
border-color: $ibexa-color-dark;
3634
}
3735

38-
&__content-type .ibexa-icon {
39-
position: absolute;
40-
top: 50%;
41-
left: 50%;
42-
transform: translate(-50%, -50%);
36+
&:hover {
37+
border-color: $ibexa-color-primary;
38+
}
39+
40+
&:focus {
41+
border-color: $ibexa-color-dark;
42+
box-shadow: $ibexa-btn-focus-box-shadow;
4343
}
4444

4545
&__image {
46-
display: block;
47-
width: auto;
48-
height: auto;
49-
max-width: calculateRem(184px);
50-
max-height: calculateRem(248px);
46+
&:not(.ibexa-grid-view-item__image--none) {
47+
width: 100%;
48+
height: 100%;
49+
object-fit: cover;
50+
}
5151
}
5252

5353
&__image-wrapper {
54-
flex-grow: 1;
55-
border-radius: calculateRem(5px);
56-
margin-bottom: calculateRem(16px);
54+
height: calculateRem(160px);
55+
border-top-left-radius: calculateRem(12px);
56+
border-top-right-radius: calculateRem(12px);
57+
overflow: hidden;
5758
background: $ibexa-color-light-200;
5859

5960
display: flex;
6061
align-items: center;
6162
justify-content: center;
6263
}
6364

65+
&__footer {
66+
display: grid;
67+
row-gap: calculateRem(16px);
68+
padding: calculateRem(16px);
69+
}
70+
6471
&__title {
72+
grid-area: 1/-1;
6573
white-space: nowrap;
6674
overflow: hidden;
6775
text-overflow: ellipsis;
6876
text-decoration: none;
69-
font-weight: 600;
77+
font-size: $ibexa-text-font-size-medium;
7078
line-height: calculateRem(21px);
7179
}
7280

73-
&__sub-title {
74-
margin-top: calculateRem(4px);
75-
white-space: nowrap;
76-
overflow: hidden;
77-
text-overflow: ellipsis;
78-
text-decoration: none;
79-
font-size: $ibexa-text-font-size-small;
80-
line-height: calculateRem(24px);
81+
&__details-wrapper {
82+
display: grid;
83+
}
84+
85+
&__detail-a {
86+
grid-area: 2/1;
87+
}
88+
89+
&__detail-b {
90+
grid-area: 2/2;
91+
}
92+
93+
&__detail-a,
94+
&__detail-b {
95+
display: flex;
96+
align-items: center;
97+
gap: calculateRem(8px);
98+
line-height: calculateRem(16px);
99+
color: $ibexa-color-dark-400;
100+
101+
.ibexa-icon {
102+
fill: $ibexa-color-dark-400;
103+
}
81104
}
82105

83106
&__checkbox {
84107
position: absolute;
85108
top: calculateRem(8px);
86-
right: calculateRem(8px);
109+
left: calculateRem(8px);
87110
line-height: 1;
88111
}
89112

90-
&__info {
91-
display: flex;
92-
height: calculateRem(64px);
93-
}
94-
95-
&__status-container {
96-
width: calculateRem(20px);
97-
display: flex;
113+
&--marked {
114+
border: calculateRem(1px) solid $ibexa-color-dark;
98115
}
99116

100-
&__title-container {
101-
width: calc(100% - #{calculateRem(40px)});
117+
&--not-selectable {
118+
background-color: $ibexa-color-light-200;
119+
cursor: not-allowed;
102120
}
103121

104-
&__actions-container {
105-
position: relative;
106-
display: flex;
107-
justify-content: flex-end;
108-
width: calculateRem(20px);
122+
&--selected {
123+
background: $ibexa-color-light-300;
109124

110-
.ibexa-popup-menu {
111-
left: calculateRem(22px);
125+
.ibexa-grid-view-item {
126+
&__title {
127+
font-weight: 600;
128+
}
112129
}
113130
}
114131
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,14 @@
99

1010
.ibexa-grid-view-item {
1111
&--marked {
12-
border: calculateRem(1px) solid $ibexa-color-dark;
13-
1412
.c-thumbnail {
1513
.ibexa-icon {
1614
fill: $ibexa-color-dark;
1715
}
1816
}
1917
}
2018

21-
&--not-selectable {
22-
background-color: $ibexa-color-light-200;
23-
cursor: not-allowed;
24-
}
25-
2619
&--selected {
27-
border: calculateRem(1px) solid $ibexa-color-primary;
28-
2920
.ibexa-grid-view-item {
3021
&__title {
3122
color: $ibexa-color-primary;

‎src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
2+
3+
{%- set is_template = is_template|default(false) -%}
4+
5+
{%- set item_attr = item_attr|default({})|merge({
6+
class: ('ibexa-grid-view-item '
7+
~ (is_marked|default(false) ? 'ibexa-grid-view-item--marked ')
8+
~ (is_not_selectable|default(false) ? 'ibexa-grid-view-item--not-selectable ')
9+
~ (is_selected|default(false) ? 'ibexa-grid-view-item--selected ')
10+
~ item_attr.class|default(''))|trim,
11+
}) -%}
12+
13+
{%- set item_element = item_element|default('div') -%}
14+
15+
{%- block item -%}
16+
<{{ item_element }} {{ html.attributes(item_attr, is_template) }}>
17+
{%- block item_content -%}
18+
{%- block item_image -%}
19+
<div class="ibexa-grid-view-item__image-wrapper">
20+
{% if image_url is defined and image_url is not null %}
21+
<img class="ibexa-grid-view-item__image" src="{{ image_url }}" alt="" />
22+
{% else %}
23+
<svg class="ibexa-icon ibexa-icon--dark ibexa-icon--extra-large">
24+
<use xlink:href="{{ icon_path }}"></use>
25+
</svg>
26+
{% endif %}
27+
</div>
28+
{%- endblock -%}
29+
30+
{%- block item_footer -%}
31+
<div class="ibexa-grid-view-item__footer">
32+
{%- block item_footer_contet -%}
33+
{%- block item_title -%}
34+
<div class="ibexa-grid-view-item__title">
35+
{{ title|default('') }}
36+
</div>
37+
{%- endblock -%}
38+
39+
{%- block item_detail_a -%}
40+
<div class="ibexa-grid-view-item__detail-a">
41+
{{ detail_a|default('') }}
42+
</div>
43+
{%- endblock -%}
44+
45+
{%- block item_detail_b -%}
46+
<div class="ibexa-grid-view-item__detail-b">
47+
{{ detail_b|default('') }}
48+
</div>
49+
{%- endblock -%}
50+
{%- endblock -%}
51+
</div>
52+
{%- endblock -%}
53+
{%- endblock -%}
54+
</{{ item_element }}>
55+
{%- endblock -%}

‎src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ const GridViewItemComponent = ({ item, generateLink }) => {
99
const imageClassName = 'ibexa-grid-view-item__image';
1010
const contentTypeIdentifier = content._info.contentType.identifier;
1111
const contentTypeIconUrl = ibexa.helpers.contentType.getContentTypeIconUrl(contentTypeIdentifier);
12+
const contentTypeName = ibexa.helpers.contentType.getContentTypeName(contentTypeIdentifier);
1213
let image = null;
13-
let contentTypeIcon = null;
1414

1515
if (content._thumbnail === null || content._thumbnail.mimeType === 'image/svg+xml') {
1616
image = (
@@ -22,21 +22,19 @@ const GridViewItemComponent = ({ item, generateLink }) => {
2222
const { uri, alternativeText } = content._thumbnail;
2323

2424
image = <img className={imageClassName} src={uri} alt={alternativeText} />;
25-
contentTypeIcon = (
26-
<div className="ibexa-grid-view-item__content-type">
27-
<Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small" />
28-
</div>
29-
);
3025
}
3126

3227
return (
3328
<a className="ibexa-grid-view-item" href={generateLink(locationId, content._info.id)}>
34-
{contentTypeIcon}
3529
<div className="ibexa-grid-view-item__image-wrapper">{image}</div>
36-
<div className="ibexa-grid-view-item__title-wrapper">
30+
<div className="ibexa-grid-view-item__footer">
3731
<div className="ibexa-grid-view-item__title" title={content._name}>
3832
{content._name}
3933
</div>
34+
<div className="ibexa-grid-view-item__detail-a">
35+
<Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small" />
36+
{contentTypeName}
37+
</div>
4038
</div>
4139
</a>
4240
);

‎src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,10 @@ const GridViewItem = ({ location, version }) => {
7777
contentTypeIconPath={contentTypesMap[location.ContentInfo.Content.ContentType._href].thumbnail}
7878
/>
7979
</div>
80-
<div className="ibexa-grid-view-item__title-wrapper">
81-
<div className="ibexa-grid-view-item__title">{location.ContentInfo.Content.TranslatedName}</div>
80+
<div className="ibexa-grid-view-item__footer">
81+
<div className="ibexa-grid-view-item__title" title={location.ContentInfo.Content.TranslatedName}>
82+
{location.ContentInfo.Content.TranslatedName}
83+
</div>
8284
</div>
8385
{renderToggleSelection()}
8486
</div>

0 commit comments

Comments
 (0)