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

Updated useraccounts, character settings to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-19 15:43:48 +02:00
parent 137a94f251
commit c4a488a176
81 changed files with 570 additions and 2019 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
rpg-docs/client/views/character/characterSettings/characterSettings.html
View File

@@ -1,27 +1,24 @@
<template name="characterSettings">
{{#with character}}
<div style="height: 100px;">
<table style="width: 100%;">
<tr>
<td>Hide Spells tab</td>
<td>
<paper-toggle-button id="hideSpellcasting"
checked={{settings.hideSpellcasting}}
touch-action="pan-y">
</paper-toggle-button>
</td>
</tr>
<tr>
<td>Use variant encumbrance</td>
<td>
<paper-toggle-button id="variantEncumbrance"
checked={{settings.useVariantEncumbrance}}
touch-action="pan-y">
</paper-toggle-button>
</td>
</tr>
</table>
<div class="fit layout vertical">
<app-header-layout has-scrolling-region class="feedback flex">
<app-header fixed effects="waterfall">
<app-toolbar>
<div main-title>Character Settings</div>
</app-toolbar>
</app-header>
<div class="form flex">
<paper-toggle-button id="hideSpellcasting" checked={{settings.hideSpellcasting}}>
Hide Spells tab
</paper-toggle-button>
<paper-toggle-button id="variantEncumbrance" checked={{settings.useVariantEncumbrance}}>
Use variant encumbrance
</paper-toggle-button>
</div>
</app-header-layout>
<div class="buttons layout horizontal end-justified">
<paper-button class="doneButton"> Done </paper-button>
</div>
</div>
{{/with}}
<paper-button id="doneButton" affirmative> Done </paper-button>
</template>

3
rpg-docs/client/views/character/characterSettings/characterSettings.js
View File

@@ -23,4 +23,7 @@ Template.characterSettings.events({
);
}
},
"click .doneButton": function(event, instance){
popDialogStack();
},
});

25
rpg-docs/client/views/character/characterSettings/deleteCharacterConfirmation.html
View File

@@ -1,9 +1,20 @@
<template name="deleteCharacterConfirmation">
<div>
Deleting a character cannot be undone.<br>
To continue type "{{name}}" into the box below.<br>
<paper-input id="nameInput" label="type the characters's name here" style="width: 100%;"></paper-input><br>
<paper-button id="deleteButton" style={{getStyle}} disabled={{cantDelete}}>Delete Character</paper-button>
<div class="fit layout vertical">
<app-header-layout has-scrolling-region class="feedback flex">
<app-header fixed effects="waterfall">
<app-toolbar>
<div main-title>Delete Character</div>
</app-toolbar>
</app-header>
<div class="form flex">
Deleting a character cannot be undone.<br>
To continue type "{{name}}" into the box below.<br>
<paper-input id="nameInput" label="type the characters's name here" style="width: 100%;"></paper-input><br>
<paper-button id="deleteButton" style={{getStyle}} disabled={{cantDelete}}>Delete Character</paper-button>
</div>
</app-header-layout>
<div class="buttons layout horizontal end-justified">
<paper-button class="cancelButton"> Cancel </paper-button>
</div>
</div>
<paper-button id="cancelButton" affirmative> Cancel </paper-button>
</template>
</template>

11
rpg-docs/client/views/character/characterSettings/deleteCharacterConfirmation.js
View File

@@ -18,11 +18,14 @@ Template.deleteCharacterConfirmation.events({
var canDel = instance.find("#nameInput").value === this.name;
instance.canDelete.set(canDel);
},
"tap #deleteButton": function(event, instance) {
"click #deleteButton": function(event, instance) {
if (instance.find("#nameInput").value === this.name) {
GlobalUI.closeDialog();
Router.go("/");
popDialogStack();
Router.go("/characterList");
Characters.remove(this._id);
}
}
},
"click .cancelButton": function(event, instance){
popDialogStack();
},
});

111
rpg-docs/client/views/character/characterSettings/shareDialog.html
View File

@@ -1,54 +1,65 @@
<template name="shareDialog">
<div>
<paper-dropdown-menu class="visibilityDropdown" label="Who can view this character">
<paper-listbox class="dropdown-content" selected={{viewPermission}} attr-for-selected="name">
<paper-item name="whitelist">Only people I share with</paper-item>
<paper-item name="public">Anyone with link</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<div>
{{#if readers.length}}
<div class="paper-font-subhead">
Can View
</div>
{{#each id in readers}}
<div class="layout horizontal center">
{{#with id=id}}
<paper-icon-button class="deleteShare" icon="delete">
</paper-icon-button>
{{/with}}
<div class="flex">{{username id}}</div>
</div>
{{/each}}
{{/if}}
{{#if writers.length}}
<div class="paper-font-subhead">
Can Edit
</div>
{{#each id in writers}}
<div class="layout horizontal center">
{{#with id=id}}
<paper-icon-button class="deleteShare" icon="delete">
</paper-icon-button>
{{/with}}
<div class="flex">{{username id}}</div>
</div>
{{/each}}
{{/if}}
<div class="fit layout vertical">
<app-header-layout has-scrolling-region class="feedback flex">
<app-header fixed effects="waterfall">
<app-toolbar>
<div main-title>Share</div>
</app-toolbar>
</app-header>
<div class="form flex">
<paper-dropdown-menu label="Who can view this character">
<paper-listbox class="visibilityDropdown dropdown-content" selected={{viewPermission}} attr-for-selected="name">
<paper-item name="whitelist">Only people I share with</paper-item>
<paper-item name="public">Anyone with link</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<div class="layout horizontal center wrap">
<paper-input class="flex" id="userNameOrEmailInput" label="Share with username or email" floatinglabel></paper-input>
<paper-button id="shareButton"
class="red-button"
style="width: 80px; height: 37px; margin-top: 16px;"
raised
disabled={{shareButtonDisabled}}>Share</paper-button>
<paper-radio-group id="accessLevelMenu" selected="read">
<paper-radio-button name="read">View Only</paper-radio-button>
<paper-radio-button name="write">Can Edit</paper-radio-button>
</paper-radio-group>
</div>
<p style="color: red;">{{userFindError}}</p>
<div>
{{#if readers.length}}
<div class="paper-font-subhead">
Can View
</div>
{{#each id in readers}}
<div class="layout horizontal center">
{{#with id=id}}
<paper-icon-button class="deleteShare" icon="delete">
</paper-icon-button>
{{/with}}
<div class="flex">{{username id}}</div>
</div>
{{/each}}
{{/if}}
{{#if writers.length}}
<div class="paper-font-subhead">
Can Edit
</div>
{{#each id in writers}}
<div class="layout horizontal center">
{{#with id=id}}
<paper-icon-button class="deleteShare" icon="delete">
</paper-icon-button>
{{/with}}
<div class="flex">{{username id}}</div>
</div>
{{/each}}
{{/if}}
</div>
</div>
</app-header-layout>
<div class="buttons layout horizontal end-justified">
<paper-button class="doneButton"> Done </paper-button>
</div>
<div class="layout horizontal center">
<paper-input flex id="userNameOrEmailInput" label="Share with username or email" floatinglabel></paper-input>
<paper-button id="shareButton"
class="red-button"
style="width: 80px; height: 37px; margin-top: 16px;"
raised
disabled={{shareButtonDisabled}}>Share</paper-button>
</div>
<p style="color: red;">{{userFindError}}</p>
<paper-radio-group id="accessLevelMenu" selected="read">
<paper-radio-button name="read">View Only</paper-radio-button>
<paper-radio-button name="write">Can Edit</paper-radio-button>
</paper-radio-group>
</div>
<paper-button id="doneButton" affirmative> Done </paper-button>
</template>

17
rpg-docs/client/views/character/characterSettings/shareDialog.js
View File

@@ -9,6 +9,13 @@ Template.shareDialog.onCreated(function(){
});
});
Template.shareDialog.onRendered(function(){
// Polymer not mirroring selected attribute properly
this.$("paper-listbox").each(function(){
this.selected = this.getAttribute("selected");
});
});
Template.shareDialog.helpers({
viewPermission: function() {
var char = Characters.findOne(this._id, {fields: {settings: 1}});
@@ -38,9 +45,8 @@ Template.shareDialog.helpers({
});
Template.shareDialog.events({
"change .visibilityDropdown": function(event){
"iron-select .visibilityDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
var char = Characters.findOne(this._id, {fields: {settings: 1}});
if (value == char.settings.viewPermission) return;
@@ -59,7 +65,7 @@ Template.shareDialog.events({
}
});
},
"tap #shareButton": function(event, instance){
"click #shareButton": function(event, instance){
var self = this;
var permission = instance.find("#accessLevelMenu").selected;
if (!permission) throw "no permission set";
@@ -77,9 +83,12 @@ Template.shareDialog.events({
});
}
},
"tap .deleteShare": function(event, instance) {
"click .deleteShare": function(event, instance) {
Characters.update(instance.data._id, {
$pull: {writers: this.id, readers: this.id}
});
},
"click .doneButton": function(event, instance){
popDialogStack();
},
});

2
rpg-docs/client/views/character/characterSheet.css
View File

@@ -34,6 +34,6 @@ app-toolbar.medium-tall {
text-overflow: ellipsis;
}
.character-menu paper-item{
.character-menu paper-icon-item{
cursor: pointer;
}

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

@@ -10,7 +10,7 @@
{{#if canEditCharacter _id}}
{{> colorDropdown}}
<paper-menu-button class="character-menu" horizontal-align="right">
<paper-icon-button icon="more-vert" class="dropdown-trigger" tabindex="-1"></paper-icon-button>
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content black87">
<paper-icon-item id="deleteCharacter">
<iron-icon icon="delete" item-icon></iron-icon>

7
rpg-docs/client/views/character/newCharacterDialog/newCharacterDialog.js
View File

@@ -7,13 +7,13 @@ Template.newCharacterDialog.onCreated(function(){
race: {type: String, optional: true},
});
this.context = this.schema.newContext();
this.context.runOnce = false;
this.context.runOnce = new ReactiveVar(false);
});
Template.newCharacterDialog.helpers({
invalid(){
let context = Template.instance().context;
let valid = context.isValid() && context.runOnce;
let valid = context.isValid() && context.runOnce.get();
return !valid;
},
errorAtts(key){
@@ -29,10 +29,11 @@ Template.newCharacterDialog.helpers({
changeFunction = function(field){
return _.debounce(function(event, instance){
console.log({field, event})
instance.character[field] = event.currentTarget.value;
instance.schema.clean(instance.character);
instance.context.validate(instance.character);
if (!instance.context.runOnce) instance.context.runOnce = true;
if (!instance.context.runOnce.get()) instance.context.runOnce.set(true);
}, 200);
};

2
rpg-docs/client/views/layout/layout.html
View File

@@ -4,7 +4,7 @@
<app-header-layout mode="seamed" class="white">
<div id="accountSummary">
{{#if currentUser}}
<a href="profile"
<a href="/account"
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
{{profileLink}}
</a>

5
rpg-docs/client/views/layout/polymerImports.html
View File

@@ -28,7 +28,7 @@
<link rel="import" href="/components/neon-animation/neon-animations.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/paper-checkbox/paper-checkbox.html">
<!--<link rel="import" href="/components/paper-checkbox/paper-checkbox.html"> Using custom one instead -->
<link rel="import" href="/components/paper-dialog/paper-dialog.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/components/paper-fab/paper-fab.html">
@@ -45,7 +45,10 @@
<link rel="import" href="/components/paper-slider/paper-slider.html">
<link rel="import" href="/components/paper-tabs/paper-tabs.html">
<link rel="import" href="/components/paper-toast/paper-toast.html">
<link rel="import" href="/components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="/components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="/custom_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
<link rel="import" href="/custom_components/app-theme.html">
</head>

2
rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
View File

@@ -1,6 +1,6 @@
<template name="colorDropdown">
<paper-menu-button class="colorDropdown" horizontal-align="right" dynamic-align>
<paper-icon-button icon="editor:format-paint" class="dropdown-trigger" tabindex="-1"></paper-icon-button>
<paper-icon-button icon="editor:format-paint" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content" attr-for-selected="name" selected={{color}}>
{{#each colors}}
<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>

4
rpg-docs/client/views/user/profile/profile.css Normal file
View File

@@ -0,0 +1,4 @@
.profile #at-nav-button {
color: #212121;
color: rgba(0,0,0,0.87);
}

57
rpg-docs/client/views/user/profile/profile.html
View File

@@ -1,22 +1,47 @@
<template name="profile">
{{#with currentUser}}
<app-toolbar class="blue-grey white-text">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div id="username" class="clickable" flex>
{{profileName}}
</div>
</app-toolbar>
<div id="userProfile" class="padded">
<div>
<h2>Email</h2>
{{#each emails}}
<div layout horizontal>
<p>{{address}}</p>
<app-header-layout has-scrolling-region fullbleed class="profile">
<app-header class="app-grey white-text" fixed effects="waterfall">
<app-toolbar class="app-grey white-text">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div flex>Account</div>
</app-toolbar>
</app-header>
<div class="layout vertical center">
<paper-material style="margin-top: 8px; padding: 16px; background: #fff;">
<table>
<tr>
<td>Username</td>
<td>{{profileName}}</td>
<td>
<paper-icon-button icon="create" class="username-edit" style="background: #fff;">
</paper-icon-button>
</td>
</tr>
<tr>
<td>Email</td>
<td class="layout vertical">
{{#each emails}}
<div>
{{address}}
{{#if verified}}
<span>
<iron-icon icon="check"></iron-icon>
<paper-tooltip>Verified</paper-tooltip>
</span>
{{/if}}
</div>
{{/each}}
</td>
<td></td>
</tr>
</table>
<div style="max-width: 250px">
{{> atForm}}
</div>
{{/each}}
{{> atNavButton }}
</paper-material>
</div>
</div>
{{> atForm}}
{{> atNavButton }}
</app-header-layout>
{{/with}}
</template>

8
rpg-docs/client/views/user/profile/profile.js
View File

@@ -8,15 +8,15 @@ Template.profile.helpers({
});
Template.profile.events({
"tap #username": function(){
"click .username-edit": function(event, instance){
if (this._id === Meteor.userId()){
GlobalUI.showDialog({
heading: "Change Username",
pushDialogStack({
template: "usernameDialog",
element: event.currentTarget,
});
}
},
"tap #verifyEmail": function(event, instance){
"click #at-resend-verification-email": function(event, instance){
if (!Meteor.user()) return;
Accounts.sendVerificationEmail(Meteor.userId(), this.address);
GlobalUI.toast({

26
rpg-docs/client/views/user/profile/usernameDialog.html
View File

@@ -1,8 +1,24 @@
<template name="usernameDialog">
<div>
<paper-input id="usernameInput" label="Username" value={{profileName}}></paper-input>
<div class="fit layout vertical">
<app-header-layout has-scrolling-region class="feedback flex">
<app-header fixed effects="waterfall">
<app-toolbar>
<div main-title>Feedback</div>
</app-toolbar>
</app-header>
<div class="form flex">
<div>
<paper-input id="usernameInput" label="Username" value={{profileName}} invalid={{errorMessage}} error-message={{errorMessage}}></paper-input>
</div>
</div>
</app-header-layout>
<div class="buttons layout horizontal end-justified">
<paper-button id="cancelButton">
Cancel
</paper-button>
<paper-button id="changeButton" disabled={{invalid}}>
Change Username
</paper-button>
</div>
</div>
<div style="color: red;" class="vertMargin">{{errorMessage}}</div>
<paper-button id="cancelButton" affirmative> Cancel </paper-button>
<paper-button id="changeButton" disabled={{invalid}} affirmative> Change Username </paper-button>
</template>

10
rpg-docs/client/views/user/profile/usernameDialog.js
View File

@@ -4,7 +4,7 @@ var getUsername = function() {
};
Template.usernameDialog.onCreated(function() {
this.errorMessage = new ReactiveVar("");
this.errorMessage = new ReactiveVar();
this.username = new ReactiveVar(getUsername());
});
@@ -32,12 +32,13 @@ Template.usernameDialog.events({
if (userId && userId !== Meteor.userId())
instance.errorMessage.set("This username is taken");
else
instance.errorMessage.set("");
instance.errorMessage.set();
});
}
},
"tap #changeButton": function(event, instance){
"click #changeButton": function(event, instance){
var username = instance.find("#usernameInput").value;
popDialogStack();
username = username.trim().replace(/\s+/gm, " ");
var profileName = username;
username = username.toLowerCase().replace(/\s+/gm, "");
@@ -46,4 +47,7 @@ Template.usernameDialog.events({
{$set: {username: username, "profile.username": profileName}}
);
},
"click #cancelButton": function(event, instance){
popDialogStack();
},
});

23
rpg-docs/client/views/user/titledAtForm/titledAtForm.html
View File

@@ -1,13 +1,16 @@
<template name="titledAtForm">
<app-toolbar class="app-grey white-text">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div flex>
<app-header-layout has-scrolling-region fullbleed>
<app-header class="app-grey white-text" fixed effects="waterfall">
<app-toolbar class="app-grey white-text">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
</app-toolbar>
</app-header>
<div>
<div class="layout vertical center" style="padding: 16px">
<paper-material class="white" style="max-width: 400px;">
{{> atForm}}
</paper-material>
</div>
</div>
</app-toolbar>
<div class="scroll-y padded" fit layout vertical center center-justified>
<paper-material class="white" style="max-width: 400px;">
{{> atForm}}
</paper-material>
</div>
</app-header-layout>
</template>