Skip to content

IBX-6599: New grid view item design #911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dew326 merged 4 commits into from
Oct 6, 2023
Merged

IBX-6599: New grid view item design #911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ce3ae8
IBX-6599: New grid view item design
tischsoic Sep 19, 2023
1ab2d74
missing change
tischsoic Sep 19, 2023
864d42b
fix after QA
tischsoic Oct 5, 2023
7b4229f
add empty alt
tischsoic Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 70 additions & 53 deletions src/bundle/Resources/public/scss/_grid-view-item.scss
View file
Open in desktop
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);
Copy link
Contributor

@OstafinL OstafinL Sep 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we have variable for 5px nad 10px, should we add this too?

Copy link
Contributor Author

@tischsoic tischsoic Sep 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure, design says 12px.

Copy link
Contributor Author

@tischsoic tischsoic Sep 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed in private: we agreed that for now, we will be using 12px without any variable.

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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