Implemented Hero-dialog editing of features

This commit is contained in:
Thaum
2015-01-30 10:14:46 +00:00
parent 848902c358
commit 37e8831e0c
14 changed files with 242 additions and 105 deletions

View File

@@ -1,27 +1,32 @@
<template name="featureDialog">
{{#with feature}}
<paper-menu-button>
<paper-icon-button role="button" tabindex="0" icon="delete" aria-label="Delete Feature" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<paper-button id="deleteFeature">Delete Feature</paper-button>
<paper-button>Cancel</paper-button>
</paper-dropdown>
</paper-menu-button>
<div class="featureDialogWidth"></div>
<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
<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>
<h3>Effects</h3>
{{#each effects}}
{{>effectEdit}}
{{/each}}
<br>
<paper-icon-button id="addEffectButton" role="button" tabindex="0" icon="add" aria-label="addEffect"></paper-icon-button>
<core-header-panel fit>
<core-toolbar>
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
<div flex>{{name}}</div>
<paper-menu-button>
<paper-icon-button role="button" tabindex="0" icon="delete" aria-label="Delete Feature" noink></paper-icon-button>
<paper-dropdown layered class="dropdown">
<paper-button id="deleteFeature">Delete Feature</paper-button>
<paper-button>Cancel</paper-button>
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
<div class="featureContent">
<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
<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>
<h3>Effects</h3>
{{#each effects}}
{{>effectEdit}}
{{/each}}
<div layout horizontal end-justified>
<paper-button id="addEffectButton" raised>Add Effect</paper-button>
</div>
</div>
</core-header-panel>
{{/with}}
<paper-button affirmative>Done</paper-button>
</template>

View File

@@ -5,13 +5,19 @@ Template.featureDialog.rendered = function(){
if(feature && feature.name) Session.set("global.ui.dialogHeader", feature.name);
})
//after the dialog is built, open it
_.defer(function(){GlobalUI.dialog.open()});
if (!this.alreadyRendered){
Session.set("global.ui.detailShow", true);
this.alreadyRendered = true;
}
}
Template.featureDialog.events({
"tap #backButton": function(){
GlobalUI.closeDetail()
},
"tap #deleteFeature": function(){
Features.remove(this._id);
GlobalUI.closeDialog()
GlobalUI.closeDetail()
},
"tap #addEffectButton": function(){
Effects.insert({

View File

@@ -1,3 +1,12 @@
body /deep/ .featureDialogWidth {
width: 560px;
}
.featureContent {
padding: 24px;
}
#addEffectButton {
background: #d23f31;
color: #fff;
}

View File

@@ -9,7 +9,7 @@
</div>
<div class="features">
{{#each features}}
<paper-shadow class="featureCard">
<paper-shadow class="featureCard" hero-id="main">
<div class="featureCardTop">
<h2>{{name}}</h2>
</div>
@@ -20,6 +20,13 @@
</div>
<div class="fab-buffer"></div>
</div>
<paper-fab id="addFeature" class="floatyButton" icon="add" title="Add" role="button" tabindex="0" aria-label="Add"></paper-fab>
<paper-fab id="addFeature"
class="floatyButton"
icon="add"
title="Add"
role="button"
tabindex="0"
aria-label="Add"
hero-id="main"></paper-fab>
</div>
</template>

View File

@@ -8,20 +8,18 @@ Template.features.helpers({
Template.features.events({
"tap #addFeature": function(event){
var featureId = Features.insert({name: "New Feature", charId: this._id});
GlobalUI.setDialog({
heading: "New Feature",
template: "featureDialog",
data: {featureId: featureId, charId: this._id},
fullOnMobile: true
GlobalUI.setDetail({
template: "featureDialog",
data: {featureId: featureId, charId: this._id},
hero: $(event.currentTarget)
})
},
"tap .featureCard": function(event){
var featureId = this._id;
GlobalUI.setDialog({
heading: this.name,
template: "featureDialog",
data: {featureId: featureId, charId: Template.parentData()._id},
fullOnMobile: true
GlobalUI.setDetail({
template: "featureDialog",
data: {featureId: featureId, charId: Template.parentData()._id},
hero: $(event.currentTarget)
})
}
});