Skip to content
This repository has been archived by the owner on Apr 18, 2024. It is now read-only.

Commit

Permalink
Action buttons now visualize differently based on new ui FF
Browse files Browse the repository at this point in the history
  • Loading branch information
@yyassi-heartex
yyassi-heartex committed Jul 14, 2023
1 parent ad2b2b5 commit 636bc3e
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 48 deletions.
55 changes: 33 additions & 22 deletions src/components/DataManager/Toolbar/ActionsButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { FaChevronRight } from "react-icons/fa";
import "./ActionsButton.styl";
import { useCallback } from "react";

const isFFLOPSE3 = isFF(FF_LOPS_E_3);
const isNewUI = isFF(FF_LOPS_E_10);
const injector = inject(({ store }) => ({
store,
hasSelected: store.currentView?.selected?.hasSelected ?? false,
Expand Down Expand Up @@ -66,7 +68,6 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r

const ActionButton = (action, parentRef) => {
const isDeleteAction = action.id.includes("delete");
const isFFLOPSE3 = isFF(FF_LOPS_E_3) && action.newStyle;
const hasChildren = !!action.children?.length;
const submenuRef = useRef();
const onClick = useCallback((e) => {
Expand All @@ -81,12 +82,12 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
tag={Menu.Item}
size={size}
onClick={onClick}
{...(isDeleteAction ? { danger: isDeleteAction } : {})}
mod={{
hasSeperator: isDeleteAction,
hasSubMenu: action.children?.length > 0,
isSeperator: action.isSeperator,
isTitle: action.isTitle,
danger: isDeleteAction,
}}
name='actionButton'
>
Expand All @@ -97,44 +98,54 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
</Block>
);

return isFFLOPSE3 ? (
hasChildren ? (
//&& action.newStyle
return hasChildren ? (
<Dropdown.Trigger
key={action.id}
align="top-right-outside"
toggle={false}
ref={submenuRef}
content={<Block name='actionButton-submenu' tag="ul" mod={{ newUI: isNewUI }}>{action.children.map(ActionButton, parentRef)}</Block>}
>
{titleContainer}
</Dropdown.Trigger>
) : (
isNewUI ? (
<Dropdown.Trigger
key={action.id}
align="top-right-outside"
toggle={false}
ref={submenuRef}
content={<Block name='actionButton-submenu' tag="ul">{action.children.map(ActionButton, parentRef)}</Block>}
content={<Block name='actionButton-submenu' tag="ul" mod={{ newUI: isNewUI }}>{action.children.map(ActionButton, parentRef)}</Block>}
>
{titleContainer}
</Dropdown.Trigger>
) : titleContainer
) : (
<Menu.Item
size={size}
key={action.id}
danger={isDeleteAction}
onClick={() => {
invokeAction(action, isDeleteAction);
}}
icon={isDeleteAction && <FaTrash />}
>
{action.title}
</Menu.Item>
) : (
<Menu.Item
size={size}
key={action.id}
danger={isDeleteAction}
onClick={() => {
invokeAction(action, isDeleteAction);
}}
className={`actionButton${action.isSeperator ? "_isSeperator" : (action.isTitle ? "_isTitle" : "")}`}
icon={isDeleteAction && <FaTrash />}
>
{action.title}
</Menu.Item>
)
);
};

const actionButtons = actions.map(ActionButton);
const isFFLOPSE3 = isFF(FF_LOPS_E_3);
const isNewUI = isFF(FF_LOPS_E_10);

return (
<Dropdown.Trigger
content={isFFLOPSE3 ? <Block tag={Menu} name="actionmenu" size="compact">{actionButtons}</Block> : <Menu size="compact">{actionButtons}</Menu>}
content={isNewUI ? <Block tag={Menu} name="actionmenu" size="compact" mod={{ newUI: isNewUI }}>{actionButtons}</Block> : <Menu size="compact">{actionButtons}</Menu>}
disabled={!hasSelected}
onToggle={(visible) => isFFLOPSE3 && setIsOpen(visible)}
>
<Button size={size} disabled={!hasSelected} {...rest} >
<Button {...(isNewUI ? { className:"actionButtonPrime" } : {})} size={size} disabled={!hasSelected} {...rest}>
{selectedCount > 0 ? selectedCount + " Tasks": "Actions"}
{isNewUI ? (
isOpen ? (
Expand Down
93 changes: 67 additions & 26 deletions src/components/DataManager/Toolbar/ActionsButton.styl
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,23 @@
.actionButton
position relative
padding 8px
&.menu__item
height auto
color #1F1F1F
&.actionButton_isTitle
color #096DD9
&_look_danger
color #d00
&:not(.dm-menu__item_active):hover
background-color transparent
.menu
&__titleContainer
background-color rgba(65, 60, 74, 0.08)

&_hasSubMenu
.actionButton__titleContainer:hover
background-color rgba(9, 109, 217, 0.12)
--compact-height 32px
height var(--compact-height)
padding 0 13px
display flex
align-items center
&__titleContainer
display flex
align-items center
height 100%
justify-content space-between
width 100%
gap 8px
padding 4px 16px
border-radius 4px
&:hover
background-color rgba(65, 60, 74, 0.08)
justify-content space-between
&_isTitle
font-weight 500
font-size 12px
line-height 16px
letter-spacing 0.5px
color #096DD9
cursor initial
padding 16px 8px 0
padding 16px 12px 8px
height var(--compact-height)
.actionButton
&__titleContainer:hover
background-color transparent
Expand All @@ -60,6 +42,65 @@
&__title
flex-grow 1
font-size 16px

&_hasSubMenu
color rgba(0,0,0,0.6)
&:hover
color #000
background-color rgba(0,0,0,0.04)
&_danger
color #d00

.actionButtonPrime
gap 8px

.actionmenu,
.actionButton-submenu
&_newUI
.actionButton
position relative
padding 8px
height auto
&.menu__item
height auto
color #1F1F1F
&.actionButton_isTitle
color #096DD9
&_look_danger
color #d00
&:not(.dm-menu__item_active):hover
background-color transparent
.menu
&__titleContainer
background-color rgba(65, 60, 74, 0.08)

&_hasSubMenu
color #1F1F1F
&:hover
color #1F1F1F
background-color transparent
.actionButton__titleContainer:hover
background-color rgba(9, 109, 217, 0.12)
&__titleContainer
height 100%
width 100%
padding 4px 16px
border-radius 4px
cursor pointer
&:hover
background-color rgba(65, 60, 74, 0.08)
&_isTitle
padding 16px 8px 0
.actionButton__titleContainer
cursor default
&:hover
background transparent
&_isSeperator
height 1px
padding 0
&.menu__item
height 1px
padding 0

.actionButton-submenu
margin 0
Expand Down

0 comments on commit 636bc3e

Please sign in to comment.