Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New client misc with some more misc (#8929)

Browse Source 
* Added markdown

* Added styles and option for debug menu

* Added sm icons

* Began styling autocomplete

* Added autocomplete styles

* Added more challenge categories

* Updated challenge participants modal

* Fixed challenge list updating without reload

* Added close and delete challenge

* Fixed form placeholder, adjusted desc style and fixed create button style

* Fixed faq collapsing and style

* Fixed repeating ending

* Fixed delete account

* Fixed party fetch issue

* Fixed scope issue

* Added member count filters

* Fixed create button style

* Fixed badge color display

* Updated tavern styles

* Fixed some party styles

* Updated login styles

* Fixed login redirect

* Fixed initial login process

* Added done local
This commit is contained in:
Keith Holliday
2017-08-07 14:26:17 -06:00
committed by GitHub
parent 1896984777
commit 0b076311df
46 changed files with 671 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/components/groups/discovery.vue
+3 -1
View File
@@ -26,7 +26,9 @@
span(v-once) {{ $t('loading') }}
</template>
<style scoped>
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
.sort-select {
margin: 2em;
}
website/client/components/groups/guild.vue
+56 -6
View File
@@ -25,7 +25,8 @@
.col-12
h3(v-once) {{ $t('chat') }}
textarea(:placeholder="$t('chatPlaceHolder')", v-model='newMessage')
textarea(:placeholder="!isParty ? $t('chatPlaceHolder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition')
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :groupId='groupId')
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
@@ -87,7 +88,7 @@
.col-6
h4.float-left(v-once) {{ questData.boss.name() }}
.col-6
span.float-right(v-once) {{ $t('participants') }}
span.float-right(v-once) {{ $t('participantsTitle') }}
.row
.col-12
.grey-progress-bar
@@ -95,9 +96,9 @@
.row.boss-details
.col-6
span.float-left
| {{group.quest.progress.hp}} / {{questData.boss.hp}}
| {{parseFloat(group.quest.progress.hp).toFixed(2)}} / {{parseFloat(questData.boss.hp).toFixed(2)}}
.col-6
span.float-right 30 pending damage
span.float-right {{group.quest.progress.up || 0}} pending damage
button.btn.btn-secondary(v-once, @click="questAbort()") {{ $t('abort') }}
.section-header
@@ -211,12 +212,24 @@
background-color: $white;
border: solid 1px $gray-400;
font-size: 16px;
font-style: italic;
line-height: 1.43;
color: $gray-300;
padding: .5em;
}
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: italic;
}
textarea::-moz-placeholder { /* Firefox 19+ */
font-style: italic;
}
textarea:-ms-input-placeholder { /* IE 10+ */
font-style: italic;
}
textarea:-moz-placeholder { /* Firefox 18- */
font-style: italic;
}
.title-details {
padding-top: 1em;
padding-left: 1em;
@@ -284,7 +297,8 @@
}
.tooltip-wrapper {
margin-left: 2.2em;
width: 15px;
margin-left: 1.2em;
}
}
@@ -359,6 +373,7 @@ import percent from 'common/script/libs/percent';
import groupFormModal from './groupFormModal';
import inviteModal from './inviteModal';
import chatMessage from '../chat/chatMessages';
import autocomplete from '../chat/autoComplete';
import groupChallenges from '../challenges/groupChallenges';
import bCollapse from 'bootstrap-vue/lib/components/collapse';
@@ -392,6 +407,7 @@ export default {
chatMessage,
inviteModal,
groupChallenges,
autocomplete,
},
directives: {
bToggle,
@@ -422,6 +438,10 @@ export default {
challenges: true,
},
newMessage: '',
coords: {
TOP: 0,
LEFT: 0,
},
};
},
computed: {
@@ -515,6 +535,36 @@ export default {
},
},
methods: {
// @TODO: abstract autocomplete
// https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
getCoord (e, text) {
let carPos = text.selectionEnd;
let div = document.createElement('div');
let span = document.createElement('span');
let copyStyle = getComputedStyle(text);
[].forEach.call(copyStyle, (prop) => {
div.style[prop] = copyStyle[prop];
});
div.style.position = 'absolute';
document.body.appendChild(div);
div.textContent = text.value.substr(0, carPos);
span.textContent = text.value.substr(carPos) || '.';
div.appendChild(span);
this.coords = {
TOP: span.offsetTop,
LEFT: span.offsetLeft,
};
document.body.removeChild(div);
},
updateCarretPosition (eventUpdate) {
let text = eventUpdate.target;
this.getCoord(eventUpdate, text);
},
selectedAutocomplete (newText) {
this.newMessage = newText;
},
showMemberModal () {
this.$store.state.groupId = this.group._id;
this.$root.$emit('show::modal', 'members-modal');
website/client/components/groups/membersModal.vue
+4 -2
View File
@@ -160,13 +160,15 @@ export default {
methods: {
async getMembers () {
let groupId = this.$store.state.groupId || this.group._id;
if (groupId) {
if (groupId && groupId !== 'challenge') {
let members = await this.$store.dispatch('members:getGroupMembers', {
groupId,
includeAllPublicFields: true,
});
this.members = members;
} else if (this.$store.state.viewingMembers.length > 1) {
}
if (this.$store.state.viewingMembers.length > 0) {
this.members = this.$store.state.viewingMembers;
}
},
website/client/components/groups/publicGuildItem.vue
+7 -1
View File
@@ -4,7 +4,9 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
.card-block
.row
.col-md-2
.svg-icon.shield(v-html="icons.goldGuildBadge")
.svg-icon.shield(v-html="icons.goldGuildBadge", v-if='guild.memberCount > 1000')
.svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='guild.memberCount > 100 && guild.memberCount < 999')
.svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='guild.memberCount < 100')
.member-count {{guild.memberCount}}
.col-md-10
.row
@@ -111,6 +113,8 @@ import groupUtilities from 'client/mixins/groupsUtilities';
import findIndex from 'lodash/findIndex';
import gemIcon from 'assets/svg/gem.svg';
import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
import silverGuildBadgeIcon from 'assets/svg/silver-guild-badge.svg';
import bronzeGuildBadgeIcon from 'assets/svg/bronze-guild-badge.svg';
export default {
mixins: [groupUtilities],
@@ -126,6 +130,8 @@ export default {
icons: Object.freeze({
gem: gemIcon,
goldGuildBadge: goldGuildBadgeIcon,
silverGuildBadgeIcon,
bronzeGuildBadgeIcon,
}),
};
},
website/client/components/groups/tavern.vue
+57 -4
View File
@@ -7,11 +7,11 @@
.row.chat-row
.col-12
h3(v-once) {{ $t('welcomeToTavern') }}
h3(v-once) {{ $t('tavernChat') }}
.row
textarea(placeholder="Type a message to Habiticans here", v-model='newMessage')
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete")
textarea(placeholder="Type a message to Habiticans here", v-model='newMessage', @keydown='updateCarretPosition')
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :groupId='groupId')
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
.row.community-guidelines(v-if='!communityGuidelinesAccepted')
@@ -50,6 +50,7 @@
.col-3.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
.title {{user.name}}
.type {{user.type}}
.svg-icon(v-html="icons.tierChampionIcon")
.section-header
.row
@@ -194,7 +195,7 @@
}
.grassy-meadow-backdrop {
background-image: url('~assets/images/groups/grassy-meadow-backdrop.png');
background-image: url('~assets/images/tavern_backdrop_web.png');
width: 100%;
height: 246px;
}
@@ -296,6 +297,17 @@ import questBackground from 'assets/svg/quest-background-border.svg';
import upIcon from 'assets/svg/up.svg';
import downIcon from 'assets/svg/down.svg';
import tierChampionIcon from 'assets/svg/tier-champion-icon.svg';
import tierChampion2Icon from 'assets/svg/tier-champion-2-icon.svg';
import tierEliteIcon from 'assets/svg/tier-elite-icon.svg';
import tierElite2Icon from 'assets/svg/tier-elite-2-icon.svg';
import tierFriendIcon from 'assets/svg/tier-friend-icon.svg';
import tierFriend2Icon from 'assets/svg/tier-friend-2-icon.svg';
import tierLegendaryIcon from 'assets/svg/tier-legendary-icon.svg';
import tierModIcon from 'assets/svg/tier-mod-icon.svg';
import tierNPCIcon from 'assets/svg/tier-npc-icon.svg';
import tierStaffIcon from 'assets/svg/tier-staff-icon.svg';
export default {
components: {
chatMessage,
@@ -303,7 +315,18 @@ export default {
},
data () {
return {
groupId: TAVERN_ID,
icons: Object.freeze({
tierStaffIcon,
tierNPCIcon,
tierModIcon,
tierLegendaryIcon,
tierFriend2Icon,
tierFriendIcon,
tierElite2Icon,
tierEliteIcon,
tierChampion2Icon,
tierChampionIcon,
gem: gemIcon,
questIcon,
challengeIcon,
@@ -395,6 +418,10 @@ export default {
},
],
newMessage: '',
coords: {
TOP: 0,
LEFT: 0,
},
};
},
computed: {
@@ -407,6 +434,32 @@ export default {
this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});
},
methods: {
// https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
getCoord (e, text) {
let carPos = text.selectionEnd;
let div = document.createElement('div');
let span = document.createElement('span');
let copyStyle = getComputedStyle(text);
[].forEach.call(copyStyle, (prop) => {
div.style[prop] = copyStyle[prop];
});
div.style.position = 'absolute';
document.body.appendChild(div);
div.textContent = text.value.substr(0, carPos);
span.textContent = text.value.substr(carPos) || '.';
div.appendChild(span);
this.coords = {
TOP: span.offsetTop,
LEFT: span.offsetLeft,
};
document.body.removeChild(div);
},
updateCarretPosition (eventUpdate) {
let text = eventUpdate.target;
this.getCoord(eventUpdate, text);
},
selectedAutocomplete (newText) {
this.newMessage = newText;
},