Add column list options

src/Sulu/Bundle/AdminBundle/Resources/js/components/ArrowMenu/Action.js

@@ -0,0 +1,22 @@
+// @flow
+import React from 'react';
+import actionStyles from './action.scss';
+
+type Props = {
+    children: string,
+    onClick: () => void,
+};
+
+export default class Action extends React.PureComponent<Props> {
+    render() {
+        const {
+            onClick,
+        } = this.props;
+
+        return (
+            <button className={actionStyles.action} onClick={onClick}>
+                {this.props.children}
+            </button>
+        );
+    }
+}

src/Sulu/Bundle/AdminBundle/Resources/js/components/ArrowMenu/ArrowMenu.js

@@ -8,6 +8,7 @@ import Popover from '../Popover';
 import SingleItemSection from './SingleItemSection';
 import Section from './Section';
 import Item from './Item';
+import Action from './Action';
 import arrowMenuStyles from './arrowMenu.scss';
 
 type Props = {
@@ -24,6 +25,7 @@ export default class ArrowMenu extends React.Component<Props> {
     static Section = Section;
     static SingleItemSection = SingleItemSection;
     static Item = Item;
+    static Action = Action;
 
     @observable displayValueRef: ?ElementRef<*>;
 
@@ -59,10 +61,15 @@ export default class ArrowMenu extends React.Component<Props> {
                     verticalOffset={VERTICAL_OFFSET}
                 >
                     {
-                        (setPopoverElementRef, popoverStyle, verticalPosition) => {
+                        (setPopoverElementRef, popoverStyle, verticalPosition, horizontalPosition) => {
                             const arrowVerticalPosition = verticalPosition === 'top' ? 'bottom' : 'top';
 
-                            return this.renderMenu(setPopoverElementRef, popoverStyle, arrowVerticalPosition);
+                            return this.renderMenu(
+                                setPopoverElementRef,
+                                popoverStyle,
+                                arrowVerticalPosition,
+                                horizontalPosition
+                            );
                         }
                     }
                 </Popover>

src/Sulu/Bundle/AdminBundle/Resources/js/components/ArrowMenu/README.md

@@ -3,6 +3,7 @@ SuluContentBundle.
 
 Possible Children of this component are `Section`, for custom sections and the default `SingleSingleItemSection`.
 The component `SingleSingleItemSection` can receive `Item` as children.
+The component `Action` can be used inside `Section` components.
 
 Important for this component is the render prop `anchorElement`.
 This prop will be rendered into the component. Internally there is used an [`Popover`](#popover) to position the menu correctly.
@@ -185,4 +186,59 @@ const button = (<button onClick={handleButtonClick}>Open ArrowMenu</button>);
         </SingleItemSection>
     </ArrowMenu>
 </div>
+```
+
+Example with actions:
+
+```javascript
+
+const Action = ArrowMenu.Action;
+const Section = ArrowMenu.Section;
+
+initialState = {
+    open: false,
+};
+
+const handleAction1Click = (value) => {
+    setState(() => ({
+        open: false,
+    }));
+    alert('Action 1 clicked');
+};
+
+const handleAction2Click = (value) => {
+    setState(() => ({
+        open: true,
+    }));
+    alert('Action 2 clicked');
+};
+
+const handleAction3Click = (value) => {
+    setState(() => ({
+        open: true,
+    }));
+    alert('Action 3 clicked');
+};
+
+const handleButtonClick = () => {
+    setState(() => ({
+        open: true,
+    }));
+};
+
+const handleClose = () => {
+    setState(() => ({
+        open: false,
+    }));
+};
+
+const button = (<button onClick={handleButtonClick}>Open ArrowMenu</button>);
+
+<ArrowMenu open={state.open} onClose={handleClose} anchorElement={button}>
+    <Section>
+        <Action onClick={this.handleAction1Click}>Action 1</Action>
+        <Action onClick={this.handleAction2Click}>Action 2</Action>
+        <Action onClick={this.handleAction3Click}>Action 3</Action>
+    </Section>
+</ArrowMenu>
 ```

src/Sulu/Bundle/AdminBundle/Resources/js/components/ArrowMenu/Section.js

@@ -5,7 +5,7 @@ import sectionStyles from './section.scss';
 
 type Props = {
     children?: ChildrenArray<Element<*>>,
-    title: string,
+    title?: string,
 };
 
 export default class Section extends React.PureComponent<Props> {
@@ -17,7 +17,9 @@ export default class Section extends React.PureComponent<Props> {
 
         return (
             <div className={sectionStyles.section}>
-                <div className={sectionStyles.title}>{title}</div>
+                {title &&
+                    <div className={sectionStyles.title}>{title}</div>
+                }
                 <div className={sectionStyles.children}>
                     {children}
                 </div>

src/Sulu/Bundle/AdminBundle/Resources/js/components/ArrowMenu/action.scss

@@ -0,0 +1,25 @@
+@import '../../containers/Application/colors.scss';
+
+$hoverColor: $shakespeare;
+$fontColor: $black;
+
+.action {
+    border: none;
+    background: transparent;
+    line-height: 14px;
+    color: $fontColor;
+    cursor: pointer;
+    font-size: 12px;
+    margin-bottom: 13px;
+    position: relative;
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+        color: $hoverColor;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}

src/Sulu/Bundle/AdminBundle/Resources/js/components/ArrowMenu/section.scss

@@ -5,19 +5,19 @@ $titleColor: $black;
 .section {
     padding-left: 30px;
     padding-right: 30px;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
 
     &:first-child {
-        padding-top: 20px;
+        padding-top: 10px;
     }
 
     &:last-child {
-        padding-bottom: 20px;
+        padding-bottom: 10px;
     }
 
     &:not(:first-child) {
         border-top: 1px solid #ccc;
-        padding-top: 20px;
+        padding-top: 10px;
     }
 }
 

src/Sulu/Bundle/AdminBundle/Resources/js/components/ArrowMenu/tests/ArrowMenu.test.js

@@ -43,6 +43,11 @@ test('Render ArrowMenu closed', () => {
                 <ArrowMenu.Item value="title">Title</ArrowMenu.Item>
                 <ArrowMenu.Item value="description">Description</ArrowMenu.Item>
             </ArrowMenu.SingleItemSection>
+            <ArrowMenu.Section>
+                <ArrowMenu.Action onClick={jest.fn()}>Test Action 1</ArrowMenu.Action>
+                <ArrowMenu.Action onClick={jest.fn()}>Test Action 2</ArrowMenu.Action>
+                <ArrowMenu.Action onClick={jest.fn()}>Test Action 3</ArrowMenu.Action>
+            </ArrowMenu.Section>
         </ArrowMenu>
     );
 
@@ -83,6 +88,11 @@ test('Render ArrowMenu open', () => {
                 <ArrowMenu.Item value="title">Title</ArrowMenu.Item>
                 <ArrowMenu.Item value="description">Description</ArrowMenu.Item>
             </ArrowMenu.SingleItemSection>
+            <ArrowMenu.Section>
+                <ArrowMenu.Action onClick={jest.fn()}>Test Action 1</ArrowMenu.Action>
+                <ArrowMenu.Action onClick={jest.fn()}>Test Action 2</ArrowMenu.Action>
+                <ArrowMenu.Action onClick={jest.fn()}>Test Action 3</ArrowMenu.Action>
+            </ArrowMenu.Section>
         </ArrowMenu>
     );
 
@@ -98,6 +108,9 @@ test('Events should be called correctly', () => {
     const button = (<button>Nice button</button>);
     const value1 = 'sulu';
     const value2 = undefined;
+    const handleActionClick1 = jest.fn();
+    const handleActionClick2 = jest.fn();
+    const handleActionClick3 = jest.fn();
 
     const arrowMenu = mount(
         <ArrowMenu anchorElement={button} onClose={handleClose} open={open}>
@@ -123,12 +136,20 @@ test('Events should be called correctly', () => {
                 <ArrowMenu.Item value="title">Title</ArrowMenu.Item>
                 <ArrowMenu.Item value="description">Description</ArrowMenu.Item>
             </ArrowMenu.SingleItemSection>
+            <ArrowMenu.Section>
+                <ArrowMenu.Action onClick={handleActionClick1}>Test Action 1</ArrowMenu.Action>
+                <ArrowMenu.Action onClick={handleActionClick2}>Test Action 2</ArrowMenu.Action>
+                <ArrowMenu.Action onClick={handleActionClick3}>Test Action 3</ArrowMenu.Action>
+            </ArrowMenu.Section>
         </ArrowMenu>
     );
 
     arrowMenu.find('SingleItemSection').at(0).find('Item').at(1).simulate('click');
     expect(handleChangeSection1).toBeCalledWith('sulu_blog');
 
+    arrowMenu.find('Action').at(1).simulate('click');
+    expect(handleActionClick2).toBeCalled();
+
     arrowMenu.find('SingleItemSection').at(1).find('Item').at(0).simulate('click');
     expect(handleChangeSection2).toBeCalledWith('title');
 

src/Sulu/Bundle/AdminBundle/Resources/js/components/ArrowMenu/tests/__snapshots__/ArrowMenu.test.js.snap

@@ -21,7 +21,7 @@ exports[`Render ArrowMenu open 2`] = `
 <div>
   <div class=\\"container\\">
     <div class=\\"arrowMenuContainer\\" style=\\"top: 20px; position: fixed; pointer-events: auto; left: 10px;\\">
-      <div class=\\"arrow top left\\"></div>
+      <div class=\\"arrow top right\\"></div>
       <div class=\\"arrowMenu\\">
         <div class=\\"section\\">
           <div class=\\"title\\">Search Section</div>
@@ -42,6 +42,9 @@ exports[`Render ArrowMenu open 2`] = `
             <div class=\\"item\\"><span class=\\"icon\\"></span><span>Description</span></div>
           </div>
         </div>
+        <div class=\\"section\\">
+          <div class=\\"children\\"><button class=\\"action\\">Test Action 1</button><button class=\\"action\\">Test Action 2</button><button class=\\"action\\">Test Action 3</button></div>
+        </div>
       </div>
     </div>
   </div>

src/Sulu/Bundle/AdminBundle/Resources/js/components/BlockCollection/sortableHandle.scss

@@ -4,5 +4,5 @@
     justify-content: center;
     height: 100%;
     width: 100%;
-    cursor: grab;
+    cursor: move;
 }

src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/Button.js

@@ -10,12 +10,13 @@ const LOADER_SIZE = 25;
 
 type Props = {|
     active: boolean,
-    children: Node,
+    children?: Node,
     className?: string,
     disabled: boolean,
     icon?: string,
     loading: boolean,
     onClick?: (value: *) => void,
+    showDropdownIcon: boolean,
     size: 'small' | 'large',
     skin: 'primary' | 'secondary' | 'link' | 'icon',
     type: 'button' | 'submit' | 'reset',
@@ -27,6 +28,7 @@ export default class Button extends React.PureComponent<Props> {
         active: false,
         disabled: false,
         loading: false,
+        showDropdownIcon: false,
         size: 'large',
         skin: 'secondary',
         type: 'button',
@@ -50,6 +52,7 @@ export default class Button extends React.PureComponent<Props> {
             icon,
             loading,
             onClick,
+            showDropdownIcon,
             skin,
             type,
         } = this.props;
@@ -70,8 +73,18 @@ export default class Button extends React.PureComponent<Props> {
                 onClick={onClick ? this.handleClick : undefined}
                 type={type}
             >
-                {icon && <Icon className={buttonStyles.buttonIcon} name={icon} />}
-                <span className={buttonStyles.text}>{children}</span>
+                {icon &&
+                    <Icon className={buttonStyles.buttonIcon} name={icon} />
+                }
+                {children &&
+                    <span className={buttonStyles.text}>{children}</span>
+                }
+                {showDropdownIcon &&
+                    <Icon
+                        className={classNames(buttonStyles.buttonIcon, buttonStyles.dropdownIcon)}
+                        name={'su-angle-down'}
+                    />
+                }
                 {loading &&
                     <div className={buttonStyles.loader}>
                         <Loader size={LOADER_SIZE} />

src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/README.md

@@ -1,6 +1,6 @@
 The `Button` component displays a button.
 
-```
+```javascript
 const onClick = () => {
     /* do click things */
     alert('Clicked this nice button, congrats!');
@@ -13,7 +13,7 @@ const onClick = () => {
 </Button>
 ```
 
-```
+```javascript
 const onClick = () => {
     /* do click things */
     alert('Clicked this nice button, congrats!');
@@ -26,7 +26,7 @@ const onClick = () => {
 </Button>
 ```
 
-```
+```javascript
 const onClick = () => {
     /* do click things */
     alert('Clicked this nice button, congrats!');
@@ -58,3 +58,35 @@ The buttons can also be used in combination with an icon.
     Add something
 </Button>
 ```
+
+The prob `showDropdownIcon` displays a drop down icon on the right side.
+
+```javascript
+<Button skin="icon" icon="su-plus" showDropdownIcon={true} />
+```
+
+```javascript
+<Button skin="primary" showDropdownIcon={true}>
+    Add something
+</Button>
+```
+
+```javascript
+<Button skin="secondary" showDropdownIcon={true}>
+    Add something
+</Button>
+```
+
+```javascript
+<Button skin="link" showDropdownIcon={true}>
+    Add something
+</Button>
+```
+
+It's also possible to have a icon and a drop down icon.
+
+```javascript
+<Button icon="su-plus" skin="primary" showDropdownIcon={true}>
+    Add something
+</Button>
+```