From ddc78c5446a3ad676b058c8dd82b9bed31a3791c Mon Sep 17 00:00:00 2001 From: jasquat Date: Tue, 9 May 2023 17:05:37 -0400 Subject: [PATCH 1/6] changed to display the username in a circle that can be expanded w/ burnettk --- .../src/components/ActiveUsers.tsx | 2 +- .../src/components/NavigationBar.tsx | 53 ++++++++++--- spiffworkflow-frontend/src/index.css | 76 +++++++++---------- 3 files changed, 79 insertions(+), 52 deletions(-) diff --git a/spiffworkflow-frontend/src/components/ActiveUsers.tsx b/spiffworkflow-frontend/src/components/ActiveUsers.tsx index 012f9f675..7bd282b04 100644 --- a/spiffworkflow-frontend/src/components/ActiveUsers.tsx +++ b/spiffworkflow-frontend/src/components/ActiveUsers.tsx @@ -42,7 +42,7 @@ export default function ActiveUsers() { return (
{activeUser.username.charAt(0).toUpperCase()}
diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index b1ed09a4c..94e86961f 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -1,6 +1,12 @@ import { + Popover, + PopoverContent, + Button, + RadioButtonGroup, + RadioButton, Header, HeaderContainer, + HeaderMenu, HeaderMenuButton, SkipToContent, SideNav, @@ -14,7 +20,7 @@ import { // @ts-ignore } from '@carbon/react'; // @ts-ignore -import { Logout, Login } from '@carbon/icons-react'; +import { Settings, Logout, Login } from '@carbon/icons-react'; import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { Can } from '@casl/react'; @@ -77,6 +83,40 @@ export default function NavigationBar() { return activeKey === menuItemPath; }; + const [openTwo, setOpenTwo] = useState(false); + + const popover = ( +
+ + + +

{UserService.getPreferredUsername()}

+

{UserService.getUserEmail()}

+
+ + + +
+ ); + const loginAndLogoutAction = () => { if (UserService.isLoggedIn()) { return ( @@ -86,16 +126,7 @@ export default function NavigationBar() { {SPIFF_ENVIRONMENT} ) : null} - - {UserService.getPreferredUsername()} - - - - + {popover} ); } diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index 9595fa7d1..30c4f4bbb 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/spiffworkflow-frontend/src/index.css @@ -114,6 +114,23 @@ h2 { padding-left: 0; } +.cds--btn--ghost.button-link-for-popover { + color: #f4f4f4; + padding-left: 0; +} +.cds--btn--ghost.button-link-for-popover:visited { + color: #f4f4f4; + padding-left: 0; +} +.cds--btn--ghost.button-link-for-popover:hover { + color: #f4f4f4; + padding-left: 0; +} +.cds--btn--ghost.button-link-for-popover:visited:hover { + color: #f4f4f4; + padding-left: 0; +} + .cds--header__global .cds--btn--primary { background-color: #161616 } @@ -200,6 +217,22 @@ h1.with-icons { margin-bottom: 1em; } +#profile-user-button { + margin-right: 8px; +} + +.hot-button:hover { + background-color: #161616; +} + +#profile-user-button .cds--popover--tab-tip__button::after { + content: none; +} + +#profile-user-button .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{ + background-color: #161616; +} + .with-top-margin { margin-top: 1em; } @@ -471,49 +504,12 @@ svg.notification-icon { border-radius: 50%; color: #fff; font-weight: bold; +} + +.user-circle-for-list { margin-right: 10px; } -.user-circle.color-1 { - background-color: #8e8e8e; -} - -.user-circle.color-2 { - background-color: #a57c63; -} - -.user-circle.color-3 { - background-color: #8f7c7c; -} - -.user-circle.color-4 { - background-color: #9a927f; -} - -.user-circle.color-5 { - background-color: #5e5d5d; -} - -.user-circle.color-6 { - background-color: #676767; -} - -.user-circle.color-7 { - background-color: #6d7d6d; -} - -.user-circle.color-8 { - background-color: #7a7171; -} - -.user-circle.color-9 { - background-color: #837d63; -} - -.user-circle.color-10 { - background-color: #686a70; -} - /* Randomize color assignment */ .user-circle:nth-child(1) { background-color: #8e8e8e; From e2a5a2aadf462c8fcd9e4d53ae9c7a8c388d5dc8 Mon Sep 17 00:00:00 2001 From: jasquat Date: Tue, 9 May 2023 17:38:15 -0400 Subject: [PATCH 2/6] use a toggle tip instead of the popover w/ burnettk --- .../src/components/NavigationBar.tsx | 32 ++++++++++++++++++- spiffworkflow-frontend/src/index.css | 27 ++++++++-------- 2 files changed, 44 insertions(+), 15 deletions(-) diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 94e86961f..791dbbc4f 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -1,4 +1,7 @@ import { + Toggletip, + ToggletipButton, + ToggletipContent, Popover, PopoverContent, Button, @@ -117,6 +120,33 @@ export default function NavigationBar() { ); + const toggletip = ( +
+ + +
+ {UserService.getPreferredUsername()[0].toUpperCase()} +
+ + +

+ {UserService.getPreferredUsername()} +

+

{UserService.getUserEmail()}

+
+ + + +
+ ); + const loginAndLogoutAction = () => { if (UserService.isLoggedIn()) { return ( @@ -126,7 +156,7 @@ export default function NavigationBar() { {SPIFF_ENVIRONMENT} ) : null} - {popover} + {toggletip} ); } diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index 30c4f4bbb..f7075b49b 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/spiffworkflow-frontend/src/index.css @@ -114,20 +114,9 @@ h2 { padding-left: 0; } -.cds--btn--ghost.button-link-for-popover { - color: #f4f4f4; - padding-left: 0; -} -.cds--btn--ghost.button-link-for-popover:visited { - color: #f4f4f4; - padding-left: 0; -} -.cds--btn--ghost.button-link-for-popover:hover { - color: #f4f4f4; - padding-left: 0; -} -.cds--btn--ghost.button-link-for-popover:visited:hover { +.cds--header__global .cds--btn--primary.button-link { color: #f4f4f4; + background-color: #393939; padding-left: 0; } @@ -217,11 +206,21 @@ h1.with-icons { margin-bottom: 1em; } +.profile-user-toggletip { + background-color: #393939; + color: #f4f4f4; + margin-right: 8px; + margin-top: -20px; +} #profile-user-button { + margin-top: 8px; margin-right: 8px; } +#profile-user-button .cds--popover-content::before { + content: none; +} -.hot-button:hover { +.profile-user-toggle-button:hover { background-color: #161616; } From 7e9787d5fee63d44605069c70152744ad1cffa25 Mon Sep 17 00:00:00 2001 From: burnettk Date: Tue, 9 May 2023 22:40:48 -0400 Subject: [PATCH 3/6] placement of user profile nav item and remove caret --- .../src/components/NavigationBar.tsx | 5 ++++- spiffworkflow-frontend/src/index.css | 10 ++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 791dbbc4f..a0984d284 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -152,7 +152,10 @@ export default function NavigationBar() { return ( <> {SPIFF_ENVIRONMENT ? ( - + {SPIFF_ENVIRONMENT} ) : null} diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index f7075b49b..2ddf376a6 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/spiffworkflow-frontend/src/index.css @@ -212,6 +212,7 @@ h1.with-icons { margin-right: 8px; margin-top: -20px; } + #profile-user-button { margin-top: 8px; margin-right: 8px; @@ -220,6 +221,15 @@ h1.with-icons { content: none; } +#profile-user-button .cds--popover--bottom-right .cds--popover-content { + bottom: 11px; + right: -2px; +} + +#profile-user-button .cds--popover-caret { + display: none; +} + .profile-user-toggle-button:hover { background-color: #161616; } From 79b64d3e94841ac0309edb05a3e309101fdd9e30 Mon Sep 17 00:00:00 2001 From: burnettk Date: Tue, 9 May 2023 22:55:56 -0400 Subject: [PATCH 4/6] round corners and add border, and close by default --- .../src/components/NavigationBar.tsx | 36 ++----------------- spiffworkflow-frontend/src/index.css | 2 ++ 2 files changed, 4 insertions(+), 34 deletions(-) diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index a0984d284..3789cfff5 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -86,43 +86,11 @@ export default function NavigationBar() { return activeKey === menuItemPath; }; - const [openTwo, setOpenTwo] = useState(false); - - const popover = ( -
- - - -

{UserService.getPreferredUsername()}

-

{UserService.getUserEmail()}

-
- - - -
- ); + const [openProfileMenu, setOpenProfileMenu] = useState(false); const toggletip = (
- + Date: Wed, 10 May 2023 09:33:21 -0400 Subject: [PATCH 5/6] updated some css class names and moved the profile toggle tip over a couple pixels --- .../src/components/NavigationBar.tsx | 21 +++++++------------ spiffworkflow-frontend/src/index.css | 18 ++++++++-------- 2 files changed, 16 insertions(+), 23 deletions(-) diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 3789cfff5..5ac960342 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -2,14 +2,9 @@ import { Toggletip, ToggletipButton, ToggletipContent, - Popover, - PopoverContent, Button, - RadioButtonGroup, - RadioButton, Header, HeaderContainer, - HeaderMenu, HeaderMenuButton, SkipToContent, SideNav, @@ -23,7 +18,7 @@ import { // @ts-ignore } from '@carbon/react'; // @ts-ignore -import { Settings, Logout, Login } from '@carbon/icons-react'; +import { Logout, Login } from '@carbon/icons-react'; import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { Can } from '@casl/react'; @@ -86,21 +81,19 @@ export default function NavigationBar() { return activeKey === menuItemPath; }; - const [openProfileMenu, setOpenProfileMenu] = useState(false); - - const toggletip = ( -
- + const profileToggletip = ( +
+
{UserService.getPreferredUsername()[0].toUpperCase()}
- +

{UserService.getPreferredUsername()}

@@ -127,7 +120,7 @@ export default function NavigationBar() { {SPIFF_ENVIRONMENT} ) : null} - {toggletip} + {profileToggletip} ); } diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index 730b88481..00bd2d8c1 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/spiffworkflow-frontend/src/index.css @@ -206,41 +206,41 @@ h1.with-icons { margin-bottom: 1em; } -.profile-user-toggletip { +.user-profile-toggletip-content { background-color: #393939; color: #f4f4f4; margin-right: 8px; margin-top: -20px; } -#profile-user-button { +#user-profile-toggletip { margin-top: 8px; - margin-right: 8px; + margin-right: 12px; } -#profile-user-button .cds--popover-content::before { +#user-profile-toggletip .cds--popover-content::before { content: none; } -#profile-user-button .cds--popover--bottom-right .cds--popover-content { +#user-profile-toggletip .cds--popover--bottom-right .cds--popover-content { bottom: 11px; right: -2px; border-radius: 5px; border: 3px solid black; } -#profile-user-button .cds--popover-caret { +#user-profile-toggletip .cds--popover-caret { display: none; } -.profile-user-toggle-button:hover { +.user-profile-toggletip-button:hover { background-color: #161616; } -#profile-user-button .cds--popover--tab-tip__button::after { +#user-profile-toggletip .cds--popover--tab-tip__button::after { content: none; } -#profile-user-button .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{ +#user-profile-toggletip .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{ background-color: #161616; } From 821e3ccbf5cf1baee1b3b495e852235652e84ffa Mon Sep 17 00:00:00 2001 From: burnettk Date: Wed, 10 May 2023 10:17:12 -0400 Subject: [PATCH 6/6] fix typo --- .../src/spiffworkflow_backend/routes/tasks_controller.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py b/spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py index e3491cfb5..b2ac9fa29 100644 --- a/spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py +++ b/spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py @@ -435,7 +435,7 @@ def _interstitial_stream(process_instance: ProcessInstanceModel) -> Generator[st processor.save() # Fixme - maybe find a way not to do this on every loop? except WorkflowTaskException as wfe: api_error = ApiError.from_workflow_exception( - "engine_steps_error", "Failed complete an automated task.", exp=wfe + "engine_steps_error", "Failed to complete an automated task.", exp=wfe ) yield render_data("error", api_error) return