kentbull
/
crowd-funder-for-time-pwa
forked from trent_larson/crowd-funder-for-time-pwa
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Feed filters dialog

kb/add-usage-guide
Jose Olarte III 8 months ago
parent
2dfc8fedaa
commit
4635c1ac48
2 changed files with 206 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 190
      src/components/FeedFilters.vue
  2. 17
      src/views/HomeView.vue

190
src/components/FeedFilters.vue
View File

@ -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>

17
src/views/HomeView.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save