Skip to content

Commit 2d04cbb

Browse files
OstafinLOstafinL
committed
IBX-10416: Wrong styling in sub-items edit translation selector
1 parent f6de641 commit 2d04cbb

File tree

7 files changed

+106
-73
lines changed

7 files changed

+106
-73
lines changed

‎src/bundle/Resources/public/js/scripts/button.translation.edit.js

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
this.container = config.container;
55
this.toggler = config.container.querySelector('.ibexa-btn--translations-list-toggler');
66
this.translationsList = config.container.querySelector('.ibexa-translation-selector__list-wrapper');
7+
this.closeTranslationsListBtn = config.container.querySelector('.ibexa-btn--close');
78
this.backdrop = config.backdrop;
89

910
this.tableNode = null;
@@ -23,14 +24,6 @@
2324
}
2425

2526
hideTranslationsList(event) {
26-
const closestTranslationSelector = event.target.closest('.ibexa-translation-selector');
27-
const clickedOnTranslationsList = closestTranslationSelector && closestTranslationSelector.isSameNode(this.container);
28-
const clickedOnDraftConflictModal = event.target.closest('.ibexa-modal--version-draft-conflict');
29-
30-
if (clickedOnTranslationsList || clickedOnDraftConflictModal) {
31-
return;
32-
}
33-
3427
if (this.tableNode) {
3528
this.tableNode.classList.add('ibexa-table--last-column-sticky');
3629

@@ -39,7 +32,8 @@
3932

4033
this.backdrop.hide();
4134
this.translationsList.classList.add('ibexa-translation-selector__list-wrapper--hidden');
42-
doc.removeEventListener('click', this.hideTranslationsList, false);
35+
36+
this.closeTranslationsListBtn.removeEventListener('click', this.hideTranslationsList, false);
4337
}
4438

4539
showTranslationsList({ currentTarget }) {
@@ -52,9 +46,9 @@
5246
}
5347

5448
this.setPosition();
55-
5649
this.backdrop.show();
57-
doc.addEventListener('click', this.hideTranslationsList, false);
50+
this.closeTranslationsListBtn.addEventListener('click', this.hideTranslationsList, false);
51+
5852
ibexa.helpers.tooltips.hideAll();
5953
}
6054

‎src/bundle/Resources/public/scss/_translation-selector.scss

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,59 @@
11
.ibexa-translation-selector {
22
&__list-wrapper {
3-
display: block;
3+
@include container-box-shadow-left;
4+
45
position: fixed;
5-
opacity: 1;
6-
text-align: left;
7-
background-color: $ibexa-color-white;
8-
border: calculateRem(16px) solid $ibexa-color-white;
9-
width: calculateRem(360px);
10-
padding: calculateRem(9px);
11-
box-shadow: calculateRem(-4px) calculateRem(4px) calculateRem(6px) 0 rgba($ibexa-color-dark-300, 0.35);
12-
border-radius: calculateRem(4px);
13-
top: calculateRem(100px);
6+
top: calculateRem(73px);
147
right: 0;
15-
height: calc(100vh - #{calculateRem(100px)});
16-
opacity: 1;
17-
transform: scaleX(1);
18-
transform-origin: right center;
198
z-index: 200;
20-
transition:
21-
transform 0.4s ease-in,
22-
opacity 0.4s ease-in;
9+
width: calculateRem(700px);
10+
height: calc(100vh - #{calculateRem(73px)});
11+
padding: calculateRem(16px) 0;
12+
background-color: $ibexa-color-white;
13+
transform: translate(0, 0) scaleX(1);
14+
transform-origin: right center;
15+
transition: $ibexa-admin-widget-open-transition;
2316

2417
&--hidden {
25-
opacity: 0;
26-
transform: scaleX(0);
27-
transition:
28-
transform 0.2s ease-out,
29-
opacity 0.2s ease-out;
18+
transform: translate(calc(100%), 0) scaleX(0);
19+
transition: $ibexa-admin-widget-close-transition;
3020
}
3121
}
3222

3323
&__title {
34-
color: $ibexa-color-primary;
35-
font-size: calculateRem(16px);
36-
line-height: 2;
24+
padding: calculateRem(8px) calculateRem(32px) calculateRem(24px);
3725
font-weight: bold;
38-
border-bottom: calculateRem(1px) solid $ibexa-color-primary;
39-
margin-bottom: calculateRem(15px);
26+
border-bottom: calculateRem(1px) solid $ibexa-color-light;
27+
display: flex;
28+
flex-wrap: wrap;
29+
justify-content: space-between;
30+
align-items: flex-start;
4031
}
4132

4233
&__list {
4334
display: flex;
4435
flex-direction: column;
45-
max-height: calculateRem(300px);
36+
padding: calculateRem(32px) 25% calculateRem(48px) calculateRem(32px);
37+
max-height: calc(100% - #{calculateRem(90px)});
4638
overflow: auto;
4739

4840
.ibexa-btn--content-edit {
49-
background-color: $ibexa-color-white;
50-
padding: calculateRem(9px) calculateRem(24px);
51-
text-align: left;
52-
box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ibexa-color-black, 0.1);
53-
margin-bottom: calculateRem(8px);
41+
background: $ibexa-color-white;
42+
display: flex;
43+
width: 100%;
44+
padding: calculateRem(13px) calculateRem(10px);
45+
margin-bottom: calculateRem(12px);
46+
border: calculateRem(1px) solid $ibexa-color-light;
47+
border-radius: $ibexa-border-radius;
48+
box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-info, 0.05);
49+
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
50+
cursor: pointer;
5451

55-
&:hover,
56-
&:focus {
57-
background: $ibexa-color-light;
58-
font-weight: 700;
59-
text-decoration: none;
52+
&:hover {
53+
border-color: $ibexa-color-dark;
54+
color: $ibexa-color-dark;
55+
transform: scale(1.02) translateX(-10px);
56+
box-shadow: calculateRem(4px) calculateRem(10px) calculateRem(17px) 0 rgba($ibexa-color-info, 0.2);
6057
}
6158
}
6259
}

‎src/bundle/Resources/public/scss/ui/modules/sub-items-list/_language.selector.scss

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,31 @@
33
&__items {
44
margin-top: calculateRem(5px);
55
max-height: calc(100vh - #{calculateRem(220px)});
6-
overflow: auto;
6+
}
77

8+
&__item {
89
.form-check-label {
9-
font-size: $ibexa-text-font-size;
10-
line-height: calculateRem(50px);
10+
background: $ibexa-color-white;
11+
display: flex;
12+
width: 100%;
13+
padding: calculateRem(13px) calculateRem(10px);
14+
margin-bottom: calculateRem(12px);
15+
border: calculateRem(1px) solid $ibexa-color-light;
16+
border-radius: $ibexa-border-radius;
17+
box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-info, 0.05);
18+
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
19+
cursor: pointer;
20+
line-height: calculateRem(24px);
21+
22+
&:hover {
23+
border-color: $ibexa-color-dark;
24+
transform: scale(1.02) translateX(-10px);
25+
box-shadow: calculateRem(4px) calculateRem(10px) calculateRem(17px) 0 rgba($ibexa-color-info, 0.2);
26+
}
27+
}
28+
29+
.form-check-input {
30+
display: none;
1131
}
1232
}
1333
}

‎src/bundle/Resources/views/themes/admin/ui/edit_translation_button.html.twig

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,14 @@
2828
</svg>
2929
</button>
3030
<div class="ibexa-translation-selector__list-wrapper ibexa-translation-selector__list-wrapper--hidden" data-top-offset={{ top_offset }}>
31-
<div class="ibexa-translation-selector__title">{{ 'edit_translation.list.title'|trans|desc('Select language') }}:</div>
31+
<div class="ibexa-translation-selector__title">
32+
<h3>{{ 'edit_translation.list.title'|trans|desc('Select translation') }} <span class="ibexa-translation-selector__counter">({{ translations|length }})</span></h3>
33+
<button class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--no-text ibexa-btn--close">
34+
<svg class="ibexa-icon ibexa-icon--small">
35+
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
36+
</svg>
37+
</button>
38+
</div>
3239
<div class="ibexa-translation-selector__list">
3340
{% for language in translations %}
3441
<button class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--content-edit"

‎src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,17 @@ const InstantFilter = (props) => {
3939

4040
return (
4141
<div className="ibexa-instant-filter" ref={_refInstantFilter}>
42-
<div className="ibexa-instant-filter__input-wrapper">
43-
<input
44-
type="text"
45-
className="ibexa-instant-filter__input form-control"
46-
placeholder={Translator.trans(/*@Desc("Search by content type")*/ 'instant.filter.placeholder', {}, 'ibexa_sub_items')}
47-
value={filterQuery}
48-
onChange={(event) => setFilterQuery(event.target.value)}
49-
/>
50-
</div>
42+
{props.hasSearch && (
43+
<div className="ibexa-instant-filter__input-wrapper">
44+
<input
45+
type="text"
46+
className="ibexa-instant-filter__input form-control"
47+
placeholder={Translator.trans(/*@Desc("Search by content type")*/ 'instant.filter.placeholder', {}, 'ibexa_sub_items')}
48+
value={filterQuery}
49+
onChange={(event) => setFilterQuery(event.target.value)}
50+
/>
51+
</div>
52+
)}
5153
<div className="ibexa-instant-filter__items">
5254
{props.items.map((item) => {
5355
const radioId = `item_${item.value}`;
@@ -76,11 +78,13 @@ const InstantFilter = (props) => {
7678
};
7779

7880
InstantFilter.propTypes = {
81+
hasSearch: PropTypes.bool,
7982
items: PropTypes.array,
8083
handleItemChange: PropTypes.func,
8184
};
8285

8386
InstantFilter.defaultProps = {
87+
hasSearch: true,
8488
items: [],
8589
handleItemChange: () => {},
8690
};

‎src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/language.selector.compoment.js

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,45 @@ import React, { useEffect } from 'react';
22
import PropTypes from 'prop-types';
33

44
import { createCssClassNames } from '../../../common/helpers/css.class.names';
5+
import Icon from '../../../common/icon/icon';
56
import InstantFilter from '../sub-items-list/instant.filter.component';
67

8+
79
const LanguageSelector = (props) => {
810
const className = createCssClassNames({
911
'ibexa-extra-actions': true,
1012
'c-language-selector': true,
1113
'ibexa-extra-actions--edit': true,
1214
'ibexa-extra-actions--hidden': !props.isOpen,
1315
});
16+
const closeBtnClassName = createCssClassNames({
17+
'btn': true,
18+
'ibexa-btn': true,
19+
'ibexa-btn--ghost': true,
20+
'ibexa-btn--small': true,
21+
'ibexa-btn--no-text': true,
22+
'ibexa-extra-actions__btn--close': true,
23+
});
1424
const closeLanguageSelector = (event) => {
1525
if (!event.target.closest('.c-table-view-item__btn') && !event.target.classList.contains('ibexa-instant-filter__input')) {
1626
props.close();
1727
}
1828
};
1929

20-
useEffect(() => {
21-
window.document.addEventListener('click', closeLanguageSelector, false);
22-
23-
return () => {
24-
window.document.removeEventListener('click', closeLanguageSelector);
25-
};
26-
}, []);
27-
2830
return (
2931
<div className={className}>
30-
<div className="ibexa-extra-actions__header">{props.label}</div>
32+
<div className="ibexa-extra-actions__header">
33+
<h3>{props.label}</h3>
34+
<button
35+
type="button"
36+
className={closeBtnClassName}
37+
onClick={closeLanguageSelector}
38+
>
39+
<Icon name="discard" extraClasses="ibexa-icon--small" />
40+
</button>
41+
</div>
3142
<div className="ibexa-extra-actions__content">
32-
<InstantFilter items={props.languageItems} handleItemChange={props.handleItemChange} />
43+
<InstantFilter items={props.languageItems} handleItemChange={props.handleItemChange} hasSearch={false} />
3344
</div>
3445
</div>
3546
);

‎src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ export default class TableViewComponent extends Component {
217217
</thead>
218218
);
219219
}
220-
220+
221221
render() {
222222
const { items } = this.props;
223223
const renderedItems = items.map(this.renderItem);

0 commit comments

Comments
 (0)