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

Updated persona tab to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-31 09:58:35 +02:00
parent 7af3b8e06e
commit 9c61493a12
13 changed files with 116 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
rpg-docs/client/globalHelpers/evaluate.js
View File

@@ -23,3 +23,11 @@ Template.registerHelper("evaluateSignedSpaced", function(charId, string) {
Template.registerHelper("evaluateString", function(charId, string) {
return evaluateString(charId, string);
});
Template.registerHelper("evaluateShortString", function(charId, string) {
if (_.isString(string)){
return evaluateString(
charId, string.split(/^( *[-*_]){3,} *(?:\n+|$)/m)[0]
);
}
});

6
rpg-docs/client/style/cards.css
View File

@@ -45,7 +45,7 @@
padding: 16px 0;
}
.card .bottom.list .subhead {
.card .bottom.list .paper-font-subhead {
color: rgba(0,0,0,0.54);
font-size: 14px;
font-weight: 500;
@@ -79,3 +79,7 @@
.card .left paper-icon-button[disabled] {
color: rgba(255, 255, 255, 0.2);
}
.card img, .card iron-image {
max-width: 100%;
}

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

@@ -102,7 +102,7 @@
</div>
{{#if description}}
<div class="bottom flex">
{{#markdown}}{{evaluateString charId shortDescription}}{{/markdown}}
{{#markdown}}{{evaluateShortString charId description}}{{/markdown}}
</div>
{{/if}}
{{#if hasUses}}

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

@@ -3,11 +3,6 @@ Template.features.helpers({
var features = Features.find({charId: this._id}, {sort: {color: 1, name: 1}});
return features;
},
shortDescription: function() {
if (_.isString(this.description)){
return this.description.split(/^( *[-*_]){3,} *(?:\n+|$)/m)[0];
}
},
hasUses: function(){
return this.usesValue() > 0;
},

28
rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html
View File

@@ -2,10 +2,9 @@
{{#baseDialog title=name class="deep-purple white-text" hideColor="true" hideDelete="true" startEditing=startEditing}}
{{#with char}}
<div>{{alignment}} {{gender}} {{race}}</div>
<core-image style="width: 350px; height: 350px; margin-top: 8px;"
sizing="cover"
hero-id="image" hero
src={{picture}}></core-image>
<iron-image style="width: 350px; height: 350px; margin-top: 8px;"
sizing="contain"
src={{picture}}></iron-image>
{{/with}}
{{else}}
{{#with char}}
@@ -15,22 +14,21 @@
</template>
<template name="personaDetailsEdit">
<div layout horizontal center-justified>
<div flex style="max-width: 350px;" layout vertical>
<div class="layout horizontal center-justified">
<div class="flex layout vertical" style="max-width: 400px;">
<!--Name-->
<paper-input id="nameInput" label="Name" floatinglabel value={{name}}></paper-input>
<paper-input id="nameInput" label="Name" value={{name}}></paper-input>
<!--Alignment-->
<paper-input id="alignmentInput" label="Alignment" floatinglabel value={{alignment}}></paper-input>
<paper-input id="alignmentInput" label="Alignment" value={{alignment}}></paper-input>
<!--Gender-->
<paper-input id="genderInput" label="Gender" floatinglabel value={{gender}}></paper-input>
<paper-input id="genderInput" label="Gender" value={{gender}}></paper-input>
<!--Race-->
<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input>
<paper-input id="raceInput" label="Race" value={{race}}></paper-input>
<!--Picture-->
<paper-input id="pictureInput" label="Picture URL" floatinglabel value={{picture}}></paper-input>
<core-image style="height:350px; width: 100%; margin-top: 8px;"
sizing="cover"
hero-id="image" hero
src={{picture}}></core-image>
<paper-input id="pictureInput" label="Picture URL" value={{picture}}></paper-input>
<iron-image style="margin-top: 8px; width: 100%; height: 400px;"
sizing="contain"
src={{picture}}></iron-image>
</div>
</div>
</template>

39
rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.js
View File

@@ -1,7 +1,3 @@
Template.personaDetailsEdit.onRendered(function(){
updatePolymerInputs(this);
});
Template.personaDetailsDialog.helpers({
char: function() {
return Characters.findOne(
@@ -11,25 +7,20 @@ Template.personaDetailsDialog.helpers({
}
});
inputHandler = (field) => _.debounce(function(event){
var input = event.currentTarget.value;
Characters.update(this._id, {
$set: {[field]: input}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}, 300);
Template.personaDetailsEdit.events({
"change #nameInput": function(event){
var input = event.currentTarget.value;
Characters.update(this._id, {$set: {name: input}});
},
"change #alignmentInput": function(event){
var input = event.currentTarget.value;
Characters.update(this._id, {$set: {alignment: input}});
},
"change #genderInput": function(event){
var input = event.currentTarget.value;
Characters.update(this._id, {$set: {gender: input}});
},
"change #raceInput": function(event){
var input = event.currentTarget.value;
Characters.update(this._id, {$set: {race: input}});
},
"change #pictureInput": function(event){
var input = event.currentTarget.value;
Characters.update(this._id, {$set: {picture: input}});
},
"input #nameInput, change #nameInput": inputHandler("name"),
"input #alignmentInput, change #alignmentInput": inputHandler("alignment"),
"input #genderInput, change #genderInput": inputHandler("gender"),
"input #raceInput, change #raceInput": inputHandler("race"),
"input #pictureInput, change #pictureInput": inputHandler("picture"),
});

103
rpg-docs/client/views/character/persona/persona.html
View File

@@ -1,74 +1,63 @@
<template name="persona">
<div fit>
<div id="persona" class="scroll-y" fit>
<div class="column-container">
{{#with characterDetails}}
<div>
<paper-material class="card"
hero-id="main" {{detailHero "details" _id}}>
{{#unless picture}}
<div class="top subhead characterField {{colorClass}}"
hero-id="toolbar" {{detailHero "details" _id}}>
<div class="subhead" flex
hero-id="title" {{detailHero "details" _id}}>
{{name}}
</div>
</div>
{{else}}
<core-image class="characterField clickable"
style="height:350px; width: 100%;
background-color: #e8e8e8;"
sizing="cover"
hero-id="image" {{detailHero "details" _id}}
src={{picture}}></core-image>
{{/unless}}
<div class="bottom">
{{#if picture}}
<div class="title" hero-id="title" {{detailHero "details" _id}}>
{{name}}
</div>
{{/if}}
<div class="subhead">
{{alignment}} {{gender}} {{race}}
<div class="column-container animation-slider">
{{#with characterDetails}}
<div>
<paper-material class="card">
{{#unless picture}}
<div class="top paper-font-subhead characterField {{colorClass}}">
<div class="paper-font-subhead flex">
{{name}}
</div>
</div>
</paper-material>
</div>
{{/with}}
<div>{{> containerCard characterField "description" "Description"}}</div>
<div>{{> containerCard characterField "personality" "Personality Traits"}}</div>
<div>{{> containerCard characterField "ideals" "Ideals"}}</div>
<div>{{> containerCard characterField "bonds" "Bonds"}}</div>
<div>{{> containerCard characterField "flaws" "Flaws"}}</div>
<div>{{> containerCard characterField "backstory" "Background"}}</div>
<div>
<paper-material class="card">
<div class="white top subhead">
Languages
</div>
<div class="bottom list">
{{#each languages}}
{{> proficiencyListItem}}
{{/each}}
{{else}}
<iron-image class="characterField clickable"
style="height:350px; width: 100%;
background-color: #424242;"
sizing="contain"
src={{picture}}></iron-image>
{{/unless}}
<div class="bottom">
{{#if picture}}
<div class="paper-font-title">
{{name}}
</div>
{{/if}}
<div class="paper-font-subhead">
{{alignment}} {{gender}} {{race}}
</div>
</div>
</paper-material>
</div>
</div>
{{/with}}
<div>{{> containerCard characterField "description" "Description"}}</div>
<div>{{> containerCard characterField "personality" "Personality Traits"}}</div>
<div>{{> containerCard characterField "ideals" "Ideals"}}</div>
<div>{{> containerCard characterField "bonds" "Bonds"}}</div>
<div>{{> containerCard characterField "flaws" "Flaws"}}</div>
<div>{{> containerCard characterField "backstory" "Background"}}</div>
<div>
<paper-material class="card">
<div class="white top paper-font-subhead">
Languages
</div>
<div class="bottom list">
{{#each languages}}
{{> proficiencyListItem}}
{{/each}}
</div>
</paper-material>
</div>
</div>
</template>
<template name="containerCard">
{{#containerCardHelper this}}{{evaluateString _id body}}{{/containerCardHelper}}
{{#containerCardHelper this}}{{evaluateShortString _id body}}{{/containerCardHelper}}
</template>
<template name="containerCardHelper">
<paper-material class="card {{class}}"
hero-id="main" {{detailHero field ../_id}}>
<div class="top subhead {{colorClass}} {{topClass}}"
hero-id="toolbar" {{detailHero field ../_id}}>
<div class="subhead" flex
hero-id="title" {{detailHero field ../_id}}>
<paper-material class="card {{class}}">
<div class="top paper-font-subhead {{colorClass}} {{topClass}}">
<div class="paper-font-subhead flex">
{{title}}
</div>
</div>

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

@@ -16,7 +16,6 @@ Template.persona.helpers({
char.field = "details";
char.title = char.name;
char.color = "d";
char.startEditing = true;
return char;
},
characterField: function(field, title){
@@ -39,28 +38,27 @@ Template.persona.helpers({
});
Template.persona.events({
"tap .characterField": function(event){
"click .characterField": function(event){
if (this.field == "details"){
this.charId = Template.parentData()._id;
GlobalUI.setDetail({
pushDialogStack({
template: "personaDetailsDialog",
data: this,
heroId: this._id + this.field,
element: event.currentTarget.parentElement,
});
} else {
var template = "textDialog";
if (this.field === "backstory") template = "backgroundDialog";
var charId = Template.parentData()._id;
GlobalUI.setDetail({
pushDialogStack({
template: template,
data: {
charId: charId,
field: this.field,
title: this.title,
color: this.color,
startEditing: true,
},
heroId: this._id + this.field,
element: event.currentTarget.parentElement,
});
}
}

9
rpg-docs/client/views/character/persona/textDialog/textDialog.html
View File

@@ -1,5 +1,5 @@
<template name="textDialog">
{{#baseDialog title=title class=colorClass hideColor="true" hideDelete="true" startEditing=startEditing}}
{{#baseDialog title=title class=colorClass hideColor="true" hideDelete="true"}}
<div>{{#markdown}}{{evaluateString charId value}}{{/markdown}}</div>
{{else}}
{{> textDialogEdit}}
@@ -7,9 +7,6 @@
</template>
<template name="textDialogEdit">
<paper-input-decorator label={{title}} floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="textInput" placeholder value={{value}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-textarea label={{title}} id="textInput" value={{value}}>
</paper-textarea>
</template>

17
rpg-docs/client/views/character/persona/textDialog/textDialog.js
View File

@@ -7,10 +7,6 @@ Template.textDialog.helpers({
}
});
Template.textDialogEdit.onRendered(function(){
updatePolymerInputs(this);
});
Template.textDialogEdit.helpers({
value: function(){
var fieldSelector = {fields: {}};
@@ -21,10 +17,13 @@ Template.textDialogEdit.helpers({
});
Template.textDialogEdit.events({
"change #textInput": function(event){
"input #textInput": _.debounce(function(event){
var input = event.currentTarget.value;
var setter = {$set: {}};
setter.$set[this.field] = input;
Characters.update(this.charId, setter);
}
Characters.update(this.charId, {
$set: {[this.field]: input}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}, 300),
});

6
rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.html
View File

@@ -1,9 +1,7 @@
<template name="proficiencyListItem">
<div class="item-slot">
<div class="proficiency item small layout horizontal center"
hero-id="main" {{detailHero}}>
<iron-icon icon="{{profIcon}}"
style="margin-right: 16px;"></iron-icon>
<div class="proficiency item small layout horizontal center">
<iron-icon icon="{{profIcon}}" style="margin-right: 16px;"></iron-icon>
<div class="flex">{{getName}}</div>
</div>
</div>

8
rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.js
View File

@@ -14,7 +14,11 @@ Template.proficiencyListItem.helpers({
});
Template.proficiencyListItem.events({
"tap .proficiency": function(event, instance){
openParentDialog(this.parent, this.charId, this._id);
"click .proficiency": function(event, instance){
openParentDialog({
parent: this.parent,
charId: this.charId,
element: event.currentTarget,
});
}
});

4
rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
View File

@@ -85,3 +85,7 @@
.dialog-stack .dialog .buttons {
padding: 8px 8px 8px 24px;
}
.dialog-stack .dialog img, .dialog-stack .dialog iron-image {
max-width: 100%;
}