From 1de80a3ed8627cc5388699a16a8077081c38b9c7 Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Thu, 30 Jul 2015 16:48:08 -0500 Subject: [PATCH] WIP(party-page): Revised invite modals --- common/locales/en/groups.json | 19 +++- website/public/css/shared.styl | 5 +- website/public/js/controllers/groupsCtrl.js | 1 + website/public/js/services/groupServices.js | 2 +- website/views/options/social/party.jade | 14 ++- .../views/shared/modals/invite-friends.jade | 97 ++++++++++--------- 6 files changed, 83 insertions(+), 55 deletions(-) diff --git a/common/locales/en/groups.json b/common/locales/en/groups.json index a3a670e204..2c700b50df 100644 --- a/common/locales/en/groups.json +++ b/common/locales/en/groups.json @@ -106,11 +106,15 @@ "leaderOnlyChallenges": "Only group leader can create challenges", "sendGift": "Send Gift", "inviteFriends": "Invite Friends", - "inviteAlertInfo": "Invite friends by User ID here.", - "inviteExistUser": "Invite Existing User", - "inviteByEmail": "Invite friends by email. If they join via your email, they'll automatically be invited to this group.", + "inviteByEmail": "Invite by Email", + "inviteByEmailExplanation": "If a friend joins Habitica via your email, they'll automatically be invited to your party!", + "inviteFriendsNow": "Invite Friends Now", + "inviteFriendsLater": "Invite Friends Later", + "inviteAlertInfo": "If you have friends already using Habitica, invite them by User ID here.", + "inviteExistUser": "Invite Existing Users", "byColon": "By:", - "inviteNewUsers": "Invite New User(s)", + "inviteNewUsers": "Invite New Users", + "sendInvitations": "Send Invitations", "inviteAlertInfo2": "Or share this link (copy/paste):", "sendGiftHeading": "Send Gift to <%= name %>", "sendGiftGemsBalance": "From <%= number %> Gems", @@ -123,5 +127,10 @@ "startPartyWithFriends": "Start a Party with your friends!", "startAParty": "Start a Party", "addToParty": "Add someone to your party", - "likePost": "Click if you like this post!" + "likePost": "Click if you like this post!", + "partyExplanation1": "Play Habitica with friends to stay accountable!", + "partyExplanation2": "Battle monsters and create Challenges!", + "partyExplanation3": "Invite friends now to earn a Quest Scroll!", + "wantToStartParty": "Do you want to start a party?", + "exclusiveQuestScroll": "Inviting a friend to your party will grant you an exclusive Quest Scroll to battle the Basi-List together!" } diff --git a/website/public/css/shared.styl b/website/public/css/shared.styl index 5d3d5f0e5e..755fc1e9b3 100644 --- a/website/public/css/shared.styl +++ b/website/public/css/shared.styl @@ -66,4 +66,7 @@ ul flex-direction: column .margin-auto - margin: auto auto 1em auto; \ No newline at end of file + margin: auto auto 1em auto + +.width-50 + width: 50% diff --git a/website/public/js/controllers/groupsCtrl.js b/website/public/js/controllers/groupsCtrl.js index 52bd43cf39..8e5394358b 100644 --- a/website/public/js/controllers/groupsCtrl.js +++ b/website/public/js/controllers/groupsCtrl.js @@ -139,6 +139,7 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Shared', 'Groups', ' $scope.inviter = User.user.profile.name; $scope.emails = [{name:"",email:""},{name:"",email:""}]; + $scope.invitees = [{invitee:""},{invitee:""}]; $scope.inviteEmails = function(){ Groups.Group.invite({gid: $scope.group._id}, {inviter: $scope.inviter, emails: $scope.emails}, function(){ diff --git a/website/public/js/services/groupServices.js b/website/public/js/services/groupServices.js index c75474ea5f..005b08e57f 100644 --- a/website/public/js/services/groupServices.js +++ b/website/public/js/services/groupServices.js @@ -88,7 +88,7 @@ function($rootScope, ApiUrl, $resource, $q, $http, User, Challenges, Analytics, }, inviteOrStartParty: function(group) { - if (group.type === "party") { + if (group.type === "party" || $location.$$path === "/options/groups/party") { $rootScope.openModal('invite-friends', { controller:'InviteToGroupCtrl', resolve: { diff --git a/website/views/options/social/party.jade b/website/views/options/social/party.jade index ccdc27ab86..bf6b5721c4 100644 --- a/website/views/options/social/party.jade +++ b/website/views/options/social/party.jade @@ -10,11 +10,21 @@ script(type='text/ng-template', id='partials/options.social.party.html') a.btn.btn-danger(ng-click='reject()')=env.t('reject') div(ng-hide='user.invitations.party.id').container-fluid - .row.margin-auto - a.btn.btn-primary.btn-lg.flex-column(ng-click="inviteOrStartParty(group)")=env.t("startPartyWithFriends") + .row.margin-auto.text-center + a.btn.btn-primary.btn-lg.width-50(ng-click="inviteOrStartParty(group)")=env.t("startPartyWithFriends") .row.margin-auto.text-center(ng-controller='UserCtrl') .margin-auto span.inline-block.quest_vice3 span.figure.herobox.inline-block .character-sprites +generatedAvatar + .row.margin-auto.text-center + ul + li=env.t('partyExplanation1') + li=env.t('partyExplanation2') + li=env.t('partyExplanation3') + .row.margin-auto.text-center + h4=env.t('wantToStartParty') + .row.margin-auto.text-center + span.btn.btn-primary(ng-click="inviteOrStartParty(group)")=env.t('inviteFriendsNow') + span.btn.btn-default=env.t('inviteFriendsLater') diff --git a/website/views/shared/modals/invite-friends.jade b/website/views/shared/modals/invite-friends.jade index 485445d9f6..9d53ea7e48 100644 --- a/website/views/shared/modals/invite-friends.jade +++ b/website/views/shared/modals/invite-friends.jade @@ -1,48 +1,53 @@ script(type='text/ng-template', id='modals/invite-friends.html') - .modal-header - h4=env.t('inviteFriends') .modal-body - p.alert.alert-info!=env.t('inviteAlertInfo') - - form.form-inline(ng-submit='invite()') - //-.alert.alert-danger(ng-show='_groupError') {{_groupError}} - .form-group - input.form-control(type='text', placeholder=env.t('userId'), ng-model='invitee') - |  - button.btn.btn-primary(type='submit')=env.t('inviteExistUser') - - hr - - p.alert.alert-info=env.t('inviteByEmail') - - form.form-horizontal(ng-submit='inviteEmails()') - table.table.table-striped - thead - tr - th=env.t('name') - th=env.t('email') - tbody - tr(ng-repeat='email in emails') - td - input.form-control(type='text', ng-model='email.name') - td - input.form-control(type='email', ng-model='email.email') - tr - td(colspan=2) - a.btn.btn-xs.pull-right(ng-click='emails = emails.concat([{name:"",email:""}])') - i.glyphicon.glyphicon-plus - tr - td.form-group(colspan=2) - label.col-sm-1.control-label=env.t('byColon') - .col-sm-7 - input.form-control(type='text', ng-model='inviter') - .col-sm-4 - button.btn.btn-primary.btn-wrap(type='submit')=env.t('inviteNewUsers') - //- - hr - p.alert.alert-info=env.t('inviteAlertInfo2') - input.form-control(type='text', ng-value='inviteLink({id: party._id, inviter: user._id, name: party.name})') - - .modal-footer - button.btn.btn-default(ng-click='$close()')=env.t('close') - + tabset + tab(heading=env.t('inviteByEmail')) + p.alert.alert-info=env.t('inviteByEmailExplanation') + form.form-horizontal(ng-submit='inviteEmails()') + table.table.table-striped + thead + tr + th=env.t('name') + th=env.t('email') + tbody + tr(ng-repeat='email in emails') + td + input.form-control(type='text', ng-model='email.name') + td + input.form-control(type='email', ng-model='email.email') + tr + td(colspan=2) + a.btn.btn-xs.pull-right(ng-click='emails = emails.concat([{name:"",email:""}])') + i.glyphicon.glyphicon-plus + tr + td.form-group(colspan=2) + label.col-sm-1.control-label=env.t('byColon') + .col-sm-7 + input.form-control(type='text', ng-model='inviter') + .col-sm-4 + button.btn.btn-primary(type='submit')=env.t('sendInvitations') + tab(heading=env.t('inviteExistUser')) + p.alert.alert-info!=env.t('inviteAlertInfo') + form.form-horizontal(ng-submit='invite()') + table.table.table-striped + thead + tr + th=env.t('userId') + tbody + tr(ng-repeat='invitee in invitees') + td + input.form-control(type='text', ng-model='invitee.invitee') + tr + td(colspan=2) + a.btn.btn-xs.pull-right(ng-click='invitees = invitees.concat([{invitee:""}])') + i.glyphicon.glyphicon-plus + tr + td + .col-sm-1 + .col-sm-7 + .col-sm-4 + button.btn.btn-primary(type='submit')=env.t('sendInvitations') + .row + .quest_basilist.pull-left + p(style='margin:2em')=env.t('exclusiveQuestScroll') + button.btn.btn-default.pull-right(style='margin:auto 1em', ng-click='$close()')=env.t('close')