remove margin if no toolbar is set

sulu · Mar 26, 2018 · 134a051 · 134a051
1 parent 4926ab7
commit 134a051
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 19 deletions.
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/ColumnList.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/ColumnList.js
@@ -59,17 +59,18 @@ export default class ColumnList extends React.Component<Props> {
 
     componentWillReceiveProps(nextProps: Props) {
         if (this.container && nextProps.children !== this.props.children) {
-            this.container.scrollLeft = this.toolbarWidth * (nextProps.children.length - 1);
+            this.container.scrollLeft = this.columnWidth * (nextProps.children.length - 1);
         }
     }
 
-    get toolbarWidth(): number {
-        if (!this.toolbar) {
+    get columnWidth(): number {
+        const columnWidth = parseInt(columnListStyles.columnWidth);
+
+        if (isNaN(columnWidth)) {
             return 0;
         }
 
-        // remove the 1px border from the toolbar to get the correct width
-        return this.toolbar.clientWidth - 1;
+        return columnWidth;
     }
 
     get containerWidth(): number {
@@ -124,13 +125,13 @@ export default class ColumnList extends React.Component<Props> {
 
     render() {
         const {children, toolbarItems} = this.props;
-        const toolbarPosition = -this.scrollPosition + this.activeColumnIndex * this.toolbarWidth;
+        const toolbarPosition = -this.scrollPosition + this.activeColumnIndex * this.columnWidth;
 
         const columnListContainerClass = classNames(
             columnListStyles.columnListContainer,
             {
                 [columnListStyles.firstVisibleColumnActive]: toolbarPosition <= 0,
-                [columnListStyles.lastVisibleColumnActive]: toolbarPosition >= this.containerWidth - this.toolbarWidth,
+                [columnListStyles.lastVisibleColumnActive]: toolbarPosition >= this.containerWidth - this.columnWidth,
             }
         );
 

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/columnList.scss b/src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/columnList.scss
@@ -1,6 +1,10 @@
 @import '../../containers/Application/colors.scss';
 @import './variables.scss';
 
+:export {
+    column-width: $columnWidth;
+}
+
 .column-list-toolbar-container {
     height: 100%;
     width: 100%;
@@ -23,7 +27,7 @@
         border-top-right-radius: 0;
     }
 
-    & ~ .toolbar-container {
+    .toolbar-container ~ & {
         height: calc(100% - $toolbarHeight);
     }
 }

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/ColumnList.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/ColumnList.test.js
@@ -5,6 +5,19 @@ import ColumnList from '../ColumnList';
 import Column from '../Column';
 import Item from '../Item';
 
+jest.mock('../columnList.scss', () => new Proxy({}, {
+    get: function(target, key) {
+        if (key === '__esModule') {
+            return false;
+        }
+        if (key === 'columnWidth') {
+            return '270px';
+        }
+
+        return key;
+    },
+}));
+
 test('The ColumnList component should render in a non-scrolling container', () => {
     const onItemClick = jest.fn();
 
@@ -214,9 +227,6 @@ test('Should move the toolbar container to the correct position', () => {
 
     expect(columnList.find('Toolbar').parent().prop('style')).toEqual({marginLeft: 0});
 
-    columnList.instance().toolbar = {
-        clientWidth: 271,
-    };
     columnList.instance().scrollPosition = 35;
     columnList.instance().activeColumnIndex = 2;
     columnList.update();
@@ -233,14 +243,13 @@ test('Should set classes if the toolbar is active on the first or last visible c
         </ColumnList>
     );
 
+    columnList.update();
+
     expect(columnList.find('.columnListContainer').prop('className'))
         .toEqual(expect.stringContaining('firstVisibleColumnActive'));
     expect(columnList.find('.columnListContainer').prop('className'))
         .toEqual(expect.stringContaining('lastVisibleColumnActive'));
 
-    columnList.instance().toolbar = {
-        clientWidth: 271,
-    };
     columnList.instance().container = {
         clientWidth: 500,
     };
@@ -270,9 +279,6 @@ test('Should scroll to the last column when new column is loaded', () => {
         </ColumnList>
     );
 
-    columnList.instance().toolbar = {
-        clientWidth: 271,
-    };
     columnList.instance().container = {
         clientWidth: 500,
     };

diff --git a/...dminBundle/Resources/js/components/ColumnList/tests/__snapshots__/ColumnList.test.js.snap b/...dminBundle/Resources/js/components/ColumnList/tests/__snapshots__/ColumnList.test.js.snap
@@ -436,7 +436,7 @@ exports[`The ColumnList component should render in a scrolling container 1`] = `
 >
   <div
     class="toolbarContainer"
-    style="margin-left: -22px;"
+    style="margin-left: 520px;"
   >
     <div
       class="toolbar"
@@ -452,7 +452,7 @@ exports[`The ColumnList component should render in a scrolling container 1`] = `
     </div>
   </div>
   <div
-    class="columnListContainer firstVisibleColumnActive"
+    class="columnListContainer lastVisibleColumnActive"
   >
     <div
       class="columnList"

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -7,6 +7,7 @@ module.exports = { // eslint-disable-line
         'selector-pseudo-class-no-unknown': [ true, {
             ignorePseudoClasses: [
                 'global',
+                'export',
             ],
         }],
         'indentation': 4,