mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Improved UI
- add buefy for slider and checkboxes - update/translate text - add warning - transition
This commit is contained in:
Matt Rider
parent
bf352dca92
commit
6e420d68d1
@ -10,7 +10,7 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
&::before {
|
||||
@include border-radius($border-radius-x-large);
|
||||
box-shadow: inset 0 0 0 5px $color-danger;
|
||||
content: "";
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -102,10 +102,10 @@ hr {
|
||||
height: 1px !important;
|
||||
}
|
||||
|
||||
[class$=menu-trigger] {
|
||||
[class$='menu-trigger'] {
|
||||
user-select: none;
|
||||
}
|
||||
[class$=menu-popover] {
|
||||
[class$='menu-popover'] {
|
||||
display: inline-block;
|
||||
|
||||
nav {
|
||||
@ -145,10 +145,11 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
[class$="menu-popover"] {
|
||||
[class$='menu-popover'] {
|
||||
min-width: 130px;
|
||||
|
||||
a, button {
|
||||
a,
|
||||
button {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -2,57 +2,95 @@
|
||||
<div>
|
||||
<ds-card hover>
|
||||
<ds-space />
|
||||
<ds-form v-model="formData">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="10%" />
|
||||
<ds-flex-item>
|
||||
<ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="80%">
|
||||
<ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
|
||||
</ds-flex-item>
|
||||
<ds-container>
|
||||
<ds-space />
|
||||
<ds-heading tag="h3">
|
||||
This is a destructive action and to proceed you must choose to take this action by
|
||||
selecting the 'I really want to delete my account' from the dropdown This cannot be
|
||||
undone, please consider your actions carefully!
|
||||
</ds-heading>
|
||||
</ds-container>
|
||||
</ds-flex>
|
||||
<ds-space />
|
||||
<ds-section>
|
||||
<ds-flex>
|
||||
<ds-flex-item width="5%" />
|
||||
<ds-flex-item>
|
||||
<ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="80%">
|
||||
<ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
|
||||
</ds-flex-item>
|
||||
<ds-container>
|
||||
<ds-space />
|
||||
<ds-heading tag="h4">{{ $t('settings.delete.accountDescription') }}</ds-heading>
|
||||
</ds-container>
|
||||
</ds-flex>
|
||||
<ds-space />
|
||||
<ds-container>
|
||||
<transition name="slide-up">
|
||||
<div v-if="deleteEnabled">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<b-checkbox
|
||||
type="is-danger"
|
||||
:disabled="!currentUser.contributionsCount"
|
||||
v-model="formData.deleteContributions"
|
||||
>
|
||||
{{ $t('settings.delete.countPosts', { count: currentUser.contributionsCount }) }}
|
||||
</b-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<b-checkbox
|
||||
type="is-danger"
|
||||
:disabled="!currentUser.commentsCount"
|
||||
v-model="formData.deleteComments"
|
||||
>
|
||||
{{ $t('settings.delete.countComments', { count: currentUser.commentsCount }) }}
|
||||
</b-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message is-danger">
|
||||
<div class="message-body" v-html="$t('settings.delete.accountWarning')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</ds-container>
|
||||
<template slot="footer">
|
||||
<ds-container>
|
||||
<ds-flex>
|
||||
<ds-flex-item width="50%">
|
||||
<ds-select
|
||||
v-model="accept"
|
||||
:options="['', 'I really want to delete my account']"
|
||||
@input="enableDeletion"
|
||||
placeholder="Are you sure you want to delete your account?"
|
||||
/>
|
||||
<ds-flex-item width="40%">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<b-switch type="is-danger" v-model="deleteEnabled"></b-switch>
|
||||
</div>
|
||||
</div>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%" />
|
||||
<ds-flex-item width="20%" />
|
||||
<ds-flex-item>
|
||||
<ds-button icon="trash" danger :disabled="disabled">
|
||||
<ds-button icon="trash" danger :disabled="isLoading || !deleteEnabled">
|
||||
{{ $t('settings.delete.name') }}
|
||||
</ds-button>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-section>
|
||||
</ds-form>
|
||||
</ds-container>
|
||||
</template>
|
||||
</ds-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'DeleteAccount',
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
accept: null,
|
||||
disabled: true,
|
||||
formData: {
|
||||
deleteContributions: false,
|
||||
deleteComments: false,
|
||||
},
|
||||
deleteEnabled: false,
|
||||
isLoading: false,
|
||||
countPosts: 0,
|
||||
countComments: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
enableDeletion() {
|
||||
if (this.accept === 'I really want to delete my account') {
|
||||
|
||||
@ -74,7 +74,11 @@
|
||||
"name": "Download Data"
|
||||
},
|
||||
"delete": {
|
||||
"name": "Delete my User Account"
|
||||
"name": "Delete my User Account",
|
||||
"countPosts": "Delete my {count} posts",
|
||||
"countComments": "Delete my {count} comments",
|
||||
"accountDescription": "Be aware that your Post and Comments are important to our community. If you still choose to delete those you have to mark them below.",
|
||||
"accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts... after deleting your account!"
|
||||
},
|
||||
"organizations": {
|
||||
"name": "My Organizations"
|
||||
|
||||
@ -81,6 +81,7 @@ module.exports = {
|
||||
{ src: '~/plugins/v-tooltip.js', ssr: false },
|
||||
{ src: '~/plugins/izi-toast.js', ssr: false },
|
||||
{ src: '~/plugins/vue-filters.js' },
|
||||
{ src: '~/plugins/buefy.js' },
|
||||
],
|
||||
|
||||
router: {
|
||||
|
||||
@ -57,6 +57,7 @@
|
||||
"accounting": "~0.4.1",
|
||||
"apollo-cache-inmemory": "~1.5.1",
|
||||
"apollo-client": "~2.6.1",
|
||||
"buefy": "^0.7.7",
|
||||
"cookie-universal-nuxt": "~2.0.14",
|
||||
"cross-env": "~5.2.0",
|
||||
"date-fns": "2.0.0-alpha.29",
|
||||
|
||||
12
webapp/plugins/buefy.js
Normal file
12
webapp/plugins/buefy.js
Normal file
@ -0,0 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import Buefy from 'buefy'
|
||||
import 'buefy/dist/buefy.css'
|
||||
|
||||
Vue.use(Buefy, {
|
||||
defaultIconPack: 'fa',
|
||||
defaultTooltipAnimated: true,
|
||||
defaultTooltipType: 'is-black',
|
||||
defaultToastDuration: 6000,
|
||||
defaultSnackbarDuration: 5000,
|
||||
defaultNoticeQueue: true,
|
||||
})
|
||||
@ -79,6 +79,8 @@ export const actions = {
|
||||
role
|
||||
about
|
||||
locationName
|
||||
contributionsCount
|
||||
commentsCount
|
||||
socialMedia {
|
||||
id
|
||||
url
|
||||
|
||||
@ -2689,6 +2689,13 @@ bser@^2.0.0:
|
||||
dependencies:
|
||||
node-int64 "^0.4.0"
|
||||
|
||||
buefy@^0.7.7:
|
||||
version "0.7.7"
|
||||
resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.7.7.tgz#0e0dea84e776959bf2c23110541d67a94eaaa1de"
|
||||
integrity sha512-UuPD+/749s6XzRL2INoJxykOygcBo1pVlLlSJ7wodY228LGOYsURXSkMrCxeemwhvWzSq/UJ+D8X9BkyIw6Tww==
|
||||
dependencies:
|
||||
bulma "0.7.5"
|
||||
|
||||
buffer-equal-constant-time@1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
|
||||
@ -2723,6 +2730,11 @@ builtin-status-codes@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
|
||||
integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
|
||||
|
||||
bulma@0.7.5:
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.5.tgz#35066c37f82c088b68f94450be758fc00a967208"
|
||||
integrity sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==
|
||||
|
||||
busboy@^0.3.1:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.3.1.tgz#170899274c5bf38aae27d5c62b71268cd585fd1b"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user