ryanmwangi/Compware
1
0
Fork 0
Code Issues Pull requests Releases Activity

feat(items_list): add delete button styles and enhance delete functionality for items and properties

Browse source
This commit is contained in:
ryan 2025-06-05 14:39:20 +03:00
parent 7064520b21
commit 7a98754e68
2 changed files with 62 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
assets/style.css
View file

@ -203,4 +203,41 @@ th {
.suggestion-item.tt-cursor {
background-color: #f5f5f5;
}
}
/* Common styles for delete buttons */
.delete-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background-color: #ff4d4f;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin-left: 8px;
transition: all 0.2s ease;
padding: 0;
line-height: 1;
}
.delete-button:hover {
background-color: #ff7875;
transform: scale(1.1);
}
.delete-button:active {
background-color: #d9363e;
transform: scale(0.95);
}
/* Specific styles for item delete buttons */
.item-delete {
vertical-align: middle;
}
/* Specific styles for property delete buttons */
.property-delete {
vertical-align: middle;
font-size: 14px;
}

40
src/components/items_list.rs
View file

@ -854,7 +854,11 @@ pub fn ItemsList(
view! {
<th>
{item.name.clone()}
<button on:click=move |_| remove_item(index)>{ "Delete" }</button>
<button
class="delete-button item-delete"
on:click=move |_| remove_item(index)
title="Delete item"
>{ "×" }</button>
</th>
}
}).collect::<Vec<_>>()}
@ -1176,21 +1180,25 @@ pub fn ItemsList(
<tr>
<td>
{ property_label }
<button class="delete-property" on:click=move |_| {
log!("Deleting property: {}", property_clone_for_button);
remove_property_clone(property_clone_for_button.clone());
set_custom_properties.update(|props| {
props.retain(|p| p != &property_clone_for_button);
});
set_selected_properties.update(|selected| {
selected.remove(&property_clone_for_button);
});
set_items.update(|items| {
for item in items {
item.custom_properties.remove(&property_clone_for_button);
}
});
}>{ "Delete" }</button>
<button
class="delete-button property-delete"
title="Delete property"
on:click=move |_| {
log!("Deleting property: {}", property_clone_for_button);
remove_property_clone(property_clone_for_button.clone());
set_custom_properties.update(|props| {
props.retain(|p| p != &property_clone_for_button);
});
set_selected_properties.update(|selected| {
selected.remove(&property_clone_for_button);
});
set_items.update(|items| {
for item in items {
item.custom_properties.remove(&property_clone_for_button);
}
});
}
>{ "x" }</button>
</td>
{move || {
let update_item_cell = Arc::clone(&update_item_inner);