emilia
/
plate-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add row and column headers to plates

This commit is contained in:
Emilia Allison 2023-06-08 11:14:15 -04:00
parent 43f17f0d6a
commit c8e51e2440
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
3 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/scss/default_theme/components/_plates.scss
View File

@ -13,6 +13,11 @@ table, tr, td {
user-select: none; /* Prevents dragging issue */ user-select: none; /* Prevents dragging issue */
border-spacing: 0px; border-spacing: 0px;
} }
th {
font-size: 0.5em;
}
td.plate_cell { td.plate_cell {
height: 2.3vmin; height: 2.3vmin;
background: none; background: none;

15
src/components/plates/destination_plate.rs
View File

@ -12,7 +12,7 @@ use crate::data::transfer_region::Region;
use crate::components::plates::util::Palettes; use crate::components::plates::util::Palettes;
const PALETTE: super::util::ColorPalette = Palettes::RAINBOW; 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)] #[derive(Properties, PartialEq)]
pub struct DestinationPlateProps { pub struct DestinationPlateProps {
@ -97,8 +97,17 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
let mouseleave_callback = Callback::clone(&mouseup_callback); let mouseleave_callback = Callback::clone(&mouseup_callback);
let column_header = {
let headers = (1..=props.destination_plate.plate.size().1)
.map(|j| {
html! {<th>{j}</th>}
})
.collect::<Html>();
html!{<tr><th />{ headers }</tr>}
};
let rows = (1..=props.destination_plate.plate.size().0) let rows = (1..=props.destination_plate.plate.size().0)
.map(|i| { .map(|i| {
let row_header = html! {<th>{num_to_letters(i)}</th>};
let row = (1..=props.destination_plate.plate.size().1).map(|j| { let row = (1..=props.destination_plate.plate.size().1).map(|j| {
html! { html! {
<DestPlateCell i={i} j={j} <DestPlateCell i={i} j={j}
@ -111,7 +120,7 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
}).collect::<Html>(); }).collect::<Html>();
html! { html! {
<tr> <tr>
{ row } { row_header }{ row }
</tr> </tr>
} }
}) })
@ -126,7 +135,7 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
onmouseleave={move |e| { onmouseleave={move |e| {
mouseleave_callback.emit(e); mouseleave_callback.emit(e);
}}> }}>
{ rows } { column_header }{ rows }
</table> </table>
</div> </div>
} }

14
src/components/plates/source_plate.rs
View File

@ -12,7 +12,7 @@ use crate::data::transfer_region::Region;
use crate::components::plates::util::Palettes; use crate::components::plates::util::Palettes;
const PALETTE: super::util::ColorPalette = Palettes::RAINBOW; 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)] #[derive(PartialEq, Properties)]
pub struct SourcePlateProps { pub struct SourcePlateProps {
@ -98,8 +98,17 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
let mouseleave_callback = Callback::clone(&mouseup_callback); let mouseleave_callback = Callback::clone(&mouseup_callback);
let column_header = {
let headers = (1..=props.source_plate.plate.size().1)
.map(|j| {
html! {<th>{j}</th>}
})
.collect::<Html>();
html!{<tr><th />{ headers }</tr>}
};
let rows = (1..=props.source_plate.plate.size().0) let rows = (1..=props.source_plate.plate.size().0)
.map(|i| { .map(|i| {
let row_header = html! {<th>{num_to_letters(i)}</th>};
let row = (1..=props.source_plate.plate.size().1) let row = (1..=props.source_plate.plate.size().1)
.map(|j| { .map(|j| {
html! { html! {
@ -114,7 +123,7 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
.collect::<Html>(); .collect::<Html>();
html! { html! {
<tr> <tr>
{ row } { row_header }{ row }
</tr> </tr>
} }
}) })
@ -129,6 +138,7 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
onmouseleave={move |e| { onmouseleave={move |e| {
mouseleave_callback.emit(e); mouseleave_callback.emit(e);
}}> }}>
{ column_header }
{ rows } { rows }
</table> </table>
</div> </div>