Skip to content

Commit c890067

Browse files
tischsoictischsoic
committed
IBX-9069: Initial Product Tab (#1397)
1 parent 574d20f commit c890067

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1395
-420
lines changed

‎src/bundle/Resources/public/scss/ui/modules/_universal.discovery.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
1+
@import 'universal-discovery/mixins/collapsible-arrow';
2+
@import 'universal-discovery/mixins/filters-panel';
3+
@import 'universal-discovery/mixins/filters-row';
4+
@import 'universal-discovery/mixins/selected.items.panel.item';
5+
@import 'universal-discovery/mixins/selected.items.panel';
6+
17
@import 'universal-discovery/main';
28
@import 'universal-discovery/tab';
39
@import 'universal-discovery/top.menu';
410
@import 'universal-discovery/top.menu.search.input';
511
@import 'universal-discovery/actions.menu';
12+
@import 'universal-discovery/collapsible';
613
@import 'universal-discovery/content.create';
714
@import 'universal-discovery/content.create.widget';
815
@import 'universal-discovery/content.create.button';
916
@import 'universal-discovery/content.edit';
1017
@import 'universal-discovery/content.edit.button';
18+
@import 'universal-discovery/content.type.selector.list';
1119
@import 'universal-discovery/sort.switcher';
1220
@import 'universal-discovery/view.switcher';
1321
@import 'universal-discovery/tab.selector';
1422
@import 'universal-discovery/finder';
1523
@import 'universal-discovery/finder.branch';
1624
@import 'universal-discovery/finder.leaf';
1725
@import 'universal-discovery/content.meta.preview';
26+
@import 'universal-discovery/selected.items.panel.item';
27+
@import 'universal-discovery/selected.items.panel';
1828
@import 'universal-discovery/selected.locations';
1929
@import 'universal-discovery/selected.locations.item';
2030
@import 'universal-discovery/grid';
@@ -23,6 +33,8 @@
2333
@import 'universal-discovery/search.tags';
2434
@import 'universal-discovery/content.table.item';
2535
@import 'universal-discovery/content.table';
36+
@import 'universal-discovery/filters-panel';
37+
@import 'universal-discovery/filters-row';
2638
@import 'universal-discovery/filters';
2739
@import 'universal-discovery/bookmarks.list';
2840
@import 'universal-discovery/translation.selector';

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.c-collapsible {
2+
$self: &;
3+
4+
& + .c-filters-row,
5+
& + .c-filters__row {
6+
border-top: calculateRem(1px) solid $ibexa-color-light;
7+
}
8+
9+
&--hidden {
10+
#{$self} {
11+
&__title {
12+
box-shadow: none;
13+
border-bottom-color: transparent;
14+
15+
&:before {
16+
transform: rotate(135deg);
17+
}
18+
19+
&:after {
20+
transform: rotate(-135deg);
21+
}
22+
}
23+
24+
&__content {
25+
transform: scaleY(0);
26+
opacity: 0;
27+
height: 0;
28+
}
29+
}
30+
}
31+
32+
&__title {
33+
position: relative;
34+
cursor: pointer;
35+
padding: 0 calculateRem(24px);
36+
font-size: $ibexa-text-font-size-medium;
37+
font-weight: 600;
38+
min-height: calculateRem(40px);
39+
display: flex;
40+
align-items: center;
41+
border-style: solid;
42+
border-color: $ibexa-color-light;
43+
border-width: calculateRem(1px) 0;
44+
box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.05);
45+
46+
@include collapsible-arrow;
47+
}
48+
49+
&__content {
50+
transform: scaleY(1);
51+
transform-origin: top center;
52+
}
53+
54+
&__content-wrapper {
55+
padding: calculateRem(16px) calculateRem(24px);
56+
}
57+
58+
&__list {
59+
padding: 0;
60+
margin-bottom: 0;
61+
list-style-type: none;
62+
}
63+
64+
&__list-item {
65+
padding: calculateRem(6px) 0;
66+
67+
.form-check {
68+
width: 100%;
69+
}
70+
71+
.form-check-label {
72+
width: 100%;
73+
text-overflow: ellipsis;
74+
overflow: hidden;
75+
}
76+
77+
.ibexa-input--checkbox {
78+
margin-right: calculateRem(8px);
79+
}
80+
}
81+
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.type.selector.list.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.c-content-type-selector-list {
2+
padding: 0;
3+
margin-bottom: 0;
4+
list-style-type: none;
5+
6+
&__item {
7+
padding: calculateRem(6px) 0;
8+
9+
.form-check {
10+
width: 100%;
11+
}
12+
13+
.form-check-label {
14+
width: 100%;
15+
text-overflow: ellipsis;
16+
overflow: hidden;
17+
}
18+
19+
.ibexa-input--checkbox {
20+
margin-right: calculateRem(8px);
21+
}
22+
}
23+
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_filters-panel.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.c-filters-panel {
2+
@include c-filters-panel('.c-filters-row');
3+
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_filters-row.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.c-filters-row {
2+
@include c-filters-row('__title');
3+
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_filters.scss‎

Lines changed: 2 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,11 @@
11
.c-filters {
2-
position: relative;
3-
width: 100%;
4-
height: 100%;
5-
overflow: auto;
6-
padding-bottom: calculateRem(24px);
7-
8-
&__header {
9-
display: flex;
10-
position: sticky;
11-
top: 0;
12-
background-color: $ibexa-color-white;
13-
z-index: 2;
14-
align-items: center;
15-
justify-content: space-between;
16-
padding: calculateRem(16px) calculateRem(12px);
17-
border-bottom: calculateRem(1px) solid $ibexa-color-light;
18-
}
19-
20-
&__header-content {
21-
font-size: $ibexa-text-font-size-large;
22-
font-weight: 600;
23-
margin-right: calculateRem(8px);
24-
}
25-
26-
&__header-actions {
27-
display: flex;
28-
flex-wrap: nowrap;
29-
}
30-
31-
&__row-title {
32-
position: relative;
33-
font-size: $ibexa-text-font-size-medium;
34-
font-weight: 600;
35-
min-height: calculateRem(40px);
36-
display: flex;
37-
align-items: center;
38-
}
39-
40-
&__collapsible {
41-
& + .c-filters__row {
42-
border-top: calculateRem(1px) solid $ibexa-color-light;
43-
}
44-
45-
&--hidden {
46-
.c-filters {
47-
&__collapsible-title {
48-
box-shadow: none;
49-
border-bottom-color: transparent;
50-
51-
&:before {
52-
transform: rotate(135deg);
53-
}
54-
55-
&:after {
56-
transform: rotate(-135deg);
57-
}
58-
}
59-
60-
&__collapsible-content {
61-
transform: scaleY(0);
62-
opacity: 0;
63-
height: 0;
64-
}
65-
}
66-
}
67-
}
68-
69-
&__collapsible-title {
70-
position: relative;
71-
cursor: pointer;
72-
padding: 0 calculateRem(24px);
73-
font-size: $ibexa-text-font-size-medium;
74-
font-weight: 600;
75-
min-height: calculateRem(40px);
76-
display: flex;
77-
align-items: center;
78-
border-style: solid;
79-
border-color: $ibexa-color-light;
80-
border-width: calculateRem(1px) 0;
81-
box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.05);
82-
83-
&::before,
84-
&::after {
85-
content: '';
86-
position: absolute;
87-
z-index: 1;
88-
top: 50%;
89-
width: calculateRem(6px);
90-
height: calculateRem(1px);
91-
background: $ibexa-color-dark;
92-
}
93-
94-
&::before {
95-
transform: rotate(225deg);
96-
right: calculateRem(12px);
97-
}
98-
99-
&::after {
100-
transform: rotate(-225deg);
101-
right: calculateRem(16px);
102-
}
103-
}
104-
105-
&__collapsible-content {
106-
transform: scaleY(1);
107-
transform-origin: top center;
108-
}
109-
110-
&__collapsible-content-wrapper {
111-
padding: calculateRem(16px) calculateRem(24px);
112-
}
2+
@include c-filters-panel('.c-filters__row');
1133

1144
&__row {
115-
padding: calculateRem(4px) calculateRem(24px);
5+
@include c-filters-row('-title');
1166

1177
&--language {
1188
padding-bottom: calculateRem(16px);
1199
}
12010
}
121-
122-
&__collapsible-list {
123-
padding: 0;
124-
margin-bottom: 0;
125-
list-style-type: none;
126-
}
127-
128-
&__collapsible-list-item {
129-
padding: calculateRem(6px) 0;
130-
131-
.form-check {
132-
width: 100%;
133-
}
134-
135-
.form-check-label {
136-
width: 100%;
137-
text-overflow: ellipsis;
138-
overflow: hidden;
139-
}
140-
141-
.ibexa-input--checkbox {
142-
margin-right: calculateRem(8px);
143-
}
144-
}
14511
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_search.scss‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@
1919
height: 100%;
2020
}
2121

22-
&__sidebar {
23-
display: flex;
22+
&__content-meta-preview:not(:empty) {
23+
flex: 1;
2424
height: 100%;
25-
min-width: calculateRem(270px);
26-
margin-right: calculateRem(24px);
27-
border-right: calculateRem(1px) solid $ibexa-color-light;
28-
background-color: $ibexa-color-white;
25+
overflow: auto;
26+
border-left: calculateRem(1px) solid $ibexa-color-light;
27+
}
28+
29+
&__filters {
30+
border-left: calculateRem(1px) solid $ibexa-color-light;
2931
}
3032

3133
&__spinner-wrapper {
@@ -41,12 +43,13 @@
4143
}
4244

4345
&__content {
46+
flex: 2;
4447
display: flex;
4548
flex-direction: column;
4649
overflow: auto;
4750
width: 100%;
4851
flex-shrink: 1;
49-
padding: 0 calculateRem(8px);
52+
padding: calculateRem(24px);
5053
background-color: $ibexa-color-white;
5154
position: relative;
5255
}
@@ -73,7 +76,6 @@
7376
display: grid;
7477
grid-template: 'title clear-search-btn' 'subtitle subtitle';
7578
justify-content: start;
76-
margin-top: calculateRem(16px);
7779
}
7880

7981
&__table-tile {

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.items.panel.item.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.c-selected-items-panel-item {
2+
@include c-selected-items-panel-item;
3+
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.items.panel.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.c-selected-items-panel {
2+
@include c-selected-items-panel;
3+
}

0 commit comments

Comments
 (0)