Wireframing and restructure

This commit is contained in:
Emilia Allison 2023-05-21 12:45:12 -04:00
parent 67738543cc
commit 98038944f2
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
12 changed files with 186 additions and 27 deletions

41
src/components/global.css Normal file
View File

@ -0,0 +1,41 @@
:root {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
div.main_container {
height: 95vh;
width: 98vw;
display: grid;
grid-template-columns: [left] 1fr [right] 1fr;
grid-template-rows: [upper] 2fr [lower] 1fr;
column-gap: 1vw;
row-gap: 1vh;
}
div.tree {
grid-column: left / left;
grid-row: upper / upper;
width: 100%;
height: 100%;
border: 2px solid green;
}
div.transfer_menu {
grid-column: left / left;
grid-row: lower / lower;
width: 100%;
height: 100%;
border: 2px solid orange;
}
div.plate_container {
border: 2px dashed purple;
grid-column: right / right;
grid-row: upper / 3;
}

View File

@ -0,0 +1,22 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use super::plates::plate_container::PlateContainer;
use super::tree::Tree;
use super::transfer_menu::TransferMenu;
static STYLE: &'static str = include_str!("global.css");
pub fn MainWindow(cx: Scope) -> Element {
cx.render(rsx! {
style { STYLE },
div {
class: "main_container",
Tree {},
TransferMenu {},
PlateContainer {
source_dims: (24,16),
destination_dims: (24,16)
}
}
})
}

View File

@ -1 +1,4 @@
pub mod source_plate;
pub mod plates;
pub mod main_window;
pub mod tree;
pub mod transfer_menu;

View File

@ -0,0 +1,40 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
#[inline_props]
pub fn DestinationPlate(cx: Scope, width: u8, height: u8) -> Element {
cx.render(rsx! {
div {
class: "dest_plate",
table {
for i in 1..=cx.props.height {
tr {
draggable: "false",
for j in 1..=cx.props.width {
DestPlateCell {i: i, j: j}
}
}
},
}
}
})
}
#[inline_props]
fn DestPlateCell(cx: Scope<PlateCellProps>, i: u8, j: u8, color: Option<String>) -> Element {
let color_string = match color {
Some(c) => c.clone(),
None => "None".to_string(),
};
cx.render(rsx! {
td {
class: "plate_cell",
draggable: "false",
style: "background: {color_string}",
div {
class: "plate_cell_inner"
}
}
})
}

View File

@ -0,0 +1,3 @@
pub mod source_plate;
pub mod destination_plate;
pub mod plate_container;

View File

@ -1,16 +1,14 @@
table, tr, td {
box-sizing: border-box;
user-select: none; /* Prevents dragging issue */
border-spacing: 0px;
}
td.plate_cell {
width: 30px;
height: 30px;
height: 2vmin;
background: none;
}
div.plate_cell_inner {
width: 90%;
aspect-ratio: 1 / 1;
height: 90%;
border-radius: 50%;
border: 2px solid black;

View File

@ -0,0 +1,15 @@
div.plate_container {
display: flex;
flex-direction: column;
align-items: flex-end;
}
div.source_plate, div.dest_plate {
width: 100%;
}
div.source_plate {
border: 2px solid red;
}
div.dest_plate {
border: 2px solid blue;
}

View File

@ -0,0 +1,20 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use super::source_plate::SourcePlate;
use super::destination_plate::DestinationPlate;
static STYLE: &'static str = include_str!("plate_container.css");
#[inline_props]
pub fn PlateContainer(cx: Scope, source_dims: (u8,u8), destination_dims: (u8,u8)) -> Element {
cx.render(rsx! {
style { STYLE }
div {
class: "plate_container",
SourcePlate {width: source_dims.0,
height: source_dims.1},
DestinationPlate {width: destination_dims.0,
height: destination_dims.1}
}
})
}

View File

@ -22,9 +22,9 @@ pub fn SourcePlate(cx: Scope<SourcePlateProps>) -> Element {
});
cx.render(rsx! {
style {
vec![STYLE].into_iter().map(|s| rsx!{s}) // This is stupid
}
div{
class: "source_plate",
style { STYLE }
SourcePlateSelectionIndicator {}
SourcePlateSelectionController {}
table {
@ -38,6 +38,7 @@ pub fn SourcePlate(cx: Scope<SourcePlateProps>) -> Element {
}
},
}
}
})
}

View File

@ -0,0 +1,11 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
#[inline_props]
pub fn TransferMenu(cx: Scope) -> Element {
cx.render(rsx! {
div {
class: "transfer_menu",
}
})
}

11
src/components/tree.rs Normal file
View File

@ -0,0 +1,11 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
#[inline_props]
pub fn Tree(cx: Scope) -> Element {
cx.render(rsx! {
div {
class: "tree",
}
})
}

View File

@ -2,7 +2,7 @@
mod components;
mod data;
use components::source_plate::SourcePlate;
use components::main_window::MainWindow;
use dioxus::prelude::*;
#[cfg(debug_assertions)]
@ -10,13 +10,7 @@ use data::*;
pub fn App(cx: Scope) -> Element {
cx.render(rsx! {
div {
"Shrimp"
SourcePlate {
width: 24,
height: 18,
}
}
MainWindow {}
})
}