Skip to content

Commit

Permalink
EZP-29999: As an editor, I want to see custom icons for content types (…
Browse files Browse the repository at this point in the history 
…ezsystems#805)

* EZP-29999: Implement custom icons for content types

* Change ezplatform_admin_ui_content_type_icon to ez_content_type_icon

* Fix

* contentType -> content_type_identifier

* fixup! EZP-29999: Implement custom icons for content types

* fixup! EZP-29999: Implement custom icons for content types

* Pass different contentTypesMap to MFU
  • Loading branch information
@tischsoic
tischsoic authored and konradoboza committed May 29, 2019
1 parent 18d774a commit 2048ee2
Show file tree
Hide file tree
Showing 26 changed files with 243 additions and 122 deletions.
8 changes: 8 additions & 0 deletions src/bundle/Resources/public/js/scripts/admin.location.view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,13 @@
return total;
}, {});
const udwConfigBulkMoveItems = JSON.parse(container.dataset.udwConfigBulkMoveItems);
const mfuContentTypesMap = Object.values(eZ.adminUiConfig.contentTypes).reduce((contentTypeDataMap, contentTypeGroup) => {
for (const contentTypeData of contentTypeGroup) {
contentTypeDataMap[contentTypeData.href] = contentTypeData;
}

return contentTypeDataMap;
}, {});

ReactDOM.render(
React.createElement(eZ.modules.SubItems, {
Expand All @@ -128,6 +135,7 @@
attrs: Object.assign({}, mfuAttrs, {
onPopupClose: (itemsUploaded) => itemsUploaded.length && global.location.reload(true),
contentCreatePermissionsConfig: JSON.parse(container.dataset.mfuCreatePermissionsConfig),
contentTypesMap: mfuContentTypesMap,
}),
},
],
Expand Down
56 changes: 28 additions & 28 deletions src/bundle/Resources/public/scss/_extra-actions.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
.ez-extra-actions {
$block: '.ez-extra-actions';

border-radius: 8px;
border: 6px solid $ez-color-secondary;
width: 300px;
border-radius: calculateRem(8px);
border: calculateRem(6px) solid $ez-color-secondary;
width: calculateRem(300px);

&__action {
display: block;
background: none;
border: 0 none;
width: 100%;
text-align: left;
border-radius: 4px;
padding: 0 16px;
line-height: 45px;
border-radius: calculateRem(4px);
padding: 0 calculateRem(16px);
line-height: calculateRem(45px);
background: $ez-white;
color: $ez-color-secondary;
text-decoration: none;
Expand All @@ -38,19 +38,19 @@
}

&__action + &__action {
margin-top: 8px;
margin-top: calculateRem(8px);
}

&__header {
line-height: 45px;
line-height: calculateRem(45px);
color: $ez-white;
padding: 0 8px;
padding: 0 calculateRem(8px);
font-weight: 700;
}

&__content {
background: $ez-ground-base-dark;
max-height: 300px;
max-height: calculateRem(300px);
overflow: auto;

.form-group {
Expand All @@ -61,11 +61,11 @@
&--edit-user,
&--edit {
#{$block}__content {
padding: 8px;
padding: calculateRem(8px);
}

#{$block}__form-values {
max-height: 150px;
max-height: calculateRem(150px);
overflow: auto;
}

Expand All @@ -75,15 +75,15 @@
border: 0 none;
width: 100%;
text-align: left;
border-radius: 4px;
padding: 0 16px;
line-height: 45px;
border-radius: calculateRem(4px);
padding: 0 calculateRem(16px);
line-height: calculateRem(45px);
background: $ez-white;
text-decoration: none;
cursor: pointer;
transition: all 0.2s $ez-admin-transition;
margin-bottom: 0;
font-size: 0.9375rem;
font-size: calculateRem(15px);

&:hover,
&:focus {
Expand All @@ -97,7 +97,7 @@
}

&:not(:last-child) {
margin-bottom: 0.5rem;
margin-bottom: calculateRem(8px);
}

&-label {
Expand All @@ -115,15 +115,15 @@

&__section-header {
background: $ez-ground-base-dark;
padding: 0.25rem 0 0.25rem 0.5rem;
font-size: 0.9375rem;
padding: calculateRem(4px) 0 calculateRem(4px) calculateRem(8px);
font-size: calculateRem(15px);
font-weight: 700;
}

&__section-content {
background: $ez-white;
padding: 1rem 0.5rem;
font-size: 0.9375rem;
padding: 1rem calculateRem(8px);
font-size: calculateRem(15px);

select {
display: inline-block;
Expand Down Expand Up @@ -160,7 +160,7 @@
&-label {
margin: 0;
display: block;
padding-left: 1.5rem;
padding-left: calculateRem(40px);
}

&-input[type='radio'] {
Expand All @@ -178,10 +178,10 @@
&::after {
content: '';
position: absolute;
height: 40px;
width: 10px;
top: 30px;
right: -6px;
height: calculateRem(40px);
width: calculateRem(10px);
top: calculateRem(30px);
right: calculateRem(-6px);
transform: translate(100%, -50%);
z-index: 0;
background: $ez-color-secondary;
Expand All @@ -194,13 +194,13 @@
left: 0;
z-index: 2;
opacity: 1;
transform: translate(calc(-100% - 10px), 0) scaleX(1);
transform: translate(calc(-100% - #{calculateRem(10px)}), 0) scaleX(1);
transform-origin: right center;
transition: all 0.2s $ez-admin-transition;

&--hidden {
opacity: 0;
transform: translate(calc(-100% - 15px), 0) scaleX(0);
transform: translate(calc(-100% - #{calculateRem(15px)}), 0) scaleX(0);
}
}
}
18 changes: 15 additions & 3 deletions src/bundle/Resources/public/scss/_instant-filter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,33 @@
.ez-extra-actions--create {
.ez-instant-filter {
&__group-name {
padding-left: .5rem;
padding-left: calculateRem(8px);
}

&__input-wrapper {
padding: 1rem .5rem;
padding: calculateRem(16px) calculateRem(8px);
}

&__group-item {
position: relative;

label {
cursor: pointer;
}

.ez-icon {
fill: $ez-black;
position: absolute;
top: 0;
left: calculateRem(20px);
width: calculateRem(16px);
height: calculateRem(16px);
margin-top: calculateRem(3px);
}
}

&__items {
max-height: 200px;
max-height: calculateRem(200px);
overflow: auto;
}
}
Expand Down
63 changes: 43 additions & 20 deletions src/bundle/Resources/public/scss/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,56 @@
justify-content: space-between;
background-color: $ez-ground-primary;
align-items: center;
padding: 0 1.25rem;
min-height: 50px;
border-radius: .25rem .25rem 0 0;
padding: 0 calculateRem(20px);
min-height: calculateRem(50px);
border-radius: calculateRem(4px) calculateRem(4px) 0 0;
}

&__headline {
font-size: 1.0625rem;
font-size: calculateRem(17px);
margin-bottom: 0;
font-weight: bold;
color: $ez-black;
}

&__header-cell {
.table &--has-icon {
padding: 0;
}

.table &--after-icon {
padding-left: 0;
}
}

&__cell {
&--field-definitions-head {
width: calc(100% / 3);
}

.table &--has-action-btns {
padding-right: 1.25rem;
padding-right: calculateRem(20px);
}

&--has-checkbox {
width: 5%;
}

.table &--has-icon {
padding: 0 calculateRem(8px);
width: calculateRem(24px);
text-align: right;
vertical-align: middle;
line-height: 0;
}

.table &--after-icon {
padding-left: 0;
}

&--no-content {
margin-bottom: 3rem;
padding: 0.75rem 1rem;
margin-bottom: calculateRem(48px);
padding: calculateRem(12px) calculateRem(16px);
background-color: $ez-white;
font-style: italic;
color: $ez-color-base-dark;
Expand All @@ -48,12 +70,12 @@
justify-content: space-between;
background-color: $ez-ground-primary;
align-items: center;
padding: 0 1.25rem;
min-height: 50px;
border-radius: .25rem .25rem 0 0;
padding: 0 calculateRem(20px);
min-height: calculateRem(50px);
border-radius: calculateRem(4px) calculateRem(4px) 0 0;

&__headline {
font-size: 1.0625rem;
font-size: calculateRem(17px);
margin-bottom: 0;
font-weight: bold;
color: $ez-black;
Expand All @@ -65,20 +87,21 @@
}

.table {
margin-bottom: 3rem;
margin-bottom: calculateRem(48px);

th, td {
padding: .7rem 1.4rem;
line-height: 20px;
th,
td {
padding: calculateRem(11px) calculateRem(22px);
line-height: calculateRem(20px);
}

thead th {
font-size: .9375rem;
font-size: calculateRem(15px);
vertical-align: top;
}

td {
font-size: .875rem;
font-size: calculateRem(14px);
vertical-align: middle;

.checkbox label {
Expand Down Expand Up @@ -109,11 +132,11 @@
}

.ez-table-no-content {
margin-bottom: 3rem;
padding: 0.75rem 1rem;
margin-bottom: calculateRem(48px);
padding: calculateRem(12px) calculateRem(16px);
background-color: $ez-white;
font-style: italic;
font-size: .875rem;
font-size: calculateRem(14px);
color: $ez-color-base-dark;
}

Expand Down
18 changes: 12 additions & 6 deletions src/bundle/Resources/views/admin/bookmark/list.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,12 @@
<table class="ez-table table">
<thead>
<tr>
<th></th>
<th>{{ 'bookmark.list.name'|trans|desc('Name') }}</th>
<th>{{ 'bookmark.list.content_type'|trans|desc('Content Type') }}</th>
<th>{{ 'bookmark.list.path'|trans|desc('Path') }}</th>
<th></th>
<th class="ez-table__header-cell"></th>
<th class="ez-table__header-cell ez-table__header-cell--has-icon"></th>
<th class="ez-table__header-cell ez-table__header-cell--after-icon">{{ 'bookmark.list.name'|trans|desc('Name') }}</th>
<th class="ez-table__header-cell">{{ 'bookmark.list.content_type'|trans|desc('Content Type') }}</th>
<th class="ez-table__header-cell">{{ 'bookmark.list.path'|trans|desc('Path') }}</th>
<th class="ez-table__header-cell"></th>
</tr>
</thead>
<tbody>
Expand All @@ -47,7 +48,12 @@
{% for bookmark in pager.currentPageResults %}
<tr>
<td class="ez-table__cell ez-table__cell--has-checkbox">{{ form_widget(form_remove.bookmarks[bookmark.id]) }}</td>
<td class="ez-table__cell"><a href="{{ path('_ezpublishLocation', { 'locationId': bookmark.id }) }}">{{ ez_content_name(bookmark.contentInfo) }}</a></td>
<td class="ez-table__cell ez-table__cell--has-icon">
<svg class="ez-icon ez-icon--medium">
<use xlink:href="{{ ez_content_type_icon(bookmark.contentType.identifier) }}"></use>
</svg>
</td>
<td class="ez-table__cell ez-table__cell--after-icon"><a href="{{ path('_ezpublishLocation', { 'locationId': bookmark.id }) }}">{{ ez_content_name(bookmark.contentInfo) }}</a></td>
<td class="ez-table__cell">{{ bookmark.contentType.name }}</td>
<td class="ez-table__cell">
{% if bookmark.pathLocations|length > 1 %}
Expand Down
Loading

0 comments on commit 2048ee2

Please sign in to comment.