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

refactor: Move order by equipmentment button to top of view

Browse Source
This commit is contained in:
Blade Barringer
2016-03-14 22:20:22 -05:00
parent a6fb945120
commit 9508ed45df
4 changed files with 72 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
test/spec/controllers/sortableInventoryCtrlSpec.js
View File

@@ -1,32 +1,42 @@
'use strict'; describe('Sortable Inventory Controller', () => {
let scope;
describe('Sortable Inventory Controller', function() { beforeEach(inject(($rootScope, $controller) => {
var scope;
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new(); scope = $rootScope.$new();
$controller('SortableInventoryController', {$scope: scope}); $controller('SortableInventoryController', {$scope: scope});
})); }));
it('has no default sort order', function(){ it('defaults scope.order to name', () => {
expect(scope.order).to.not.exist; expect(scope.order).to.eql('text()')
}); });
it('sets sort criteria for all standard attributes', function(){ describe('#setOrder', () => {
var oldOrder = scope.order; it('sets sort criteria for all standard attributes', () =>{
let oldOrder = scope.order;
var attrs = ['con', 'int', 'per', 'str', 'name', 'set']; let attrs = [
'constitution',
'intelligence',
'perception',
'strength',
'name',
'set'
];
attrs.forEach(function (attribute) { attrs.forEach((attribute) => {
scope.setOrder(attribute); scope.setOrder(attribute);
expect(scope.order).to.exist; expect(scope.order).to.exist;
expect(scope.order).to.not.eql(oldOrder); expect(scope.order).to.not.eql(oldOrder);
oldOrder = scope.order; oldOrder = scope.order;
});
});
it('does nothing when missing sort criteria', () =>{
scope.order = null;
scope.setOrder('foooo');
expect(scope.order).to.not.exist;
}); });
}); });
it('does nothing when missing sort criteria', function(){
scope.setOrder('foooo');
expect(scope.order).to.not.exist;
});
}); });

7
website/public/css/inventory.styl
View File

@@ -32,13 +32,6 @@ menu.pets div
display: inline-block display: inline-block
vertical-align: top vertical-align: top
span.sort-menu
width: 100%
display: block
span.sort-menu > span.btn-group
margin-left: 10px
.current-pet .current-pet
left: 0px left: 0px
bottom: 0px bottom: 0px

18
website/public/js/controllers/sortableInventoryCtrl.js
View File

@@ -1,17 +1,19 @@
habitrpg.controller('SortableInventoryController', ['$scope', habitrpg.controller('SortableInventoryController', ['$scope',
function ($scope) { function ($scope) {
var attributeSort = {
// doing this in a function causes 10 $digest iteration error constitution: ['-con', '-(con+int+per+str)'],
attributeSort = { intelligence: ['-int', '-(con+int+per+str)'],
con: ['-con', '-(con+int+per+str)'], perception: ['-per', '-(con+int+per+str)'],
int: ['-int', '-(con+int+per+str)'], strength: ['-str', '-(con+int+per+str)'],
per: ['-per', '-(con+int+per+str)'],
str: ['-str', '-(con+int+per+str)'],
name: 'text()', name: 'text()',
set: 'set' set: 'set'
} }
$scope.setOrder = function(order) { $scope.order = attributeSort.name;
$scope.orderChoice = 'name';
$scope.setOrder = function (order) {
$scope.orderChoice = order;
if (order in attributeSort) { if (order in attributeSort) {
$scope.order = attributeSort[order]; $scope.order = attributeSort[order];
} }

56
website/views/options/inventory/equipment.jade
View File

@@ -1,10 +1,10 @@
.container-fluid .container-fluid
.row .row
.col-md-6.border-right .col-md-6.border-right(ng-controller="SortableInventoryController")
h3.equipment-title.hint(popover-trigger='mouseenter', h3.equipment-title.hint(popover-trigger='mouseenter',
popover-placement='right', popover-append-to-body='true', popover-placement='right', popover-append-to-body='true',
popover=env.t('battleGearText'))=env.t('battleGear') popover=env.t('battleGearText'))=env.t('battleGear')
.checkbox.equipment-title .checkbox.equipment-title
label label
input(type="checkbox", ng-model="user.preferences.autoEquip", input(type="checkbox", ng-model="user.preferences.autoEquip",
@@ -12,27 +12,31 @@
|   |  
=env.t('autoEquipBattleGear') =env.t('autoEquipBattleGear')
div .btn-toolbar
button.btn.btn-default(type="button", ng-click='dequip("battleGear");') {{env.t("unequipBattleGear")}} .btn-group
button.btn.btn-default(type="button", ng-click='dequip("battleGear");') {{env.t("unequipBattleGear")}}
.btn-group
button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
| Order By: {{env.t(orderChoice)}} #[span.caret]
ul.dropdown-menu
- each attr in ["name", "set"]
li: a(ng-click="setOrder('#{attr}')")=env.t(attr)
li.divider(role="separator")
- each attr in ["constitution", "intelligence", "perception", "strength"]
li: a(ng-click="setOrder('#{attr}')")=env.t(attr)
li.customize-menu.inventory-gear li.customize-menu.inventory-gear
menu.pets-menu(label='{{::label}}', ng-show='gear[klass]', menu.pets-menu(label='{{::label}}', ng-show='gear[klass]',
ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}', ng-controller="SortableInventoryController") ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}')
span(class="sort-menu") {{env.t('orderBy')}} div(ng-repeat='item in gear[klass] | orderBy: order')
span.btn-group.btn-group-xs button.customize-option(class='shop_{{::item.key}}',
button.btn.btn-default(ng-click='setOrder("name")')=env.t('name')
button.btn.btn-default(ng-if='klass == "armoire"' ng-click='setOrder("set")')=env.t('set')
span.btn-group.btn-group-xs
button.btn.btn-default(ng-repeat='attr in ["con", "int", "per", "str"]', ng-click='setOrder(attr)') {{env.t(attr)}}
div(ng-repeat='item in gear[klass] | orderBy:order')
button.customize-option(, class='shop_{{::item.key}}',
ng-class='{selectableInventory: user.items.gear.equipped[item.type] == item.key}', ng-class='{selectableInventory: user.items.gear.equipped[item.type] == item.key}',
ng-click='equip(item.key, "equipped")', ng-click='equip(item.key, "equipped")',
popover='{{::item.notes()}}', popover-title='{{::item.text()}}', popover='{{::item.notes()}}', popover-title='{{::item.text()}}',
popover-trigger='mouseenter', popover-placement='right', popover-trigger='mouseenter', popover-placement='right',
popover-append-to-body='true') popover-append-to-body='true')
.col-md-6 .col-md-6(ng-controller="SortableInventoryController")
h3.equipment-title.hint(popover-trigger='mouseenter', h3.equipment-title.hint(popover-trigger='mouseenter',
popover-placement='right', popover-append-to-body='true', popover-placement='right', popover-append-to-body='true',
popover=env.t('costumeText'))=env.t('costume') popover=env.t('costumeText'))=env.t('costume')
@@ -44,9 +48,19 @@
|   |  
=env.t('useCostume') =env.t('useCostume')
div .btn-toolbar
button.btn.btn-default(type="button", ng-click='dequip("costume");') {{env.t("unequipCostume")}} .btn-group
button.btn.btn-default(type="button", ng-click='dequip("petMountBackground");') {{env.t("unequipPetMountBackground")}} button.btn.btn-default(type="button", ng-click='dequip("costume");') {{env.t("unequipCostume")}}
button.btn.btn-default(type="button", ng-click='dequip("petMountBackground");') {{env.t("unequipPetMountBackground")}}
.btn-group
button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
| Order By: {{env.t(orderChoice)}} #[span.caret]
ul.dropdown-menu
- each attr in ["name", "set"]
li: a(ng-click="setOrder('#{attr}')")=env.t(attr)
li.divider(role="separator")
- each attr in ["constitution", "intelligence", "perception", "strength"]
li: a(ng-click="setOrder('#{attr}')")=env.t(attr)
li.customize-menu(ng-if='!user.preferences.costume') li.customize-menu(ng-if='!user.preferences.costume')
.well.use-costume-info .well.use-costume-info
@@ -56,13 +70,7 @@
li.customize-menu(ng-if='user.preferences.costume') li.customize-menu(ng-if='user.preferences.costume')
menu.pets-menu(label='{{::label}}', ng-show='gear[klass]', menu.pets-menu(label='{{::label}}', ng-show='gear[klass]',
ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}', ng-controller="SortableInventoryController") ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}')
span(class="sort-menu") {{env.t('orderBy')}}
span.btn-group.btn-group-xs
button.btn.btn-default(ng-click='setOrder("name")')=env.t('name')
button.btn.btn-default(ng-if='klass == "armoire"' ng-click='setOrder("set")')=env.t('set')
span.btn-group.btn-group-xs
button.btn.btn-default(ng-repeat='attr in ["con", "int", "per", "str"]', ng-click='setOrder(attr)') {{env.t(attr)}}
div(ng-repeat='item in gear[klass] | orderBy:order') div(ng-repeat='item in gear[klass] | orderBy:order')
button.customize-option(class='shop_{{::item.key}}', button.customize-option(class='shop_{{::item.key}}',
ng-class='{selectableInventory: user.items.gear.costume[item.type] == item.key}', ng-class='{selectableInventory: user.items.gear.costume[item.type] == item.key}',