Skip to content

Updates plateform UX to fit Pyronear style & improves UX #180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jan 28, 2025
Merged

Updates plateform UX to fit Pyronear style & improves UX #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c574baa
style: Updated padding
fe51 Jan 26, 2025
198d092
feat: css: Added new classes & Updated styles
fe51 Jan 26, 2025
9fc3b20
feat: Added play-pause icon
fe51 Jan 26, 2025
a3f9aca
feat: Updated style
fe51 Jan 26, 2025
a12d3bc
feat: updated alert cards style
fe51 Jan 26, 2025
ae350cf
feat: Added play-pause button & remove "activer/désactiver animation"…
fe51 Jan 26, 2025
8f38ae3
feat: Updated style & position in right panel
fe51 Jan 26, 2025
5f79f1f
style : ruff
fe51 Jan 26, 2025
f21a7b2
style : Updated border radius, alert default color & info panel style
fe51 Jan 27, 2025
aa327e8
style: black
fe51 Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 35 additions & 7 deletions app/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
/* style.css */

.btn-primary{
--bs-btn-bg: #054546;
--bs-btn-hover-bg: #032626;
--bs-btn-active-bg: #032626;
}
/* Style the scrollbar itself (width, color) */
::-webkit-scrollbar {
width: 10px; /* Scrollbar width */
Expand All @@ -8,7 +12,7 @@
/* Handle */
::-webkit-scrollbar-thumb {
background: #FEBA6A; /* Scrollbar handle color */
border-radius: 5px;
border-radius: 8px;
}

/* Handle on hover */
Expand All @@ -25,6 +29,7 @@
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
}

/* Custom link style */
Expand All @@ -34,16 +39,15 @@ a.no-underline {

/* Common style for containers and panels */
.common-style {
border: 2px solid #044448;
border-radius: 10px;
border: 0px solid #044448;
border-radius: 8px;
background-color: rgba(4, 68, 72, 0.1);
}

.common-style-slider {
border: 2px solid #044448;
border-radius: 10px;
border: 0px solid #044448;
border-radius: 8px;
background-color: rgba(4, 68, 72, 0.1);
margin-top: 10px;
}


Expand All @@ -53,3 +57,27 @@ a.no-underline {
font-weight: bold;
text-align: center;
}

.alert-card {
background-color: #FFEBD6;
margin-bottom: 12px;
padding: 8px;
border-radius: 8px;
width: 100%;
border: 0px solid;
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
}

#alert-information-styling-container {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
border-radius: 8px;
border: 1px solid rgba(4, 68, 72, 0.1);
background-color: white;
}

.alert-information-title {
font-weight: bold;
}
1 change: 1 addition & 0 deletions app/assets/images/play-pause.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 14 additions & 18 deletions app/callbacks/display_callbacks.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,23 +119,12 @@ def select_event_with_button(n_clicks, button_ids, local_alerts, event_id_on_dis
if button["index"] == button_index:
styles.append(
{
"backgroundColor": "#2C796E",
"margin": "10px",
"padding": "10px",
"borderRadius": "20px",
"color": "white",
"width": "100%",
"backgroundColor": "#feba6a",
},
) # Highlight style
else:
styles.append(
{
"backgroundColor": "#FC816B",
"margin": "10px",
"padding": "10px",
"borderRadius": "20px",
"width": "100%",
},
{},
) # Default style

return [styles, button_index, 1, "reset_zoom"]
Expand Down Expand Up @@ -280,21 +269,25 @@ def toggle_bbox_visibility(n_clicks, button_style):
"""
if n_clicks % 2 == 0:
bbox_style = {"display": "block"} # Show the bounding box
button_style["backgroundColor"] = "#FEBA6A" # Original button color
button_style["background-color"] = "#054546" # Original button color
else:
bbox_style = {"display": "none"} # Hide the bounding box
button_style["backgroundColor"] = "#C96A00" # Darker color for the button
button_style["background-color"] = "#098386" # Darker color for the button

return bbox_style, button_style


@app.callback(
Output("auto-move-state", "data"),
[
Output("auto-move-state", "data"),
Output("auto-move-button", "style"), # Update the style of the button
],
Input("auto-move-button", "n_clicks"),
State("auto-move-state", "data"),
State("auto-move-button", "style"), # Get the current style of the button
prevent_initial_call=True,
)
def toggle_auto_move(n_clicks, data):
def toggle_auto_move(n_clicks, data, button_style):
"""
Toggles the automatic movement of the image slider based on button clicks.

Expand All @@ -307,9 +300,12 @@ def toggle_auto_move(n_clicks, data):
"""
if n_clicks % 2 == 0: # Toggle between on and off states
data["active"] = False
button_style["background-color"] = "#098386" # Darker color for the button

else:
data["active"] = True
return data
button_style["background-color"] = "#054546" # Original button color
return data, button_style


@app.callback(
Expand Down
2 changes: 1 addition & 1 deletion app/components/alerts.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ def create_event_list():
event_list_style = {
"height": "calc(100vh - 120px)", # Adjust the height as required
"overflowY": "scroll", # Enable vertical scrolling
"padding": "10px",
"padding-right": "10px", # Prevent scroll bar from touching alerts list
}

return html.Div(
Expand Down
130 changes: 76 additions & 54 deletions app/pages/homepage.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
def homepage_layout(user_headers, user_credentials, lang="fr"):
translate = {
"fr": {
"animate_on_off": "Activer / Désactiver l'animation",
"show_hide_prediction": "Afficher / Cacher la prédiction",
"download_image": "Télécharger l'image",
"acknowledge_alert": "Acquitter l'alerte",
Expand All @@ -31,7 +30,6 @@ def homepage_layout(user_headers, user_credentials, lang="fr"):
"no_alert_default_image": "./assets/images/no-alert-default.png",
},
"es": {
"animate_on_off": "Activar / Desactivar la animación",
"show_hide_prediction": "Mostrar / Ocultar la predicción",
"download_image": "Descargar la imagen",
"acknowledge_alert": "Descartar la alerta",
Expand Down Expand Up @@ -98,40 +96,46 @@ def homepage_layout(user_headers, user_credentials, lang="fr"):
),
],
),
html.Div(
dcc.Slider(id="image-slider", min=0, max=10, step=1, value=0),
id="slider-container",
className="common-style-slider",
style={"display": "none", "marginTop": "10px"},
),
dbc.Row(
[
dbc.Col(
dbc.Button(
translate[lang]["animate_on_off"],
html.Img(src="assets/images/play-pause.svg"),
id="auto-move-button",
n_clicks=1,
className="btn-uniform common-style",
style={"backgroundColor": "#FD5252"},
style={"height": "100%", "width": "100%", "border": "0"},
),
width=3,
width=1,
),
dbc.Col(
html.Div(
dcc.Slider(id="image-slider", min=0, max=10, step=1, value=0),
id="slider-container",
className="common-style-slider",
style={"display": "none"},
),
width=11,
),
],
style={"marginTop": "10px"},
),
dbc.Row(
[
dbc.Col(
dbc.Button(
translate[lang]["show_hide_prediction"],
id="hide-bbox-button",
n_clicks=0,
className="btn-uniform common-style",
style={"backgroundColor": "#FEBA6A"},
className="btn-uniform",
style={}, # Will be overwritten dynamically
),
width=3,
),
dbc.Col(
html.A(
dbc.Button(
translate[lang]["download_image"],
className="btn-uniform common-style",
style={"backgroundColor": "#2C796E"},
className="btn-uniform",
id="dl-image-button",
),
className="no-underline",
Expand All @@ -147,102 +151,120 @@ def homepage_layout(user_headers, user_credentials, lang="fr"):
translate[lang]["acknowledge_alert"],
id="acknowledge-button",
n_clicks=0,
className="btn-uniform common-style",
style={"backgroundColor": "#054546"},
className="btn-uniform",
),
width=3,
),
],
className="mb-4",
style={"display": "flex", "marginTop": "10px"},
style={"display": "flex", "marginTop": "10px", "justify-content": "space-evenly"},
),
],
width=8,
style={"padding": "0"},
),
dbc.Col(
[
dbc.Row(
dbc.Button(
translate[lang]["enlarge_map"],
className="common-style",
style={"backgroundColor": "#FEBA6A"},
id="map-button",
),
className="mb-2",
),
dbc.Row(
dbc.Col(
build_alerts_map(user_headers, user_credentials),
className="common-style",
style={
"position": "relative",
"width": "100%",
"paddingTop": "100%",
},
),
),
dbc.Row(
html.Div(
html.Div(
id="alert-information",
className="common-style",
style={"display": "none"},
style={"display": "none", "padding": "8px"},
children=[
html.Div(
id="alert-information-styling-container",
style={"padding": "5px"},
children=[
html.H4(translate[lang]["alert_information"]),
html.H5(
translate[lang]["alert_information"], style={"text-align": "center"}
),
html.Div(
id="alert-camera",
style={"marginBottom": "10px"},
children=[
html.Span(
id="alert-camera-header", children=translate[lang]["camera"]
id="alert-camera-header",
children=translate[lang]["camera"],
className="alert-information-title",
),
html.Span(
id="alert-camera-value",
children=[],
),
html.Span(id="alert-camera-value", children=[]),
],
),
html.Div(
id="camera-location",
style={"marginBottom": "10px"},
children=[
html.Span(
id="camera-location-header",
children=translate[lang]["camera_location"],
className="alert-information-title",
),
html.Span(
id="camera-location-value",
children=[],
),
html.Span(id="camera-location-value", children=[]),
],
),
html.Div(
id="alert-azimuth",
style={"marginBottom": "10px"},
children=[
html.Span(
id="alert-azimuth-header",
children=translate[lang]["detection_azimuth"],
className="alert-information-title",
),
html.Span(
id="alert-azimuth-value",
children=[],
),
html.Span(id="alert-azimuth-value", children=[]),
],
),
html.Div(
id="alert-date",
children=[
html.Span(
id="alert-date-header", children=translate[lang]["date"]
id="alert-date-header",
children=translate[lang]["date"],
className="alert-information-title",
),
html.Span(
id="alert-date-value",
children=[],
),
html.Span(id="alert-date-value", children=[]),
],
),
],
),
],
),
className="mt-4",
id="alert-panel",
),
html.Div(
dbc.Col(
build_alerts_map(user_headers, user_credentials),
className="common-style",
style={
"position": "relative",
"width": "100%",
"paddingTop": "100%",
},
),
),
html.Div(
dbc.Button(
translate[lang]["enlarge_map"],
className="common-style",
style={"backgroundColor": "#FEBA6A", "color": "black", "width": "100%"},
id="map-button",
),
),
],
width=2,
className="mb-4",
style={
"display": "flex",
"flex-direction": "column",
"gap": "16px",
},
),
]
),
Expand Down
Loading
Loading