refactor(bs3): port some modals & css fixes

This commit is contained in:
Matteo Pagliazzi 2014-02-01 19:19:48 +01:00
parent 4dcf74a38a
commit f6a8b9e4cb
10 changed files with 52 additions and 20 deletions

View file

@ -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

View file

@ -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) {

View file

@ -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});

View file

@ -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

View file

@ -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

View file

@ -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')

View file

@ -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')
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')

View file

@ -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')

View file

@ -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')

View file

@ -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'))
| &nbsp;
span.glyphicon.glyphicon-forward
| &nbsp;
// 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}}
| &nbsp;
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'))
| &nbsp;
span.glyphicon.glyphicon-pencil(ng-hide='task._editing')
| &nbsp;
// cancel
a(ng-hide='!task._editing', ng-click='editTask(task)', tooltip=env.t('cancel'))
span.glyphicon.glyphicon-remove(ng-hide='!task._editing')
| &nbsp;
// save
a(ng-hide='!task._editing', ng-click='editTask(task);saveTask(task)', tooltip=env.t('save'))
span.glyphicon.glyphicon-ok(ng-hide='!task._editing')
| &nbsp;
//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')
| &nbsp;
span(ng-if='!task.challenge.broken')
span.glyphicon.glyphicon-bullhorn(tooltip=env.t('challenge'))
| &nbsp;
// delete
a(ng-if='!task.challenge.id', ng-click='removeTask(obj[list.type+"s"], $index)', tooltip=env.t('delete'))
span.glyphicon.glyphicon-trash
| &nbsp;
// chart
a(ng-show='task.history', ng-click='toggleChart(obj._id+task.id, task)', tooltip=env.t('progress'))
span.glyphicon.glyphicon-signal
| &nbsp;
// notes
span.task-notes(ng-show='task.notes && !task._editing')
span.glyphicon.glyphicon-comment
| &nbsp;
// 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
| &nbsp; &nbsp;
=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')
| &nbsp;
| &nbsp; &nbsp;
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
| &nbsp;
=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')