feat: #1221 WIP toggle button for isAddToBottom

johannesjo · Jul 10, 2021 · 5e28833 · 5e28833
1 parent 067e515
commit 5e28833
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/src/app/features/tag/store/tag.reducer.ts b/src/app/features/tag/store/tag.reducer.ts
@@ -294,7 +294,7 @@ export const tagReducer = (
       const updates: Update<Tag>[] = task.tagIds.map((tagId) => ({
         id: tagId,
         changes: {
-          taskIds: isAddToBottom
+          taskIds: isAddToBottom // TODO comment this and make it work with the new button for #1221
             ? [...(state.entities[tagId] as Tag).taskIds, task.id]
             : [task.id, ...(state.entities[tagId] as Tag).taskIds],
         },

diff --git a/src/app/features/tasks/add-task-bar/add-task-bar.component.html b/src/app/features/tasks/add-task-bar/add-task-bar.component.html
@@ -33,14 +33,23 @@
       matInput
     />
 
-    <button
+    <!-- <button
       (click)="closeBtnClose($event)"
       *ngIf="isElevated"
       class="close-btn"
       mat-icon-button
       type="button"
     >
       <mat-icon>close</mat-icon>
+    </button> -->
+    <button
+      (click)="isAddToBottom=!isAddToBottom"
+      class="switch-add-to-bot-btn"
+      mat-icon-button
+      type="button"
+    >
+      <mat-icon *ngIf="isAddToBottom">low_priority</mat-icon>
+      <mat-icon *ngIf="!isAddToBottom">keyboard_tab</mat-icon>
     </button>
   </div>
 

diff --git a/src/app/features/tasks/add-task-bar/add-task-bar.component.scss b/src/app/features/tasks/add-task-bar/add-task-bar.component.scss
@@ -116,6 +116,23 @@ $short-syntax-bar-height: 28px;
   }
 }
 
+.switch-add-to-bot-btn {
+  position: absolute;
+  right: $s * 0.5;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  opacity: 0.4;
+  margin-top: -0.5 * $short-syntax-bar-height;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  @include mq(xs) {
+  }
+}
+
 .close-btn {
   position: absolute;
   right: $s * 0.5;

diff --git a/src/app/features/tasks/add-task-bar/add-task-bar.component.ts b/src/app/features/tasks/add-task-bar/add-task-bar.component.ts
@@ -224,18 +224,24 @@ export class AddTaskBarComponent implements AfterViewInit, OnDestroy {
 
   onBlur(ev: FocusEvent) {
     const relatedTarget: HTMLElement = ev.relatedTarget as HTMLElement;
+    let isUIelement = false;
+    if (relatedTarget) {
+      const { className } = relatedTarget;
+      isUIelement =
+        className.includes('switch-add-to-btn') ||
+        className.includes('switch-add-to-bot-btn');
+    }
+
     if (
       !relatedTarget ||
-      (relatedTarget &&
-        !relatedTarget.className.includes('close-btn') &&
-        !relatedTarget.className.includes('switch-add-to-btn'))
+      (relatedTarget && !relatedTarget.className.includes('close-btn') && !isUIelement)
     ) {
       sessionStorage.setItem(
         SS_TODO_TMP,
         (this.inputEl as ElementRef).nativeElement.value,
       );
     }
-    if (relatedTarget && relatedTarget.className.includes('switch-add-to-btn')) {
+    if (relatedTarget && isUIelement) {
       (this.inputEl as ElementRef).nativeElement.focus();
     } else if (relatedTarget && relatedTarget.className.includes('mat-option')) {
       this._blurTimeout = window.setTimeout(() => {