Skip to content

Commit

Permalink
IBX-1348: Create sidebar design fixes - main & UDW (#269)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tischsoic
tischsoic authored Jan 31, 2022
1 parent a28e0cd commit 54937e4
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 61 deletions.
7 changes: 0 additions & 7 deletions src/bundle/Resources/public/scss/_extra-actions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,13 +95,6 @@
}
}

&__section-header {
margin-bottom: calculateRem(12px);
color: $ibexa-color-dark-300;
font-size: calculateRem(16px);
padding-top: calculateRem(32px);
}

&__section-content {
padding-bottom: calculateRem(32px);
background: $ibexa-color-white;
Expand Down
8 changes: 7 additions & 1 deletion src/bundle/Resources/public/scss/_instant-filter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@
}

.ibexa-extra-actions--create {
.ibexa-extra-actions {
&__section-content {
width: 75%;
}
}

.ibexa-instant-filter {
&__desc {
color: $ibexa-color-dark-400;
Expand All @@ -18,7 +24,7 @@
flex-wrap: wrap;
padding-bottom: calculateRem(16px);

&:not(:first-of-type) {
&:not(:last-of-type) {
border-bottom: calculateRem(1px) solid $ibexa-color-light;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/bundle/Resources/views/themes/admin/content/widget/content_create.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
</div>
<div class="ibexa-extra-actions__content">
{{ form_start(form, { 'action': path('ibexa.content.create'), 'attr': { 'autocomplete': 'off' } }) }}
<div class="ibexa-extra-actions__section-header">{{ 'content.create.select_language'|trans|desc('Select a language:') }}</div>
<label class="ibexa-label ibexa-extra-actions__section-header">{{ 'content.create.select_language'|trans|desc('Select a language:') }}</label>
<div class="ibexa-extra-actions__section-content">
{% if form.language.vars.choices|length == 1 %}
{{ form_widget(form.language, {'attr': {'class': 'ibexa-content-create form-control', 'readonly': true}}) }}
{% else %}
{{ form_widget(form.language, {'attr': {'class': 'form-control'}}) }}
{% endif %}
</div>
<div class="ibexa-extra-actions__section-header">{{ 'content.create.select_content_type'|trans|desc('Select a Content Type:') }}</div>
<label class="ibexa-label ibexa-extra-actions__section-header">{{ 'content.create.select_content_type'|trans|desc('Select a Content Type:') }}</label>
<div class="ibexa-extra-actions__section-content ibexa-extra-actions__section-content--content-type">
<div class="ibexa-instant-filter">
<div class="ibexa-instant-filter__input-wrapper">
Expand Down
107 changes: 56 additions & 51 deletions ...src/modules/universal-discovery/components/content-create-widget/content.create.widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ const ContentCreateWidget = () => {
<div className="ibexa-extra-actions__header-subtitle">{createUnderLabel}</div>
</div>
<div className="ibexa-extra-actions__content">
<div className="ibexa-extra-actions__section-header">{selectLanguageLabel}</div>
<label className="ibexa-label ibexa-extra-actions__section-header">{selectLanguageLabel}</label>
<div className="ibexa-extra-actions__section-content">
<Dropdown
dropdownListRef={dropdownListRef}
Expand All @@ -131,7 +131,7 @@ const ContentCreateWidget = () => {
extraClasses="c-udw-dropdown"
/>
</div>
<div className="ibexa-extra-actions__section-header">{selectContentType}</div>
<label className="ibexa-label ibexa-extra-actions__section-header">{selectContentType}</label>
<div className="ibexa-extra-actions__section-content ibexa-extra-actions__section-content--content-type">
<div className="ibexa-instant-filter">
<div className="ibexa-instant-filter__input-wrapper">
Expand All @@ -144,61 +144,66 @@ const ContentCreateWidget = () => {
/>
</div>
</div>
</div>
<div className="ibexa-instant-filter__desc">{filtersDescLabel}</div>
<div className="ibexa-instant-filter__items">
{contentTypes.map(([groupName, groupItems]) => {
const restrictedContentTypeIds = selectedLocation?.permissions?.create.restrictedContentTypeIds ?? [];
const isHidden = groupItems.every((groupItem) => {
const isNotSearchedName = filterQuery && !groupItem.name.toLowerCase().includes(filterQuery);
const hasNotPermission =
restrictedContentTypeIds.length && !restrictedContentTypeIds.includes(groupItem.id.toString());
const isNotAllowedContentType = allowedContentTypes && !allowedContentTypes.includes(groupItem.identifier);
<div className="ibexa-instant-filter__desc">{filtersDescLabel}</div>
<div className="ibexa-instant-filter__items">
{contentTypes.map(([groupName, groupItems]) => {
const restrictedContentTypeIds = selectedLocation?.permissions?.create.restrictedContentTypeIds ?? [];
const isHidden = groupItems.every((groupItem) => {
const isNotSearchedName = filterQuery && !groupItem.name.toLowerCase().includes(filterQuery);
const hasNotPermission =
restrictedContentTypeIds.length && !restrictedContentTypeIds.includes(groupItem.id.toString());
const isNotAllowedContentType =
allowedContentTypes && !allowedContentTypes.includes(groupItem.identifier);

return isNotSearchedName || hasNotPermission || isNotAllowedContentType;
});
return isNotSearchedName || hasNotPermission || isNotAllowedContentType;
});

if (isHidden) {
return null;
}
if (isHidden) {
return null;
}

return (
<div className="ibexa-instant-filter__group" key={groupName}>
<div className="ibexa-instant-filter__group-name">{groupName}</div>
{groupItems.map(({ name, thumbnail, identifier, id }) => {
const isHidden =
(filterQuery && !name.toLowerCase().includes(filterQuery)) ||
(selectedLocation &&
selectedLocation.permissions &&
selectedLocation.permissions.create.restrictedContentTypeIds.length &&
!selectedLocation.permissions.create.restrictedContentTypeIds.includes(id.toString())) ||
(allowedContentTypes && !allowedContentTypes.includes(identifier));
const className = createCssClassNames({
'ibexa-instant-filter__group-item': true,
'ibexa-instant-filter__group-item--selected': identifier === selectedContentType,
});
const updateSelectedContentType = () => setSelectedContentType(identifier);
return (
<div className="ibexa-instant-filter__group" key={groupName}>
<div className="ibexa-instant-filter__group-name">{groupName}</div>
{groupItems.map(({ name, thumbnail, identifier, id }) => {
const isHidden =
(filterQuery && !name.toLowerCase().includes(filterQuery)) ||
(selectedLocation &&
selectedLocation.permissions &&
selectedLocation.permissions.create.restrictedContentTypeIds.length &&
!selectedLocation.permissions.create.restrictedContentTypeIds.includes(
id.toString()
)) ||
(allowedContentTypes && !allowedContentTypes.includes(identifier));
const className = createCssClassNames({
'ibexa-instant-filter__group-item': true,
'ibexa-instant-filter__group-item--selected': identifier === selectedContentType,
});
const updateSelectedContentType = () => setSelectedContentType(identifier);

if (isHidden) {
return null;
}
if (isHidden) {
return null;
}

return (
<div
hidden={isHidden}
key={identifier}
className={className}
onClick={updateSelectedContentType}>
<Icon customPath={thumbnail} extraClasses="ibexa-icon--small" />
<div className="form-check">
<div className="ibexa-label ibexa-label--checkbox-radio form-check-label">{name}</div>
return (
<div
hidden={isHidden}
key={identifier}
className={className}
onClick={updateSelectedContentType}>
<Icon customPath={thumbnail} extraClasses="ibexa-icon--small" />
<div className="form-check">
<div className="ibexa-label ibexa-label--checkbox-radio form-check-label">
{name}
</div>
</div>
</div>
</div>
);
})}
</div>
);
})}
);
})}
</div>
);
})}
</div>
</div>
</div>
<div className="c-content-create__confirm-wrapper">
Expand Down

0 comments on commit 54937e4

Please sign in to comment.