feature: Heatmap enabled indicator

This commit is contained in:
Emilia Allison 2024-08-09 22:57:50 -04:00
parent 52b28aabb1
commit 06baf0a053
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
2 changed files with 31 additions and 0 deletions

View File

@ -2,6 +2,8 @@
@use "../variables" as *; @use "../variables" as *;
div.plate_container { div.plate_container {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
@ -38,4 +40,22 @@ div.plate_container {
grid-row: 2; grid-row: 2;
} }
} }
div.plate_container--heatmap-notice {
position: absolute;
top: 0.5em;
left: 0.5em;
animation: 1s 1 attention_on_load;
}
}
@keyframes attention_on_load {
from{
color: $color-light;
transform: scale(1.05);
}
to {
color: inherit;
}
} }

View File

@ -5,10 +5,12 @@ use yew::prelude::*;
use plate_tool_lib::plate::PlateType; use plate_tool_lib::plate::PlateType;
use plate_tool_lib::plate_instances::PlateInstance; use plate_tool_lib::plate_instances::PlateInstance;
use yewdux::functional::use_store;
// use super::destination_plate::DestinationPlate; // use super::destination_plate::DestinationPlate;
// use super::source_plate::SourcePlate; // use super::source_plate::SourcePlate;
use super::plate::Plate; use super::plate::Plate;
use crate::components::states::MainState;
#[derive(Properties, PartialEq)] #[derive(Properties, PartialEq)]
pub struct PlateContainerProps { pub struct PlateContainerProps {
@ -18,6 +20,8 @@ pub struct PlateContainerProps {
#[function_component] #[function_component]
pub fn PlateContainer(props: &PlateContainerProps) -> Html { pub fn PlateContainer(props: &PlateContainerProps) -> Html {
let (main_state, _) = use_store::<MainState>();
let cell_height = { let cell_height = {
let height = web_sys::window() let height = web_sys::window()
.unwrap() .unwrap()
@ -49,8 +53,15 @@ pub fn PlateContainer(props: &PlateContainerProps) -> Html {
.set_onresize(Some(onresize.as_ref().unchecked_ref())); .set_onresize(Some(onresize.as_ref().unchecked_ref()));
onresize.forget(); // Magic! onresize.forget(); // Magic!
let heatmap_enabled = main_state.preferences.volume_heatmap;
html! { html! {
<div class="plate_container"> <div class="plate_container">
if heatmap_enabled {
<div class="plate_container--heatmap-notice" >
<h3>{"Volume Heatmap Enabled"}</h3>
</div>
}
if let Some(spi) = props.source_dims.clone() { if let Some(spi) = props.source_dims.clone() {
if let Some(dpi) = props.destination_dims.clone() { if let Some(dpi) = props.destination_dims.clone() {
<div class="plate_container--source"> <div class="plate_container--source">