Feed filters dialog

src/components/FeedFilters.vue

@@ -0,0 +1,190 @@
+<template>
+  <div v-if="visible" id="dialogFeedFilters" class="dialog-overlay">
+    <div class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">Feed Filters</h1>
+
+      <p class="mb-4 font-bold">Show only activities that are…</p>
+
+      <div class="grid grid-cols-1 gap-2">
+        <div class="flex items-center justify-between cursor-pointer">
+          <!-- label -->
+          <div>From me</div>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input type="checkbox" name="" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between cursor-pointer">
+          <!-- label -->
+          <div>From my contacts</div>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input type="checkbox" name="" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between cursor-pointer">
+          <!-- label -->
+          <div>From my projects</div>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input type="checkbox" name="" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between cursor-pointer">
+          <!-- label -->
+          <div>Matched to my topics of interest</div>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input type="checkbox" name="" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between cursor-pointer">
+          <!-- label -->
+          <div>Offers</div>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input type="checkbox" name="" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between cursor-pointer">
+          <!-- label -->
+          <div>Nearby</div>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input type="checkbox" name="" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <button
+        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mt-4"
+        @click="confirm"
+      >
+        Apply
+      </button>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2">
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        >
+          Clear All
+        </button>
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+import {
+  LMap,
+  LMarker,
+  LRectangle,
+  LTileLayer,
+} from "@vue-leaflet/vue-leaflet";
+
+@Component({
+  components: {
+    LRectangle,
+    LMap,
+    LMarker,
+    LTileLayer,
+  },
+})
+export default class FeedFilters extends Vue {
+  visible = false;
+
+  async open() {
+    this.visible = true;
+  }
+
+  close() {
+    // close the dialog but don't change values (just in case some actions are added later)
+    this.visible = false;
+  }
+
+  cancel() {
+    this.close();
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+#dialogFeedFilters.dialog-overlay {
+  z-index: 99999;
+  overflow: scroll;
+}
+
+.dialog {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 500px;
+}
+</style>

src/views/HomeView.vue

@@ -172,10 +172,19 @@
       showGivenToUser="true"
     />
     <GiftedPrompts ref="giftedPrompts" />
+    <FeedFilters ref="feedFilters" />
 
     <!-- Results List -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-bold mb-4">Latest Activity</h2>
+      <div class="flex items-center mb-4">
+        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <button
+          @click="openFeedFilters()"
+          class="block text-center text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 ml-auto rounded-md"
+        >
+          Filter…
+        </button>
+      </div>
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul class="border-t border-slate-300">
           <li
@@ -250,6 +259,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import EntityIcon from "@/components/EntityIcon.vue";
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import GiftedPrompts from "@/components/GiftedPrompts.vue";
+import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
@@ -283,6 +293,7 @@ interface GiveRecordWithContactInfo extends GiveServerRecord {
   components: {
     GiftedDialog,
     GiftedPrompts,
+    FeedFilters,
     QuickNav,
     EntityIcon,
     InfiniteScroll,
@@ -574,5 +585,9 @@ export default class HomeView extends Vue {
   openGiftedPrompts() {
     (this.$refs.giftedPrompts as GiftedPrompts).open();
   }
+
+  openFeedFilters() {
+    (this.$refs.feedFilters as FeedFilters).open();
+  }
 }
 </script>