|
599 | 599 | } |
600 | 600 |
|
601 | 601 | .history-content { |
602 | | - padding-right: 75px; |
| 602 | + padding-right: 105px; |
603 | 603 | } |
604 | 604 |
|
605 | 605 | .history-expression { |
|
668 | 668 | transform: scale(1.1); |
669 | 669 | } |
670 | 670 |
|
| 671 | + .history-btn.delete { |
| 672 | + background: #ffebee; |
| 673 | + color: #c62828; |
| 674 | + } |
| 675 | + |
| 676 | + .history-btn.delete:hover { |
| 677 | + background: #ffcdd2; |
| 678 | + transform: scale(1.1); |
| 679 | + } |
| 680 | + |
671 | 681 | .copied-toast { |
672 | 682 | position: fixed; |
673 | 683 | bottom: 30px; |
|
702 | 712 | font-style: italic; |
703 | 713 | } |
704 | 714 |
|
| 715 | + /* Fade out animation for deleted items */ |
| 716 | + @keyframes fadeOut { |
| 717 | + from { |
| 718 | + opacity: 1; |
| 719 | + transform: translateX(0); |
| 720 | + } |
| 721 | + to { |
| 722 | + opacity: 0; |
| 723 | + transform: translateX(100%); |
| 724 | + } |
| 725 | + } |
| 726 | + |
| 727 | + .history-item.deleting { |
| 728 | + animation: fadeOut 0.3s ease forwards; |
| 729 | + } |
| 730 | + |
705 | 731 | /* Scrollbar styling */ |
706 | 732 | .history-list::-webkit-scrollbar, |
707 | 733 | .memory-display::-webkit-scrollbar { |
@@ -1641,6 +1667,30 @@ <h2 class="history-title"> |
1641 | 1667 | updateHistoryDisplay(); |
1642 | 1668 | } |
1643 | 1669 |
|
| 1670 | + function deleteHistoryItem(index) { |
| 1671 | + // Add animation class to the item |
| 1672 | + const historyList = document.getElementById('historyList'); |
| 1673 | + const items = historyList.querySelectorAll('.history-item'); |
| 1674 | + |
| 1675 | + if (items[index]) { |
| 1676 | + items[index].classList.add('deleting'); |
| 1677 | + |
| 1678 | + // Wait for animation to complete before removing |
| 1679 | + setTimeout(() => { |
| 1680 | + history.splice(index, 1); |
| 1681 | + saveHistory(); |
| 1682 | + const searchTerm = document.getElementById('searchInput').value.toLowerCase(); |
| 1683 | + updateHistoryDisplay(searchTerm); |
| 1684 | + }, 300); |
| 1685 | + } else { |
| 1686 | + // Fallback if element not found |
| 1687 | + history.splice(index, 1); |
| 1688 | + saveHistory(); |
| 1689 | + const searchTerm = document.getElementById('searchInput').value.toLowerCase(); |
| 1690 | + updateHistoryDisplay(searchTerm); |
| 1691 | + } |
| 1692 | + } |
| 1693 | + |
1644 | 1694 | function searchHistory() { |
1645 | 1695 | const searchTerm = document.getElementById('searchInput').value.toLowerCase(); |
1646 | 1696 | updateHistoryDisplay(searchTerm); |
@@ -1686,6 +1736,9 @@ <h2 class="history-title"> |
1686 | 1736 | <button class="history-btn transfer" onclick="transferToCalculator(${originalIndex})" title="Use in calculator"> |
1687 | 1737 | <i class="fas fa-calculator"></i> |
1688 | 1738 | </button> |
| 1739 | + <button class="history-btn delete" onclick="deleteHistoryItem(${originalIndex})" title="Delete"> |
| 1740 | + <i class="fas fa-trash"></i> |
| 1741 | + </button> |
1689 | 1742 | </div> |
1690 | 1743 | </div> |
1691 | 1744 | `; |
|
0 commit comments