glen/dyna3
1
0
Fork 0
Code Issues 11 Pull Requests 1 Actions Projects Releases 2 Wiki Activity

Clean up the outline view #19

Merged
glen merged 23 commits from outline-cleanup_on_main into main 2024-11-15 03:32:48 +00:00
Conversation 9 Commits 23 Files Changed 7 +36 -9
2 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7361f1a721 - Show all commits

22
app-proto/main.css
View File

@ -104,17 +104,37 @@ details[open]:has(li) .elt-switch::after {
font-style: italic; font-style: italic;
} }
.cst.invalid {
color: #f58fc2;
}
.cst > input[type=checkbox] { .cst > input[type=checkbox] {
margin: 0px 8px 0px 0px; margin: 0px 8px 0px 0px;
} }
glen marked this conversation as resolved Outdated
glen commented 2024-11-13 17:45:25 +00:00
Outdated
Review
Copy Link

CSS class names, like variable names, should ideally be self-documenting. The class .cst doesn't say anything to me. Ideally, choose a different class name with clearer semantics. If that's not feasible for some reason, make sure to clearly comment the first use of the .cst class.

CSS class names, like variable names, should ideally be self-documenting. The class `.cst` doesn't say anything to me. Ideally, choose a different class name with clearer semantics. If that's not feasible for some reason, make sure to clearly comment the first use of the `.cst` class.
👍 1
Vectornaut commented 2024-11-14 00:42:33 +00:00
Outdated
Review
Copy Link

Done! I've expanded "cst" to "constraint," "elt" to "element," and "rep" to "representation" in the HTML element classes (commits 882286c and 3f3c173).

Done! I've expanded "cst" to "constraint," "elt" to "element," and "rep" to "representation" in the HTML element classes (commits 882286c and 3f3c173).
glen commented 2024-11-14 01:30:57 +00:00
Outdated
Review
Copy Link

Yes, much more intelligible! Thanks, resolving.

Yes, much more intelligible! Thanks, resolving.
.cst > input[type=text] { .cst > input[type=text] {
glen marked this conversation as resolved Outdated
glen commented 2024-11-13 17:49:41 +00:00
Outdated
Review
Copy Link

I don't really mind #222 and #f0f0f0 sort of thing for various greys, because they are pretty easy to understand, but my mental hex-to-hue converter is otherwise not particularly good. Colors also often carry semantic content and/or play specific roles. So please don't use non-grey bare hex colors in css. Give them symbolic names that convey role (presuming there is one) and/or hue as well if feasible (or if not, comment the hue where the symbol is defined) and then use them symbolically, presumably with var(...) CSS references. For example, in Numberscope several colors are defined in App.vue and then used throughout the components with var(...) references. Thanks.

I don't really mind `#222` and `#f0f0f0` sort of thing for various greys, because they are pretty easy to understand, but my mental hex-to-hue converter is otherwise not particularly good. Colors also often carry semantic content and/or play specific roles. So please don't use non-grey bare hex colors in css. Give them symbolic names that convey role (presuming there is one) and/or hue as well if feasible (or if not, comment the hue where the symbol is defined) and then use them symbolically, presumably with `var(...)` CSS references. For example, in Numberscope several colors are defined in App.vue and then used throughout the components with `var(...)` references. Thanks.
👍 1
Vectornaut commented 2024-11-14 08:31:38 +00:00
Outdated
Review
Copy Link

Done (in commit 0c8022d). I've named the color variables according to their roles, with cues about the intended color limited to brightness descriptions. There are comments describing the colors on the lines where the color variables are defined. I'm hoping that this will make it easier to keep the color descriptions up to date with the actual colors.

Done (in commit 0c8022d). I've named the color variables according to their roles, with cues about the intended color limited to brightness descriptions. There are comments describing the colors on the lines where the color variables are defined. I'm hoping that this will make it easier to keep the color descriptions up to date with the actual colors.
glen commented 2024-11-14 15:45:36 +00:00
Outdated
Review
Copy Link

Those are excellent symbolic names and comments. If we are ever pulling in an external package that has css variables of its own, we will need to add a prefix (e.g., --text-bright becomes --dyna-text-bright), but they're good for now.

Those are excellent symbolic names and comments. If we are ever pulling in an external package that has css variables of its own, we will need to add a prefix (e.g., --text-bright becomes --dyna-text-bright), but they're good for now.
color: #fcfcfc; color: inherit;
background-color: inherit; background-color: inherit;
border: 1px solid #555; border: 1px solid #555;
border-radius: 2px; border-radius: 2px;
} }
.cst.invalid > input[type=text] {
border-color: #70495c;
}
.status {
width: 20px;
padding-left: 4px;
text-align: center;
font-style: normal;
}
.invalid > .status::after, details:has(.invalid):not([open]) .status::after {
content: '⚠';
color: #f58fc2;
}
/* display */ /* display */
canvas { canvas {

15
app-proto/src/outline.rs
View File

@ -43,11 +43,19 @@ fn ConstraintOutlineItem(constraint_key: ConstraintKey, element_key: ElementKey)
constraint.subjects.0 constraint.subjects.0
}; };
let other_subject_label = assembly.elements.with(|elts| elts[other_subject].label.clone()); let other_subject_label = assembly.elements.with(|elts| elts[other_subject].label.clone());
let class = create_memo(move || {
if constraint.lorentz_prod_valid.get() {
"cst"
} else {
"cst invalid"
}
});
view! { view! {
li(class="cst") { li(class=class.get()) {
input(r#type="checkbox", bind:checked=constraint.active) input(r#type="checkbox", bind:checked=constraint.active)
div(class="cst-label") { (other_subject_label) } div(class="cst-label") { (other_subject_label) }
LorentzProductInput(constraint=constraint) LorentzProductInput(constraint=constraint)
div(class="status")
} }
} }
} }
@ -56,14 +64,12 @@ fn ConstraintOutlineItem(constraint_key: ConstraintKey, element_key: ElementKey)
#[component(inline_props)] #[component(inline_props)]
fn ElementOutlineItem(key: ElementKey, element: assembly::Element) -> View { fn ElementOutlineItem(key: ElementKey, element: assembly::Element) -> View {
let state = use_context::<AppState>(); let state = use_context::<AppState>();
let class = create_memo({ let class = create_memo(move || {
move || {
if state.selection.with(|sel| sel.contains(&key)) { if state.selection.with(|sel| sel.contains(&key)) {
"selected" "selected"
} else { } else {
"" ""
} }
}
}); });
let label = element.label.clone(); let label = element.label.clone();
let rep_components = element.representation.iter().map(|u| { let rep_components = element.representation.iter().map(|u| {
@ -139,6 +145,7 @@ fn ElementOutlineItem(key: ElementKey, element: assembly::Element) -> View {
) { ) {
div(class="elt-label") { (label) } div(class="elt-label") { (label) }
div(class="elt-rep") { (rep_components) } div(class="elt-rep") { (rep_components) }
div(class="status")
} }
} }
ul(class="constraints") { ul(class="constraints") {