mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 15:17:25 +01:00
Began styling member modal
This commit is contained in:
Keith Holliday
committed by
Matteo Pagliazzi
Matteo Pagliazzi
parent
cb5ac9014e
commit
17c0f795cc
@@ -1,24 +1,6 @@
|
||||
<template lang="pug">
|
||||
#app-header.row
|
||||
avatar#header-avatar(:user="user")
|
||||
div
|
||||
span.character-name {{user.profile.name}}
|
||||
span.character-level Lvl {{user.stats.lvl}}
|
||||
.progress-container.d-flex
|
||||
img.icon(src="~assets/header/png/health@3x.png")
|
||||
.progress
|
||||
.progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
|
||||
span {{user.stats.hp | round}} / {{MAX_HEALTH}}
|
||||
.progress-container.d-flex
|
||||
img.icon(src="~assets/header/png/experience@3x.png")
|
||||
.progress
|
||||
.progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
||||
span {{user.stats.exp | round}} / {{toNextLevel}}
|
||||
.progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
|
||||
img.icon(src="~assets/header/png/magic@3x.png")
|
||||
.progress
|
||||
.progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
||||
span {{user.stats.mp | round}} / {{maxMP}}
|
||||
user-list-detail
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -36,86 +18,14 @@ $header-text-color: #D5C8FF;
|
||||
height: 192px;
|
||||
color: $header-text-color;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 32px;
|
||||
line-height: 1.5;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.character-level {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#header-avatar {
|
||||
margin-top: 24px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-container > span {
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.progress-container > .icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.progress-container > .progress {
|
||||
width: 203px;
|
||||
margin: 0px;
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
background-color: $header-dark-background;
|
||||
}
|
||||
|
||||
.progress-container > .progress > .progress-bar {
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
min-width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Avatar from './avatar';
|
||||
import { mapState } from 'client/libs/store';
|
||||
|
||||
import { toNextLevel } from '../../common/script/statHelpers';
|
||||
import statsComputed from '../../common/script/libs/statsComputed';
|
||||
import percent from '../../common/script/libs/percent';
|
||||
import UserListDetail from './userListDetail';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Avatar,
|
||||
},
|
||||
methods: {
|
||||
percent,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
MAX_HEALTH: 'constants.MAX_HEALTH',
|
||||
}),
|
||||
maxMP () {
|
||||
return statsComputed(this.user).maxMP;
|
||||
},
|
||||
toNextLevel () { // Exp to next level
|
||||
return toNextLevel(this.user.stats.lvl);
|
||||
},
|
||||
UserListDetail,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -3,12 +3,29 @@ div
|
||||
button.btn.btn-primary(b-btn, @click="$root.$emit('show::modal','members-modal')") {{ $t('viewMembers') }}
|
||||
|
||||
b-modal#members-modal(:title="$t('createGuild')")
|
||||
ul(v-for='member in members', :key='member')
|
||||
li(@click='clickMember') {{member}}
|
||||
button(@click='removeMember(member)', v-once) {{$t('remove')}}
|
||||
button(@click='quickReply(member)', v-once) {{$t('message')}}
|
||||
button(@click='addManager(member)', v-once) {{$t('addManager')}}
|
||||
button(@click='removeManager(member)', v-once) {{$t('addManager')}}
|
||||
.header-wrap(slot="modal-header")
|
||||
.row
|
||||
.col-6
|
||||
h1 Testing
|
||||
.col-6
|
||||
button(type="button" aria-label="Close" class="close")
|
||||
span(aria-hidden="true") ×
|
||||
.row
|
||||
.form-group.col-6
|
||||
input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
|
||||
.col-6
|
||||
span.dropdown-label {{ $t('sortBy') }}
|
||||
b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)') {{sortOption.text}}
|
||||
.row(v-for='member in members', :key='member', )
|
||||
.col-8
|
||||
user-list-detail
|
||||
.col-4
|
||||
b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(@click='sort(option.value)') {{$t('remove')}}
|
||||
b-dropdown-item(@click='sort(option.value)') {{$t('message')}}
|
||||
b-dropdown-item(@click='sort(option.value)') {{$t('addManager')}}
|
||||
b-dropdown-item(@click='sort(option.value)') {{$t('removeManager')}}
|
||||
|
||||
b-modal#remove-member(:title="$t('confirmRemoveMember')")
|
||||
button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
|
||||
@@ -17,13 +34,37 @@ div
|
||||
button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
|
||||
</template>
|
||||
|
||||
<style lang='scss'>
|
||||
|
||||
header {
|
||||
background-color: #edecee;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #4f2a93;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import bModal from 'bootstrap-vue/lib/components/modal';
|
||||
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
|
||||
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
|
||||
|
||||
import UserListDetail from '../userListDetail';
|
||||
|
||||
export default {
|
||||
props: ['group'],
|
||||
components: {
|
||||
bModal,
|
||||
bDropdown,
|
||||
bDropdownItem,
|
||||
UserListDetail,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
112
website/client/components/userListDetail.vue
Normal file
112
website/client/components/userListDetail.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
avatar#header-avatar(:user="user", style='float:left;')
|
||||
div(style='float:left;')
|
||||
span.character-name {{user.profile.name}}
|
||||
span.character-level Lvl {{user.stats.lvl}}
|
||||
.progress-container.d-flex
|
||||
img.icon(src="~assets/header/png/health@3x.png")
|
||||
.progress
|
||||
.progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
|
||||
span {{user.stats.hp | round}} / {{MAX_HEALTH}}
|
||||
.progress-container.d-flex
|
||||
img.icon(src="~assets/header/png/experience@3x.png")
|
||||
.progress
|
||||
.progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
||||
span {{user.stats.exp | round}} / {{toNextLevel}}
|
||||
.progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
|
||||
img.icon(src="~assets/header/png/magic@3x.png")
|
||||
.progress
|
||||
.progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
||||
span {{user.stats.mp | round}} / {{maxMP}}
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
// TODO move to colors.scss if used in other places
|
||||
$header-dark-background: #271B3D;
|
||||
$header-text-color: #D5C8FF;
|
||||
|
||||
.character-name {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 32px;
|
||||
line-height: 1.5;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.character-level {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#header-avatar {
|
||||
margin-top: 24px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-container > span {
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.progress-container > .icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.progress-container > .progress {
|
||||
width: 203px;
|
||||
margin: 0px;
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
background-color: $header-dark-background;
|
||||
}
|
||||
|
||||
.progress-container > .progress > .progress-bar {
|
||||
border-radius: 0px;
|
||||
height: 12px;
|
||||
min-width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Avatar from './avatar';
|
||||
import { mapState } from 'client/libs/store';
|
||||
|
||||
import { toNextLevel } from '../../common/script/statHelpers';
|
||||
import statsComputed from '../../common/script/libs/statsComputed';
|
||||
import percent from '../../common/script/libs/percent';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Avatar,
|
||||
},
|
||||
methods: {
|
||||
percent,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
MAX_HEALTH: 'constants.MAX_HEALTH',
|
||||
}),
|
||||
maxMP () {
|
||||
return statsComputed(this.user).maxMP;
|
||||
},
|
||||
toNextLevel () { // Exp to next level
|
||||
return toNextLevel(this.user.stats.lvl);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user