mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
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
This commit is contained in:
Soitora
GitHub
parent
cf991ceec3
commit
6e63c6ae31
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 />
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user