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

Features detail dialog is now view first with option to edit

Browse Source
This commit is contained in:
Thaum
2015-04-17 10:13:46 +00:00
parent 0536a6ab01
commit 7e4c8a21aa
2 changed files with 149 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
rpg-docs/client/views/character/features/featureDialog/featureDialog.html
View File

@@ -1,40 +1,85 @@
<template name="featureDialog">
{{#with feature}}
{{#baseDialog title=name class=colorClass}}
<!--name-->
<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
<hr style="margin: 16px 0 16px 0;">
<!--description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<hr style="margin: 16px 0 16px 0;">
<div layout horizontal center style="height: 60px;">
<div class="caption">Limit Uses</div>
<paper-toggle-button id="limitUseCheck"
checked={{usesSet}}
role="button"
aria-pressed="false"
tabindex="0"
touch-action="pan-y"
style="margin-left: 8px; margin-right:8px;">
</paper-toggle-button>
{{#if usesSet}}
<paper-input id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
{{/if}}
<paper-dropdown-menu id="enabledDropdown" label="Enable Feature">
<paper-dropdown layered class="dropdown">
<core-menu id="enabledMenu" class="menu" selected={{enabled}} on-tap="onStatMenuTap">
<paper-item name="alwaysEnabled"> Always Enabled </paper-item>
<paper-item name="enabled"> Enabled </paper-item>
<paper-item name="disabled"> Disabled </paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</div>
{{> effectsEditList parentId=_id parentCollection="Features" charId=charId type="feature" name=name enabled=isEnabled}}
{{#baseDialog title=name class=colorClass showEdit=true editing=editing}}
{{#if editing}}
{{> featureEdit}}
{{else}}
{{> featureDetails}}
{{/if}}
{{/baseDialog}}
{{/with}}
</template>
</template>
<template name="featureDetails">
{{#if or canEnable hasUses}}
<div layout horizontal center justified wrap>
{{#if canEnable}}
<div>enabled:</div>
<paper-checkbox class="sideMargin" checked={{enabled}}></paper-checkbox>
{{/if}}
{{#if hasUses}}
<div class="subhead" style="margin-right: 16px">
Uses: {{usesLeft}}/{{usesValue}}
</div>
{{/if}}
{{#if hasUses}}
<div layout horizontal>
<paper-button class="useFeature" disabled={{noUsesLeft}}>Use</paper-button>
<paper-button class="resetFeature" disabled={{usesFull}}>Reset</paper-button>
</div>
{{/if}}
</div>
<hr class="vertMargin">
{{/if}}
{{#if description}}
<div class="prewrap">{{description}}</div>
{{/if}}
{{> effectsViewList charId=charId parentId=_id}}
</template>
<template name="featureEdit">
<!--name-->
<paper-input id="featureNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
<hr class="vertMargin">
<div layout horizontal center style="height: 60px;">
<paper-dropdown-menu id="enabledDropdown" label="Enable Feature">
<paper-dropdown layered class="dropdown">
<core-menu id="enabledMenu" class="menu" selected={{enabledSelection}} on-tap="onStatMenuTap">
<paper-item name="alwaysEnabled"> Always Enabled </paper-item>
<paper-item name="enabled"> Enabled </paper-item>
<paper-item name="disabled"> Disabled </paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<div layout horizontal center class="sideMargin">
<div>Limit Uses: </div>
<paper-toggle-button id="limitUseCheck"
class="sideMargin"
checked={{usesSet}}
role="button"
aria-pressed="false"
tabindex="0"
touch-action="pan-y">
</paper-toggle-button>
</div>
{{#if usesSet}}
<paper-input flex id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
{{/if}}
</div>
<hr class="vertMargin">
<!--description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
{{> effectsEditList parentId=_id parentCollection="Features" charId=charId type="feature" name=name enabled=enabled}}
</template>

80
rpg-docs/client/views/character/features/featureDialog/featureDialog.js
View File

@@ -1,12 +1,80 @@
Template.featureDialog.onCreated(function(){
this.editing = new ReactiveVar(false);
});
Template.featureDialog.helpers({
editing: function(){
return Template.instance().editing.get();
},
feature: function(){
return Features.findOne(this.featureId);
},
});
Template.featureDialog.events({
"color-change": function(event, instance){
Features.update(instance.data.featureId, {$set: {color: event.color}});
},
"tap #editButton": function(event, instance){
instance.editing.set(true);
},
"tap #doneEditingButton": function(event, instance){
instance.editing.set(false);
},
"tap #deleteButton": function(event, instance){
Features.softRemoveNode(instance.data.featureId);
GlobalUI.deletedToast(instance.data.featureId, "Features", "Feature");
GlobalUI.closeDetail();
},
});
Template.featureDetails.helpers({
or: function(a, b){
return a ||b;
},
hasUses: function(){
return this.usesValue() > 0;
},
noUsesLeft: function(){
return this.usesLeft() <= 0;
},
usesFull: function(){
return this.usesLeft() >= this.usesValue();
},
});
Template.featureDetails.events({
"tap .useFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$inc: {used: 1}});
},
"tap .resetFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$set: {used: 0}});
},
"change .enabledCheckbox": function(event){
var enabled = !this.enabled;
Features.update(this._id, {$set: {enabled: enabled}});
}
});
Template.featureEdit.onRendered(function(){
updatePolymerInputs(this);
});
Template.featureEdit.helpers({
usesSet: function(){
return _.isString(this.uses);
},
enabledSelection: function(){
if(!this.enabled) return "disabled";
if(this.alwaysEnabled) return "alwaysEnabled";
return "enabled";
}
});
Template.featureEdit.events({
"change #featureNameInput": function(event){
var name = Template.instance().find("#featureNameInput").value;
Features.update(this._id, {$set: {name: name}});
@@ -45,15 +113,3 @@ Template.featureDialog.events({
Features.update(this._id, {$set: setter});
},
});
Template.featureDialog.helpers({
feature: function(){
return Features.findOne(this.featureId);
},
usesSet: function(){
return _.isString(this.uses);
},
isEnabled: function(){
return this.enabled !== "disabled";
}
});