From f6a8b9e4cb03d234eeb7119ed053888b03063a6c Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Sat, 1 Feb 2014 19:19:48 +0100 Subject: [PATCH] refactor(bs3): port some modals & css fixes --- public/css/tasks.styl | 12 ++++++++---- public/js/controllers/notificationCtrl.js | 9 +++++++++ public/js/controllers/rootCtrl.js | 12 ++++++++++-- views/shared/footer.jade | 2 +- views/shared/gems.jade | 2 +- views/shared/modals/buy-gems.jade | 2 +- views/shared/modals/classes.jade | 6 ++---- views/shared/modals/rebirth.jade | 2 +- views/shared/modals/reroll.jade | 2 +- views/shared/tasks/task.jade | 23 ++++++++++++++++++----- 10 files changed, 52 insertions(+), 20 deletions(-) diff --git a/public/css/tasks.styl b/public/css/tasks.styl index 3e59280ac9..22a460525d 100644 --- a/public/css/tasks.styl +++ b/public/css/tasks.styl @@ -23,6 +23,8 @@ for $stage in $stages .completed background-color: $completed color: #999 + .glyphicon + color: #333 .task-checker label background-color: darken($completed, 30%) .task-action-btn @@ -112,6 +114,9 @@ for $stage in $stages &:last-child margin-bottom: 0 + label + font-weight: 400 + // task content .task-text display: block @@ -273,10 +278,9 @@ for $stage in $stages margin: 0.75em 0.5em 0 0.25em height: 1em opacity: 0.25 - a > i - margin-left: 0.125em - .task-notes - margin-left: 0.125em + + a + text-decoration: none .task:hover .task-meta-controls opacity: 1 diff --git a/public/js/controllers/notificationCtrl.js b/public/js/controllers/notificationCtrl.js index f6adac2d55..6089fcabe9 100644 --- a/public/js/controllers/notificationCtrl.js +++ b/public/js/controllers/notificationCtrl.js @@ -116,6 +116,15 @@ habitrpg.controller('NotificationCtrl', }) });*/ + $rootScope.$watch('!user.flags.classSelected && user.stats.lvl >= 10', function(after, before){ + if(after){ + $modal.open({ + templateUrl: 'modals/chooseClass.html', + controller: 'UserCtrl' + }); + } + }); + $rootScope.$watch('user.stats.lvl', function(after, before) { if (after == before) return; if (after > before) { diff --git a/public/js/controllers/rootCtrl.js b/public/js/controllers/rootCtrl.js index 3b119b561a..708a4b87c5 100644 --- a/public/js/controllers/rootCtrl.js +++ b/public/js/controllers/rootCtrl.js @@ -3,8 +3,8 @@ /* Make user and settings available for everyone through root scope. */ -habitrpg.controller("RootCtrl", ['$scope', '$rootScope', '$location', 'User', '$http', '$state', '$stateParams', 'Notification', 'Groups', 'Shared', 'Content', - function($scope, $rootScope, $location, User, $http, $state, $stateParams, Notification, Groups, Shared, Content) { +habitrpg.controller("RootCtrl", ['$scope', '$rootScope', '$location', 'User', '$http', '$state', '$stateParams', 'Notification', 'Groups', 'Shared', 'Content', '$modal', + function($scope, $rootScope, $location, User, $http, $state, $stateParams, Notification, Groups, Shared, Content, $modal) { var user = User.user; var initSticky = _.once(function(){ @@ -64,6 +64,14 @@ habitrpg.controller("RootCtrl", ['$scope', '$rootScope', '$location', 'User', '$ $rootScope.set = User.set; $rootScope.authenticated = User.authenticated; + // Open a modal from a template expression (like ng-click,...) + // Otherwise use the proper $modal.open + $rootScope.openModal = function(modal){ + $modal.open({ + templateUrl: 'modals/' + modal + '.html' + }); + } + $rootScope.dismissAlert = function() { $rootScope.modals.newStuff = false; $rootScope.set({'flags.newStuff':false}); diff --git a/views/shared/footer.jade b/views/shared/footer.jade index 57c1d37f96..f5a1df5666 100644 --- a/views/shared/footer.jade +++ b/views/shared/footer.jade @@ -13,7 +13,7 @@ footer.footer(ng-controller='FooterCtrl') ul.list-unstyled.list-unstyled if (!env.isFrontPage) li - .btn.btn-small.btn-success(ng-click='modals.buyGems = true') + .btn.btn-small.btn-success(ng-click='openModal("buyGems")') span.glyphicon.glyphicon-heart =env.t('companyDonate') li diff --git a/views/shared/gems.jade b/views/shared/gems.jade index 71c3c8e411..ef3738ef91 100644 --- a/views/shared/gems.jade +++ b/views/shared/gems.jade @@ -1,4 +1,4 @@ -a.pull-right.gem-wallet(ng-click='modals.buyGems = true', popover-trigger='mouseenter', popover-title=env.t('gems'), popover=env.t('gemsWhatFor'), popover-placement='bottom') +a.pull-right.gem-wallet(ng-click='openModal("buyGems")', popover-trigger='mouseenter', popover-title=env.t('gems'), popover=env.t('gemsWhatFor'), popover-placement='bottom') span.task-action-btn.tile.flush.bright.add-gems-btn ＋ span.task-action-btn.tile.flush.neutral .Pet_Currency_Gem2x.Gems diff --git a/views/shared/modals/buy-gems.jade b/views/shared/modals/buy-gems.jade index b43b1dc6ea..03a610de65 100644 --- a/views/shared/modals/buy-gems.jade +++ b/views/shared/modals/buy-gems.jade @@ -29,4 +29,4 @@ script(id='modals/buyGems.html', type='text/ng-template') div(ng-include="'partials/options.settings.subscription.html'") .modal-footer - button.btn.btn-default.cancel(ng-click='modals.buyGems = false')=env.t('cancel') + button.btn.btn-default.cancel(ng-click='$close()')=env.t('cancel') diff --git a/views/shared/modals/classes.jade b/views/shared/modals/classes.jade index 4a96a558c3..7fdad4bcd5 100644 --- a/views/shared/modals/classes.jade +++ b/views/shared/modals/classes.jade @@ -1,5 +1,3 @@ -//activated by -// ng-if='!user.flags.classSelected && user.stats.lvl >= 10', data-backdrop=true, ng-controller='UserCtrl') script(type='text/ng-template', id='modals/chooseClass.html') .modal-header h3=env.t('chooseClass1') @@ -73,5 +71,5 @@ script(type='text/ng-template', id='modals/chooseClass.html') .well(ng-show='selectedClass=="healer"')=env.t('healerText') .modal-footer - button.btn.btn-small.btn-danger.cancel(ng-click='user.ops.disableClasses({})', popover-placement='top', popover-trigger='mouseenter', popover=env.t('optOutText'))=env.t('optOut') - button.btn.btn-primary.cancel(ng-click='selectedClass && changeClass(selectedClass)')=env.t('select') \ No newline at end of file + button.btn.btn-small.btn-danger.cancel(ng-click='user.ops.disableClasses({}); $close()', popover-placement='top', popover-trigger='mouseenter', popover=env.t('optOutText'))=env.t('optOut') + button.btn.btn-primary.cancel(ng-click='selectedClass && changeClass(selectedClass); $close()')=env.t('select') \ No newline at end of file diff --git a/views/shared/modals/rebirth.jade b/views/shared/modals/rebirth.jade index 9e7dc610d2..9853aead02 100644 --- a/views/shared/modals/rebirth.jade +++ b/views/shared/modals/rebirth.jade @@ -39,7 +39,7 @@ script(type='text/ng-template', id='modals/rebirth.html') .modal-footer button.btn.btn-large.cancel(ng-click='modals.rebirth = false')=env.t('neverMind') span(ng-if='user.balance < 2') - a.btn.btn-success.btn-large(ng-click="modals.buyGems = true")=env.t('buyMoreGems') + a.btn.btn-success.btn-large(ng-click='openModal("buyGems")')=env.t('buyMoreGems') span.gem-cost=env.t('notEnoughGems') span(ng-if='user.balance >= 2', ng-controller='SettingsCtrl') a.btn.btn-danger.btn-large(ng-click='rebirth()')=env.t('beReborn') diff --git a/views/shared/modals/reroll.jade b/views/shared/modals/reroll.jade index 09bbcc5bee..8bc484eb62 100644 --- a/views/shared/modals/reroll.jade +++ b/views/shared/modals/reroll.jade @@ -10,7 +10,7 @@ script(type='text/ng-template', id='modals/reroll.html') .modal-footer button.btn.btn-large.cancel(ng-click='modals.reroll = false')=env.t('neverMind') span(ng-if='user.balance < 1') - a.btn.btn-success.btn-large(ng-click="modals.buyGems = true")=env.t('buyMoreGems') + a.btn.btn-success.btn-large(ng-click='openModal("buyGems")')=env.t('buyMoreGems') span.gem-cost=env.t('notEnoughGems') span(ng-if='user.balance >= 1', ng-controller='SettingsCtrl') a.btn.btn-danger.btn-large(ng-click='reroll()')=env.t('fortify') diff --git a/views/shared/tasks/task.jade b/views/shared/tasks/task.jade index 16911930e7..e1fddad6d3 100644 --- a/views/shared/tasks/task.jade +++ b/views/shared/tasks/task.jade @@ -4,43 +4,54 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s // Due Date span.task-date(ng-if='task.type=="todo" && task.date', style='margin:1px') - span(ng-class='{"label label-important":moment(task.date).isBefore(_today, "days")}') {{moment(task.date).format('MM/DD')}} + span(ng-class='{"label label-danger":moment(task.date).isBefore(_today, "days")}') {{moment(task.date).format('MM/DD')}} // Streak span(ng-show='task.streak') {{task.streak}} span(tooltip=env.t('streakCounter')) + |   span.glyphicon.glyphicon-forward + |   // Icons only available if you own the tasks (aka, hidden from challenge stats) span(ng-if='!obj._locked') a.badge(ng-if='task.checklist[0]', ng-class='{"badge-success":checklistCompletion(task.checklist) == task.checklist.length}', ng-click='collapseChecklist(task)', style='margin:1px') {{checklistCompletion(task.checklist)}}/{{task.checklist.length}} - + |   span.glyphicon.glyphicon-tags(tooltip='{{appliedTags(user.tags, task.tags)}}', ng-hide='Shared.noTags(task.tags)') // edit a(ng-hide='task._editing', ng-click='editTask(task)', tooltip=env.t('edit')) + |   span.glyphicon.glyphicon-pencil(ng-hide='task._editing') + |   // cancel a(ng-hide='!task._editing', ng-click='editTask(task)', tooltip=env.t('cancel')) span.glyphicon.glyphicon-remove(ng-hide='!task._editing') + |   // save a(ng-hide='!task._editing', ng-click='editTask(task);saveTask(task)', tooltip=env.t('save')) span.glyphicon.glyphicon-ok(ng-hide='!task._editing') + |   //challenges span(ng-if='task.challenge.id') span(ng-if='task.challenge.broken') span.glyphicon.glyphicon-bullhorn(style='background-color:red;', ng-click='task._editing = true', tooltip=env.t('brokenChaLink') tooltip-placement='right') + |   span(ng-if='!task.challenge.broken') span.glyphicon.glyphicon-bullhorn(tooltip=env.t('challenge')) + |   // delete a(ng-if='!task.challenge.id', ng-click='removeTask(obj[list.type+"s"], $index)', tooltip=env.t('delete')) span.glyphicon.glyphicon-trash + |   // chart a(ng-show='task.history', ng-click='toggleChart(obj._id+task.id, task)', tooltip=env.t('progress')) span.glyphicon.glyphicon-signal + |   // notes span.task-notes(ng-show='task.notes && !task._editing') span.glyphicon.glyphicon-comment + |   // left-hand side checkbox .task-controls.task-primary @@ -107,16 +118,17 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s // Checklists div(ng-if='!$state.includes("options.social.challenges")') - a.btn.btn-small(ng-if='!task.checklist[0] && (task.type=="daily" || task.type=="todo")',ng-click='addChecklist(task)') + button.btn.btn-deafult.btn-small(ng-if='!task.checklist[0] && (task.type=="daily" || task.type=="todo")',ng-click='addChecklist(task)') span.glyphicon.glyphicon-tasks + |     =env.t('addChecklist') form.checklist-form(ng-if='task.checklist') fieldset.option-group.task-checklist(ng-if='!$state.includes("options.social.challenges")') legend.option-title =env.t('checklist') - |   + |     span.glyphicon.glyphicon-question-sign(popover=env.t('checklistText'),popover-trigger='mouseenter',popover-placement='bottom') - ul.unstyled + ul.list-unstyled li(ng-repeat='item in task.checklist') a.pull-right.checklist-icons(ng-click='removeChecklistItem(task,$event,$index,true)') span.glyphicon.glyphicon-trash(tooltip=env.t('delete')) @@ -182,6 +194,7 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s legend.option-title a.priority-multiplier-help(href='https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17', target='_blank', popover-title=env.t('difficultyHelpTitle'), popover-trigger='mouseenter', popover=env.t('difficultyHelpContent')) span.glyphicon.glyphicon-question-sign + |   =env.t('difficulty') .task-controls.tile-group.priority-multiplier button.task-action-btn.tile(type='button', ng-class='{active: task.priority==1 || !task.priority}', ng-click='task.challenge.id || (task.priority=1)')=env.t('easy')