Skip to content

Commit 1cc9228

Browse files
OstafinLOstafinL
authored
IBX-10429: [Collaboration] UI improvements for the header (#1682)
* IBX-10429: [Collaboration] UI improvements for the header * UI improvements for the heade * After CR * After QA * Fixed browser tests * Fixed browser-test.yaml and ci.yaml * Reverted changes for ci.yaml
1 parent 54aaf72 commit 1cc9228

File tree

18 files changed

+255
-254
lines changed

18 files changed

+255
-254
lines changed

‎.github/workflows/browser-tests.yaml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ jobs:
1919
job-count: 2
2020
timeout: 40
2121
secrets:
22+
AUTOMATION_CLIENT_ID: ${{ secrets.AUTOMATION_CLIENT_ID }}
23+
AUTOMATION_CLIENT_INSTALLATION: ${{ secrets.AUTOMATION_CLIENT_INSTALLATION }}
24+
AUTOMATION_CLIENT_SECRET: ${{ secrets.AUTOMATION_CLIENT_SECRET }}
2225
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
2326
admin-ui-headless:
2427
name: "AdminUI-Headless"
@@ -65,7 +68,9 @@ jobs:
6568
test-setup-phase-1: '--profile=setup --suite=personas --tags=@setup --mode=standard'
6669
timeout: 40
6770
secrets:
71+
AUTOMATION_CLIENT_ID: ${{ secrets.AUTOMATION_CLIENT_ID }}
72+
AUTOMATION_CLIENT_INSTALLATION: ${{ secrets.AUTOMATION_CLIENT_INSTALLATION }}
73+
AUTOMATION_CLIENT_SECRET: ${{ secrets.AUTOMATION_CLIENT_SECRET }}
6874
SATIS_NETWORK_KEY: ${{ secrets.SATIS_NETWORK_KEY }}
6975
SATIS_NETWORK_TOKEN: ${{ secrets.SATIS_NETWORK_TOKEN }}
70-
TRAVIS_GITHUB_TOKEN: ${{ secrets.TRAVIS_GITHUB_TOKEN }}
7176
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

‎src/bundle/Resources/public/js/scripts/admin.content.edit.js‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(function (global, doc, ibexa, Translator, moment) {
1+
(function (global, doc, ibexa, Translator, bootstrap, moment) {
22
const ENTER_KEY_CODE = 13;
33
const STATUS_ERROR = 'error';
44
const STATUS_OFF = 'off';
@@ -26,10 +26,12 @@
2626
'time',
2727
'url',
2828
];
29+
const { escapeHTML } = ibexa.helpers.text;
2930
const form = doc.querySelector('.ibexa-form-validate');
3031
const submitBtns = form.querySelectorAll('[type="submit"]:not([formnovalidate])');
3132
const menuButtonsToValidate = doc.querySelectorAll('button[data-validate]');
3233
const fields = doc.querySelectorAll('.ibexa-field-edit');
34+
const autosaveNode = doc.querySelector('.ibexa-autosave');
3335
const getValidationResults = (validator) => {
3436
const isValid = validator.isValid();
3537
const validatorName = validator.constructor.name;
@@ -130,31 +132,35 @@
130132
return ibexa.adminUiConfig.autosave.enabled && form.querySelector('[name="ezplatform_content_forms_content_edit[autosave]"]');
131133
};
132134

133-
if (isAutosaveEnabled()) {
134-
const AUTOSAVE_SUBMIT_BUTTON_NAME = 'ezplatform_content_forms_content_edit[autosave]';
135-
const autosave = doc.querySelector('.ibexa-autosave');
136-
const autosaveStatusSavedNode = autosave.querySelector('.ibexa-autosave__status-saved');
137-
let currentAutosaveStatus = autosave.classList.contains('ibexa-autosave--on') ? STATUS_ON : STATUS_OFF;
135+
if (autosaveNode) {
136+
let currentAutosaveStatus = autosaveNode.classList.contains('ibexa-autosave--on') ? STATUS_ON : STATUS_OFF;
137+
let isAutosaveSimple = autosaveNode.classList.contains('ibexa-autosave--simple');
138+
const tooltipInstance = bootstrap.Tooltip.getOrCreateInstance(autosaveNode);
138139
const generateCssStatusClass = (status) => `ibexa-autosave--${status}`;
139140
const setAutosaveStatus = (newStatus) => {
140-
if (!autosave) {
141-
return;
142-
}
143-
144141
const oldCssStatusClass = generateCssStatusClass(currentAutosaveStatus);
145142
const newCssStatusClass = generateCssStatusClass(newStatus);
146143

147-
autosave.classList.remove(oldCssStatusClass);
148-
autosave.classList.remove('ibexa-autosave--saved');
149-
autosave.classList.add(newCssStatusClass);
144+
autosaveNode.classList.remove(oldCssStatusClass);
145+
autosaveNode.classList.remove('ibexa-autosave--saved');
146+
autosaveNode.classList.add(newCssStatusClass);
150147

151148
currentAutosaveStatus = newStatus;
149+
setAutosaveTooltipContent();
152150
};
153-
const setDraftSavedMessage = () => {
154-
if (!autosave) {
155-
return;
156-
}
157-
151+
const setAutosaveTooltipContent = () => {
152+
const statusMsgFromNode = autosaveNode.querySelector(`.ibexa-autosave__status--${currentAutosaveStatus}`).innerText;
153+
const tooltipContent = isAutosaveSimple
154+
? escapeHTML(statusMsgFromNode)
155+
: Translator.trans(
156+
/*@Desc("You can turn autosave off in your user settings")*/ 'content.autosave.turn_off.message',
157+
{},
158+
'ibexa_content',
159+
);
160+
161+
tooltipInstance.setContent({ '.tooltip-inner': tooltipContent });
162+
};
163+
const setDraftSavedMessage = (autosaveStatusSavedNode) => {
158164
const userPreferredTimezone = ibexa.adminUiConfig.timezone;
159165
const saveDate = ibexa.helpers.timezone.convertDateToTimezone(new Date(), userPreferredTimezone);
160166
const saveTime = moment(saveDate).formatICU('HH:mm');
@@ -165,25 +171,41 @@
165171
);
166172

167173
autosaveStatusSavedNode.innerHTML = saveMessage;
168-
autosave.classList.add('ibexa-autosave--saved');
174+
autosaveNode.classList.add('ibexa-autosave--saved');
169175
};
170176

171-
setInterval(() => {
172-
const formData = new FormData(form);
173-
174-
formData.set(AUTOSAVE_SUBMIT_BUTTON_NAME, true);
175-
setAutosaveStatus(STATUS_SAVING);
176-
177-
fetch(form.target || window.location.href, { method: 'POST', body: formData })
178-
.then(ibexa.helpers.request.getStatusFromResponse)
179-
.then(() => {
180-
setAutosaveStatus(STATUS_SAVED);
181-
setDraftSavedMessage();
182-
})
183-
.catch(() => {
184-
setAutosaveStatus(STATUS_ERROR);
185-
});
186-
}, ibexa.adminUiConfig.autosave.interval);
177+
setAutosaveTooltipContent();
178+
179+
doc.body.addEventListener('ibexa:edit-content-change-header-size', ({ detail }) => {
180+
isAutosaveSimple = detail.isHeaderSlim;
181+
autosaveNode.classList.toggle('ibexa-autosave--simple', isAutosaveSimple);
182+
setAutosaveTooltipContent();
183+
});
184+
185+
if (isAutosaveEnabled()) {
186+
const AUTOSAVE_SUBMIT_BUTTON_NAME = 'ezplatform_content_forms_content_edit[autosave]';
187+
const autosaveStatusSavedNode = autosaveNode.querySelector('.ibexa-autosave__status--saved');
188+
189+
setInterval(() => {
190+
const formData = new FormData(form);
191+
192+
formData.set(AUTOSAVE_SUBMIT_BUTTON_NAME, true);
193+
setAutosaveStatus(STATUS_SAVING);
194+
195+
fetch(form.target || window.location.href, { method: 'POST', body: formData })
196+
.then(ibexa.helpers.request.getStatusFromResponse)
197+
.then(() => {
198+
setAutosaveStatus(STATUS_SAVED);
199+
setDraftSavedMessage(autosaveStatusSavedNode);
200+
})
201+
.catch(() => {
202+
setAutosaveStatus(STATUS_ERROR);
203+
})
204+
.finally(() => {
205+
setAutosaveTooltipContent();
206+
});
207+
}, ibexa.adminUiConfig.autosave.interval);
208+
}
187209
}
188210

189211
form.setAttribute('novalidate', true);
@@ -204,4 +226,4 @@
204226
menuButtonsToValidate.forEach((btn) => {
205227
btn.addEventListener('click', validateHandler, false);
206228
});
207-
})(window, window.document, window.ibexa, window.Translator, window.moment);
229+
})(window, window.document, window.ibexa, window.Translator, window.bootstrap, window.moment);

‎src/bundle/Resources/public/js/scripts/edit.header.js‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
(function (global, doc, ibexa) {
22
const SCROLL_POSITION_TO_FIT = 50;
3-
const HEADER_RIGHT_MARGIN = 50;
43
const MIN_HEIGHT_DIFF_FOR_FITTING_HEADER = 150;
54
const headerNode = doc.querySelector('.ibexa-edit-header');
65
const contentNode = doc.querySelector('.ibexa-edit-content');
@@ -9,24 +8,10 @@
98
return;
109
}
1110

12-
const headerBottomRowNode = headerNode.querySelector('.ibexa-edit-header__row--bottom');
11+
const detailsContainer = headerNode.querySelector('.ibexa-edit-header__container--details');
1312
const { height: expandedHeaderHeight } = headerNode.getBoundingClientRect();
1413
const scrolledContent = doc.querySelector('.ibexa-edit-content > :first-child');
1514
const { controlManyZIndexes } = ibexa.helpers.modal;
16-
const fitEllipsizedTitle = () => {
17-
const titleNode = headerBottomRowNode.querySelector('.ibexa-edit-header__name--ellipsized');
18-
const firstMenuEntryNode = headerNode.querySelector('.ibexa-context-menu .ibexa-context-menu__item');
19-
const { left: titleNodeLeft, width: titleNodeWidth } = titleNode.getBoundingClientRect();
20-
const { left: firstMenuEntryNodeLeft } = firstMenuEntryNode.getBoundingClientRect();
21-
const bottomRowNodeWidthNew = firstMenuEntryNodeLeft - titleNodeLeft;
22-
const titleNodeWidthNew = bottomRowNodeWidthNew - HEADER_RIGHT_MARGIN;
23-
24-
headerBottomRowNode.style.width = `${bottomRowNodeWidthNew}px`;
25-
26-
if (titleNodeWidth > titleNodeWidthNew) {
27-
titleNode.style.width = `${titleNodeWidthNew}px`;
28-
}
29-
};
3015
const fitHeader = (event) => {
3116
const { height: formHeight } = scrolledContent.getBoundingClientRect();
3217
const contentHeightWithExpandedHeader = formHeight + expandedHeaderHeight;
@@ -40,17 +25,16 @@
4025
const shouldHeaderBeSlim = scrollTop > SCROLL_POSITION_TO_FIT;
4126

4227
headerNode.classList.toggle('ibexa-edit-header--slim', shouldHeaderBeSlim);
43-
44-
if (shouldHeaderBeSlim) {
45-
fitEllipsizedTitle();
46-
} else {
47-
headerBottomRowNode.style.width = '100%';
48-
}
28+
doc.body.dispatchEvent(
29+
new CustomEvent('ibexa:edit-content-change-header-size', {
30+
detail: { isHeaderSlim: shouldHeaderBeSlim },
31+
}),
32+
);
4933
};
5034
const items = [{ container: headerNode }];
5135

52-
if (headerBottomRowNode) {
53-
items.push({ container: headerBottomRowNode });
36+
if (detailsContainer) {
37+
items.push({ container: detailsContainer });
5438
}
5539

5640
contentNode.addEventListener('scroll', fitHeader, false);

‎src/bundle/Resources/public/scss/_autosave.scss‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,22 @@
1818
$states: 'error', 'off', 'on', 'saved', 'saving';
1919

2020
@each $state in $states {
21-
&__icon-#{$state} {
21+
&__icon--#{$state} {
2222
margin-right: calculateRem(8px);
2323
}
2424

25-
&__status-#{$state} {
25+
&__status--#{$state} {
2626
white-space: nowrap;
2727
}
2828

29-
&__icon-#{$state},
30-
&__status-#{$state} {
29+
&__icon--#{$state},
30+
&__status--#{$state} {
3131
display: none;
3232
}
3333

3434
&--#{$state} {
35-
.ibexa-autosave__icon-#{$state},
36-
.ibexa-autosave__status-#{$state} {
35+
.ibexa-autosave__icon--#{$state},
36+
.ibexa-autosave__status--#{$state} {
3737
display: initial;
3838
}
3939
}
@@ -42,8 +42,20 @@
4242
&--error {
4343
color: $ibexa-color-danger;
4444

45-
.ibexa-autosave__icon-error {
45+
.ibexa-autosave__icon--error {
4646
fill: $ibexa-color-danger;
4747
}
4848
}
49+
50+
&--simple {
51+
.ibexa-autosave {
52+
&__status {
53+
display: none;
54+
}
55+
56+
&__icon {
57+
margin: 0;
58+
}
59+
}
60+
}
4961
}

0 commit comments

Comments
 (0)