From dc89bfd6276617c2d678d85e06b53f7da8ee5c59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Fri, 30 Oct 2020 10:05:06 +0100
Subject: [PATCH] Adding button with menu component and using it for the new
 button

---
 webapp/src/components/viewHeader.tsx          | 32 +++++++++++----
 .../src/widgets/buttons/buttonWithMenu.scss   | 40 +++++++++++++++++++
 webapp/src/widgets/buttons/buttonWithMenu.tsx | 37 +++++++++++++++++
 webapp/src/widgets/menu/labelOption.scss      |  8 ++++
 webapp/src/widgets/menu/labelOption.tsx       | 21 ++++++++++
 webapp/src/widgets/menu/menu.tsx              |  2 +
 6 files changed, 133 insertions(+), 7 deletions(-)
 create mode 100644 webapp/src/widgets/buttons/buttonWithMenu.scss
 create mode 100644 webapp/src/widgets/buttons/buttonWithMenu.tsx
 create mode 100644 webapp/src/widgets/menu/labelOption.scss
 create mode 100644 webapp/src/widgets/menu/labelOption.tsx

diff --git a/webapp/src/components/viewHeader.tsx b/webapp/src/components/viewHeader.tsx
index 2999818c8..0381f15f2 100644
--- a/webapp/src/components/viewHeader.tsx
+++ b/webapp/src/components/viewHeader.tsx
@@ -21,11 +21,13 @@ import DropdownIcon from '../widgets/icons/dropdown'
 import OptionsIcon from '../widgets/icons/options'
 import SortUpIcon from '../widgets/icons/sortUp'
 import SortDownIcon from '../widgets/icons/sortDown'
+import ButtonWithMenu from '../widgets/buttons/buttonWithMenu'
 
 import {Editable} from './editable'
 import FilterComponent from './filterComponent'
 
 import './viewHeader.scss'
+import {sendFlashMessage} from './flashMessages'
 
 type Props = {
     boardTree?: BoardTree
@@ -348,17 +350,33 @@ class ViewHeader extends React.Component<Props, State> {
                         />
                     </Menu>
                 </MenuWrapper>
-                <div
-                    className='octo-button filled'
+                <ButtonWithMenu
                     onClick={() => {
                         this.props.addCard(true)
                     }}
+                    text={(
+                        <FormattedMessage
+                            id='ViewHeader.new'
+                            defaultMessage='New'
+                        />
+                    )}
                 >
-                    <FormattedMessage
-                        id='ViewHeader.new'
-                        defaultMessage='New'
-                    />
-                </div>
+                    <Menu position='left'>
+                        <Menu.Label>
+                            <b>
+                                <FormattedMessage
+                                    id='ViewHeader.select-a-template'
+                                    defaultMessage='Select a template'
+                                />
+                            </b>
+                        </Menu.Label>
+                        <Menu.Text
+                            id='example-template'
+                            name={intl.formatMessage({id: 'ViewHeader.sample-templte', defaultMessage: 'Sample template'})}
+                            onClick={() => sendFlashMessage({content: 'Not implemented yet', severity: 'low'})}
+                        />
+                    </Menu>
+                </ButtonWithMenu>
             </div>
         )
     }
diff --git a/webapp/src/widgets/buttons/buttonWithMenu.scss b/webapp/src/widgets/buttons/buttonWithMenu.scss
new file mode 100644
index 000000000..b420a66f7
--- /dev/null
+++ b/webapp/src/widgets/buttons/buttonWithMenu.scss
@@ -0,0 +1,40 @@
+.ButtonWithMenu.octo-button {
+    display: flex;
+    align-items: stretch;
+	text-align: center;
+	min-width: 20px;
+	cursor: pointer;
+    overflow: visible;
+    padding: 0;
+
+    .button-text {
+	    padding: 3px 10px;
+        background-color: rgb(var(--button-bg));
+        color: rgb(var(--button-fg));
+	    border-radius: 5px 0 0 5px;
+	    transition: background 100ms ease-out 0s;
+        height: 100%;
+
+	    &:hover {
+            background-color: rgba(var(--button-bg), 0.8);
+        }
+    }
+
+    .button-dropdown {
+        background-color: rgb(var(--button-bg));
+        border-left: 1px solid rgba(var(--button-fg), 0.2);
+        display: flex;
+        padding: 0 3px;
+        align-items: center;
+	    border-radius: 0 5px 5px 0;
+	    transition: background 100ms ease-out 0s;
+        height: 100%;
+
+        &:hover {
+            background-color: rgba(var(--button-bg), 0.8);
+        }
+        .DropdownIcon {
+            stroke: rgb(var(--button-fg));
+        }
+    }
+}
diff --git a/webapp/src/widgets/buttons/buttonWithMenu.tsx b/webapp/src/widgets/buttons/buttonWithMenu.tsx
new file mode 100644
index 000000000..b48f80fbc
--- /dev/null
+++ b/webapp/src/widgets/buttons/buttonWithMenu.tsx
@@ -0,0 +1,37 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import DropdownIcon from '../icons/dropdown'
+import MenuWrapper from '../menuWrapper'
+
+import './buttonWithMenu.scss'
+
+type Props = {
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+    children?: React.ReactNode
+    title?: string
+    text: React.ReactNode
+}
+
+export default class ButtonWithMenu extends React.PureComponent<Props> {
+    public render(): JSX.Element {
+        return (
+            <div
+                onClick={this.props.onClick}
+                className='ButtonWithMenu octo-button'
+                title={this.props.title}
+            >
+                <div className='button-text'>
+                    {this.props.text}
+                </div>
+                <MenuWrapper stopPropagationOnToggle={true}>
+                    <div className='button-dropdown'>
+                        <DropdownIcon/>
+                    </div>
+                    {this.props.children}
+                </MenuWrapper>
+            </div>
+        )
+    }
+}
diff --git a/webapp/src/widgets/menu/labelOption.scss b/webapp/src/widgets/menu/labelOption.scss
new file mode 100644
index 000000000..c539209a7
--- /dev/null
+++ b/webapp/src/widgets/menu/labelOption.scss
@@ -0,0 +1,8 @@
+.Menu {
+    .LabelOption.menu-option {
+        cursor: auto;
+        &:hover {
+            background: inherit;
+        }
+    }
+}
diff --git a/webapp/src/widgets/menu/labelOption.tsx b/webapp/src/widgets/menu/labelOption.tsx
new file mode 100644
index 000000000..610a3c819
--- /dev/null
+++ b/webapp/src/widgets/menu/labelOption.tsx
@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import './labelOption.scss'
+
+type LabelOptionProps = {
+    icon?: string
+    children: React.ReactNode
+}
+
+export default class LabelOption extends React.PureComponent<LabelOptionProps> {
+    public render(): JSX.Element {
+        return (
+            <div className='MenuOption LabelOption menu-option'>
+                <div className='menu-name'>{this.props.children}</div>
+                {this.props.icon}
+            </div>
+        )
+    }
+}
diff --git a/webapp/src/widgets/menu/menu.tsx b/webapp/src/widgets/menu/menu.tsx
index 8b7172e53..3cd6a9f60 100644
--- a/webapp/src/widgets/menu/menu.tsx
+++ b/webapp/src/widgets/menu/menu.tsx
@@ -7,6 +7,7 @@ import SwitchOption from './switchOption'
 import TextOption from './textOption'
 import ColorOption from './colorOption'
 import SubMenuOption from './subMenuOption'
+import LabelOption from './labelOption'
 
 import './menu.scss'
 
@@ -21,6 +22,7 @@ export default class Menu extends React.PureComponent<MenuProps> {
     static Switch = SwitchOption
     static Separator = SeparatorOption
     static Text = TextOption
+    static Label = LabelOption
 
     public render(): JSX.Element {
         const {position, children} = this.props