krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-16 22:27:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

New client guilds (#8736)

Browse Source 
* add colors palette

* add secondary menu component and style it

* add box shadow to secondary menu

* misc css, fixes for secondary menu

* client: add equipment page with grouping, css: add some styles

* add typography

* more equipment

* stable: fix linting

* equipment: add styles (lots of general styles too)

* remove duplicate google fonts loading

* add dropdowns

* design: white search input background, remove gray from items

* start adding drawer and selected indicator

* wip equipment

* fix equipment

* equipment: correctly bind new properties on items.gear.equipped

* equipment: fix vue binding. version 2

* equipment: fix vue binding. version 3

* back to first fix for equip op, fix for sourcemaps, send http request when an item is equipped, load bootstrap-vue components where needed

* checkboxes and radio buttons

* correctly renders selected items in first postion during the first render

* add search

* general changes, constants part of app state, add popovers

* add toggle switch, rename css

* correct offset

* upgrade deps

* upgrade deps

* drawer and lot of other work

* update equipping mechanism

* finish equipment

* fix compilation and upgrade deps

* use v-show in place of v-if to fix ui issues

* v-show -> v-if

* Start of guild syyles

* fix linting in test/client

* fix es6 compilation in test/client

* fix babel compilation for tests

* fix groupsUtilities mixin tests

* More designs

* Added public guild state

* Added my guilds store

* client: buttons

* client: buttons: fix colors

* Added join and leave

* Began adding new guild form

* Create form updates

* Added search to local data

* Added filtering

* Added initial code for group create

* Added more create checks

* Added more guild routes

* Added styles to guild page

* Added more chat styles

* Began porting over angular functions

* Moved over group service functions

* Added paging

* Updated sidebar

* Updated join/leave and minor text

* Added new sidebar functions

* Updated paging

* Added some form updates

* Added more translations and styles

* Updated shrinkwrap

* Removed features config

* Lint cleanup

* Added member modal

* Added more member actions

* Updated nav

* Fixed filter toggling

* Updated create guild

* Added no guild page

* Added sort select

* Added more styles

* Added update guild form

* Removed extra css and other minor changes

* Many css and syntax fixes

* Fixed color and merge conflic

* Removed paging from my guilds

* Removed extra strings

* Many requests updates

* Small style fixes
This commit is contained in:
Keith Holliday
2017-06-02 14:55:02 -06:00
committed by GitHub
parent b606dd1c40
commit 2e9bc2c31c
43 changed files with 1854 additions and 1096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
website/client/components/guilds/groupFormModal.vue Normal file
View File

@@ -0,0 +1,340 @@
<template lang="pug">
b-modal#guild-form(:title="title", :hide-footer="true")
form(@submit.stop.prevent="submit")
.form-group
label
strong(v-once) {{$t('name')}}*
b-form-input(type="text", placeholder="$t('newGuildPlaceHolder')", v-model="newGuild.name")
.form-group(v-if='newGuild.id')
label
strong(v-once) {{$t('guildLeader')}}*
b-form-select(v-model="newGuild.newLeader" :options="members")
.form-group
label
strong(v-once) {{$t('privacySettings')}}*
br
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="newGuild.onlyLeaderCreatesChallenges")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
b-tooltip.icon(:content="$t('privateDescription')")
img(src='~assets/guilds/information.svg')
br
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="newGuild.guildLeaderCantBeMessaged")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('guildLeaderCantBeMessaged') }}
br
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="newGuild.privateGuild")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('privateGuild') }}
b-tooltip.icon(:content="$t('privateDescription')")
img(src='~assets/guilds/information.svg')
br
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="newGuild.allowGuildInvationsFromNonMembers")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('allowGuildInvationsFromNonMembers') }}
.form-group
label
strong(v-once) {{$t('description')}}*
div.description-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
b-form-input(type="text", textarea :placeholder="$t('guildDescriptionPlaceHolder')", v-model="newGuild.description")
.form-group(v-if='newGuild.id')
label
strong(v-once) {{$t('guildInformation')}}*
b-form-input(type="text", textarea :placeholder="$t('guildInformationPlaceHolder')", v-model="newGuild.guildInformation")
.form-group(style='position: relative;')
label
strong(v-once) {{$t('categories')}}*
div.category-wrap(@click.prevent="toggleCategorySelect")
span.category-select(v-if='newGuild.categories.length === 0') {{$t('none')}}
.category-label(v-for='category in newGuild.categories') {{$t(categoriesHashByKey[category])}}
.category-box(v-if="showCategorySelect")
.form-check(
v-for="group in categoryOptions",
:key="group.key",
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="newGuild.categories")
span.custom-control-indicator
span.custom-control-description(v-once) {{ $t(group.label) }}
button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
.form-group.text-center
div.item-with-icon
img(src="~assets/guilds/green-gem.svg")
span.count 4
button.btn.btn-primary.btn-md(v-if='!newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('createGuild') }}
button.btn.btn-primary.btn-md(v-if='newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('updateGuild') }}
.gem-description(v-once) {{ $t('guildGemCostInfo') }}
</template>
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
textarea {
height: 150px;
}
.description-count, .gem-description {
font-size: 12px;
line-height: 1.33;
text-align: center;
color: $gray-200;
}
.description-count {
text-align: right;
}
.gem-description {
margin-top: 1em;
}
.category-box {
padding: 1em;
max-width: 400px;
position: absolute;
top: -480px;
padding: 2em;
border-radius: 2px;
background-color: $white;
box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
}
.category-label {
min-width: 100px;
border-radius: 100px;
background-color: $gray-600;
padding: .5em;
display: inline-block;
margin-right: .5em;
font-size: 12px;
font-weight: 500;
line-height: 1.33;
text-align: center;
color: $gray-300;
}
.item-with-icon {
display: inline-block;
img {
height: 20px;
margin-right: .5em;
}
.count {
font-size: 14px;
font-weight: bold;
margin-right: 1em;
color: $green-10;
}
}
.description-count {
margin-top: 1em;
}
.category-select {
border-radius: 2px;
background-color: $white;
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
padding: 1em;
}
.category-select:hover {
cursor: pointer;
}
.category-wrap {
margin-top: .5em;
}
.icon {
margin-left: .5em;
display: inline-block;
}
</style>
<script>
import bModal from 'bootstrap-vue/lib/components/modal';
import bBtn from 'bootstrap-vue/lib/components/button';
import bFormInput from 'bootstrap-vue/lib/components/form-input';
import bFormCheckbox from 'bootstrap-vue/lib/components/form-checkbox';
import bFormSelect from 'bootstrap-vue/lib/components/form-select';
import bTooltip from 'bootstrap-vue/lib/components/tooltip';
export default {
components: {
bModal,
bBtn,
bFormInput,
bFormCheckbox,
bFormSelect,
bTooltip,
},
data () {
let data = {
newGuild: {
id: '',
name: '',
type: 'guild',
privacy: 'private',
description: '',
guildInformation: '',
categories: [],
onlyLeaderCreatesChallenges: true,
guildLeaderCantBeMessaged: true,
privateGuild: true,
allowGuildInvationsFromNonMembers: true,
newLeader: '',
},
categoryOptions: [
{
label: 'animals',
key: 'animals',
},
{
label: 'artDesign',
key: 'art_design',
},
{
label: 'booksWriting',
key: 'books_writing',
},
{
label: 'comicsHobbies',
key: 'comics_hobbies',
},
{
label: 'diyCrafts',
key: 'diy_crafts',
},
{
label: 'education',
key: 'education',
},
{
label: 'foodCooking',
key: 'food_cooking',
},
{
label: 'healthFitness',
key: 'health_fitness',
},
{
label: 'music',
key: 'music',
},
{
label: 'relationship',
key: 'relationship',
},
{
label: 'scienceTech',
key: 'science_tech ',
},
],
showCategorySelect: false,
members: ['one', 'two'],
};
let hashedCategories = {};
data.categoryOptions.forEach((category) => {
hashedCategories[category.key] = category.label;
});
data.categoriesHashByKey = hashedCategories;
return data;
},
mounted () {
this.$root.$on('shown::modal', () => {
let editingGroup = this.$store.state.editingGroup;
if (!editingGroup) return;
this.newGuild.name = editingGroup.name;
this.newGuild.type = editingGroup.type;
this.newGuild.privacy = editingGroup.privacy;
if (editingGroup.description) this.newGuild.description = editingGroup.description;
this.newGuild.id = editingGroup._id;
});
},
computed: {
charactersRemaining () {
return 500 - this.newGuild.description.length;
},
title () {
if (!this.newGuild.id) return this.$t('createGuild');
return this.$t('updateGuild');
},
},
methods: {
toggleCategorySelect () {
this.showCategorySelect = !this.showCategorySelect;
},
async submit () {
if (this.$store.state.user.data.balance < 1 && !this.newGuild.id) {
// @TODO: Add proper notifications
alert('Not enough gems');
return;
// @TODO return $rootScope.openModal('buyGems', {track:"Gems > Create Group"});
}
if (!this.newGuild.name || !this.newGuild.description) {
// @TODO: Add proper notifications
alert('Enter a name and description');
return;
}
if (this.newGuild.description.length > 500) {
// @TODO: Add proper notifications
alert('Description is too long');
return;
}
// @TODO: Add proper notifications
if (!confirm(this.$t('confirmGuild'))) return;
if (!this.newGuild.privateGuild) {
this.newGuild.privacy = 'public';
}
if (!this.newGuild.onlyLeaderCreatesChallenges) {
this.newGuild.leaderOnly = {
challenges: true,
};
}
if (this.newGuild.id) {
await this.$store.dispatch('guilds:update', {group: this.newGuild});
} else {
await this.$store.dispatch('guilds:create', {group: this.newGuild});
}
this.$store.state.editingGroup = {};
this.newGuild = {
name: '',
type: 'guild',
privacy: 'private',
description: '',
categories: [],
onlyLeaderCreatesChallenges: true,
guildLeaderCantBeMessaged: true,
privateGuild: true,
allowGuildInvationsFromNonMembers: true,
};
},
},
};
</script>