feature: Heatmap enabled indicator
This commit is contained in:
parent
52b28aabb1
commit
06baf0a053
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue