move the notification clear button up

jbampton · Oct 3, 2021 · eb15e36 · eb15e36
1 parent 5af50b8
commit eb15e36
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 31 deletions.
diff --git a/ui/notify/css/_notify.scss b/ui/notify/css/_notify.scss
@@ -11,13 +11,13 @@
     padding: 2rem 0;
   }
 
-  .clear {
-    display: flex;
-    justify-content: flex-end;
-    button {
-      &:hover {
-        color: $c-bad;
-      }
+  .delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5rem;
+    &:hover {
+      color: $c-bad;
     }
   }
 

diff --git a/ui/notify/src/view.ts b/ui/notify/src/view.ts
@@ -17,32 +17,22 @@ function renderContent(ctrl: Ctrl, d: NotifyData): VNode[] {
 
   const nodes: VNode[] = [];
 
-  if (pager.previousPage)
-    nodes.push(
-      h('div.pager.prev', {
-        attrs: { 'data-icon': '' },
-        hook: clickHook(ctrl.previousPage),
-      })
-    );
-  else if (pager.nextPage)
-    nodes.push(
-      h('div.pager.prev.disabled', {
-        attrs: { 'data-icon': '' },
-      })
-    );
+  nodes.push(
+    h(`div.pager.prev${pager.previousPage ? '' : '.disabled'}`, {
+      attrs: { 'data-icon': '' },
+      hook: clickHook(ctrl.previousPage),
+    })
+  );
 
-  if (nb > 0 && pager.currentPage == 1)
+  if (nb > 0)
     nodes.push(
-      h(
-        'div.clear',
-        h('button.delete.button.button-empty', {
-          attrs: {
-            'data-icon': '',
-            title: 'Clear',
-          },
-          hook: clickHook(ctrl.clear),
-        })
-      )
+      h('button.delete.button.button-empty', {
+        attrs: {
+          'data-icon': '',
+          title: 'Clear',
+        },
+        hook: clickHook(ctrl.clear),
+      })
     );
 
   nodes.push(nb ? recentNotifications(d, ctrl.scrolling()) : empty());