From 2ce3ae8011a8ebddd4606e1780ed818d94c587cc Mon Sep 17 00:00:00 2001 From: tischsoic Date: Tue, 19 Sep 2023 14:00:12 +0200 Subject: [PATCH 1/4] IBX-6599: New grid view item design --- .../public/scss/_grid-view-item.scss | 110 ++++++++---------- .../ui/modules/universal-discovery/_grid.scss | 9 -- .../grid_view/grid_view_item.html.twig | 55 +++++++++ .../grid-view/grid.view.item.component.js | 10 +- .../components/grid-view/grid.view.item.js | 6 +- 5 files changed, 113 insertions(+), 77 deletions(-) create mode 100644 src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss index da3b1f7d44..c20b4d0ac6 100644 --- a/src/bundle/Resources/public/scss/_grid-view-item.scss +++ b/src/bundle/Resources/public/scss/_grid-view-item.scss @@ -2,15 +2,13 @@ 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); &:link { @@ -25,35 +23,19 @@ text-decoration: none; } - &__content-type { - position: absolute; - z-index: 2; - top: 0; - left: 0; - width: calculateRem(30px); - height: calculateRem(30px); - background: $ibexa-color-white; - } - - &__content-type .ibexa-icon { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - &__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; @@ -61,54 +43,64 @@ 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; } - &__checkbox { - position: absolute; - top: calculateRem(8px); - right: calculateRem(8px); - line-height: 1; + &__detail-a { + grid-area: 2/1; } - &__info { - display: flex; - height: calculateRem(64px); + &__detail-b { + grid-area: 2/2; } - &__status-container { - width: calculateRem(20px); + &__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; + } } - &__title-container { - width: calc(100% - #{calculateRem(40px)}); + &__checkbox { + position: absolute; + top: calculateRem(8px); + left: calculateRem(8px); + line-height: 1; } - &__actions-container { - position: relative; - display: flex; - justify-content: flex-end; - width: calculateRem(20px); + &--marked { + border: calculateRem(1px) solid $ibexa-color-dark; + } - .ibexa-popup-menu { - left: calculateRem(22px); - } + &--not-selectable { + background-color: $ibexa-color-light-200; + cursor: not-allowed; + } + + &--selected { + border: calculateRem(1px) solid $ibexa-color-primary; } } diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss index feb62354f5..e9a2c9adc8 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss @@ -9,8 +9,6 @@ .ibexa-grid-view-item { &--marked { - border: calculateRem(1px) solid $ibexa-color-dark; - .c-thumbnail { .ibexa-icon { fill: $ibexa-color-dark; @@ -18,14 +16,7 @@ } } - &--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; diff --git a/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig new file mode 100644 index 0000000000..466e4add4e --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig @@ -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 -%} +
+ {% if image_url is defined and image_url is not null %} + + {% else %} + + + + {% endif %} +
+ {%- endblock -%} + + {%- block item_footer -%} +
+ {%- block item_footer_contet -%} + {%- block item_title -%} +
+ {{ title|default('') }} +
+ {%- endblock -%} + + {%- block item_detail_a -%} +
+ {{ detail_a|default('') }} +
+ {%- endblock -%} + + {%- block item_detail_b -%} +
+ {{ detail_b|default('') }} +
+ {%- endblock -%} + {%- endblock -%} +
+ {%- endblock -%} + {%- endblock -%} + +{%- endblock -%} diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js index f8061d73e0..55d0eae297 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js @@ -22,21 +22,17 @@ const GridViewItemComponent = ({ item, generateLink }) => { const { uri, alternativeText } = content._thumbnail; image = {alternativeText}; - contentTypeIcon = ( -
- -
- ); + contentTypeIcon = ; } return ( - {contentTypeIcon}
{image}
-
+
{content._name}
+
{contentTypeIcon}
 ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js index e37fae1af0..4a51298967 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js @@ -77,8 +77,10 @@ const GridViewItem = ({ location, version }) => { contentTypeIconPath={contentTypesMap[location.ContentInfo.Content.ContentType._href].thumbnail} />
-
-
{location.ContentInfo.Content.TranslatedName}
+
+
+ {location.ContentInfo.Content.TranslatedName} +
{renderToggleSelection()}
From 1ab2d74d3359f18f79e5a96a6b5f1cc77acc0257 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Tue, 19 Sep 2023 14:07:54 +0200 Subject: [PATCH 2/4] missing change --- .../components/grid-view/grid.view.item.component.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js index 55d0eae297..53ef236643 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js @@ -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 = ( @@ -22,7 +22,6 @@ const GridViewItemComponent = ({ item, generateLink }) => { const { uri, alternativeText } = content._thumbnail; image = {alternativeText}; - contentTypeIcon = ; } return ( @@ -32,7 +31,10 @@ const GridViewItemComponent = ({ item, generateLink }) => {
{content._name}
-
{contentTypeIcon}
+
+ + {contentTypeName} +
); From 864d42b15b7ee7f5dea76787e6850152b7954c87 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Thu, 5 Oct 2023 11:53:04 +0200 Subject: [PATCH 3/4] fix after QA --- .../public/scss/_grid-view-item.scss | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss index c20b4d0ac6..33488564e7 100644 --- a/src/bundle/Resources/public/scss/_grid-view-item.scss +++ b/src/bundle/Resources/public/scss/_grid-view-item.scss @@ -10,6 +10,7 @@ min-width: calculateRem(290px); max-width: calculateRem(290px); margin: 0 calculateRem(14px) calculateRem(32px); + cursor: pointer; &:link { text-decoration: none; @@ -21,6 +22,24 @@ color: $ibexa-color-dark; border-color: $ibexa-color-dark; text-decoration: none; + + .ibexa-input--checkbox, + .ibexa-input--radio { + border-color: $ibexa-color-primary; + } + } + + &:active { + border-color: $ibexa-color-dark; + } + + &:hover { + border-color: $ibexa-color-primary; + } + + &:focus { + border-color: $ibexa-color-dark; + box-shadow: $ibexa-btn-focus-box-shadow; } &__image { @@ -101,6 +120,12 @@ } &--selected { - border: calculateRem(1px) solid $ibexa-color-primary; + background: $ibexa-color-light-300; + + .ibexa-grid-view-item { + &__title { + font-weight: 600; + } + } } } From 7b4229fc23573ae0ffb187030bc496b5991b630f Mon Sep 17 00:00:00 2001 From: tischsoic Date: Fri, 6 Oct 2023 11:50:15 +0200 Subject: [PATCH 4/4] add empty alt --- .../admin/ui/component/grid_view/grid_view_item.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig index 466e4add4e..7fe0027cc4 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig @@ -18,7 +18,7 @@ {%- block item_image -%}
{% if image_url is defined and image_url is not null %} - + {% else %}