Skip to content

Commit d70c3c2

Browse files
OstafinLOstafinL
committed
UI improvements for the heade
1 parent 357bbd6 commit d70c3c2

File tree

7 files changed

+234
-239
lines changed

7 files changed

+234
-239
lines changed

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

Lines changed: 57 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';
@@ -30,6 +30,7 @@
3030
const submitBtns = form.querySelectorAll('[type="submit"]:not([formnovalidate])');
3131
const menuButtonsToValidate = doc.querySelectorAll('button[data-validate]');
3232
const fields = doc.querySelectorAll('.ibexa-field-edit');
33+
const autosaveNode = doc.querySelector('.ibexa-autosave');
3334
const getValidationResults = (validator) => {
3435
const isValid = validator.isValid();
3536
const validatorName = validator.constructor.name;
@@ -130,31 +131,35 @@
130131
return ibexa.adminUiConfig.autosave.enabled && form.querySelector('[name="ezplatform_content_forms_content_edit[autosave]"]');
131132
};
132133

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;
134+
if (autosaveNode) {
135+
let currentAutosaveStatus = autosaveNode.classList.contains('ibexa-autosave--on') ? STATUS_ON : STATUS_OFF;
136+
let isAutosaveSimple = autosaveNode.classList.contains('ibexa-autosave--simple');
137+
const tooltipInstance = bootstrap.Tooltip.getOrCreateInstance(autosaveNode);
138138
const generateCssStatusClass = (status) => `ibexa-autosave--${status}`;
139139
const setAutosaveStatus = (newStatus) => {
140-
if (!autosave) {
141-
return;
142-
}
143-
144140
const oldCssStatusClass = generateCssStatusClass(currentAutosaveStatus);
145141
const newCssStatusClass = generateCssStatusClass(newStatus);
146142

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

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

167172
autosaveStatusSavedNode.innerHTML = saveMessage;
168-
autosave.classList.add('ibexa-autosave--saved');
173+
autosaveNode.classList.add('ibexa-autosave--saved');
169174
};
170175

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

189210
form.setAttribute('novalidate', true);
@@ -204,4 +225,4 @@
204225
menuButtonsToValidate.forEach((btn) => {
205226
btn.addEventListener('click', validateHandler, false);
206227
});
207-
})(window, window.document, window.ibexa, window.Translator, window.moment);
228+
})(window, window.document, window.ibexa, window.Translator, window.bootstrap, window.moment);

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

Lines changed: 7 additions & 23 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,14 +25,13 @@
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

5135
contentNode.addEventListener('scroll', fitHeader, false);
52-
controlManyZIndexes([{ container: headerNode }, { container: headerBottomRowNode }], headerNode);
36+
controlManyZIndexes([{ container: headerNode }, { container: detailsContainer }], headerNode);
5337
})(window, window.document, window.ibexa);

‎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)