Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IBX-9069: Initial Product Tab #1397

Open
wants to merge 15 commits into
base: 4.6
Choose a base branch
from
4 changes: 4 additions & 0 deletions src/bundle/Resources/public/scss/_tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@
}
}
}

&--not-selectable {
cursor: not-allowed;
}
}

&__cell:first-child {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
@import 'universal-discovery/mixins/filters-panel';
@import 'universal-discovery/mixins/filters-row';
@import 'universal-discovery/mixins/selected.items.panel.item';
@import 'universal-discovery/mixins/selected.items.panel';

@import 'universal-discovery/main';
@import 'universal-discovery/tab';
@import 'universal-discovery/top.menu';
@import 'universal-discovery/top.menu.search.input';
@import 'universal-discovery/actions.menu';
@import 'universal-discovery/collapsible';
@import 'universal-discovery/content.create';
@import 'universal-discovery/content.create.widget';
@import 'universal-discovery/content.create.button';
@import 'universal-discovery/content.edit';
@import 'universal-discovery/content.edit.button';
@import 'universal-discovery/content.type.selector.list';
@import 'universal-discovery/sort.switcher';
@import 'universal-discovery/view.switcher';
@import 'universal-discovery/tab.selector';
@import 'universal-discovery/finder';
@import 'universal-discovery/finder.branch';
@import 'universal-discovery/finder.leaf';
@import 'universal-discovery/content.meta.preview';
@import 'universal-discovery/selected.items.panel.item';
@import 'universal-discovery/selected.items.panel';
@import 'universal-discovery/selected.locations';
@import 'universal-discovery/selected.locations.item';
@import 'universal-discovery/grid';
Expand All @@ -23,6 +32,8 @@
@import 'universal-discovery/search.tags';
@import 'universal-discovery/content.table.item';
@import 'universal-discovery/content.table';
@import 'universal-discovery/filters-panel';
@import 'universal-discovery/filters-row';
@import 'universal-discovery/filters';
@import 'universal-discovery/bookmarks.list';
@import 'universal-discovery/translation.selector';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
.c-collapsible {
$self: &;

& + .c-filters-row,
& + .c-filters__row {
Comment on lines +4 to +5
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

something is wrong with this for me :) c-filters-row and c-filters__row should be the same component but now it's separate or am I wrong

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created some new filters components and now we have c-filters-row and we no longer have c-filters__row, but because this is an add-on for 4.6 I wanted to be extra careful with BC break and didn't delete this CSS styles. But maybe I should not be that careful. :)

border-top: calculateRem(1px) solid $ibexa-color-light;
}

&--hidden {
#{$self} {
&__title {
box-shadow: none;
border-bottom-color: transparent;

&:before {
transform: rotate(135deg);
}

&:after {
transform: rotate(-135deg);
}
}

&__content {
transform: scaleY(0);
opacity: 0;
height: 0;
}
}
}

&__title {
position: relative;
cursor: pointer;
padding: 0 calculateRem(24px);
font-size: $ibexa-text-font-size-medium;
font-weight: 600;
min-height: calculateRem(40px);
display: flex;
align-items: center;
border-style: solid;
border-color: $ibexa-color-light;
border-width: calculateRem(1px) 0;
box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.05);

&::before,
&::after {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we could do mixin from it? As I guess that's an arrow, already used in filters in two other places (also in theory arrow is also in dropdown, but in different direction, so probably unable to mixinise...)

content: '';
position: absolute;
z-index: 1;
top: 50%;
width: calculateRem(6px);
height: calculateRem(1px);
background: $ibexa-color-dark;
}

&::before {
transform: rotate(225deg);
right: calculateRem(12px);
}

&::after {
transform: rotate(-225deg);
right: calculateRem(16px);
}
}

&__content {
transform: scaleY(1);
transform-origin: top center;
}

&__content-wrapper {
padding: calculateRem(16px) calculateRem(24px);
}

&__list {
padding: 0;
margin-bottom: 0;
list-style-type: none;
}

&__list-item {
padding: calculateRem(6px) 0;

.form-check {
width: 100%;
}

.form-check-label {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}

.ibexa-input--checkbox {
margin-right: calculateRem(8px);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.c-content-type-selector-list {
padding: 0;
margin-bottom: 0;
list-style-type: none;

&__item {
padding: calculateRem(6px) 0;

.form-check {
width: 100%;
}

.form-check-label {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}

.ibexa-input--checkbox {
margin-right: calculateRem(8px);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.c-filters-panel {
@include c-filters-panel('.c-filters-row');
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.c-filters-row {
@include c-filters-row('__title');
}
Original file line number Diff line number Diff line change
@@ -1,145 +1,11 @@
.c-filters {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
padding-bottom: calculateRem(24px);

&__header {
display: flex;
position: sticky;
top: 0;
background-color: $ibexa-color-white;
z-index: 2;
align-items: center;
justify-content: space-between;
padding: calculateRem(16px) calculateRem(12px);
border-bottom: calculateRem(1px) solid $ibexa-color-light;
}

&__header-content {
font-size: $ibexa-text-font-size-large;
font-weight: 600;
margin-right: calculateRem(8px);
}

&__header-actions {
display: flex;
flex-wrap: nowrap;
}

&__row-title {
position: relative;
font-size: $ibexa-text-font-size-medium;
font-weight: 600;
min-height: calculateRem(40px);
display: flex;
align-items: center;
}

&__collapsible {
& + .c-filters__row {
border-top: calculateRem(1px) solid $ibexa-color-light;
}

&--hidden {
.c-filters {
&__collapsible-title {
box-shadow: none;
border-bottom-color: transparent;

&:before {
transform: rotate(135deg);
}

&:after {
transform: rotate(-135deg);
}
}

&__collapsible-content {
transform: scaleY(0);
opacity: 0;
height: 0;
}
}
}
}

&__collapsible-title {
position: relative;
cursor: pointer;
padding: 0 calculateRem(24px);
font-size: $ibexa-text-font-size-medium;
font-weight: 600;
min-height: calculateRem(40px);
display: flex;
align-items: center;
border-style: solid;
border-color: $ibexa-color-light;
border-width: calculateRem(1px) 0;
box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(47px) 0 rgba($ibexa-color-info, 0.05);

&::before,
&::after {
content: '';
position: absolute;
z-index: 1;
top: 50%;
width: calculateRem(6px);
height: calculateRem(1px);
background: $ibexa-color-dark;
}

&::before {
transform: rotate(225deg);
right: calculateRem(12px);
}

&::after {
transform: rotate(-225deg);
right: calculateRem(16px);
}
}

&__collapsible-content {
transform: scaleY(1);
transform-origin: top center;
}

&__collapsible-content-wrapper {
padding: calculateRem(16px) calculateRem(24px);
}
@include c-filters-panel('.c-filters__row');

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

&--language {
padding-bottom: calculateRem(16px);
}
}

&__collapsible-list {
padding: 0;
margin-bottom: 0;
list-style-type: none;
}

&__collapsible-list-item {
padding: calculateRem(6px) 0;

.form-check {
width: 100%;
}

.form-check-label {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}

.ibexa-input--checkbox {
margin-right: calculateRem(8px);
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,15 @@
height: 100%;
}

&__sidebar {
display: flex;
&__content-meta-preview:not(:empty) {
flex: 1;
height: 100%;
min-width: calculateRem(270px);
margin-right: calculateRem(24px);
border-right: calculateRem(1px) solid $ibexa-color-light;
background-color: $ibexa-color-white;
overflow: auto;
border-left: calculateRem(1px) solid $ibexa-color-light;
}

&__filters {
border-left: calculateRem(1px) solid $ibexa-color-light;
}

&__spinner-wrapper {
Expand All @@ -41,12 +43,13 @@
}

&__content {
flex: 2;
display: flex;
flex-direction: column;
overflow: auto;
width: 100%;
flex-shrink: 1;
padding: 0 calculateRem(8px);
padding: calculateRem(24px);
background-color: $ibexa-color-white;
position: relative;
}
Expand All @@ -73,7 +76,6 @@
display: grid;
grid-template: 'title clear-search-btn' 'subtitle subtitle';
justify-content: start;
margin-top: calculateRem(16px);
}

&__table-tile {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.c-selected-items-panel-item {
@include c-selected-items-panel-item;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.c-selected-items-panel {
@include c-selected-items-panel;
}
Loading
Loading