From c8e51e2440aa28738852a07a5737488bfc9c521e Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 8 Jun 2023 11:14:15 -0400 Subject: [PATCH] Add row and column headers to plates --- assets/scss/default_theme/components/_plates.scss | 5 +++++ src/components/plates/destination_plate.rs | 15 ++++++++++++--- src/components/plates/source_plate.rs | 14 ++++++++++++-- 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/assets/scss/default_theme/components/_plates.scss b/assets/scss/default_theme/components/_plates.scss index da9d568..0c34a3b 100644 --- a/assets/scss/default_theme/components/_plates.scss +++ b/assets/scss/default_theme/components/_plates.scss @@ -13,6 +13,11 @@ table, tr, td { user-select: none; /* Prevents dragging issue */ border-spacing: 0px; } +th { + font-size: 0.5em; +} + + td.plate_cell { height: 2.3vmin; background: none; diff --git a/src/components/plates/destination_plate.rs b/src/components/plates/destination_plate.rs index 9d21143..cf4611b 100644 --- a/src/components/plates/destination_plate.rs +++ b/src/components/plates/destination_plate.rs @@ -12,7 +12,7 @@ use crate::data::transfer_region::Region; use crate::components::plates::util::Palettes; const PALETTE: super::util::ColorPalette = Palettes::RAINBOW; -use super::super::transfer_menu::RegionDisplay; +use super::super::transfer_menu::{RegionDisplay, num_to_letters}; #[derive(Properties, PartialEq)] pub struct DestinationPlateProps { @@ -97,8 +97,17 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html { let mouseleave_callback = Callback::clone(&mouseup_callback); + let column_header = { + let headers = (1..=props.destination_plate.plate.size().1) + .map(|j| { + html! {{j}} + }) + .collect::(); + html!{{ headers }} + }; let rows = (1..=props.destination_plate.plate.size().0) .map(|i| { + let row_header = html! {{num_to_letters(i)}}; let row = (1..=props.destination_plate.plate.size().1).map(|j| { html! { Html { }).collect::(); html! { - { row } + { row_header }{ row } } }) @@ -126,7 +135,7 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html { onmouseleave={move |e| { mouseleave_callback.emit(e); }}> - { rows } + { column_header }{ rows } } diff --git a/src/components/plates/source_plate.rs b/src/components/plates/source_plate.rs index 02ccc83..d011624 100644 --- a/src/components/plates/source_plate.rs +++ b/src/components/plates/source_plate.rs @@ -12,7 +12,7 @@ use crate::data::transfer_region::Region; use crate::components::plates::util::Palettes; const PALETTE: super::util::ColorPalette = Palettes::RAINBOW; -use super::super::transfer_menu::RegionDisplay; +use super::super::transfer_menu::{RegionDisplay, num_to_letters}; #[derive(PartialEq, Properties)] pub struct SourcePlateProps { @@ -98,8 +98,17 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html { let mouseleave_callback = Callback::clone(&mouseup_callback); + let column_header = { + let headers = (1..=props.source_plate.plate.size().1) + .map(|j| { + html! {{j}} + }) + .collect::(); + html!{{ headers }} + }; let rows = (1..=props.source_plate.plate.size().0) .map(|i| { + let row_header = html! {{num_to_letters(i)}}; let row = (1..=props.source_plate.plate.size().1) .map(|j| { html! { @@ -114,7 +123,7 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html { .collect::(); html! { - { row } + { row_header }{ row } } }) @@ -129,6 +138,7 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html { onmouseleave={move |e| { mouseleave_callback.emit(e); }}> + { column_header } { rows }