jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed item detail to a detail view with the option to edit

Browse Source
This commit is contained in:
Thaum
2015-04-16 09:00:48 +00:00
parent 690eea4f29
commit 638209719e
9 changed files with 194 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
rpg-docs/client/views/GeneralCSS/general.css
View File

@@ -209,6 +209,16 @@ paper-slider {
padding-bottom: 16px; padding-bottom: 16px;
} }
.sideMargin {
margin-left: 16px;
margin-right: 16px;
}
.vertMargin {
margin-top: 16px;
margin-bottom: 16px;
}
.s { .s {
padding: 0 0 16px 0; padding: 0 0 16px 0;
} }
@@ -220,3 +230,7 @@ paper-slider {
.preline { .preline {
white-space: pre-line; white-space: pre-line;
} }
.prewrap{
white-space: pre-wrap;
}

3
rpg-docs/client/views/character/attacks/attacksViewList/attacksViewList.html Normal file
View File

@@ -0,0 +1,3 @@
<template name="attacksViewList">
Attacks view list goes here
</template>

2
rpg-docs/client/views/character/effects/effectView/effectView.html
View File

@@ -1,7 +1,7 @@
<template name="effectView"> <template name="effectView">
<div class="effectView" layout horizontal center> <div class="effectView" layout horizontal center>
{{#with statName}} {{#with statName}}
<div flex>{{statName}}</div> <div flex>{{this}}</div>
{{else}} {{else}}
<div flex>{{sourceName}}</div> <div flex>{{sourceName}}</div>
{{/with}} {{/with}}

12
rpg-docs/client/views/character/effects/effectView/effectView.js
View File

@@ -71,10 +71,10 @@ var stats = {
}; };
var operations = { var operations = {
base: {name: "Base Value"}, base: {name: "Base Value"},
proficiency: {name: "Proficiency"}, proficiency: {name: "Proficiency"},
add: {name: "Add"}, add: {name: "+"},
mul: {name: "Multiply"}, mul: {name: "x"},
min: {name: "Min"}, min: {name: "Min"},
max: {name: "Max"}, max: {name: "Max"},
advantage: {name: "Advantage"}, advantage: {name: "Advantage"},
@@ -100,16 +100,16 @@ Template.effectView.helpers({
case "Characters": case "Characters":
return Characters.findOne(this.charId, {fields: {race: 1}}).race; return Characters.findOne(this.charId, {fields: {race: 1}}).race;
default: default:
return "Inate" return "Inate";
} }
}, },
statName: function(){ statName: function(){
return stats[this.stat] && stats[this.stat].name || "No Stat" return stats[this.stat] && stats[this.stat].name || "No Stat";
}, },
operationName: function(){ operationName: function(){
if(this.operation === "proficiency") return null; if(this.operation === "proficiency") return null;
if(stats[this.stat].group === "Weakness/Resistance") return null; if(stats[this.stat].group === "Weakness/Resistance") return null;
return operations[this.operation] && operations[this.operation].name || "No Operation" return operations[this.operation] && operations[this.operation].name || "No Operation";
}, },
statValue: function(){ statValue: function(){
if(this.operation === "advantage" || if(this.operation === "advantage" ||

2
rpg-docs/client/views/character/effects/effectsViewList/effectsViewList.html
View File

@@ -1,6 +1,6 @@
<!--needs to be given charId, (parentId or stat) and type--> <!--needs to be given charId, (parentId or stat) and type-->
<template name="effectsViewList"> <template name="effectsViewList">
{{#if effects}} {{#if effects.count}}
<hr style="margin: 16px 0 16px 0;"> <hr style="margin: 16px 0 16px 0;">
<div id="effects"> <div id="effects">
<h2>Effects</h2> <h2>Effects</h2>

2
rpg-docs/client/views/character/effects/effectsViewList/effectsViewList.js
View File

@@ -1,7 +1,7 @@
Template.effectsViewList.helpers({ Template.effectsViewList.helpers({
effects: function(){ effects: function(){
if(this.parentId){ if(this.parentId){
return Effects.find({"parent.id": this.parentId, type: this.type, charId: this.charId}, {fields: {parent: 0}}); return Effects.find({"parent.id": this.parentId, charId: this.charId}, {fields: {parent: 0}});
} else if(this.stat){ } else if(this.stat){
return Effects.find({charId: this.charId, stat: this.stat}); return Effects.find({charId: this.charId, stat: this.stat});
} }

147
rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html
View File

@@ -1,57 +1,98 @@
<template name="itemDialog"> <template name="itemDialog">
{{#with item}} {{#with item}}
{{#baseDialog title=name class=colorClass}} {{#baseDialog title=itemHeading class=colorClass showEdit=true editing=editing}}
<!--Name and plural name--> {{#if editing}}
<paper-input id="itemNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input> {{> itemEdit}}
{{# if ne1 quantity}}<paper-input id="itemPluralInput" label="Plural Name" floatinglabel value={{plural}}></paper-input>{{/if}} {{else}}
<!--Container dropdown--> {{> itemDetails}}
<paper-dropdown-menu id="containerDropDown" label="Container"> {{/if}}
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{parent.id}}>
{{#each containers}}
<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<!--Equipped-->
<div center horizontal layout>
<div flex>Equipped</div>
<paper-toggle-button id="equippedInput"
checked={{enabled}}
role="button"
aria-pressed="false"
tabindex="0"
touch-action="pan-y">
</paper-toggle-button>
</div>
<!--Equipped-->
<div center horizontal layout>
<div flex>Requires Attunement</div>
<paper-checkbox id="attunementCheckbox" checked={{requiresAttunement}}></paper-checkbox>
</div>
<!--Quantity-->
<paper-input-decorator label="Quantity" floatinglabel>
<input id="quantityInput" type="number" value={{quantity}}>
</paper-input-decorator>
<!--Weight-->
<paper-input-decorator label="Weight Each (lbs)" floatinglabel>
<input id="weightInput" type="number" value={{weight}}>
</paper-input-decorator>
<!--Value-->
<paper-input-decorator label="Value Each (GP)" floatinglabel>
<input id="valueInput" type="number" value={{value}}>
</paper-input-decorator>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<!--Effects-->
{{> effectsEditList parentId=_id parentCollection="Items" charId=charId type="equipment" enabled=equipped name=name}}
<!--Attacks-->
{{> attackEditList parentId=_id parentCollection="Items" charId=charId type="equipment" enabled=equipped name=name}}
{{/baseDialog}} {{/baseDialog}}
{{/with}} {{/with}}
</template> </template>
<template name="itemDetails">
<div layout horizontal wrap center justified class="headline">
{{#if weight}}<div class="sideMargin">{{totalWeight}}lbs</div>{{/if}}
{{#if value}}<div>{{valueString totalValue}}</div>{{/if}}
</div>
<div layout horizontal wrap class="caption">
{{#if enabled}}<div class="vertMargin" style="margin-right: 16px">Equipped</div>{{/if}}
{{#if requiresAttunement}}<div class="vertMargin">Requires Attunement</div>{{/if}}
</div>
{{#if description}}
<hr class="vertMargin">
<div class="prewrap">{{description}}</div>
{{/if}}
{{> effectsViewList charId=charId parentId=_id}}
{{> attacksViewList}}
</template>
<template name="itemEdit">
<paper-input class="fullwidth" id="itemNameInput" label="Name" floatinglabel value={{name}}></paper-input>
<div layout horizontal wrap>
<paper-input-decorator label="Quantity" floatinglabel>
<input id="quantityInput" type="number" value={{quantity}}>
</paper-input-decorator>
{{# if ne1 quantity}}<paper-input flex id="itemPluralInput" label="Plural Name" floatinglabel value={{plural}}></paper-input>{{/if}}
</div>
<hr class="vertMargin">
<div layout horizontal wrap justified>
<div center horizontal layout>
<div class="padded">Container</div>
{{> containerDropdown}}
</div>
<div center horizontal layout>
<div class="padded">Equipped</div>
<paper-toggle-button id="equippedInput"
checked={{enabled}}
role="button"
aria-pressed="false"
tabindex="0"
touch-action="pan-y">
</paper-toggle-button>
</div>
<div center horizontal layout>
<div class="padded">Requires Attunement</div>
<paper-checkbox id="attunementCheckbox" checked={{requiresAttunement}}></paper-checkbox>
</div>
</div>
<hr class="vertMargin">
<div layout horizontal around-justified>
<paper-input-decorator label="Weight Each (lbs)" floatinglabel>
<input id="weightInput" type="number" value={{weight}}>
</paper-input-decorator>
<!--Value-->
<paper-input-decorator label="Value Each (GP)" floatinglabel>
<input id="valueInput" type="number" value={{value}}>
</paper-input-decorator>
</div>
<hr class="vertMargin">
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<!--Effects-->
{{> effectsEditList parentId=_id parentCollection="Items" charId=charId type="equipment" enabled=equipped name=name}}
<!--Attacks-->
{{> attackEditList parentId=_id parentCollection="Items" charId=charId type="equipment" enabled=equipped name=name}}
</template>
<template name="containerDropdown">
<paper-dropdown-menu id="containerDropDown" label="Container">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{parent.id}}>
{{#each containers}}
<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>

45
rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js
View File

@@ -1,20 +1,44 @@
var getContainers = function(charId){ var getContainers = function(charId){
return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}}).fetch(); return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}});
}; };
Template.itemDialog.onCreated(function(){
this.editing = new ReactiveVar(false);
});
Template.itemDialog.helpers({ Template.itemDialog.helpers({
item: function(){ item: function(){
return Items.findOne(this.itemId); return Items.findOne(this.itemId);
}, },
containers: function(){ editing: function(){
return getContainers(this.charId); return Template.instance().editing.get();
}, },
itemHeading: function(){
if(this.quantity === 1){
return this.name;
} else{
var pName = this.plural || this.name;
return this.quantity + " " + pName;
}
}
});
Template.itemDialog.events({
"tap #editButton": function(event, instance){
instance.editing.set(true);
},
"tap #doneEditingButton": function(event, instance){
instance.editing.set(false);
},
});
Template.itemEdit.helpers({
ne1: function(num){ ne1: function(num){
return num != 1; return num != 1;
} }
}); });
Template.itemDialog.events({ Template.itemEdit.events({
"color-change": function(event, instance){ "color-change": function(event, instance){
Items.update(instance.data.itemId, {$set: {color: event.color}}); Items.update(instance.data.itemId, {$set: {color: event.color}});
}, },
@@ -62,12 +86,21 @@ Template.itemDialog.events({
"change #attunementCheckbox": function(event){ "change #attunementCheckbox": function(event){
var value = event.currentTarget.checked; var value = event.currentTarget.checked;
Items.update(this._id, {$set: {requiresAttunement: value}}); Items.update(this._id, {$set: {requiresAttunement: value}});
}, }
});
Template.containerDropdown.helpers({
containers: function(){
return getContainers(this.charId);
}
});
Template.containerDropdown.events({
"core-select #containerDropDown": function(event){ "core-select #containerDropDown": function(event){
var detail = event.originalEvent.detail; var detail = event.originalEvent.detail;
if(!detail.isSelected) return; if(!detail.isSelected) return;
var containerId = detail.item.getAttribute("name"); var containerId = detail.item.getAttribute("name");
var item = Items.findOne(Template.currentData().itemId); var item = Items.findOne(Template.currentData()._id);
item.moveToContainer(containerId); item.moveToContainer(containerId);
} }
}); });

46
rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
View File

@@ -3,17 +3,41 @@
<core-toolbar class={{class}} hero-id="toolbar" hero> <core-toolbar class={{class}} hero-id="toolbar" hero>
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button> <paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
<div flex>{{title}}</div> <div flex>{{title}}</div>
{{#if hideColor}}{{else}} {{#if showEdit}}
<!--color--> {{#if editing}}
{{> colorDropdown}} {{#unless hideDelete}}
{{/if}} <paper-icon-button id="deleteButton"
{{#if hideDelete}}{{else}} role="button"
<paper-icon-button id="deleteButton" tabindex="0"
role="button" icon="delete"
tabindex="0" aria-label="Delete Feature"
icon="delete" noink></paper-icon-button>
aria-label="Delete Feature" {{/unless}}
noink></paper-icon-button> {{#unless hideColor}}
{{> colorDropdown}}
{{/unless}}
<paper-icon-button id="doneEditingButton"
icon="done"
aria-label="Delete Feature"
noink></paper-icon-button>
{{else}}
<paper-icon-button id="editButton"
icon="create"
aria-label="Delete Feature"
noink></paper-icon-button>
{{/if}}
{{else}}
{{#unless hideDelete}}
<paper-icon-button id="deleteButton"
role="button"
tabindex="0"
icon="delete"
aria-label="Delete Feature"
noink></paper-icon-button>
{{/unless}}
{{#unless hideColor}}
{{> colorDropdown}}
{{/unless}}
{{/if}} {{/if}}
</core-toolbar> </core-toolbar>
<div class="detailContent"> <div class="detailContent">