Animation delete button

examples/tapme/css/components/icon-button.css

@@ -19,10 +19,11 @@
 .icon-button svg {
   width: 100%;
   height: 100%;
+  overflow: visible;
 }
 
 .icon-button svg * {
-  transition: fill 0.1s linear;
+  transition: fill 0.1s linear, transform 0.2s linear;
   fill: #3c7d05;
 }
 
@@ -82,3 +83,12 @@
   fill: #3c7d05;
   stroke: white;
 }
+
+/*animate trash can*/
+.icon-button--trash-bin svg path:first-child {
+  transform-origin: top right;
+}
+
+.icon-button--trash-bin--open svg path:first-child {
+  transform: rotate(30deg) translate3d(9px, 0, 0);
+}

examples/tapme/index.html

@@ -65,6 +65,7 @@
         <script src="./js/shared/components/switcher.component.js"></script>
         <script src="./js/shared/components/debug.component.js"></script>
         <script src="./js/shared/components/tab-panel.component.js"></script>
+        <script src="./js/shared/components/delete-button.component.js"></script>
 
         <script src="./js/pages/tracker/components/modal-windows/delete-modal-window.component.js"></script>
 
@@ -87,14 +88,12 @@
         <script src="./js/pages/tracker/components/task/task.placeholder.component.js"></script>
         <script src="./js/pages/tracker/components/task/task.save-as-preset-button.component.js"></script>
         <script src="./js/pages/tracker/components/task/task.toggle-button.component.js"></script>
-        <script src="./js/pages/tracker/components/task/task.delete-button.component.js"></script>
         <script src="./js/pages/tracker/components/task/task.text.component.js"></script>
         <script src="./js/pages/tracker/components/task/task.component.js"></script>
         <script src="./js/pages/tracker/components/task/tasks-list.component.js"></script>
 
         <!-- import preset components-->
         <script src="./js/pages/tracker/components/preset/preset.add-task-button.component.js"></script>
-        <script src="./js/pages/tracker/components/preset/preset.delete-button.component.js"></script>
         <script src="./js/pages/tracker/components/preset/preset.text.component.js"></script>
         <script src="./js/pages/tracker/components/preset/preset.component.js"></script>
         <script src="./js/pages/tracker/components/preset/add-preset.component.js"></script>

examples/tapme/js/pages/tracker/components/preset/preset.component.js

@@ -16,7 +16,9 @@ class PresetComponent extends Component {
                 <div class="row preset-component">
                     <div class="padding-2 max-width">${new PresetTextComponent(this.preset)}</div>
                     <div class="padding-2 hide-by-default">${new PresetAddTaskButtonComponent(this.preset)}</div>
-                    <div class="padding-2 hide-by-default">${new PresetDeleteButtonComponent(this.preset)}</div>
+                    <div class="padding-2 hide-by-default">
+                        ${new DeleteButtonComponent(() => trackerPageModel.deletePreset(this.preset))}
+                    </div>
                 </div>
 
                 <div>

examples/tapme/js/pages/tracker/components/tag/tag-item.component.js

@@ -42,29 +42,12 @@ class TagItemComponent extends Component {
         this.tag = tag;
     }
 
-    openDeleteModal() {
-        modalWindowModel.openModal('DeleteModalWindowComponent', {
-            onDelete: () => trackerPageModel.deleteTag(trackerPageModel, this.tag),
-            title: locales.deleteModalWindow.deleteTagTitle,
-            subtitle: this.tag.title,
-        });
-    }
-
     toHtml() {
         return t`
             <div class="row tag-item-component-container">
                 ${new TagItemColorComponent(this.tag)}
                 ${new TagItemTextComponent(this.tag)}
-                <button
-                    class="icon-button icon-button--red tag-item-component-delete-button"
-                    onclick="${() => this.openDeleteModal()}"
-                >
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">
-                        <g id="trash_24">
-                            <path id="Vector" d="M17 6H22V8H20V21C20 21.2652 19.8946 21.5196 19.7071 21.7071C19.5196 21.8946 19.2652 22 19 22H5C4.73478 22 4.48043 21.8946 4.29289 21.7071C4.10536 21.5196 4 21.2652 4 21V8H2V6H7V3C7 2.73478 7.10536 2.48043 7.29289 2.29289C7.48043 2.10536 7.73478 2 8 2H16C16.2652 2 16.5196 2.10536 16.7071 2.29289C16.8946 2.48043 17 2.73478 17 3V6ZM18 8H6V20H18V8ZM9 4V6H15V4H9Z" />
-                        </g>
-                    </svg>
-                </button>
+                ${new DeleteButtonComponent(() => trackerPageModel.deleteTag(trackerPageModel, this.tag))}
             </div>
         `;
     }

examples/tapme/js/pages/tracker/components/task/task.component.js

@@ -17,7 +17,9 @@ class TaskComponent extends Component {
                     <div>${new TaskToggleButtonComponent(this.task)}</div>
                     <div class="max-width">${new TaskTextComponent(this.task)}</div>
                     <div class="hide-by-default">${new TaskSaveAsPresetButtonComponent(this.task)}</div>
-                    <div class="hide-by-default">${new TaskDeleteButtonComponent(this.task)}</div>
+                    <div class="hide-by-default">
+                        ${new DeleteButtonComponent(() => trackerPageModel.deleteTask(this.task))}
+                    </div>
                 </div>
 
                 <div>

examples/tapme/js/shared/components/delete-button.component.js

@@ -0,0 +1,46 @@
+class DeleteButtonComponent extends Component {
+    /**
+     * @param {() => void} onDelete
+     */
+    constructor(onDelete) {
+        super();
+        this.onDelete = onDelete;
+
+        this.activeted = false;
+        this.cssClass = new CssClass(this.cssClassNames);
+    }
+
+    get cssClassNames() {
+        const base = 'icon-button icon-button--red icon-button--trash-bin';
+
+        return this.activeted ? `${base} icon-button--trash-bin--open` : base;
+    }
+
+    onClick() {
+        if (this.activeted) {
+            this.onDelete();
+        } else {
+            this.activeted = true;
+            this.cssClass.className = this.cssClassNames;
+        }
+    }
+
+    onMouseLeave() {
+        this.activeted = false;
+        this.cssClass.className = this.cssClassNames;
+    }
+
+    toHtml() {
+        return t`
+            <button
+                class="${this.cssClass}"
+                onmouseleave="${() => this.onMouseLeave()}"
+                onclick="${() => this.onClick()}">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6V8H22V6H17V2H7V6H2ZM9 4V6H15V4H9Z" />
+                    <path d="M18 8H20V20C20 20.6667 19.6 22 18 22H6C4.4 22 4 20.6667 4 20V8H6V20H18V8Z" />
+                </svg>
+            </button>
+        `;
+    }
+}

examples/tapme/js/shared/const/locales.js

@@ -18,24 +18,6 @@ const locales = {
             [Language.Kazakh]: 'Тапсырмалар тізімін тазалау керек пе?',
             [Language.Georgian]: 'გსურთ ამოცანების სიის გასუფთავება?',
         },
-        deleteTaskTitle: {
-            [Language.English]: 'Do you want to delete the task?',
-            [Language.Russian]: 'Удалить задачу?',
-            [Language.Kazakh]: 'Тапсырманы жою керек пе?',
-            [Language.Georgian]: 'წაშალოთ დავალება?',
-        },
-        deletePresetTitle: {
-            [Language.English]: 'Do you want to delete the preset?',
-            [Language.Russian]: 'Удалить шаблон?',
-            [Language.Kazakh]: 'Үлгіні жою керек пе?',
-            [Language.Georgian]: 'წაშალოთ შაბლონი?',
-        },
-        deleteTagTitle: {
-            [Language.English]: 'Do you want to delete the tag?',
-            [Language.Russian]: 'Удалить тэг?',
-            [Language.Kazakh]: 'Тегті жою керек пе?',
-            [Language.Georgian]: 'წაშალოთ ტეგი?',
-        },
         yesButtonTitleTitle: {
             [Language.English]: 'Yes, delete',
             [Language.Russian]: 'Да, удалить',

examples/tapme/styles.css

@@ -547,11 +547,10 @@ body:has(.page--light) .tags-settings-panel {
     border: none;
     cursor: pointer;
 
-    margin-top: 8px;
     height: 40px;
 
     width: 40px;
-    transition-duration: 0.5s;
+    transition-duration: 0.5s !important;
     transition-timing-function: ease;
 }
 
@@ -576,11 +575,9 @@ body:has(.page--light) .tags-settings-panel {
     padding: 3px 10px 5px 10px;
     height: 28px;
     font-size: 16pt;
-    margin-top: 10px;
     color: white;
     border-radius: 5px;
     width: 320px;
-    margin-left: 10px;
     line-height: 140%;
     border: none;
 }
@@ -598,11 +595,11 @@ body:has(.page--light) .tag-item-component-text:focus {
     color: black !important;
 }
 
-.tag-item-component-delete-button {
-    min-width: 40px;
-    margin-top: 8px;
-    margin-left: 8px;
-    margin-right: 8px;
+.tag-item-component-container {
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
 }
 
 .delete-active-tasks-window {