From 6e63c6ae314a8ba6844788db8f24768e7f1fcc7b Mon Sep 17 00:00:00 2001
From: Soitora <simon.mattila@protonmail.com>
Date: Mon, 14 Sep 2020 22:40:00 +0200
Subject: [PATCH] Download page tweaks (#345)

* Tweaked ReleaseDate and VersionTag

Also reworded README for Downloads

* Tweak download buttons

Also tweak constants and store to make them look more uniform.

* Changed button to element-ui buttons

Tweaked buttons though, but easier to make behave right

* Tweak placeholder digit to double digit
---
 src/.vuepress/components/DownloadButtons.vue | 307 +++++++++----------
 src/.vuepress/components/ReleaseDate.vue     |  39 ++-
 src/.vuepress/components/VersionTag.vue      |  36 ++-
 src/.vuepress/constants.js                   |   4 +-
 src/.vuepress/store/index.js                 |  14 +-
 src/download/README.md                       |   2 +-
 6 files changed, 227 insertions(+), 175 deletions(-)

diff --git a/src/.vuepress/components/DownloadButtons.vue b/src/.vuepress/components/DownloadButtons.vue
index 826001a6..427b7767 100644
--- a/src/.vuepress/components/DownloadButtons.vue
+++ b/src/.vuepress/components/DownloadButtons.vue
@@ -1,156 +1,151 @@
-<template>
-	<div id="DownloadButtons">
-		<div class="downloadContainer">
-			<button id="downloadStable" @click="downloadStable" @keyup.enter="downloadStable">
-				<CloudDownloadIcon /> Stable
-			</button>
-			<button id="downloadPreview" @click="downloadPreview" @keyup.enter="downloadPreview">
-				<BugIcon /> Preview
-			</button>
-		</div>
-		<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span>
-	</div>
-</template>
-
-<script>
-import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
-import BugIcon from "vue-material-design-icons/Bug.vue";
-import { GITHUB_LATEST_RELEASE, GITHUB_PREVIEW_RELEASE } from "../constants";
-
-export default {
-	components: {
-		CloudDownloadIcon,
-		BugIcon,
-	},
-
-	data() {
-		return {
-			tagName: "",
-			browserDownloadUrl: "",
-			previewTagName: "",
-			previewbrowserDownloadUrl: "",
-		};
-	},
-
-	async mounted() {
-		try {
-			const { data } = await this.$store.dispatch("getStableReleaseData");
-			const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
-			this.$data.tagName = data.tag_name.slice(1);
-			this.$data.browserDownloadUrl = apkAsset.browser_download_url;
-		} catch (e) {
-			console.error(e);
-		}
-		try {
-			const { data } = await this.$store.dispatch("getPreviewReleaseData");
-			const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
-			this.$data.previewTagName = data.tag_name.slice(1);
-			this.$data.previewbrowserDownloadUrl = apkAsset.browser_download_url;
-		} catch (e) {
-			console.error(e);
-		}
-	},
-
-	methods: {
-		downloadStable() {
-			this.$swal({
-				title: "Downloading",
-				html: `Started downloading <strong>Tachiyomi Stable</strong>`,
-				icon: "success",
-				focusConfirm: false,
-				focusCancel: false,
-				timer: 3000,
-				timerProgressBar: true,
-				showClass: {
-					popup: "animate__animated animate__faster animate__pulse",
-				},
-				hideClass: {
-					popup: "animate__animated animate__faster animate__zoomOut",
-				},
-			});
-			window.location.assign(this.$data.browserDownloadUrl || GITHUB_LATEST_RELEASE);
-			window.ga("send", "event", "Action", "Download", "Tachiyomi");
-		},
-		downloadPreview() {
-			this.$swal({
-				icon: "warning",
-				title: "Are you sure?",
-				html:
-					"<strong>Tachiyomi Preview</strong> is not recommended if you're not willing to test for – and endure – issues.",
-				confirmButtonText: "I am sure.",
-				showCloseButton: true,
-				showCancelButton: false,
-				showClass: {
-					popup: "animate__animated animate__headShake",
-				},
-				hideClass: {
-					popup: "animate__animated animate__faster animate__zoomOut",
-				},
-				// eslint-disable-next-line no-shadow
-			}).then((result) => {
-				if (result.value) {
-					this.$swal({
-						icon: "success",
-						title: "Downloading",
-						html: `Started downloading <strong>Tachiyomi Preview</strong>`,
-						confirmButtonText: "Dismiss",
-						showCloseButton: false,
-						showCancelButton: false,
-						timer: 3000,
-						timerProgressBar: true,
-						showClass: {
-							popup: "animate__animated animate__faster animate__pulse",
-						},
-						hideClass: {
-							popup: "animate__animated animate__faster animate__zoomOut",
-						},
-					});
-					window.location.assign(this.$data.previewbrowserDownloadUrl || GITHUB_PREVIEW_RELEASE);
-					window.ga("send", "event", "Action", "Download", "Tachiyomi Preview");
-				}
-			});
-		},
-	},
-};
-</script>
-
-<style lang="stylus">
-#DownloadButtons
-	text-align center
-	button
-		display inline-block
-		margin 0.5em 0
-		padding 1em 1em
-		width 9em
-		background $accentColor
-		border none
-		border-radius 4px
-		color #fff
-		font-family inherit
-		font-size 1em
-		font-weight 400
-		letter-spacing 0.02em
-		line-height 1
-		transition background-color .1s ease
-		text-decoration none
-		text-transform uppercase
-		cursor pointer
-		&:hover
-			background darken($accentColor, 10%)
-		&:focus
-			box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
-			outline none
-	.downloadContainer
-		user-select none
-		#download
-			&Stable
-				background-color $accentColor
-				&:hover
-					background-color lighten($accentColor, 10%)
-			&Preview
-				background-color $accentColorSecondary
-				&:hover
-					background-color lighten($accentColorSecondary, 10%)
-	.versionNotice
-		font-size 0.9rem
-</style>
+<template>
+	<div id="DownloadButtons">
+		<el-button type="success" icon="el-icon-download" @click="downloadStable" @keyup.enter="downloadStable"
+			><span class="spacing">Stable</span><br /><span class="downloadTag">{{
+				this.$data.tagName
+			}}</span></el-button
+		>
+		<el-button type="warning" icon="el-icon-cpu" @click="downloadPreview" @keyup.enter="downloadPreview"
+			><span class="spacing">Preview</span><br /><span class="downloadTag">{{
+				this.$data.previewTagName
+			}}</span></el-button
+		>
+		<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span>
+	</div>
+</template>
+
+<script>
+import { GITHUB_STABLE_RELEASE, GITHUB_PREVIEW_RELEASE } from "../constants";
+
+export default {
+	data() {
+		return {
+			tagName: "0.00.0",
+			browserDownloadUrl: "",
+			previewTagName: "r0000",
+			previewbrowserDownloadUrl: "",
+		};
+	},
+
+	async mounted() {
+		try {
+			const { data } = await this.$store.dispatch("getStableReleaseData");
+			const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
+			this.$data.tagName = data.tag_name.slice(1);
+			this.$data.browserDownloadUrl = apkAsset.browser_download_url;
+		} catch (e) {
+			console.error(e);
+		}
+		try {
+			const { data } = await this.$store.dispatch("getPreviewReleaseData");
+			const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
+			this.$data.previewTagName = data.tag_name;
+			this.$data.previewbrowserDownloadUrl = apkAsset.browser_download_url;
+		} catch (e) {
+			console.error(e);
+		}
+	},
+
+	methods: {
+		downloadStable() {
+			this.$swal({
+				title: "Downloading",
+				html: `Started downloading <strong>Tachiyomi Stable</strong>`,
+				icon: "success",
+				focusConfirm: false,
+				focusCancel: false,
+				timer: 3000,
+				timerProgressBar: true,
+				showClass: {
+					popup: "animate__animated animate__faster animate__pulse",
+				},
+				hideClass: {
+					popup: "animate__animated animate__faster animate__zoomOut",
+				},
+			});
+			window.location.assign(this.$data.browserDownloadUrl || GITHUB_STABLE_RELEASE);
+			window.ga("send", "event", "Action", "Download", "Tachiyomi");
+		},
+		downloadPreview() {
+			this.$swal({
+				icon: "warning",
+				title: "Are you sure?",
+				html:
+					"<strong>Tachiyomi Preview</strong> is not recommended if you're not willing to test for – and endure – issues.",
+				confirmButtonText: "I am sure.",
+				showCloseButton: true,
+				showCancelButton: false,
+				showClass: {
+					popup: "animate__animated animate__headShake",
+				},
+				hideClass: {
+					popup: "animate__animated animate__faster animate__zoomOut",
+				},
+				// eslint-disable-next-line no-shadow
+			}).then((result) => {
+				if (result.value) {
+					this.$swal({
+						icon: "success",
+						title: "Downloading",
+						html: `Started downloading <strong>Tachiyomi Preview</strong>`,
+						confirmButtonText: "Dismiss",
+						showCloseButton: false,
+						showCancelButton: false,
+						timer: 3000,
+						timerProgressBar: true,
+						showClass: {
+							popup: "animate__animated animate__faster animate__pulse",
+						},
+						hideClass: {
+							popup: "animate__animated animate__faster animate__zoomOut",
+						},
+					});
+					window.location.assign(this.$data.previewbrowserDownloadUrl || GITHUB_PREVIEW_RELEASE);
+					window.ga("send", "event", "Action", "Download", "Tachiyomi Preview");
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style lang="stylus">
+#DownloadButtons
+	text-align center
+	.el-button
+		font-size 1.125rem
+		margin 0.1em !important
+		padding 12px 32px
+		width 10em
+		&:focus
+			box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
+			outline none
+		&--success
+			background-color $accentColor
+			border-color $accentColor
+			&:hover
+				background-color lighten($accentColor, 10%)
+				border-color lighten($accentColor, 10%)
+			.downloadTag
+				color lighten($accentColor, 75%)
+		&--warning
+			background-color $accentColorSecondary
+			border-color $accentColorSecondary
+			&:hover
+				background-color lighten($accentColorSecondary, 10%)
+				border-color  lighten($accentColorSecondary, 10%)
+			.downloadTag
+				color lighten($accentColorSecondary, 75%)
+		.spacing
+			margin-right 16px
+		.downloadTag
+			font-size 0.7em
+			margin-top 2px
+	.versionNotice
+		display block
+		font-size 0.9rem
+	@media (max-width: $MQMobile)
+		.el-button
+			width 8.2em
+			padding 12px 28px
+</style>
diff --git a/src/.vuepress/components/ReleaseDate.vue b/src/.vuepress/components/ReleaseDate.vue
index b963b8a7..e8a6b27a 100644
--- a/src/.vuepress/components/ReleaseDate.vue
+++ b/src/.vuepress/components/ReleaseDate.vue
@@ -1,23 +1,50 @@
 <template>
-	<div class="buildTime">
-		<span :title="releasePublishExact">{{ releasePublishRelative }}</span>
+	<div v-if="stable" class="buildTime">
+		<span :title="stablePublishExact">{{ stablePublishRelative }}</span>
 	</div>
+	<div v-else-if="preview" class="buildTime">
+		<span :title="previewPublishExact">{{ previewPublishRelative }}</span>
+	</div>
+	<span v-else>You need to specify props.</span>
 </template>
 
 <script>
+/**
+ * Code example: <ReleaseDate preview />
+ */
 export default {
+	props: {
+		stable: {
+			type: Boolean,
+			default: false,
+		},
+		preview: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
 	data() {
 		return {
-			releasePublishRelative: "at an unknown time",
-			releasePublishExact: "Can't connect to GitHub.",
+			stablePublishRelative: "at an unknown time",
+			stablePublishExact: "Can't connect to GitHub.",
+			previewPublishRelative: "at an unknown time",
+			previewPublishExact: "Can't connect to GitHub.",
 		};
 	},
 
 	async mounted() {
 		try {
 			const { data } = await this.$store.dispatch("getStableReleaseData");
-			this.$data.releasePublishRelative = this.$moment(data.published_at).fromNow();
-			this.$data.releasePublishExact = this.$moment(data.published_at).toString();
+			this.$data.stablePublishRelative = this.$moment(data.published_at).fromNow();
+			this.$data.stablePublishExact = this.$moment(data.published_at).format("dddd, MMMM Do YYYY [at] HH:mm");
+		} catch (e) {
+			console.error(e);
+		}
+		try {
+			const { data } = await this.$store.dispatch("getPreviewReleaseData");
+			this.$data.previewPublishRelative = this.$moment(data.published_at).fromNow();
+			this.$data.previewPublishExact = this.$moment(data.published_at).format("dddd, MMMM Do YYYY [at] HH:mm");
 		} catch (e) {
 			console.error(e);
 		}
diff --git a/src/.vuepress/components/VersionTag.vue b/src/.vuepress/components/VersionTag.vue
index f9526fd2..87930843 100644
--- a/src/.vuepress/components/VersionTag.vue
+++ b/src/.vuepress/components/VersionTag.vue
@@ -1,23 +1,47 @@
 <template>
-	<span v-if="fileName" class="fileNameContainer" title="File name">
+	<span v-if="stable" class="downloadTag">{{ this.$data.tagName }}</span>
+	<span v-else-if="fileName" class="fileNameContainer" title="File name">
 		<MaterialIcon class="fileNameIcon" icon="get_app" />
 		<span class="fileName">tachiyomi-v{{ this.$data.tagName }}.apk</span>
 		<slot />
 	</span>
-	<span v-else class="downloadTag">{{ this.$data.tagName }}</span>
+	<span v-else-if="preview" class="downloadTag">{{ this.$data.previewTagName }}</span>
+	<span v-else-if="previewFileName" class="fileNameContainer" title="File name">
+		<MaterialIcon class="fileNameIcon" icon="get_app" />
+		<span class="fileName">tachiyomi-{{ this.$data.previewTagName }}.apk</span>
+		<slot />
+	</span>
+	<span v-else>You need to specify props.</span>
 </template>
 
 <script>
+/**
+ * Code example: <VersionTag preview />
+ */
 export default {
 	props: {
+		stable: {
+			type: Boolean,
+			default: false,
+		},
 		fileName: {
 			type: Boolean,
+			default: false,
+		},
+		preview: {
+			type: Boolean,
+			default: false,
+		},
+		previewFileName: {
+			type: Boolean,
+			default: false,
 		},
 	},
 
 	data() {
 		return {
-			tagName: "0.0.0",
+			tagName: "0.00.0",
+			previewTagName: "r0000",
 		};
 	},
 
@@ -28,6 +52,12 @@ export default {
 		} catch (e) {
 			console.error(e);
 		}
+		try {
+			const { data } = await this.$store.dispatch("getPreviewReleaseData");
+			this.$data.previewTagName = data.tag_name;
+		} catch (e) {
+			console.error(e);
+		}
 	},
 };
 </script>
diff --git a/src/.vuepress/constants.js b/src/.vuepress/constants.js
index 69fd9650..b0bce710 100644
--- a/src/.vuepress/constants.js
+++ b/src/.vuepress/constants.js
@@ -1,5 +1,5 @@
 export const GITHUB_EXTENSION_JSON = "https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/index.json";
-export const GITHUB_LATEST_RELEASE = "https://github.com/inorichi/tachiyomi/releases/latest";
-export const GITHUB_LATEST_API = "https://api.github.com/repos/inorichi/tachiyomi/releases/latest";
+export const GITHUB_STABLE_API = "https://api.github.com/repos/inorichi/tachiyomi/releases/latest";
+export const GITHUB_STABLE_RELEASE = "https://github.com/inorichi/tachiyomi/releases/latest";
 export const GITHUB_PREVIEW_API = "https://api.github.com/repos/tachiyomiorg/android-app-preview/releases/latest";
 export const GITHUB_PREVIEW_RELEASE = "https://github.com/tachiyomiorg/android-app-preview/releases/latest";
diff --git a/src/.vuepress/store/index.js b/src/.vuepress/store/index.js
index ce978463..a5e62a5b 100644
--- a/src/.vuepress/store/index.js
+++ b/src/.vuepress/store/index.js
@@ -2,7 +2,7 @@ import Vue from "vue";
 import Vuex from "vuex";
 import axios from "axios";
 
-import { GITHUB_LATEST_API, GITHUB_PREVIEW_API } from "../constants";
+import { GITHUB_STABLE_API, GITHUB_PREVIEW_API } from "../constants";
 
 const worker = (function () {
 	const networkMap = new Map();
@@ -73,22 +73,22 @@ const worker = (function () {
 	}
 
 	return {
-		getPreviewData(store, name) {
+		getStableData(store, name) {
 			return new Promise((resolve, reject) => {
-				_getData(store, name, "setPreviewReleaseData", GITHUB_PREVIEW_API)
+				_getData(store, name, "setStableReleaseData", GITHUB_STABLE_API)
 					.then(() => {
-						resolve(store.state.preview);
+						resolve(store.state.stable);
 					})
 					.catch((reason) => {
 						reject(reason);
 					});
 			});
 		},
-		getStableData(store, name) {
+		getPreviewData(store, name) {
 			return new Promise((resolve, reject) => {
-				_getData(store, name, "setStableReleaseData", GITHUB_LATEST_API)
+				_getData(store, name, "setPreviewReleaseData", GITHUB_PREVIEW_API)
 					.then(() => {
-						resolve(store.state.stable);
+						resolve(store.state.preview);
 					})
 					.catch((reason) => {
 						reject(reason);
diff --git a/src/download/README.md b/src/download/README.md
index 795afbcb..0a89e491 100644
--- a/src/download/README.md
+++ b/src/download/README.md
@@ -8,7 +8,7 @@ lang: en-US
 ---
 
 # Download
-Download the latest stable version of **Tachiyomi** (**<VersionTag downloadTag/>**) which released <ReleaseDate />.
+Download the latest stable version of **Tachiyomi** that released <ReleaseDate stable /> or the preview version that released <ReleaseDate preview />.
 
 <DownloadButtons />