trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 18 Releases 5 Wiki Activity
Browse Source

style the sharing screen (plus other fixes)

passkey
Trent Larson 1 year ago
parent
7f02ba29a3
commit
f7b5dbf4ce
4 changed files with 86 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/GiftedDialog.vue
  2. 10
      src/components/QuickNav.vue
  3. 58
      src/views/GiftedDetails.vue
  4. 46
      src/views/SharedPhotoView.vue

2
src/components/GiftedDialog.vue
View File

@ -15,7 +15,7 @@
class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20" class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
@click="changeUnitCode()" @click="changeUnitCode()"
> >
{{ libsUtil.UNIT_SHORT[unitCode] }} {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
</span> </span>
<div <div
class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2" class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"

10
src/components/QuickNav.vue
View File

@ -12,7 +12,7 @@
}" }"
> >
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"> <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
<fa icon="house-chimney" class="fa-fw"></fa> <fa icon="house-chimney" class="fa-fw" />
</router-link> </router-link>
</li> </li>
<!-- Search --> <!-- Search -->
@ -28,7 +28,7 @@
:to="{ name: 'discover' }" :to="{ name: 'discover' }"
class="block text-center py-3 px-1" class="block text-center py-3 px-1"
> >
<fa icon="magnifying-glass" class="fa-fw"></fa> <fa icon="magnifying-glass" class="fa-fw" />
</router-link> </router-link>
</li> </li>
<!-- Projects --> <!-- Projects -->
@ -44,7 +44,7 @@
:to="{ name: 'projects' }" :to="{ name: 'projects' }"
class="block text-center py-3 px-1" class="block text-center py-3 px-1"
> >
<fa icon="hand" class="fa-fw"></fa> <fa icon="hand" class="fa-fw" />
</router-link> </router-link>
</li> </li>
<!-- Contacts --> <!-- Contacts -->
@ -60,7 +60,7 @@
:to="{ name: 'contacts' }" :to="{ name: 'contacts' }"
class="block text-center py-3 px-1" class="block text-center py-3 px-1"
> >
<fa icon="users" class="fa-fw"></fa> <fa icon="users" class="fa-fw" />
</router-link> </router-link>
</li> </li>
<!-- Profile --> <!-- Profile -->
@ -76,7 +76,7 @@
:to="{ name: 'account' }" :to="{ name: 'account' }"
class="block text-center py-3 px-1" class="block text-center py-3 px-1"
> >
<fa icon="circle-user" class="fa-fw"></fa> <fa icon="circle-user" class="fa-fw" />
</router-link> </router-link>
</li> </li>
</ul> </ul>

58
src/views/GiftedDetails.vue
View File

@ -5,10 +5,13 @@
<!-- CONTENT --> <!-- CONTENT -->
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<!-- Back --> <!-- Back -->
<div class="text-lg text-center font-light relative px-7"> <div
v-if="!hideBackButton"
class="text-lg text-center font-light relative px-7"
>
<h1 <h1
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@click="cancel()" @click="cancelBack()"
> >
<fa icon="chevron-left" class="fa-fw"></fa> <fa icon="chevron-left" class="fa-fw"></fa>
</h1> </h1>
@ -31,7 +34,7 @@
class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20" class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
@click="changeUnitCode()" @click="changeUnitCode()"
> >
{{ libsUtil.UNIT_SHORT[unitCode] }} {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
</span> </span>
<div <div
class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2" class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
@ -144,9 +147,11 @@ export default class GiftedDetails extends Vue {
amountInput = "0"; amountInput = "0";
description = ""; description = "";
destinationNameAfter = "";
givenToUser = false; givenToUser = false;
giverDid: string | undefined; giverDid: string | undefined;
giverName = ""; giverName = "";
hideBackButton = false;
imageUrl = ""; imageUrl = "";
isTrade = false; isTrade = false;
message = ""; message = "";
@ -161,24 +166,20 @@ export default class GiftedDetails extends Vue {
libsUtil = libsUtil; libsUtil = libsUtil;
async mounted() { async mounted() {
this.amountInput = this.$route.query.amountInput as string; this.amountInput =
this.description = this.$route.query.description as string; (this.$route.query.amountInput as string) || this.amountInput;
this.description = (this.$route.query.description as string) || "";
this.destinationNameAfter = this.$route.query
.destinationNameAfter as string;
this.giverDid = this.$route.query.giverDid as string; this.giverDid = this.$route.query.giverDid as string;
this.giverName = this.$route.query.giverName as string; this.giverName = (this.$route.query.giverName as string) || "";
if (this.giverDid && !this.giverName) { this.hideBackButton = this.$route.query.hideBackButton === "true";
this.giverName = this.message = (this.$route.query.message as string) || "";
this.giverDid === this.activeDid ? "you" : "someone not named";
}
this.message = this.$route.query.message as string;
this.offerId = this.$route.query.offerId as string; this.offerId = this.$route.query.offerId as string;
this.projectId = this.$route.query.projectId as string; this.projectId = this.$route.query.projectId as string;
this.recipientDid = this.$route.query.recipientDid as string; this.recipientDid = this.$route.query.recipientDid as string;
this.recipientName = this.$route.query.recipientName as string; this.recipientName = (this.$route.query.recipientName as string) || "";
if (this.recipientDid && !this.recipientName) { this.unitCode = (this.$route.query.unitCode as string) || this.unitCode;
this.recipientName =
this.recipientDid === this.activeDid ? "you" : "someone not named";
}
this.unitCode = this.$route.query.unitCode as string;
this.imageUrl = this.imageUrl =
(this.$route.query.imageUrl as string) || (this.$route.query.imageUrl as string) ||
@ -205,7 +206,15 @@ export default class GiftedDetails extends Vue {
this.apiServer = settings?.apiServer || ""; this.apiServer = settings?.apiServer || "";
this.activeDid = settings?.activeDid || ""; this.activeDid = settings?.activeDid || "";
if (this.giverDid && !this.giverName) {
this.giverName =
this.giverDid === this.activeDid ? "you" : "someone not named";
}
this.givenToUser = this.recipientDid === this.activeDid; this.givenToUser = this.recipientDid === this.activeDid;
if (this.recipientDid && !this.recipientName) {
this.recipientName =
this.recipientDid === this.activeDid ? "you" : "someone not named";
}
this.showGivenToUser = this.showGivenToUser =
!this.projectId && this.recipientDid === this.activeDid; !this.projectId && this.recipientDid === this.activeDid;
@ -257,6 +266,15 @@ export default class GiftedDetails extends Vue {
} }
cancel() { cancel() {
this.deleteImage(); // not awaiting, so they'll go back immediately
if (this.destinationNameAfter) {
this.$router.push({ name: this.destinationNameAfter });
} else {
this.$router.back();
}
}
cancelBack() {
this.deleteImage(); // not awaiting, so they'll go back immediately this.deleteImage(); // not awaiting, so they'll go back immediately
this.$router.back(); this.$router.back();
} }
@ -301,7 +319,7 @@ export default class GiftedDetails extends Vue {
// don't bother with a notification // don't bother with a notification
// (either they'll simply continue or they're canceling and going back) // (either they'll simply continue or they're canceling and going back)
} else { } else {
console.error("Non-success deleting image:", response); console.error("Problem deleting image:", response);
this.$notify( this.$notify(
{ {
group: "alert", group: "alert",
@ -452,8 +470,12 @@ export default class GiftedDetails extends Vue {
5000, 5000,
); );
localStorage.removeItem("imageUrl"); localStorage.removeItem("imageUrl");
if (this.destinationNameAfter) {
this.$router.push({ name: this.destinationNameAfter });
} else {
this.$router.back(); this.$router.back();
} }
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) { } catch (error: any) {
console.error("Error with give recordation caught:", error); console.error("Error with give recordation caught:", error);

46
src/views/SharedPhotoView.vue
View File

@ -7,26 +7,45 @@
Image Image
</h1> </h1>
<div v-if="imageBlob"> <div v-if="imageBlob">
<div v-if="uploading"> <div v-if="uploading" class="text-center mb-4">
<fa icon="spinner" class="fa-spin-pulse" /> <fa icon="spinner" class="fa-spin-pulse" />
</div> </div>
<div v-else> <div v-else>
Choose the purpose of this image: <div class="text-center mb-4">Choose how to use this image</div>
<br /> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<button @click="recordGift">Record a Gift</button> <button
<br /> @click="recordGift"
<button @click="recordProfile">Save as Profile Image</button> class="text-center text-md font-bold 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"
<br /> >
<button @click="cancel">Cancel</button> <fa icon="gift" class="fa-fw" />
Record a Gift
</button>
<button
@click="recordProfile"
class="text-center text-md font-bold 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"
>
<fa icon="circle-user" class="fa-fw" />
Save as Profile Image
</button>
<button
@click="cancel"
class="text-center text-md font-bold 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-2 py-3 rounded-md"
>
<fa icon="ban" class="fa-fw" />
Cancel
</button>
</div>
</div> </div>
<div class="flex justify-center">
<img <img
:src="URL.createObjectURL(imageBlob)" :src="URL.createObjectURL(imageBlob)"
alt="Shared Image" alt="Shared Image"
class="rounded" class="rounded mt-4"
/> />
</div> </div>
<div v-else> </div>
<div v-else class="text-center mb-4">
<p>No image found.</p> <p>No image found.</p>
</div> </div>
</section> </section>
@ -93,7 +112,12 @@ export default class SharedPhotoView extends Vue {
if (url) { if (url) {
this.$router.push({ this.$router.push({
name: "gifted-details", name: "gifted-details",
query: { imageUrl: url }, query: {
destinationNameAfter: "home",
hideBackButton: true,
imageUrl: url,
recipientDid: this.activeDid,
},
}); });
} }
}); });

Write Preview
Loading…
Cancel
Save