diff --git a/src/bundle/Resources/encore/ez.js.config.js b/src/bundle/Resources/encore/ez.js.config.js index f0e72edf07..e8cf4c39a1 100644 --- a/src/bundle/Resources/encore/ez.js.config.js +++ b/src/bundle/Resources/encore/ez.js.config.js @@ -71,14 +71,12 @@ module.exports = (Encore) => { .addEntry('ezplatform-admin-ui-content-type-create-js', [ path.resolve(__dirname, '../public/js/scripts/admin.contenttype.selection.js'), path.resolve(__dirname, '../public/js/scripts/admin.card.toggle.group.js'), - path.resolve(__dirname, '../public/js/scripts/edit.header.js'), path.resolve(__dirname, '../public/js/scripts/admin.contenttype.edit'), ]) .addEntry('ezplatform-admin-ui-content-type-edit-js', [ path.resolve(__dirname, '../public/js/scripts/admin.contenttype.selection.js'), path.resolve(__dirname, '../public/js/scripts/admin.card.toggle.group.js'), path.resolve(__dirname, '../public/js/scripts/admin.contenttype.relation.default.location.js'), - path.resolve(__dirname, '../public/js/scripts/edit.header.js'), path.resolve(__dirname, '../public/js/scripts/admin.contenttype.edit'), ]) .addEntry('ezplatform-admin-ui-content-type-list-js', [ @@ -230,5 +228,8 @@ module.exports = (Encore) => { .addEntry('ezplatform-admin-ui-tabs-js', [ path.resolve(__dirname, '../public/js/scripts/admin.location.tab.js'), path.resolve(__dirname, '../public/js/scripts/admin.location.adaptive.tabs.js'), + ]) + .addEntry('ezplatform-admin-ui-edit-base-js', [ + path.resolve(__dirname, '../public/js/scripts/edit.header.js'), ]); }; diff --git a/src/bundle/Resources/public/img/no-gallery-items.svg b/src/bundle/Resources/public/img/no-gallery-items.svg new file mode 100644 index 0000000000..df65680e32 --- /dev/null +++ b/src/bundle/Resources/public/img/no-gallery-items.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/bundle/Resources/public/js/scripts/core/tag.view.select.js b/src/bundle/Resources/public/js/scripts/core/tag.view.select.js index b5dbb43385..1f54adc495 100644 --- a/src/bundle/Resources/public/js/scripts/core/tag.view.select.js +++ b/src/bundle/Resources/public/js/scripts/core/tag.view.select.js @@ -2,15 +2,14 @@ class TagViewSelect { constructor(config) { this.inputSelector = config.inputSelector || 'input'; - this.fieldContainer = config.fieldContainer; + this.container = config.container || config.fieldContainer.querySelector('.ibexa-tag-view-select') - if (!this.fieldContainer) { + if (!this.container) { throw new Error('Field Container doesn\'t exist!'); } - this.container = this.fieldContainer.querySelector('.ibexa-tag-view-select'); this.listContainer = this.container.querySelector('.ibexa-tag-view-select__selected-list'); - this.inputField = this.fieldContainer.querySelector(this.inputSelector); + this.inputField = this.container.querySelector(this.inputSelector); this.selectBtn = this.container.querySelector('.ibexa-tag-view-select__btn-select-path') this.isSingleSelect = this.container.dataset.isSingleSelect === '1'; this.canBeEmpty = this.container.dataset.canBeEmpty === '1'; diff --git a/src/bundle/Resources/public/js/scripts/edit.header.js b/src/bundle/Resources/public/js/scripts/edit.header.js index c52b58fa6a..881edab842 100644 --- a/src/bundle/Resources/public/js/scripts/edit.header.js +++ b/src/bundle/Resources/public/js/scripts/edit.header.js @@ -10,10 +10,10 @@ const contextMenuNode = headerNode.querySelector('.ibexa-context-menu'); const { height: expandedHeaderHeight } = headerNode.getBoundingClientRect(); - const form = doc.querySelector('.ibexa-form'); + const scrolledContent = doc.querySelector('.ibexa-edit-content > :first-child'); const tooltipNode = headerNode.querySelector('.ibexa-edit-header__tooltip'); const fitHeader = (event) => { - const { height: formHeight } = form.getBoundingClientRect(); + const { height: formHeight } = scrolledContent.getBoundingClientRect(); const contentHeightWithExpandedHeader = formHeight + expandedHeaderHeight; const heightDiffBetweenWindowAndContent = contentHeightWithExpandedHeader - global.innerHeight; diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss index 3f19ae37ef..1dbcb85cb9 100644 --- a/src/bundle/Resources/public/scss/_dropdown.scss +++ b/src/bundle/Resources/public/scss/_dropdown.scss @@ -25,6 +25,7 @@ display: flex; align-items: center; flex-wrap: wrap; + margin-bottom: 0; &:before, &:after { diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss index 8bbeea8781..abcf09ce2b 100644 --- a/src/bundle/Resources/public/scss/_edit-header.scss +++ b/src/bundle/Resources/public/scss/_edit-header.scss @@ -1,7 +1,7 @@ .ibexa-edit-header { - height: calculateRem(241px); + display: flex; + flex-direction: column; background-color: $ibexa-color-white; - box-shadow: $ibexa-edit-header-box-shadow; border-width: calculateRem(1px) calculateRem(1px) 0; border-style: solid; border-color: $ibexa-color-light-400; @@ -9,7 +9,14 @@ border-top-right-radius: $ibexa-border-radius; transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; + &__container { + display: flex; + flex-direction: column; + } + &__row { + display: flex; + flex-wrap: nowrap; transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; &--top { @@ -22,7 +29,9 @@ } &--bottom { - height: calculateRem(154px); + flex-direction: column; + min-width: 60%; + min-height: calculateRem(150px); } } @@ -42,9 +51,6 @@ } &--left { - padding-left: 0; - border-bottom: calculateRem(1px) solid $ibexa-color-light; - .ibexa-label { margin-bottom: 0; color: $ibexa-color-dark-400; @@ -99,28 +105,39 @@ transition-duration: $ibexa-admin-transition-duration; } + &__extra-bottom-content { + margin-top: calculateRem(10px); + } + + &__bottom-row-line { + margin-top: auto; + width: 75%; + border-bottom: calculateRem(1px) solid $ibexa-color-light; + } + .ibexa-autosave { opacity: 1; transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; } &--slim { - height: calculateRem(87px); - .ibexa-edit-header { &__row { &--bottom { - height: calculateRem(85px); margin-top: calculateRem(-45px); } } - &__column { - &--left { - border-bottom: none; + &__row { + &--bottom { + min-height: initial; } } + &__bottom-row-line { + border-bottom: none; + } + &__action-name-container { margin-top: calculateRem(-30px); } @@ -131,6 +148,8 @@ &__subtitle { opacity: 0; + height: 0; + overflow: hidden; } } diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss index d32bfe1274..eaff886c67 100644 --- a/src/bundle/Resources/public/scss/_grid-view-item.scss +++ b/src/bundle/Resources/public/scss/_grid-view-item.scss @@ -6,6 +6,7 @@ min-height: calculateRem(238px); border: calculateRem(1px) solid $ibexa-color-light; border-radius: calculateRem(5px); + 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; diff --git a/src/bundle/Resources/public/scss/_main-container.scss b/src/bundle/Resources/public/scss/_main-container.scss index 5e3f85fcea..07eec71cea 100644 --- a/src/bundle/Resources/public/scss/_main-container.scss +++ b/src/bundle/Resources/public/scss/_main-container.scss @@ -10,6 +10,7 @@ width: 100%; height: 100%; overflow-y: auto; + box-shadow: $ibexa-edit-content-box-shadow; } &--without-anchor-menu-items { diff --git a/src/bundle/Resources/public/scss/mixins/_containers.scss b/src/bundle/Resources/public/scss/mixins/_containers.scss index 06193c81af..8cf129bf5b 100644 --- a/src/bundle/Resources/public/scss/mixins/_containers.scss +++ b/src/bundle/Resources/public/scss/mixins/_containers.scss @@ -1,12 +1,11 @@ @mixin edit-right-side-container { + flex-grow: 1; position: relative; padding-top: calculateRem(42px); - min-height: calc(100vh - #{calculateRem(273px)}); overflow-y: auto; border-bottom-left-radius: $ibexa-border-radius; border-width: 0 calculateRem(1px) calculateRem(1px); border-style: solid; border-color: $ibexa-color-light-400; background-color: $ibexa-color-white; - box-shadow: $ibexa-edit-content-box-shadow; } diff --git a/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig b/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig index 12b5561c34..c2258ef712 100644 --- a/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig @@ -91,8 +91,11 @@ {% endblock %} {% block javascripts %} + {{ parent() }} + {% include '@ezdesign/content/edit/javascripts.html.twig' %} {{ encore_entry_script_tags('ezplatform-admin-ui-tabs-js', null, 'ezplatform') }} + {{ encore_entry_script_tags('ezplatform-admin-ui-edit-base-js', null, 'ezplatform') }} {% endblock %} {% block stylesheets %} diff --git a/src/bundle/Resources/views/themes/admin/content_type/edit_base.html.twig b/src/bundle/Resources/views/themes/admin/content_type/edit_base.html.twig index e89c1d9ee3..9554100a79 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/edit_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/edit_base.html.twig @@ -24,5 +24,7 @@ {% endblock %} {% block javascripts %} + {{ parent() }} + {{ encore_entry_script_tags('ezplatform-admin-ui-content-type-edit-js', null, 'ezplatform') }} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig index b2e0fbf215..6cc547e65a 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig @@ -1,6 +1,11 @@ +{% import '@ezdesign/ui/component/macros.html.twig' as html %} + {% set has_search = has_search|default(false) %} +{% set wrapper_attr = wrapper_attr|default({})|merge({ + class: (wrapper_attr.class|default('') ~ ' ibexa-input-text-wrapper' ~ (has_search ? ' ibexa-input-text-wrapper--search'))|trim +}) %} -
+
{% block content %}{% endblock %}
{% endblock %} + +{% block javascripts %} + {{ parent() }} + {{ encore_entry_script_tags('ezplatform-admin-ui-edit-base-js', null, 'ezplatform') }} +{% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig index 82d91ce22d..d4bdaec246 100644 --- a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig @@ -1,9 +1,9 @@
-
-
-
+
+
+
- {% if icon_name %} + {% if icon_name is defined %} @@ -34,20 +34,26 @@
-
-
-
+
+
+

{{ title }}

{% if subtitle is defined %} -
{{ subtitle|raw }}
+
{{ subtitle|raw }}
{% endif %}
-
- {% if show_autosave_status %} +
+ {% if show_autosave_status|default(false) %} {% include '@ezdesign/ui/autosave.html.twig' %} {% endif %}
+ {% if block('extra_bottom_content') is defined %} +
+ {{ block('extra_bottom_content') }} +
+ {% endif %} +
diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig index 141ef4cfe3..3ae97511a7 100644 --- a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig @@ -316,7 +316,8 @@ {%- block form_widget_simple -%} {%- set has_search = has_search|default(false) -%} - {%- set is_text_input = type|default('text') == 'text' or force_text|default(false) -%} + {%- set type = type|default('text') -%} + {%- set is_text_input = type == 'text' or type == 'number' or force_text|default(false) -%} {%- if is_text_input -%} {%- set attr = attr|merge({class: (attr.class|default('') ~ ' ibexa-input ibexa-input--text')|trim}) -%} {%- set empty_placeholder_for_hiding_clear_btn_with_css = ' ' -%} diff --git a/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig index 3003c95781..6f393f245f 100644 --- a/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig @@ -73,7 +73,7 @@ }] %} {% endif %} - {{ include('@ezdesign/ui/component/tag_view_select.html.twig', { + {{ include('@ezdesign/ui/component/tag_view_select/tag_view_select.html.twig', { form: form.subtree, items, attr: { diff --git a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig index 950132262a..7928584235 100644 --- a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig @@ -1,14 +1,8 @@ +{% import '@ezdesign/ui/component/macros.html.twig' as html %} + {% set tag_attributes = tag_attributes|default({})|merge({'class': (tag_attributes.class|default('') ~ ' ibexa-tag')|trim}) %} -
+
diff --git a/src/bundle/Resources/views/themes/admin/user/role_assignment/create.html.twig b/src/bundle/Resources/views/themes/admin/user/role_assignment/create.html.twig index 09f5224c38..cff63e303b 100644 --- a/src/bundle/Resources/views/themes/admin/user/role_assignment/create.html.twig +++ b/src/bundle/Resources/views/themes/admin/user/role_assignment/create.html.twig @@ -47,7 +47,7 @@ |trans({}, "role") |desc("Select Users to assign to the Role") %} - {{ include('@ezdesign/ui/component/tag_view_select.html.twig', { + {{ include('@ezdesign/ui/component/tag_view_select/tag_view_select.html.twig', { form: form.users, items, attr: { @@ -80,7 +80,7 @@ |trans({}, "role") |desc("Select User Groups to assign to the Role") %} - {{ include('@ezdesign/ui/component/tag_view_select.html.twig', { + {{ include('@ezdesign/ui/component/tag_view_select/tag_view_select.html.twig', { form: form.groups, items, attr: { @@ -125,7 +125,7 @@ name: ez_content_name(location.content) }) %} - {{ include('@ezdesign/ui/component/tag_view_select.html.twig', { + {{ include('@ezdesign/ui/component/tag_view_select/tag_view_select.html.twig', { form: form.locations, items, attr: {