Skip to content

Commit

Permalink
EZP-29999: Implement custom icons for content types
Browse files Browse the repository at this point in the history
  • Loading branch information
tischsoic committed Jan 30, 2019
1 parent eee23b4 commit 600496c
Show file tree
Hide file tree
Showing 25 changed files with 227 additions and 122 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@
attrs: Object.assign({}, mfuAttrs, {
onPopupClose: (itemsUploaded) => itemsUploaded.length && global.location.reload(true),
contentCreatePermissionsConfig: JSON.parse(container.dataset.mfuCreatePermissionsConfig),
contentTypesMap,
}),
},
],
Expand Down
56 changes: 28 additions & 28 deletions src/bundle/Resources/public/scss/_extra-actions.scss
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
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
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
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="{{ ezplatform_admin_ui_content_type_icon(bookmark.contentType) }}"></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
24 changes: 15 additions & 9 deletions src/bundle/Resources/views/admin/content_draft/list.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,14 @@
<table class="ez-table table">
<thead>
<tr>
<th></th>
<th>{{ 'drafts.list.name'|trans|desc('Name') }}</th>
<th>{{ 'drafts.list.content_type'|trans|desc('Content Type') }}</th>
<th>{{ 'drafts.list.modified_language'|trans|desc('Modified Language') }}</th>
<th>{{ 'drafts.list.version'|trans|desc('Version') }}</th>
<th>{{ 'drafts.list.last_saved'|trans|desc('Last Saved') }}</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">{{ 'drafts.list.name'|trans|desc('Name') }}</th>
<th class="ez-table__header-cell">{{ 'drafts.list.content_type'|trans|desc('Content Type') }}</th>
<th class="ez-table__header-cell">{{ 'drafts.list.modified_language'|trans|desc('Modified Language') }}</th>
<th class="ez-table__header-cell">{{ 'drafts.list.version'|trans|desc('Version') }}</th>
<th class="ez-table__header-cell">{{ 'drafts.list.last_saved'|trans|desc('Last Saved') }}</th>
<th class="ez-table__header-cell"></th>
</tr>
</thead>
<tbody>
Expand All @@ -65,8 +66,13 @@
<td class="ez-table__cell ez-table__cell--has-checkbox">
{{ form_widget(form_remove.versions[row.id ~ '']) }}
</td>
<td class="ez-table__cell">{{ row.name }}</td>
<td class="ez-table__cell">{{ row.type }}</td>
<td class="ez-table__cell ez-table__cell--has-icon">
<svg class="ez-icon ez-icon--medium">
<use xlink:href="{{ ezplatform_admin_ui_content_type_icon(row.content_type.identifier) }}"></use>
</svg>
</td>
<td class="ez-table__cell ez-table__cell--after-icon">{{ row.name }}</td>
<td class="ez-table__cell">{{ row.content_type.name }}</td>
<td class="ez-table__cell">{{ admin_ui_config.languages.mappings[row.language].name }}</td>
<td class="ez-table__cell">{{ row.version }}</td>
<td class="ez-table__cell">{{ row.modified|localizeddate('medium', 'short', null, ez_user_settings['timezone']) }}</td>
Expand Down
Loading

0 comments on commit 600496c

Please sign in to comment.