From 5859ac7a58b2270cbef13398e8b53117483addd7 Mon Sep 17 00:00:00 2001 From: Johan Novak Date: Thu, 17 Jun 2021 22:03:12 -0700 Subject: [PATCH] General UI Improvement (again) (#255) * Add and fix some stuff * Add warning when leaving to `mod/create` * Fix mods/create not working --- assets/styles/highlightjs.scss | 11 ++--------- pages/mod/_id.vue | 5 +++-- pages/mod/_id/edit.vue | 22 ++++++++++++++++++++++ pages/mod/_id/newversion.vue | 22 ++++++++++++++++++++++ pages/mod/_id/version/_version/edit.vue | 19 +++++++++++++++++++ pages/mod/_id/version/_version/index.vue | 11 ++++++++--- pages/mod/_id/versions.vue | 21 ++++++++++++++------- pages/mod/create.vue | 22 ++++++++++++++++++++++ pages/mods.vue | 3 ++- 9 files changed, 114 insertions(+), 22 deletions(-) diff --git a/assets/styles/highlightjs.scss b/assets/styles/highlightjs.scss index 149c73d8..22bb8263 100644 --- a/assets/styles/highlightjs.scss +++ b/assets/styles/highlightjs.scss @@ -1,10 +1,3 @@ -.hljs { - display: block; - overflow-x: auto; - padding: 0.5rem !important; - background: #F0F0F0 -} - .hljs, .hljs-subst { color: #444 @@ -85,7 +78,7 @@ pre { border-radius: 2em; border-color: var(--color-brand); overflow-x: hidden; - + code { line-height: 100%; padding: 0.2em; @@ -93,4 +86,4 @@ pre { word-break: normal; font-family: monospace; } -} \ No newline at end of file +} diff --git a/pages/mod/_id.vue b/pages/mod/_id.vue index 4f55ed98..ddb1570e 100644 --- a/pages/mod/_id.vue +++ b/pages/mod/_id.vue @@ -707,8 +707,6 @@ export default { svg { padding: 0.25rem; - border-radius: 50%; - background-color: var(--color-button-bg); } } } @@ -749,6 +747,9 @@ export default { border-radius: 2rem; background-color: var(--color-button-bg); margin-right: var(--spacing-card-sm); + &:hover { + background-color: var(--color-button-bg-hover); + } svg { width: 1.25rem; margin: auto; diff --git a/pages/mod/_id/edit.vue b/pages/mod/_id/edit.vue index a025846c..da11f7c7 100644 --- a/pages/mod/_id/edit.vue +++ b/pages/mod/_id/edit.vue @@ -394,6 +394,8 @@ export default { iconChanged: false, sideTypes: ['Required', 'Optional', 'Unsupported'], + + isEditing: true, } }, watch: { @@ -412,6 +414,25 @@ export default { } }, }, + mounted() { + function preventLeave(e) { + e.preventDefault() + e.returnValue = '' + } + window.addEventListener('beforeunload', preventLeave) + this.$once('hook:beforeDestroy', () => { + window.removeEventListener('beforeunload', preventLeave) + }) + }, + beforeRouteLeave(to, from, next) { + if ( + this.isEditing && + !window.confirm('Are you sure that you want to leave without saving?') + ) { + return + } + next() + }, created() { this.$emit('update:link-bar', [['Edit', 'edit']]) }, @@ -464,6 +485,7 @@ export default { ) } + this.isEditing = false await this.$router.replace( `/mod/${this.mod.slug ? this.mod.slug : this.mod.id}` ) diff --git a/pages/mod/_id/newversion.vue b/pages/mod/_id/newversion.vue index ec9c0161..4f126488 100644 --- a/pages/mod/_id/newversion.vue +++ b/pages/mod/_id/newversion.vue @@ -154,11 +154,31 @@ export default { data() { return { createdVersion: {}, + isEditing: true, } }, created() { this.$emit('update:link-bar', [['New Version', 'newversion']]) }, + mounted() { + function preventLeave(e) { + e.preventDefault() + e.returnValue = '' + } + window.addEventListener('beforeunload', preventLeave) + this.$once('hook:beforeDestroy', () => { + window.removeEventListener('beforeunload', preventLeave) + }) + }, + beforeRouteLeave(to, from, next) { + if ( + this.isEditing && + !window.confirm('Are you sure that you want to leave without saving?') + ) { + return + } + next() + }, methods: { async createVersion() { this.$nuxt.$loading.start() @@ -192,6 +212,8 @@ export default { }, }) ).data + + this.isEditing = false await this.$router.push( `/mod/${this.mod.slug ? this.mod.slug : data.mod_id}/version/${ data.id diff --git a/pages/mod/_id/version/_version/edit.vue b/pages/mod/_id/version/_version/edit.vue index 242e0fcd..253e3936 100644 --- a/pages/mod/_id/version/_version/edit.vue +++ b/pages/mod/_id/version/_version/edit.vue @@ -165,6 +165,7 @@ export default { data() { return { version: {}, + isEditing: true, } }, mounted() { @@ -173,6 +174,23 @@ export default { [this.version.name, 'versions/' + this.version.id], ['Edit Version', 'versions/' + this.version.id + '/edit'], ]) + function preventLeave(e) { + e.preventDefault() + e.returnValue = '' + } + window.addEventListener('beforeunload', preventLeave) + this.$once('hook:beforeDestroy', () => { + window.removeEventListener('beforeunload', preventLeave) + }) + }, + beforeRouteLeave(to, from, next) { + if ( + this.isEditing && + !window.confirm('Are you sure that you want to leave without saving?') + ) { + return + } + next() }, methods: { async saveVersion() { @@ -184,6 +202,7 @@ export default { this.version, this.$auth.headers ) + this.isEditing = false await this.$router.replace( `/mod/${this.mod.slug ? this.mod.slug : this.mod.id}/version/${ this.version.id diff --git a/pages/mod/_id/version/_version/index.vue b/pages/mod/_id/version/_version/index.vue index e7cc60c2..d37439a0 100644 --- a/pages/mod/_id/version/_version/index.vue +++ b/pages/mod/_id/version/_version/index.vue @@ -60,7 +60,7 @@ { + window.removeEventListener('beforeunload', preventLeave) + }) + }, + beforeRouteLeave(to, from, next) { + if ( + this.isEditing && + !window.confirm('Are you sure that you want to leave without saving?') + ) { + return + } + next() + }, methods: { async createDraft() { this.draft = true @@ -672,6 +693,7 @@ export default { }, }) + this.isEditing = false await this.$router.replace('/dashboard/projects') } catch (err) { let description = err.response.data.description diff --git a/pages/mods.vue b/pages/mods.vue index 8b4a07a4..3ca787cc 100644 --- a/pages/mods.vue +++ b/pages/mods.vue @@ -70,7 +70,7 @@ ethical-ads-small ethical-ads-big /> -
+

Loading...

@@ -376,6 +376,7 @@ export default { ExitIcon, LogoAnimated, }, + fetchOnServer: false, async fetch() { if (this.$route.query.q) this.query = this.$route.query.q if (this.$route.query.f) {