Progyssey/Compareware
2
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

37
assets/style.css
View file

@ -204,3 +204,40 @@ th {
.suggestion-item.tt-cursor { .suggestion-item.tt-cursor {
background-color: #f5f5f5; 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! { view! {
<th> <th>
{item.name.clone()} {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> </th>
} }
}).collect::<Vec<_>>()} }).collect::<Vec<_>>()}
@ -1176,21 +1180,25 @@ pub fn ItemsList(
<tr> <tr>
<td> <td>
{ property_label } { property_label }
<button class="delete-property" on:click=move |_| { <button
log!("Deleting property: {}", property_clone_for_button); class="delete-button property-delete"
remove_property_clone(property_clone_for_button.clone()); title="Delete property"
set_custom_properties.update(|props| { on:click=move |_| {
props.retain(|p| p != &property_clone_for_button); log!("Deleting property: {}", property_clone_for_button);
}); remove_property_clone(property_clone_for_button.clone());
set_selected_properties.update(|selected| { set_custom_properties.update(|props| {
selected.remove(&property_clone_for_button); props.retain(|p| p != &property_clone_for_button);
}); });
set_items.update(|items| { set_selected_properties.update(|selected| {
for item in items { selected.remove(&property_clone_for_button);
item.custom_properties.remove(&property_clone_for_button); });
} set_items.update(|items| {
}); for item in items {
}>{ "Delete" }</button> item.custom_properties.remove(&property_clone_for_button);
}
});
}
>{ "x" }</button>
</td> </td>
{move || { {move || {
let update_item_cell = Arc::clone(&update_item_inner); let update_item_cell = Arc::clone(&update_item_inner);