Skip to content

Commit

Permalink
Merge pull request #92 from mlexchange/styling-updates
Browse files Browse the repository at this point in the history 
Styling updates
  • Loading branch information
@hannahker
hannahker authored Aug 24, 2023
2 parents 020908d + 2c2629a commit 834b533
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 42 deletions.
2 changes: 1 addition & 1 deletion app.py
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
55 changes: 55 additions & 0 deletions assets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,59 @@
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;
padding-left: 5px;
}

.mantine-1dcetaa:hover {
background-color: #00313C;
}

#drawer-controls-open-button {
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;
}
83 changes: 43 additions & 40 deletions components/control_bar.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
[
Expand All @@ -16,7 +22,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"}),
]
)

Expand All @@ -28,7 +34,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,
),
),
Expand All @@ -49,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(
Expand Down Expand Up @@ -78,8 +82,8 @@ def layout():
dmc.Grid(
[
dmc.Col(
dmc.Tooltip(
label="Previous image",
_tooltip(
"Previous image",
children=dmc.ActionIcon(
DashIconify(
icon="ooui:previous-ltr",
Expand Down Expand Up @@ -112,8 +116,8 @@ def layout():
style={"margin": "auto"},
),
dmc.Col(
dmc.Tooltip(
label="Next image",
_tooltip(
"Next image",
children=dmc.ActionIcon(
DashIconify(
icon="ooui:previous-rtl",
Expand Down Expand Up @@ -164,8 +168,8 @@ def layout():
style={"width": "225px"},
),
dmc.ActionIcon(
dmc.Tooltip(
label="Reset brightness",
_tooltip(
"Reset brightness",
children=[
DashIconify(
icon="fluent:arrow-reset-32-regular",
Expand Down Expand Up @@ -207,8 +211,8 @@ def layout():
style={"width": "225px"},
),
dmc.ActionIcon(
dmc.Tooltip(
label="Reset contrast",
_tooltip(
"Reset contrast",
children=[
DashIconify(
icon="fluent:arrow-reset-32-regular",
Expand Down Expand Up @@ -244,7 +248,8 @@ def layout():
[
html.Div(
children=[
dmc.Tooltip(
_tooltip(
"Open freeform (Q)",
dmc.ActionIcon(
id="open-freeform",
variant="subtle",
Expand All @@ -260,10 +265,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",
Expand All @@ -276,10 +280,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",
Expand All @@ -289,10 +292,9 @@ def layout():
),
size="lg",
),
label="Line: draw a straight line",
multiline=True,
),
dmc.Tooltip(
_tooltip(
"Circle (R)",
dmc.ActionIcon(
id="circle",
variant="subtle",
Expand All @@ -303,10 +305,9 @@ def layout():
),
size="lg",
),
label="Circle: create a filled circle",
multiline=True,
),
dmc.Tooltip(
_tooltip(
"Rectangle (T)",
dmc.ActionIcon(
id="rectangle",
variant="subtle",
Expand All @@ -319,10 +320,9 @@ def layout():
),
size="lg",
),
label="Rectangle: create a filled rectangle",
multiline=True,
),
dmc.Tooltip(
_tooltip(
"Eraser (S)",
dmc.ActionIcon(
id="eraser",
variant="subtle",
Expand All @@ -333,8 +333,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(
Expand All @@ -352,7 +350,8 @@ def layout():
label="Clear All Annotations",
multiline=True,
),
dmc.Tooltip(
_tooltip(
"Pan and zoom (A)",
dmc.ActionIcon(
id="pan-and-zoom",
variant="subtle",
Expand All @@ -365,8 +364,6 @@ def layout():
),
size="lg",
),
label="Stop Drawing: pan, zoom, select annotations and edit them using the nodes",
multiline=True,
),
],
className="flex-row",
Expand Down Expand Up @@ -638,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",
Expand Down
2 changes: 1 addition & 1 deletion components/image_viewer.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
),
Expand Down

0 comments on commit 834b533

Please sign in to comment.