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

Upgraded spells page to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-30 13:02:22 +02:00
parent fd21f4f7d7
commit 7af3b8e06e
12 changed files with 435 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
rpg-docs/client/views/character/spells/spellDialog/spellDialog.css
View File

@@ -1,3 +1,7 @@
.spellDialog paper-checkbox {
margin: 8px 16px 8px 8px;
.spell-dialog paper-checkbox {
margin: 8px;
}
.spell-dialog paper-dropdown-menu, .spell-dialog paper-input {
margin: 0 4px;
}

159
rpg-docs/client/views/character/spells/spellDialog/spellDialog.html
View File

@@ -1,36 +1,38 @@
<template name="spellDialog">
{{#with spell}}
{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
{{> spellDetails}}
{{else}}
{{> spellEdit}}
{{/baseDialog}}
{{/with}}
<div class="spell-dialog">
{{#with spell}}
{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
{{> spellDetails}}
{{else}}
{{> spellEdit}}
{{/baseDialog}}
{{/with}}
</div>
</template>
<template name="spellDetails">
<div class="body2">
<div class="paper-font-body2">
Level {{level}} {{school}} {{#if ritual}}ritual{{/if}}, {{preparedString}}
</div>
<div style="margin: 16px 0 16px 0;">
{{#if castingTime}}
<div>
<span class="body2">Casting Time: </span><span>{{castingTime}}</span>
<span class="paper-font-body2">Casting Time: </span><span>{{castingTime}}</span>
</div>
{{/if}}
{{#if range}}
<div>
<span class="body2">Range: </span><span>{{range}}</span>
<span class="paper-font-body2">Range: </span><span>{{range}}</span>
</div>
{{/if}}
{{#if getComponents}}
<div>
<span class="body2">Components: </span><span>{{getComponents}}</span>
<span class="paper-font-body2">Components: </span><span>{{getComponents}}</span>
</div>
{{/if}}
{{#if duration}}
<div>
<span class="body2">Duration: </span><span>{{duration}}</span>
<span class="paper-font-body2">Duration: </span><span>{{duration}}</span>
</div>
{{/if}}
</div>
@@ -39,101 +41,78 @@
</template>
<template name="spellEdit">
<div horizontal layout>
<paper-input id="spellNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
</div>
<div layout horizontal justified wrap>
<paper-dropdown-menu id="schoolDropdown" label="School">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{school}}>
{{#each magicSchools}}
<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-dropdown-menu id="levelDropdown" label="Level">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{level}}>
{{#each spellLevels}}
<paper-item name={{level}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<div class="horizontal layout wrap">
<paper-input id="spellNameInput" label="Name" class="flex" value={{name}}></paper-input>
<paper-dropdown-menu id="listDropdown" label="Spell List">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{parent.id}}>
{{#each spellLists}}
<dicecloud-selector class="dropdown-content" selected={{parent.id}}>
{{#each spellLists}}
<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<paper-dropdown-menu id="preparedDropdown" label="School">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{prepared}}>
{{#each preparedOptions}}
</div>
<div class="layout horizontal center justified wrap">
<paper-dropdown-menu id="levelDropdown" label="Level">
<dicecloud-selector class="dropdown-content" selected={{level}}>
{{#each spellLevels}}
<paper-item name={{level}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<paper-dropdown-menu id="schoolDropdown" label="School">
<dicecloud-selector class="dropdown-content" selected={{school}}>
{{#each magicSchools}}
<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<paper-dropdown-menu id="preparedDropdown" label="Prepared">
<dicecloud-selector class="dropdown-content" selected={{prepared}}>
{{#each preparedOptions}}
<paper-item name={{value}} class="containerMenuItem">{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<paper-checkbox id="ritualCheckbox" class="sideMargin" checked={{ritual}}>
Ritual
</paper-checkbox>
</div>
<hr class="vertMargin">
<div horizontal layout center justified wrap>
<div layout horizontal center>
<span>Verbal:</span>
<paper-checkbox id="verbalCheckbox" class="sideMargin" checked={{components.verbal}}></paper-checkbox>
</div>
<div layout horizontal center>
<span>Somatic:</span>
<paper-checkbox id="somaticCheckbox" class="sideMargin" checked={{components.somatic}}></paper-checkbox>
</div>
<div layout horizontal center>
<span>Concentration:</span>
<paper-checkbox id="concentrationCheckbox" class="sideMargin" checked={{components.concentration}}></paper-checkbox>
</div>
<div layout horizontal center>
<span>Ritual: </span>
<paper-checkbox id="ritualCheckbox" class="sideMargin" checked={{ritual}}></paper-checkbox>
</div>
</div>
<div layout horizontal center>
<div>Material: </div>
<paper-input id="materialInput" class="sideMargin" label="Material Components" floatinglabel value={{components.material}} flex></paper-input>
</div>
<hr class="vertMargin">
<div layout horizontal justified wrap>
<div class="layout horizontal center justified wrap">
<paper-input id="castingTimeInput"
label="Casting Time"
value={{castingTime}}
floatinglabel
flex></paper-input>
class="flex"
></paper-input>
<paper-input id="rangeInput"
class="sideMargin"
class="sideMargin flex"
label="Range"
value={{range}}
floatinglabel
flex></paper-input>
></paper-input>
</div>
<div class="horizontal layout center justified wrap">
<paper-checkbox id="verbalCheckbox" class="sideMargin" checked={{components.verbal}}>
Verbal
</paper-checkbox>
<paper-checkbox id="somaticCheckbox" class="sideMargin" checked={{components.somatic}}>
Somatic
</paper-checkbox>
<paper-input id="materialInput" class="sideMargin flex" label="Material Components" value={{components.material}}>
</paper-input>
</div>
<div class="horizontal laout center justified wrap">
<paper-input id="durationInput"
label="Duration"
value={{duration}}
floatinglabel
flex></paper-input>
class="flex"
></paper-input>
<paper-checkbox id="concentrationCheckbox" class="sideMargin" checked={{components.concentration}}>
Concentration
</paper-checkbox>
</div>
<hr class="vertMargin">
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="descriptionInput" placeholder value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-textarea id="descriptionInput" label="Description" value="{{description}}">
</paper-textarea>
{{> attackEditList parentId=_id parentCollection="Spells" charId=charId enabled=true name=name}}
</template>

99
rpg-docs/client/views/character/spells/spellDialog/spellDialog.js
View File

@@ -24,7 +24,7 @@ Template.spellDialog.events({
"tap #deleteButton": function(event, instance){
Spells.softRemoveNode(instance.data.spellId);
GlobalUI.deletedToast(instance.data.spellId, "Spells", "Spell");
GlobalUI.closeDetail();
popDialogStack();
},
});
@@ -47,10 +47,6 @@ Template.spellDetails.helpers({
},
});
Template.spellEdit.onRendered(function(){
updatePolymerInputs(this);
});
Template.spellEdit.helpers({
spellLists: function(){
return SpellLists.find({charId: this.charId}, {fields: {name: 1}});
@@ -70,55 +66,92 @@ Template.spellEdit.helpers({
},
});
const debounce = (f) => _.debounce(f, 300);
Template.spellEdit.events({
"change #spellNameInput, input #spellNameInput": function(event){
"change #spellNameInput, input #spellNameInput": debounce(function(event){
const input = event.currentTarget;
var value = input.value;
if (!value){
input.invalid = true;
input.errorMessage = "Name is required";
} else {
input.invalid = false;
Spells.update(this._id, {
$set: {name: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}
}),
"change #castingTimeInput, input #castingTimeInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {name: value}});
},
"change #castingTimeInput": function(event){
Spells.update(this._id, {
$set: {castingTime: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #rangeInput, input #rangeInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {castingTime: value}});
},
"change #rangeInput": function(event){
Spells.update(this._id, {
$set: {range: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #durationInput, input #durationInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {range: value}});
},
"change #durationInput": function(event){
Spells.update(this._id, {
$set: {duration: value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #materialInput, input #materialInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {duration: value}});
},
"change #materialInput": function(event){
Spells.update(this._id, {
$set: {"components.material": value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"input #descriptionInput": debounce(function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {"components.material": value}});
},
"change #descriptionInput": function(event){
var value = event.currentTarget.value;
Spells.update(this._id, {$set: {"description": value}});
},
"core-select #listDropdown": function(event){
Spells.update(this._id, {
$set: {"description": value}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"iron-select #listDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
if (value == this.parent.id) return;
Spells.update(this._id, {$set: {"parent.id": value}});
Spells.update(this._id, {
$set: {"parent.id": value}
});
},
"core-select #levelDropdown": function(event){
"iron-select #levelDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
if (value == this.level) return;
Spells.update(this._id, {$set: {level: value}});
},
"core-select #schoolDropdown": function(event){
"iron-select #schoolDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
if (value == this.school) return;
Spells.update(this._id, {$set: {school: value}});
},
"core-select #preparedDropdown": function(event){
"iron-select #preparedDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
if (value == this.school) return;
Spells.update(this._id, {$set: {prepared: value}});