From eca6985bd53be000e57e52230a8c44a4f1240d0c Mon Sep 17 00:00:00 2001 From: hannahker Date: Wed, 23 Aug 2023 13:48:32 -0700 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=92=84=20Style=20updates=20to=20match?= =?UTF-8?q?=20Figma=20mocks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/style.css | 30 ++++++++++++++++++++++++++++++ components/control_bar.py | 4 ++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/assets/style.css b/assets/style.css index 1133e40c..9f0db57f 100644 --- a/assets/style.css +++ b/assets/style.css @@ -42,4 +42,34 @@ body { margin: 0px; padding: 0px; + background-color: #f5f5f5; +} + +.mantine-1l0xknd { + font-family: 'Franklin Gothic Medium', Arial, sans-serif; + color: white; +} + +.mantine-pildck { + font-family: 'Franklin Gothic Medium', Arial, sans-serif; + color: #00313C; +} + +.mantine-Drawer-header { + background-color: #00313C; + padding: 10px; + margin: 0px; +} + +.mantine-Drawer-drawer { + padding: 0px; + min-height: 100vh; +} + +.mantine-Accordion-item { + padding-right: 5px; +} + +.mantine-1dcetaa:hover { + background-color: #00313C; } \ No newline at end of file diff --git a/components/control_bar.py b/components/control_bar.py index f033d040..73303c8a 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -16,7 +16,7 @@ def _control_item(title, title_id, item): style={"width": "100px", "margin": "auto", "paddingRight": "5px"}, align="right", ), - html.Div(item, style={"width": "275px", "margin": "auto"}), + html.Div(item, style={"width": "265px", "margin": "auto"}), ] ) @@ -28,7 +28,7 @@ def _accordion_item(title, icon, value, children, id): title, icon=DashIconify( icon=icon, - color=dmc.theme.DEFAULT_COLORS["blue"][6], + color="#00313C", width=20, ), ), From 254a68e06c5327efb1fa049c3d8af431a205915a Mon Sep 17 00:00:00 2001 From: hannahker Date: Wed, 23 Aug 2023 14:30:25 -0700 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=92=84=20Restyle=20tooltips?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.py | 2 +- components/control_bar.py | 57 +++++++++++++++++++-------------------- 2 files changed, 29 insertions(+), 30 deletions(-) diff --git a/app.py b/app.py index 0ba0af15..ec7fccbf 100644 --- a/app.py +++ b/app.py @@ -1,4 +1,4 @@ -from dash import Dash, dcc, clientside_callback, ClientsideFunction +from dash import Dash, dcc import dash_mantine_components as dmc from components.control_bar import layout as control_bar_layout from components.image_viewer import layout as image_viewer_layout diff --git a/components/control_bar.py b/components/control_bar.py index 73303c8a..bb860f09 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -6,6 +6,12 @@ from dash_extensions import EventListener +def _tooltip(text, children): + return dmc.Tooltip( + label=text, withArrow=True, position="top", color="#464646", children=children + ) + + def _control_item(title, title_id, item): return dmc.Grid( [ @@ -78,8 +84,8 @@ def layout(): dmc.Grid( [ dmc.Col( - dmc.Tooltip( - label="Previous image", + _tooltip( + "Previous image", children=dmc.ActionIcon( DashIconify( icon="ooui:previous-ltr", @@ -112,8 +118,8 @@ def layout(): style={"margin": "auto"}, ), dmc.Col( - dmc.Tooltip( - label="Next image", + _tooltip( + "Next image", children=dmc.ActionIcon( DashIconify( icon="ooui:previous-rtl", @@ -164,8 +170,8 @@ def layout(): style={"width": "225px"}, ), dmc.ActionIcon( - dmc.Tooltip( - label="Reset brightness", + _tooltip( + "Reset brightness", children=[ DashIconify( icon="fluent:arrow-reset-32-regular", @@ -207,8 +213,8 @@ def layout(): style={"width": "225px"}, ), dmc.ActionIcon( - dmc.Tooltip( - label="Reset contrast", + _tooltip( + "Reset contrast", children=[ DashIconify( icon="fluent:arrow-reset-32-regular", @@ -244,7 +250,8 @@ def layout(): [ html.Div( children=[ - dmc.Tooltip( + _tooltip( + "Open freeform (Q)", dmc.ActionIcon( id="open-freeform", variant="subtle", @@ -260,10 +267,9 @@ def layout(): }, size="lg", ), - label="Open Freeform: draw any open shape", - multiline=True, ), - dmc.Tooltip( + _tooltip( + "Closed freeform (W)", dmc.ActionIcon( id="closed-freeform", variant="subtle", @@ -276,10 +282,9 @@ def layout(): ), size="lg", ), - label="Closed Freeform: draw a shape that will auto-complete", - multiline=True, ), - dmc.Tooltip( + _tooltip( + "Line (E)", dmc.ActionIcon( id="line", variant="subtle", @@ -289,10 +294,9 @@ def layout(): ), size="lg", ), - label="Line: draw a straight line", - multiline=True, ), - dmc.Tooltip( + _tooltip( + "Circle (R)", dmc.ActionIcon( id="circle", variant="subtle", @@ -303,10 +307,9 @@ def layout(): ), size="lg", ), - label="Circle: create a filled circle", - multiline=True, ), - dmc.Tooltip( + _tooltip( + "Rectangle (T)", dmc.ActionIcon( id="rectangle", variant="subtle", @@ -319,10 +322,9 @@ def layout(): ), size="lg", ), - label="Rectangle: create a filled rectangle", - multiline=True, ), - dmc.Tooltip( + _tooltip( + "Eraser (S)", dmc.ActionIcon( id="eraser", variant="subtle", @@ -333,8 +335,6 @@ def layout(): ), size="lg", ), - label="Eraser: click on the shape to erase then click this button to delete the selected shape", - multiline=True, ), dmc.Tooltip( dmc.ActionIcon( @@ -352,7 +352,8 @@ def layout(): label="Clear All Annotations", multiline=True, ), - dmc.Tooltip( + _tooltip( + "Pan and zoom (A)", dmc.ActionIcon( id="pan-and-zoom", variant="subtle", @@ -365,8 +366,6 @@ def layout(): ), size="lg", ), - label="Stop Drawing: pan, zoom, select annotations and edit them using the nodes", - multiline=True, ), ], className="flex-row", From 0643a38f66c60cc6f98d4d93ca6af303dcaca26b Mon Sep 17 00:00:00 2001 From: hannahker Date: Wed, 23 Aug 2023 14:31:11 -0700 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=92=84=20Style=20controls=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/style.css b/assets/style.css index 9f0db57f..a0dfaaee 100644 --- a/assets/style.css +++ b/assets/style.css @@ -72,4 +72,10 @@ body { .mantine-1dcetaa:hover { background-color: #00313C; +} + +#drawer-controls-open-button { + background-color: #f5f5f57f; + color: #00313C; + border: 1px solid #00313C; } \ No newline at end of file From 45ef442afac1b27aa1d3f82614e11956de369d89 Mon Sep 17 00:00:00 2001 From: hannahker Date: Wed, 23 Aug 2023 15:05:08 -0700 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=92=84=20Style=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/style.css | 19 +++++++++++++++++++ components/control_bar.py | 22 +++++++++++++--------- components/image_viewer.py | 2 +- 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/assets/style.css b/assets/style.css index a0dfaaee..f67a0aaf 100644 --- a/assets/style.css +++ b/assets/style.css @@ -68,6 +68,7 @@ body { .mantine-Accordion-item { padding-right: 5px; + padding-left: 5px; } .mantine-1dcetaa:hover { @@ -78,4 +79,22 @@ body { background-color: #f5f5f57f; color: #00313C; border: 1px solid #00313C; +} + +#clear-all { + border: 1px solid #E04E39; + color: #E04E39; +} + +#clear-all:hover { + background-color: #e04f3909; +} + +#open-data-management-modal-button { + color: #00313C; + border: 1px solid #00313C; +} + +#open-data-management-modal-button:hover { + background-color: #00313c0e; } \ No newline at end of file diff --git a/components/control_bar.py b/components/control_bar.py index bb860f09..d1a9d81b 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -55,8 +55,6 @@ def layout(): style={"width": "400px"}, children=[ dmc.AccordionMultiple( - chevron=DashIconify(icon="ant-design:plus-outlined"), - disableChevronRotation=True, value=["data-select", "image-transformations", "annotations"], children=[ _accordion_item( @@ -637,13 +635,19 @@ def layout(): ], ), dmc.Space(h=20), - dmc.Center( - dmc.Button( - "Save / Load / Export", - id="open-data-management-modal-button", - variant="light", - style={"width": "200px", "margin": "5px"}, - ), + dmc.Button( + "Clear all annotations", + id="clear-all", + variant="outline", + style={"width": "100%"} + ), + dmc.Space(h=3), + dmc.Button( + "Save and export", + id="open-data-management-modal-button", + variant="outline", + color="#00313C", + style={"width": "100%"}, ), dmc.Modal( title="Data Management", diff --git a/components/image_viewer.py b/components/image_viewer.py index 8678252d..473b4031 100644 --- a/components/image_viewer.py +++ b/components/image_viewer.py @@ -21,7 +21,7 @@ def layout(): dcc.Location("url"), dmc.LoadingOverlay( id="image-viewer-loading", - overlayOpacity=0.15, + overlayOpacity=0, loaderProps=dict( color=dmc.theme.DEFAULT_COLORS["blue"][6], variant="bars" ), From 2c2629a7853ac7cd8160bd7669319a167b641cd3 Mon Sep 17 00:00:00 2001 From: hannahker Date: Thu, 24 Aug 2023 08:10:34 -0700 Subject: [PATCH 5/5] Apply black --- components/control_bar.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/control_bar.py b/components/control_bar.py index d1a9d81b..5c2d038d 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -639,7 +639,7 @@ def layout(): "Clear all annotations", id="clear-all", variant="outline", - style={"width": "100%"} + style={"width": "100%"}, ), dmc.Space(h=3), dmc.Button(