Commit 9fddbb11 authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '578-create-account-page' into 'master'

Resolve "create profile page"

See merge request !151
parents bb01c27a 4188e9df
......@@ -6,9 +6,9 @@
:expand-icon-class="{'hidden': defaultOpened}"
:group="group"
:label="label"
:class="{'mb-border-b-light': !noBorder}"
:class="[{'mb-border-b-light': !noBorder}, 'mb-border-a-transparent']"
:default-opened="defaultOpened"
:header-class="['mb-subheadline', slimHeaderObj]"
:header-class="['mb-subheadline', slimHeaderObj, headerClass]"
)
.q-pb-xl.q-px-md
slot
......@@ -18,7 +18,7 @@
<script>
export default {
name: 'MbExpansionItem',
props: ['label', 'icon', 'group', 'defaultOpened', 'noBorder', 'slimHeader'],
props: ['label', 'icon', 'group', 'defaultOpened', 'noBorder', 'slimHeader', 'headerClass'],
computed: {
slimHeaderObj () {
return this.slimHeader ? 'q-py-lg' : 'q-py-xl'
......
......@@ -25,6 +25,7 @@ hide-hint
:placeholder="placeholder"
:debouce="debounce"
:rules="rules"
:password="password || false"
)
template(v-if="iconName" v-slot:prepend)
q-icon(:name="iconName")
......@@ -49,11 +50,12 @@ export default {
'iconName',
'placeholder',
'debounce',
'rules'
'rules',
'password'
],
data () {
return {
text: this.model || '',
text: this.value || '',
focus: false
}
},
......
......@@ -110,3 +110,6 @@
&:hover
border-color $mb-white
// general -------------------------------------------------------------------------------------------------------------
.mb-border-a-transparent
border $border-width solid transparent
......@@ -211,12 +211,14 @@
span.text-mb-green-100 Boolean
div clearable :
span.text-mb-green-100 Boolean
div iconName :k
div iconName :
span.text-mb-green-100 String
div placeholder :
span.text-mb-green-100 String
div debounce :
span.text-mb-green-100 Number
div password :
span.text-mb-green-100 Boolean
div rules :
span.text-mb-green-100 Function / Array
template(v-slot:examples)
......@@ -723,6 +725,8 @@
span.text-mb-green-100 boolean
div slim-header :
span.text-mb-green-100 boolean
div header-class :
span.text-mb-green-100 string
template(v-slot:slots)
.text-mb-red-100 default (unnamed)
template(v-slot:examples)
......
<template lang="pug">
q-page
.mb-user-inner
// user related --------------------------------------------------------------------------------------------------
mb-expansion-item(
:label="$t('general.user')"
:default-opened="true"
:no-border="true"
:header-class="'text-center'"
)
template(v-for="(module, i) in userModules")
mb-expansion-item.sub-expansion-item(
:label="$t(module.label)"
:slim-header="true"
:no-border="true"
:class="{'q-mb-md': i < userModules.length - 1}"
)
.q-pt-xl.q-px-lg
component(:is="`Account${module.name}Module`")
// system settings -----------------------------------------------------------------------------------------------
mb-expansion-item(
:label="$t('general.systemSettings')"
:default-opened="true"
:no-border="true"
:header-class="'text-center'"
)
template(v-for="(module, i) in systemSettingsModules")
mb-expansion-item.sub-expansion-item(
:label="$t(module.label)"
:slim-header="true"
:no-border="i === systemSettingsModules.length - 1"
:class="{'q-mb-md': i < userModules.length - 1}"
)
.q-pt-xl.q-px-lg
component(:is="`Account${module.name}Module`")
</template>
<script>
import AccountAvatarModule from 'pages/account/modules/AccountAvatarModule'
import AccountThemeModule from 'pages/account/modules/AccountThemeModule'
import AccountUserInformationModule from 'pages/account/modules/AccountUserInformationModule'
import AccountGroupsModule from 'pages/account/modules/AccountGroupsModule'
import AccountSecuritySettingsModule from 'pages/account/modules/AccountSecuritySettingsModule'
// import AccountStatsModule from 'pages/account/modules/AccountStatsModule'
export default {
name: 'settings',
components: {
// AccountStatsModule,
AccountSecuritySettingsModule,
AccountGroupsModule,
AccountUserInformationModule,
AccountThemeModule,
AccountAvatarModule
},
data () {
return {
userModules: [{
label: 'general.avatar',
name: 'Avatar'
}, {
label: 'general.userInformation',
name: 'UserInformation'
}, {
label: 'general.groups',
name: 'Groups'
}, {
label: 'general.securitySettings',
name: 'SecuritySettings'
/* }, {
label: 'general.stats',
name: 'Stats' */
}],
systemSettingsModules: [{
label: 'general.theme',
name: 'Theme'
}]
}
}
}
</script>
<style scoped lang="stylus">
.mb-user-inner
max-width 680px
margin 0 auto
border-radius $border-radius
.sub-expansion-item
&.q-expansion-item--expanded
border-color $mb-dark-20
</style>
<template lang="pug">
.account-avatar-module
.text-center
mb-name-tag(
@click.native="model.avatar = true"
:data="{username: model.username, realname: model.realname, backgroundColor: model.color}"
:size="'lg'"
:editable="true"
:tooltip="true"
)
mb-dialog(
v-model="model.avatar"
width="50vw"
label="Change Style"
)
// username --------------------------------------------------------------------------------------------------
.q-mb-xl
.row
.col-xs-12.col-md-3.text-subtitle1.q-mb-sm.text-bold
| Username
.col-xs-12.col-md-9
mb-input-text(
:label="'Username'"
:model="model.username"
@input="onUsernameInput"
)
// avatar ----------------------------------------------------------------------------------------------------
.q-my-xl
.row
.col-xs-12.col-md-3.text-subtitle1.q-mb-sm.text-bold
| Avatar
.col-xs-12.col-md-9
q-avatar(square)
img(src="https://picsum.photos/200/200")
mb-btn.q-ml-md(:label="'Upload Image'")
// name tag background color -------------------------------------------------------------------------------------
.q-mt-xl
.row
.col-xs-12.col-md-3.text-subtitle1.q-mb-sm.text-bold
| Color
.col-xs-12.col-md-9.q-pa-lg(:style="{backgroundColor: model.color}")
q-color(
format-model="rgba"
v-model="model.color"
no-header
no-footer
style="margin: 0 auto;"
)
</template>
<script>
export default {
name: 'AccountAvatarModule',
data () {
return {
model: {
avatar: false,
color: 'rgba(100, 130, 20, 1)',
realname: 'Jean Böhm',
username: 'randomUsername'
}
}
},
methods: {
onUsernameInput (val) {
this.model.username = val
}
}
}
</script>
<style scoped lang="stylus">
</style>
<template lang="pug">
.account-groups-module
| groups
</template>
<script>
export default {
name: 'AccountGroupsModule'
}
</script>
<style scoped lang="stylus">
</style>
<template lang="pug">
.account-security-settings-module
// input fields ----------------------------------------------------------------------------------------------------
// password
mb-input-text.q-mb-lg.q-mt-md(
:value="model.password"
:type="'password'"
:label="'Password'"
)
// confirm password
mb-input-text.q-mb-lg.q-mt-md(
:value="model.confirm"
:type="'password'"
:label="'Password confirmation'"
)
// buttons ---------------------------------------------------------------------------------------------------------
.text-center
mb-btn.q-mx-sm(:label="'save'")
mb-btn.q-mx-sm(:label="'cancel'")
</template>
<script>
export default {
name: 'AccountSecuritySettingsModule',
data () {
return {
model: {
password: '',
confirm: ''
}
}
}
}
</script>
<style scoped lang="stylus">
</style>
<template lang="pug">
.account-stats-module
| stats
</template>
<script>
export default {
name: 'AccountStatsModule'
}
</script>
<style scoped lang="stylus">
</style>
<template lang="pug">
q-page.q-pa-lg
.text-h4.q-ma-md.q-mb-lg.page-title {{ $t('settings.edit.title') }}
q-form.q-gutter-md.full-width
q-select(:value="darkMode" :options="darkModeOptions" emit-value map-options :label="$t('fields.dark_mode')" @input="onDarkMode")
.account-theme-module
q-select(
:value="darkMode"
:options="darkModeOptions"
emit-value map-options
:label="$t('fields.dark_mode')"
@input="onDarkMode"
)
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'settings',
name: 'AccountThemeModule',
computed: {
...mapGetters({
darkMode: 'settings/getDarkMode',
......@@ -23,6 +31,5 @@
}
</script>
<style scoped>
<style scoped lang="stylus">
</style>
<template lang="pug">
.account-user-information-module
// input fields ----------------------------------------------------------------------------------------------------
// realname
mb-input-text.q-mb-lg.q-mt-md(
:value="model.realname"
@input="onRealnameInput"
label="Realname"
)
// username
mb-input-text.q-mb-lg.q-mt-md(
:value="model.username"
label="Username"
)
// organization
mb-input-text.q-mb-lg.q-mt-md(
:value="model.organization"
label="Organization"
)
// email
mb-input-text.q-mb-lg.q-mt-md(
:value="model.email"
label="E-Mail"
)
// buttons ---------------------------------------------------------------------------------------------------------
.text-center
mb-btn.q-mx-sm(label="save")
mb-btn.q-mx-sm(label="cancel")
</template>
<script>
export default {
name: 'AccountUserInformationModule',
data () {
return {
model: {
realname: 'Jean Böhm',
username: 'randomUsername',
organization: 'Motion Bank',
email: 'abc@motionbank.org'
}
}
},
methods: {
onRealnameInput (val) {
this.model.realname = val
}
}
}
</script>
<style scoped lang="stylus">
</style>
......@@ -14,9 +14,9 @@ const routes = [
component: () => import('pages/index')
},
{
path: 'settings',
name: 'site.settings',
component: () => import('pages/settings')
path: 'account',
name: 'site.account',
component: () => import('pages/account/account')
},
{
path: 'components-overview',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment