diff --git a/.github/workflows/browser-tests.yaml b/.github/workflows/browser-tests.yaml
index 5ed9b960b2..4ec33c05fb 100644
--- a/.github/workflows/browser-tests.yaml
+++ b/.github/workflows/browser-tests.yaml
@@ -19,6 +19,9 @@ jobs:
job-count: 2
timeout: 40
secrets:
+ AUTOMATION_CLIENT_ID: ${{ secrets.AUTOMATION_CLIENT_ID }}
+ AUTOMATION_CLIENT_INSTALLATION: ${{ secrets.AUTOMATION_CLIENT_INSTALLATION }}
+ AUTOMATION_CLIENT_SECRET: ${{ secrets.AUTOMATION_CLIENT_SECRET }}
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
admin-ui-headless:
name: "AdminUI-Headless"
@@ -65,7 +68,9 @@ jobs:
test-setup-phase-1: '--profile=setup --suite=personas --tags=@setup --mode=standard'
timeout: 40
secrets:
+ AUTOMATION_CLIENT_ID: ${{ secrets.AUTOMATION_CLIENT_ID }}
+ AUTOMATION_CLIENT_INSTALLATION: ${{ secrets.AUTOMATION_CLIENT_INSTALLATION }}
+ AUTOMATION_CLIENT_SECRET: ${{ secrets.AUTOMATION_CLIENT_SECRET }}
SATIS_NETWORK_KEY: ${{ secrets.SATIS_NETWORK_KEY }}
SATIS_NETWORK_TOKEN: ${{ secrets.SATIS_NETWORK_TOKEN }}
- TRAVIS_GITHUB_TOKEN: ${{ secrets.TRAVIS_GITHUB_TOKEN }}
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
diff --git a/src/bundle/Resources/public/js/scripts/admin.content.edit.js b/src/bundle/Resources/public/js/scripts/admin.content.edit.js
index 665ab83a19..40777830ed 100644
--- a/src/bundle/Resources/public/js/scripts/admin.content.edit.js
+++ b/src/bundle/Resources/public/js/scripts/admin.content.edit.js
@@ -1,4 +1,4 @@
-(function (global, doc, ibexa, Translator, moment) {
+(function (global, doc, ibexa, Translator, bootstrap, moment) {
const ENTER_KEY_CODE = 13;
const STATUS_ERROR = 'error';
const STATUS_OFF = 'off';
@@ -26,10 +26,12 @@
'time',
'url',
];
+ const { escapeHTML } = ibexa.helpers.text;
const form = doc.querySelector('.ibexa-form-validate');
const submitBtns = form.querySelectorAll('[type="submit"]:not([formnovalidate])');
const menuButtonsToValidate = doc.querySelectorAll('button[data-validate]');
const fields = doc.querySelectorAll('.ibexa-field-edit');
+ const autosaveNode = doc.querySelector('.ibexa-autosave');
const getValidationResults = (validator) => {
const isValid = validator.isValid();
const validatorName = validator.constructor.name;
@@ -130,31 +132,35 @@
return ibexa.adminUiConfig.autosave.enabled && form.querySelector('[name="ezplatform_content_forms_content_edit[autosave]"]');
};
- if (isAutosaveEnabled()) {
- const AUTOSAVE_SUBMIT_BUTTON_NAME = 'ezplatform_content_forms_content_edit[autosave]';
- const autosave = doc.querySelector('.ibexa-autosave');
- const autosaveStatusSavedNode = autosave.querySelector('.ibexa-autosave__status-saved');
- let currentAutosaveStatus = autosave.classList.contains('ibexa-autosave--on') ? STATUS_ON : STATUS_OFF;
+ if (autosaveNode) {
+ let currentAutosaveStatus = autosaveNode.classList.contains('ibexa-autosave--on') ? STATUS_ON : STATUS_OFF;
+ let isAutosaveSimple = autosaveNode.classList.contains('ibexa-autosave--simple');
+ const tooltipInstance = bootstrap.Tooltip.getOrCreateInstance(autosaveNode);
const generateCssStatusClass = (status) => `ibexa-autosave--${status}`;
const setAutosaveStatus = (newStatus) => {
- if (!autosave) {
- return;
- }
-
const oldCssStatusClass = generateCssStatusClass(currentAutosaveStatus);
const newCssStatusClass = generateCssStatusClass(newStatus);
- autosave.classList.remove(oldCssStatusClass);
- autosave.classList.remove('ibexa-autosave--saved');
- autosave.classList.add(newCssStatusClass);
+ autosaveNode.classList.remove(oldCssStatusClass);
+ autosaveNode.classList.remove('ibexa-autosave--saved');
+ autosaveNode.classList.add(newCssStatusClass);
currentAutosaveStatus = newStatus;
+ setAutosaveTooltipContent();
};
- const setDraftSavedMessage = () => {
- if (!autosave) {
- return;
- }
-
+ const setAutosaveTooltipContent = () => {
+ const statusMsgFromNode = autosaveNode.querySelector(`.ibexa-autosave__status--${currentAutosaveStatus}`).innerText;
+ const tooltipContent = isAutosaveSimple
+ ? escapeHTML(statusMsgFromNode)
+ : Translator.trans(
+ /*@Desc("You can turn autosave off in your user settings")*/ 'content.autosave.turn_off.message',
+ {},
+ 'ibexa_content',
+ );
+
+ tooltipInstance.setContent({ '.tooltip-inner': tooltipContent });
+ };
+ const setDraftSavedMessage = (autosaveStatusSavedNode) => {
const userPreferredTimezone = ibexa.adminUiConfig.timezone;
const saveDate = ibexa.helpers.timezone.convertDateToTimezone(new Date(), userPreferredTimezone);
const saveTime = moment(saveDate).formatICU('HH:mm');
@@ -165,25 +171,41 @@
);
autosaveStatusSavedNode.innerHTML = saveMessage;
- autosave.classList.add('ibexa-autosave--saved');
+ autosaveNode.classList.add('ibexa-autosave--saved');
};
- setInterval(() => {
- const formData = new FormData(form);
-
- formData.set(AUTOSAVE_SUBMIT_BUTTON_NAME, true);
- setAutosaveStatus(STATUS_SAVING);
-
- fetch(form.target || window.location.href, { method: 'POST', body: formData })
- .then(ibexa.helpers.request.getStatusFromResponse)
- .then(() => {
- setAutosaveStatus(STATUS_SAVED);
- setDraftSavedMessage();
- })
- .catch(() => {
- setAutosaveStatus(STATUS_ERROR);
- });
- }, ibexa.adminUiConfig.autosave.interval);
+ setAutosaveTooltipContent();
+
+ doc.body.addEventListener('ibexa:edit-content-change-header-size', ({ detail }) => {
+ isAutosaveSimple = detail.isHeaderSlim;
+ autosaveNode.classList.toggle('ibexa-autosave--simple', isAutosaveSimple);
+ setAutosaveTooltipContent();
+ });
+
+ if (isAutosaveEnabled()) {
+ const AUTOSAVE_SUBMIT_BUTTON_NAME = 'ezplatform_content_forms_content_edit[autosave]';
+ const autosaveStatusSavedNode = autosaveNode.querySelector('.ibexa-autosave__status--saved');
+
+ setInterval(() => {
+ const formData = new FormData(form);
+
+ formData.set(AUTOSAVE_SUBMIT_BUTTON_NAME, true);
+ setAutosaveStatus(STATUS_SAVING);
+
+ fetch(form.target || window.location.href, { method: 'POST', body: formData })
+ .then(ibexa.helpers.request.getStatusFromResponse)
+ .then(() => {
+ setAutosaveStatus(STATUS_SAVED);
+ setDraftSavedMessage(autosaveStatusSavedNode);
+ })
+ .catch(() => {
+ setAutosaveStatus(STATUS_ERROR);
+ })
+ .finally(() => {
+ setAutosaveTooltipContent();
+ });
+ }, ibexa.adminUiConfig.autosave.interval);
+ }
}
form.setAttribute('novalidate', true);
@@ -204,4 +226,4 @@
menuButtonsToValidate.forEach((btn) => {
btn.addEventListener('click', validateHandler, false);
});
-})(window, window.document, window.ibexa, window.Translator, window.moment);
+})(window, window.document, window.ibexa, window.Translator, window.bootstrap, window.moment);
diff --git a/src/bundle/Resources/public/js/scripts/edit.header.js b/src/bundle/Resources/public/js/scripts/edit.header.js
index 7e852a5ca9..67559f9d52 100644
--- a/src/bundle/Resources/public/js/scripts/edit.header.js
+++ b/src/bundle/Resources/public/js/scripts/edit.header.js
@@ -1,6 +1,5 @@
(function (global, doc, ibexa) {
const SCROLL_POSITION_TO_FIT = 50;
- const HEADER_RIGHT_MARGIN = 50;
const MIN_HEIGHT_DIFF_FOR_FITTING_HEADER = 150;
const headerNode = doc.querySelector('.ibexa-edit-header');
const contentNode = doc.querySelector('.ibexa-edit-content');
@@ -9,24 +8,10 @@
return;
}
- const headerBottomRowNode = headerNode.querySelector('.ibexa-edit-header__row--bottom');
+ const detailsContainer = headerNode.querySelector('.ibexa-edit-header__container--details');
const { height: expandedHeaderHeight } = headerNode.getBoundingClientRect();
const scrolledContent = doc.querySelector('.ibexa-edit-content > :first-child');
const { controlManyZIndexes } = ibexa.helpers.modal;
- const fitEllipsizedTitle = () => {
- const titleNode = headerBottomRowNode.querySelector('.ibexa-edit-header__name--ellipsized');
- const firstMenuEntryNode = headerNode.querySelector('.ibexa-context-menu .ibexa-context-menu__item');
- const { left: titleNodeLeft, width: titleNodeWidth } = titleNode.getBoundingClientRect();
- const { left: firstMenuEntryNodeLeft } = firstMenuEntryNode.getBoundingClientRect();
- const bottomRowNodeWidthNew = firstMenuEntryNodeLeft - titleNodeLeft;
- const titleNodeWidthNew = bottomRowNodeWidthNew - HEADER_RIGHT_MARGIN;
-
- headerBottomRowNode.style.width = `${bottomRowNodeWidthNew}px`;
-
- if (titleNodeWidth > titleNodeWidthNew) {
- titleNode.style.width = `${titleNodeWidthNew}px`;
- }
- };
const fitHeader = (event) => {
const { height: formHeight } = scrolledContent.getBoundingClientRect();
const contentHeightWithExpandedHeader = formHeight + expandedHeaderHeight;
@@ -40,17 +25,16 @@
const shouldHeaderBeSlim = scrollTop > SCROLL_POSITION_TO_FIT;
headerNode.classList.toggle('ibexa-edit-header--slim', shouldHeaderBeSlim);
-
- if (shouldHeaderBeSlim) {
- fitEllipsizedTitle();
- } else {
- headerBottomRowNode.style.width = '100%';
- }
+ doc.body.dispatchEvent(
+ new CustomEvent('ibexa:edit-content-change-header-size', {
+ detail: { isHeaderSlim: shouldHeaderBeSlim },
+ }),
+ );
};
const items = [{ container: headerNode }];
- if (headerBottomRowNode) {
- items.push({ container: headerBottomRowNode });
+ if (detailsContainer) {
+ items.push({ container: detailsContainer });
}
contentNode.addEventListener('scroll', fitHeader, false);
diff --git a/src/bundle/Resources/public/scss/_autosave.scss b/src/bundle/Resources/public/scss/_autosave.scss
index 2094ebf03b..6c572925dc 100644
--- a/src/bundle/Resources/public/scss/_autosave.scss
+++ b/src/bundle/Resources/public/scss/_autosave.scss
@@ -18,22 +18,22 @@
$states: 'error', 'off', 'on', 'saved', 'saving';
@each $state in $states {
- &__icon-#{$state} {
+ &__icon--#{$state} {
margin-right: calculateRem(8px);
}
- &__status-#{$state} {
+ &__status--#{$state} {
white-space: nowrap;
}
- &__icon-#{$state},
- &__status-#{$state} {
+ &__icon--#{$state},
+ &__status--#{$state} {
display: none;
}
&--#{$state} {
- .ibexa-autosave__icon-#{$state},
- .ibexa-autosave__status-#{$state} {
+ .ibexa-autosave__icon--#{$state},
+ .ibexa-autosave__status--#{$state} {
display: initial;
}
}
@@ -42,8 +42,20 @@
&--error {
color: $ibexa-color-danger;
- .ibexa-autosave__icon-error {
+ .ibexa-autosave__icon--error {
fill: $ibexa-color-danger;
}
}
+
+ &--simple {
+ .ibexa-autosave {
+ &__status {
+ display: none;
+ }
+
+ &__icon {
+ margin: 0;
+ }
+ }
+ }
}
diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss
index 660cfa8f8d..d5b5750710 100644
--- a/src/bundle/Resources/public/scss/_edit-header.scss
+++ b/src/bundle/Resources/public/scss/_edit-header.scss
@@ -1,92 +1,94 @@
.ibexa-edit-header {
- display: flex;
- flex-direction: column;
background-color: $ibexa-color-white;
- border-width: calculateRem(1px) calculateRem(1px) 0;
border-style: solid;
border-color: $ibexa-color-light-400;
+ border-width: calculateRem(1px) calculateRem(1px) 0;
border-top-left-radius: $ibexa-border-radius;
border-top-right-radius: $ibexa-border-radius;
- transition:
- all $ibexa-admin-transition-duration $ibexa-admin-transition,
- border-bottom-width 0;
+ transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+ border-bottom-width: 0;
z-index: 1050;
- &__container {
+ &__containers {
display: flex;
- flex-direction: column;
+ flex-wrap: wrap;
+ row-gap: calculateRem(16px);
padding: calculateRem(24px) calculateRem(32px);
border-bottom: calculateRem(1px) solid $ibexa-color-light;
}
- &__title {
- display: flex;
- margin: 0;
- }
+ &__container {
+ &--info-bar {
+ flex: 0 0 40%;
+ max-width: 40%;
+ box-sizing: border-box;
+ }
- &__name {
- &--ellipsized {
- display: none;
+ &--context-actions {
+ flex: 0 0 60%;
+ max-width: 60%;
+ box-sizing: border-box;
}
- &--full {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- white-space: normal;
+ &--details {
+ flex: 0 0 100%;
max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
+ box-sizing: border-box;
}
}
- &__row {
+ &__title-section {
display: flex;
- flex-wrap: nowrap;
- transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+ align-items: center;
+ width: fit-content;
+ max-width: 100%;
+ margin: 0;
+ }
- &--top {
- height: calculateRem(48px);
- margin-bottom: calculateRem(16px);
+ &__title {
+ flex: 1 1 0%;
+ min-width: 0;
+ margin-bottom: calculateRem(4px);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
- .ibexa-edit-header__title {
- height: 0;
- opacity: 0;
- }
- }
+ &__after-title {
+ flex: 0 0 auto;
+ white-space: nowrap;
+ }
- &--bottom {
- flex-direction: column;
- min-width: 60%;
- }
+ &__subtitle {
+ margin-top: calculateRem(4px);
+ font-size: $ibexa-text-font-size-medium;
+ transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
}
- &__column {
- position: static;
+ &__info-bar {
+ display: flex;
+ align-items: center;
+ height: calculateRem(48px);
- &--main {
- display: flex;
- flex-direction: column;
- justify-content: center;
- white-space: nowrap;
- padding-left: 0;
- align-self: flex-start;
+ & > div:not(:empty) {
+ height: calculateRem(26px);
+ padding: 0 calculateRem(8px);
+ border-left: calculateRem(1px) solid $ibexa-color-light;
- .ibexa-icon {
- margin-right: calculateRem(8px);
- fill: $ibexa-color-dark-400;
+ &:first-child {
+ border: none;
+ padding-left: 0;
}
- }
- }
- &__context-actions {
- display: flex;
- width: 100%;
- }
+ &:last-child {
+ padding-right: 0;
+ }
+ }
- &__info-bar {
- display: flex;
- transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+ .ibexa-icon {
+ margin-right: calculateRem(8px);
+ fill: $ibexa-color-dark-400;
+ }
}
&__info-bar-action-type {
@@ -96,32 +98,14 @@
&__action-name {
color: $ibexa-color-dark-400;
- opacity: 1;
- transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
margin: 0;
}
- &__subtitle {
- margin-top: calculateRem(4px);
- font-size: $ibexa-text-font-size-medium;
- opacity: 1;
- transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
- }
-
- &__separate-div {
- position: relative;
- z-index: 1;
- width: 100%;
- height: calculateRem(1px);
- background: $ibexa-color-light;
- transform: scaleX(0);
- transition-duration: $ibexa-admin-transition-duration;
- }
-
&__meta {
display: flex;
flex-direction: row;
gap: calculateRem(4px);
+ transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
}
&__meta-item {
@@ -136,66 +120,63 @@
border: calculateRem(1px) solid $ibexa-color-light-600;
}
- &__extra-bottom-content {
+ &__details-extra-content {
margin-top: calculateRem(10px);
}
- .ibexa-autosave {
- display: flex;
- border-left: calculateRem(1px) solid $ibexa-color-light;
- padding-left: calculateRem(12px);
- margin-left: calculateRem(12px);
- }
-
&--slim {
&.ibexa-edit-header--has-extra-content {
border-bottom: calculateRem(1px) solid $ibexa-color-light;
}
.ibexa-edit-header {
- &__row {
- &--bottom {
- z-index: 1;
- min-width: initial;
- margin-top: calculateRem(-34px);
- min-height: initial;
- }
+ &__containers {
+ flex-wrap: nowrap;
+ align-items: flex-start;
+ gap: calculateRem(8px);
}
- &__bottom-row-line {
- border-bottom: none;
- }
+ &__container {
+ &--details {
+ flex: 0 1 auto;
+ order: 1;
+ max-width: calc(50% - calculateRem(16px));
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ &--info-bar {
+ flex: 0 1 auto;
+ order: 2;
+ white-space: nowrap;
+ }
- &__info-bar {
- margin-top: calculateRem(-8px);
+ &--context-actions {
+ flex: 1 1 0%;
+ order: 3;
+ min-width: 0;
+ margin-left: auto;
+ }
}
- &__separate-div {
- transform: scaleX(1);
+ &__info-bar-action-type {
+ display: none;
}
- &__subtitle {
- opacity: 0;
- height: 0;
- overflow: hidden;
+ &__title-section {
+ height: calculateRem(48px);
}
&__title {
- min-height: calculateRem(34px);
+ margin-bottom: 0;
}
+ &__subtitle,
&__meta {
- display: none;
- }
-
- &__name {
- &--ellipsized {
- display: inline-block;
- }
-
- &--full {
- display: none;
- }
+ opacity: 0;
+ width: 0;
+ height: 0;
+ overflow: hidden;
}
}
}
diff --git a/src/bundle/Resources/translations/ibexa_content_create.en.xliff b/src/bundle/Resources/translations/ibexa_content_create.en.xliff
index 2eeedca5c4..fac827a4bc 100644
--- a/src/bundle/Resources/translations/ibexa_content_create.en.xliff
+++ b/src/bundle/Resources/translations/ibexa_content_create.en.xliff
@@ -17,8 +17,8 @@
key: creating
- under: %location%
- under: %location%
+ under %location%
+ under %location%
key: editing_details_subtitle
diff --git a/src/bundle/Resources/translations/ibexa_content_edit.en.xliff b/src/bundle/Resources/translations/ibexa_content_edit.en.xliff
index cf99bbde5a..044761dab0 100644
--- a/src/bundle/Resources/translations/ibexa_content_edit.en.xliff
+++ b/src/bundle/Resources/translations/ibexa_content_edit.en.xliff
@@ -32,8 +32,8 @@
key: editing
- under: %location%
- under: %location%
+ under %location%
+ under %location%
key: editing_details_subtitle
diff --git a/src/bundle/Resources/translations/ibexa_user_create.en.xliff b/src/bundle/Resources/translations/ibexa_user_create.en.xliff
index 61522bb7a4..3aacdb420a 100644
--- a/src/bundle/Resources/translations/ibexa_user_create.en.xliff
+++ b/src/bundle/Resources/translations/ibexa_user_create.en.xliff
@@ -12,8 +12,8 @@
key: Create
- under: %location%
- under: %location%
+ under %location%
+ under %location%
key: editing_details_subtitle
diff --git a/src/bundle/Resources/translations/ibexa_user_edit.en.xliff b/src/bundle/Resources/translations/ibexa_user_edit.en.xliff
index b512daa225..1533373940 100644
--- a/src/bundle/Resources/translations/ibexa_user_edit.en.xliff
+++ b/src/bundle/Resources/translations/ibexa_user_edit.en.xliff
@@ -12,8 +12,8 @@
key: editing
- under: %location%
- under: %location%
+ under %location%
+ under %location%
key: editing_details_subtitle