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

38
src/views/HomeView.vue

@ -49,20 +49,23 @@
Time Safari
</h1>
<div>
<div class="mb-8">
<h1 class="text-2xl">Quick Action</h1>
<p>Choose a contact to whom to show appreciation:</p>
<div class="px-4">
<p class="mb-2">Choose a contact to whom to show appreciation:</p>
<div>
<button
v-for="contact in allContacts"
:key="contact.did"
@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>
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
<button @click="openDialog()" class="text-blue-500">
<span v-if="allContacts.length > 0">or</span>
<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
</button>
</div>
@ -75,25 +78,32 @@
>
</GiftedDialog>
<div class="py-4">
<div>
<h1 class="text-2xl">Latest Activity</h1>
<span :class="{ hidden: isHiddenSpinner }">
<fa icon="spinner" class="fa-fw"></fa>
<fa icon="spinner" class="fa-spin-pulse"></fa>
Loading&hellip;
</span>
<ul class="">
<ul>
<li
class="border-b border-slate-300"
class="border-b border-slate-300 py-2"
v-for="record in feedData"
:key="record.jwtId"
>
<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"
>
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>
{{ this.giveDescription(record) }}
</li>
</ul>
</div>

20
src/views/ProjectsView.vue

@ -70,6 +70,14 @@
<fa icon="plus" class="fa-fw"></fa>
</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 -->
<InfiniteScroll @reached-bottom="loadMoreData">
<ul>
@ -185,9 +193,9 @@ export default class ProjectsView extends Vue {
}
/**
* Handle clicking on a project entry found in the list
* @param id of the project
**/
* Handle clicking on a project entry found in the list
* @param id of the project
**/
onClickLoadProject(id: string) {
localStorage.setItem("projectId", id);
const route = {
@ -197,9 +205,9 @@ export default class ProjectsView extends Vue {
}
/**
* Load projects initially
* @param identity of the user
**/
* Load projects initially
* @param identity of the user
**/
async LoadProjects(identity: IIdentifier) {
const url = `${this.apiServer}/api/v2/report/plansByIssuer`;
const token: string = await accessToken(identity);

Loading…
Cancel
Save