Browse Source

Various changes

- Loading animation in Projects view
- Per item icon + spacing fixes in Home view
world-fix
Jose Olarte III 1 year ago
parent
commit
1d6241abbb
  1. 6
      src/main.ts
  2. 38
      src/views/HomeView.vue
  3. 20
      src/views/ProjectsView.vue

6
src/main.ts

@ -17,6 +17,8 @@ import {
faCircleCheck, faCircleCheck,
faCircleQuestion, faCircleQuestion,
faCircleUser, faCircleUser,
faClock,
faCoins,
faCopy, faCopy,
faEllipsisVertical, faEllipsisVertical,
faEye, faEye,
@ -24,6 +26,7 @@ import {
faFileLines, faFileLines,
faFloppyDisk, faFloppyDisk,
faFolderOpen, faFolderOpen,
faGift,
faHand, faHand,
faHouseChimney, faHouseChimney,
faLongArrowAltLeft, faLongArrowAltLeft,
@ -53,6 +56,8 @@ library.add(
faCircleCheck, faCircleCheck,
faCircleQuestion, faCircleQuestion,
faCircleUser, faCircleUser,
faClock,
faCoins,
faCopy, faCopy,
faEllipsisVertical, faEllipsisVertical,
faEye, faEye,
@ -60,6 +65,7 @@ library.add(
faFileLines, faFileLines,
faFloppyDisk, faFloppyDisk,
faFolderOpen, faFolderOpen,
faGift,
faHand, faHand,
faHouseChimney, faHouseChimney,
faLongArrowAltLeft, faLongArrowAltLeft,

38
src/views/HomeView.vue

@ -49,20 +49,23 @@
Time Safari Time Safari
</h1> </h1>
<div> <div class="mb-8">
<h1 class="text-2xl">Quick Action</h1> <h1 class="text-2xl">Quick Action</h1>
<p>Choose a contact to whom to show appreciation:</p> <p class="mb-2">Choose a contact to whom to show appreciation:</p>
<div class="px-4"> <div>
<button <button
v-for="contact in allContacts" v-for="contact in allContacts"
:key="contact.did" :key="contact.did"
@click="openDialog(contact)" @click="openDialog(contact)"
class="text-blue-500" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
> >
&nbsp;{{ contact.name }}, {{ contact.name }}
</button> </button>
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span> <span v-if="allContacts.length > 0">or</span>
<button @click="openDialog()" class="text-blue-500"> <button
@click="openDialog()"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
>
nobody in particular nobody in particular
</button> </button>
</div> </div>
@ -75,25 +78,32 @@
> >
</GiftedDialog> </GiftedDialog>
<div class="py-4"> <div>
<h1 class="text-2xl">Latest Activity</h1> <h1 class="text-2xl">Latest Activity</h1>
<span :class="{ hidden: isHiddenSpinner }"> <span :class="{ hidden: isHiddenSpinner }">
<fa icon="spinner" class="fa-fw"></fa> <fa icon="spinner" class="fa-spin-pulse"></fa>
Loading&hellip; Loading&hellip;
</span> </span>
<ul class=""> <ul>
<li <li
class="border-b border-slate-300" class="border-b border-slate-300 py-2"
v-for="record in feedData" v-for="record in feedData"
:key="record.jwtId" :key="record.jwtId"
> >
<div <div
class="border-b text-orange-400 px-8 py-4" class="border-b border-dashed border-slate-400 text-orange-400 py-2 mb-2 font-bold uppercase text-sm"
v-if="record.jwtId == feedLastViewedId" v-if="record.jwtId == feedLastViewedId"
> >
You've seen all claims below. You've seen all claims below:
</div>
<div class="flex">
<fa
icon="gift"
class="fa-fw flex-none pt-1 pr-2 text-slate-500"
></fa>
<!-- icon values: "coins" = money; "clock" = time; "gift" = others -->
<span class="">{{ this.giveDescription(record) }}</span>
</div> </div>
{{ this.giveDescription(record) }}
</li> </li>
</ul> </ul>
</div> </div>

20
src/views/ProjectsView.vue

@ -70,6 +70,14 @@
<fa icon="plus" class="fa-fw"></fa> <fa icon="plus" class="fa-fw"></fa>
</button> </button>
<!-- Loading Animation -->
<div
class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
v-if="isLoading"
>
<fa icon="spinner" class="fa-spin-pulse"></fa>
</div>
<!-- Results List --> <!-- Results List -->
<InfiniteScroll @reached-bottom="loadMoreData"> <InfiniteScroll @reached-bottom="loadMoreData">
<ul> <ul>
@ -185,9 +193,9 @@ export default class ProjectsView extends Vue {
} }
/** /**
* Handle clicking on a project entry found in the list * Handle clicking on a project entry found in the list
* @param id of the project * @param id of the project
**/ **/
onClickLoadProject(id: string) { onClickLoadProject(id: string) {
localStorage.setItem("projectId", id); localStorage.setItem("projectId", id);
const route = { const route = {
@ -197,9 +205,9 @@ export default class ProjectsView extends Vue {
} }
/** /**
* Load projects initially * Load projects initially
* @param identity of the user * @param identity of the user
**/ **/
async LoadProjects(identity: IIdentifier) { async LoadProjects(identity: IIdentifier) {
const url = `${this.apiServer}/api/v2/report/plansByIssuer`; const url = `${this.apiServer}/api/v2/report/plansByIssuer`;
const token: string = await accessToken(identity); const token: string = await accessToken(identity);

Loading…
Cancel
Save