Skip to content

Commit

Permalink
IBX-6599: New grid view item design (#911)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tischsoic
tischsoic authored Oct 6, 2023
1 parent a085e8c commit 026e867
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 72 deletions.
123 changes: 70 additions & 53 deletions src/bundle/Resources/public/scss/_grid-view-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,15 @@
display: flex;
flex-direction: column;
position: relative;
padding: calculateRem(16px);
min-height: calculateRem(238px);
border: calculateRem(1px) solid $ibexa-color-light;
border-radius: calculateRem(5px);
border-radius: calculateRem(12px);
background: $ibexa-color-white;
box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-black, 0.05);
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
min-width: calculateRem(216px);
max-width: calculateRem(216px);
min-width: calculateRem(290px);
max-width: calculateRem(290px);
margin: 0 calculateRem(14px) calculateRem(32px);
cursor: pointer;

&:link {
text-decoration: none;
Expand All @@ -23,92 +22,110 @@
color: $ibexa-color-dark;
border-color: $ibexa-color-dark;
text-decoration: none;

.ibexa-input--checkbox,
.ibexa-input--radio {
border-color: $ibexa-color-primary;
}
}

&__content-type {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: calculateRem(30px);
height: calculateRem(30px);
background: $ibexa-color-white;
&:active {
border-color: $ibexa-color-dark;
}

&__content-type .ibexa-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&:hover {
border-color: $ibexa-color-primary;
}

&:focus {
border-color: $ibexa-color-dark;
box-shadow: $ibexa-btn-focus-box-shadow;
}

&__image {
display: block;
width: auto;
height: auto;
max-width: calculateRem(184px);
max-height: calculateRem(248px);
&:not(.ibexa-grid-view-item__image--none) {
width: 100%;
height: 100%;
object-fit: cover;
}
}

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

display: flex;
align-items: center;
justify-content: center;
}

&__footer {
display: grid;
row-gap: calculateRem(16px);
padding: calculateRem(16px);
}

&__title {
grid-area: 1/-1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
font-weight: 600;
font-size: $ibexa-text-font-size-medium;
line-height: calculateRem(21px);
}

&__sub-title {
margin-top: calculateRem(4px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
font-size: $ibexa-text-font-size-small;
line-height: calculateRem(24px);
&__details-wrapper {
display: grid;
}

&__detail-a {
grid-area: 2/1;
}

&__detail-b {
grid-area: 2/2;
}

&__detail-a,
&__detail-b {
display: flex;
align-items: center;
gap: calculateRem(8px);
line-height: calculateRem(16px);
color: $ibexa-color-dark-400;

.ibexa-icon {
fill: $ibexa-color-dark-400;
}
}

&__checkbox {
position: absolute;
top: calculateRem(8px);
right: calculateRem(8px);
left: calculateRem(8px);
line-height: 1;
}

&__info {
display: flex;
height: calculateRem(64px);
}

&__status-container {
width: calculateRem(20px);
display: flex;
&--marked {
border: calculateRem(1px) solid $ibexa-color-dark;
}

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

&__actions-container {
position: relative;
display: flex;
justify-content: flex-end;
width: calculateRem(20px);
&--selected {
background: $ibexa-color-light-300;

.ibexa-popup-menu {
left: calculateRem(22px);
.ibexa-grid-view-item {
&__title {
font-weight: 600;
}
}
}
}
9 changes: 0 additions & 9 deletions src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,14 @@

.ibexa-grid-view-item {
&--marked {
border: calculateRem(1px) solid $ibexa-color-dark;

.c-thumbnail {
.ibexa-icon {
fill: $ibexa-color-dark;
}
}
}

&--not-selectable {
background-color: $ibexa-color-light-200;
cursor: not-allowed;
}

&--selected {
border: calculateRem(1px) solid $ibexa-color-primary;

.ibexa-grid-view-item {
&__title {
color: $ibexa-color-primary;
Expand Down
55 changes: 55 additions & 0 deletions src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}

{%- set is_template = is_template|default(false) -%}

{%- set item_attr = item_attr|default({})|merge({
class: ('ibexa-grid-view-item '
~ (is_marked|default(false) ? 'ibexa-grid-view-item--marked ')
~ (is_not_selectable|default(false) ? 'ibexa-grid-view-item--not-selectable ')
~ (is_selected|default(false) ? 'ibexa-grid-view-item--selected ')
~ item_attr.class|default(''))|trim,
}) -%}

{%- set item_element = item_element|default('div') -%}

{%- block item -%}
<{{ item_element }} {{ html.attributes(item_attr, is_template) }}>
{%- block item_content -%}
{%- block item_image -%}
<div class="ibexa-grid-view-item__image-wrapper">
{% if image_url is defined and image_url is not null %}
<img class="ibexa-grid-view-item__image" src="{{ image_url }}" alt="" />
{% else %}
<svg class="ibexa-icon ibexa-icon--dark ibexa-icon--extra-large">
<use xlink:href="{{ icon_path }}"></use>
</svg>
{% endif %}
</div>
{%- endblock -%}

{%- block item_footer -%}
<div class="ibexa-grid-view-item__footer">
{%- block item_footer_contet -%}
{%- block item_title -%}
<div class="ibexa-grid-view-item__title">
{{ title|default('') }}
</div>
{%- endblock -%}

{%- block item_detail_a -%}
<div class="ibexa-grid-view-item__detail-a">
{{ detail_a|default('') }}
</div>
{%- endblock -%}

{%- block item_detail_b -%}
<div class="ibexa-grid-view-item__detail-b">
{{ detail_b|default('') }}
</div>
{%- endblock -%}
{%- endblock -%}
</div>
{%- endblock -%}
{%- endblock -%}
</{{ item_element }}>
{%- endblock -%}
14 changes: 6 additions & 8 deletions src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const GridViewItemComponent = ({ item, generateLink }) => {
const imageClassName = 'ibexa-grid-view-item__image';
const contentTypeIdentifier = content._info.contentType.identifier;
const contentTypeIconUrl = ibexa.helpers.contentType.getContentTypeIconUrl(contentTypeIdentifier);
const contentTypeName = ibexa.helpers.contentType.getContentTypeName(contentTypeIdentifier);
let image = null;
let contentTypeIcon = null;

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

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

return (
<a className="ibexa-grid-view-item" href={generateLink(locationId, content._info.id)}>
{contentTypeIcon}
<div className="ibexa-grid-view-item__image-wrapper">{image}</div>
<div className="ibexa-grid-view-item__title-wrapper">
<div className="ibexa-grid-view-item__footer">
<div className="ibexa-grid-view-item__title" title={content._name}>
{content._name}
</div>
<div className="ibexa-grid-view-item__detail-a">
<Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small" />
{contentTypeName}
</div>
</div>
</a>
);
Expand Down
6 changes: 4 additions & 2 deletions src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,10 @@ const GridViewItem = ({ location, version }) => {
contentTypeIconPath={contentTypesMap[location.ContentInfo.Content.ContentType._href].thumbnail}
/>
</div>
<div className="ibexa-grid-view-item__title-wrapper">
<div className="ibexa-grid-view-item__title">{location.ContentInfo.Content.TranslatedName}</div>
<div className="ibexa-grid-view-item__footer">
<div className="ibexa-grid-view-item__title" title={location.ContentInfo.Content.TranslatedName}>
{location.ContentInfo.Content.TranslatedName}
</div>
</div>
{renderToggleSelection()}
</div>
Expand Down

0 comments on commit 026e867

Please sign in to comment.