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

Small style and event fixes

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-23 15:08:19 +02:00
parent 33ca60c2e6
commit 1af15eff3c
24 changed files with 210 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
rpg-docs/client/views/character/effects/effectEdit/effectEdit.css
View File

@@ -1,22 +1,15 @@
html /deep/ .operationDropDown {
.effectEdit .operationDropDown {
width: 152px;
}
html /deep/ .statDropDown {
.effectEdit .statDropDown {
width: 152px;
}
html /deep/ .damageMultiplierDropDown {
.effectEdit .damageMultiplierDropDown {
width: 152px;
}
html /deep/ .effectEdit paper-input {
position: relative;
bottom: 5px;
}
html /deep/ .effectEdit {
height: 64px;
display: flex;
align-items: flex-end;
.effectEdit .deleteEffect {
flex-shrink: 0;
}

65
rpg-docs/client/views/character/effects/effectEdit/effectEdit.html
View File

@@ -1,36 +1,30 @@
<template name="effectEdit">
<div class="effectEdit" layout horizontal center>
<paper-dropdown-menu class="statDropDown"
label="Stat">
<paper-dropdown layered
class="dropdown">
<core-menu class="menu statMenu" selected={{stat}}>
{{#each statGroups}}
<div style="font-weight: bold;
margin-top: 16px;">{{this}}</div>
{{#each stats}}
<paper-item name={{stat}}>{{name}}</paper-item>
{{/each}}
{{/each}}
</core-menu>
</paper-dropdown>
<div class="effectEdit layout horizontal center">
<paper-dropdown-menu label="Stat" class="statDropDown" dynamic-align>
<dicecloud-selector class="statMenu dropdown-content" selected={{stat}} selectable="paper-item">
{{#each statGroups}}
<div style="font-weight: bold; margin-top: 16px; padding-left: 8px;">
{{this}}
</div>
{{#each stats}}
<paper-item name={{stat}}>{{name}}</paper-item>
{{/each}}
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
{{#if operations}}
<paper-dropdown-menu class="operationDropDown"
label="Operation">
<paper-dropdown layered class="dropdown">
<core-menu class="menu operationMenu" selected={{operation}}>
{{#each operations}}
<paper-item name={{operation}}>{{name}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
<paper-dropdown-menu class="operationDropDown" label="Operation" dynamic-align>
<dicecloud-selector class="dropdown-content operationMenu" selected={{operation}}>
{{#each operations}}
<paper-item name={{operation}}>{{name}}</paper-item>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
{{/if}}
{{#if effectValueTemplate}}
{{> Template.dynamic template=effectValueTemplate}}
{{else}}
<div flex></div>
<div class="flex"></div>
{{/if}}
<paper-icon-button class="deleteEffect"
icon="delete">
@@ -40,27 +34,22 @@
</template>
<template name="regularEffectValue">
<paper-input class="effectValueInput"
label="Value"
floatinglabel
value={{effectValue}}
flex
<paper-input class="effectValueInput flex"
label="Value"
floatinglabel
value={{effectValue}}
style="flex-basis: 100px;">
</paper-input>
</template>
<template name="multiplierEffectValue">
<paper-dropdown-menu class="damageMultiplierDropDown"
label="Damage Multiplier">
<paper-dropdown layered
class="dropdown">
<core-menu class="menu multiplierMenu"
<paper-dropdown-menu class="damageMultiplierDropDown" label="Damage Multiplier" dynamic-align>
<dicecloud-selector class="menu multiplierMenu dropdown-content"
selected={{value}}>
<paper-item name="0.5">Resistance</paper-item>
<paper-item name="2">Vulnerability</paper-item>
<paper-item name="0">Immunity</paper-item>
</core-menu>
</paper-dropdown>
</dicecloud-selector>
</paper-dropdown-menu>
<div flex></div>
<div class="flex"></div>
</template>

26
rpg-docs/client/views/character/effects/effectEdit/effectEdit.js
View File

@@ -1,4 +1,5 @@
//TODO add dexterity armor
// jscs:disable maximumLineLength
var stats = [
{stat: "strength", name: "Strength", group: "Ability Scores"},
{stat: "dexterity", name: "Dexterity", group: "Ability Scores"},
@@ -68,9 +69,11 @@ var stats = [
{stat: "psychicMultiplier", name: "Psychic", group: "Weakness/Resistance"},
{stat: "radiantMultiplier", name: "Radiant", group: "Weakness/Resistance"},
{stat: "slashingMultiplier", name: "Slashing", group: "Weakness/Resistance"},
{stat: "thunderMultiplier", name: "Thunder", group: "Weakness/Resistance"}
{stat: "thunderMultiplier", name: "Thunder", group: "Weakness/Resistance"},
];
// jscs:enable maximumLineLength
var statsDict = _.indexBy(stats, "stat");
var statGroups = _.groupBy(stats, "group");
var statGroupNames = _.keys(statGroups);
@@ -80,7 +83,7 @@ var attributeOperations = [
{name: "Add", operation: "add"},
{name: "Multiply", operation: "mul"},
{name: "Min", operation: "min"},
{name: "Max", operation: "max"}
{name: "Max", operation: "max"},
];
var skillOperations = [
{name: "Add", operation: "add"},
@@ -91,7 +94,7 @@ var skillOperations = [
{name: "Disadvantage", operation: "disadvantage"},
{name: "Passive Bonus", operation: "passiveAdd"},
{name: "Automatically Fail", operation: "fail"},
{name: "Conditional Benefit", operation: "conditional"}
{name: "Conditional Benefit", operation: "conditional"},
];
Template.effectEdit.helpers({
@@ -125,7 +128,7 @@ Template.effectEdit.helpers({
//default template
return "regularEffectValue";
}
},
});
Template.regularEffectValue.helpers({
@@ -135,33 +138,30 @@ Template.regularEffectValue.helpers({
});
Template.effectEdit.events({
"tap .deleteEffect": function(event){
"click .deleteEffect": function(event){
Effects.softRemoveNode(this._id);
GlobalUI.deletedToast(this._id, "Effects", "Effect");
},
"core-select .statDropDown": function(event){
"iron-select .statDropDown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var statName = detail.item.getAttribute("name");
if (statName == this.stat) return;
Effects.update(this._id, {$set: {stat: statName}});
},
"core-select .operationDropDown": function(event){
"iron-select .operationDropDown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var opName = detail.item.getAttribute("name");
if (opName == this.operation) return;
Effects.update(this._id, {$set: {operation: opName}});
},
"core-select .damageMultiplierDropDown": function(event){
"iron-select .damageMultiplierDropDown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = +detail.item.getAttribute("name");
if (value == this.value) return;
Effects.update(this._id, {$set: {
value: value,
calculation: "",
operation: "mul"
operation: "mul",
}});
},
"change .effectValueInput": function(event){
@@ -174,5 +174,5 @@ Template.effectEdit.events({
if (this.calculation === value) return;
Effects.update(this._id, {$set: {value: "", calculation: value}});
}
}
},
});