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

Began moving character sheet and related menus to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-18 15:04:09 +02:00
parent 817020bea8
commit 137a94f251
13 changed files with 142 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
rpg-docs/client/views/GeneralCSS/typography.css
View File

@@ -1,41 +1,64 @@
.white-text {
color: #dedede;
color: rgba(255,255,255,0.87);
}
.white-text .paper-font-display2{
color: #8a8a8a;
color: rgba(255,255,255,0.54);
}
.white-text .paper-font-display1, .white-text.paper-font-display1{
color: #8a8a8a;
color: rgba(255,255,255,0.54);
}
.white-text h1, .white-text .paper-font-headline, .white-text.paper-font-headline{
color: #dedede;
color: rgba(255,255,255,0.87);
}
.white-text h2, .white-text .paper-font-title, .white-text.paper-font-title{
color: #dedede;
color: rgba(255,255,255,0.87);
}
.white-text h3, .white-text .paper-font-subhead{
color: #dedede;
color: rgba(255,255,255,0.87);
}
.white-text .paper-font-body2{
color: #dedede;
color: rgba(255,255,255,0.87);
}
.white-text p, .white-text .paper-font-body1{
color: #dedede;
color: rgba(255,255,255,0.87);
}
.white-text .paper-font-caption{
color: #8a8a8a;
color: rgba(255,255,255,0.54);
}
.black54 {
color: #444;
color: #757575;
color: rgba(0,0,0,0.54);
}
.white54 {
color: #eee;
color: #8a8a8a;
color: rgba(255,255,255,0.54);
}
.black87 {
color: #212121;
color: rgba(0,0,0,0.87);
}
.white87 {
color: #dedede;
color: rgba(255,255,255,0.87);
}

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

@@ -1,43 +1,43 @@
<template name="shareDialog">
<div style="width: 360px;">
<div layout horizontal center>
<div>Who can view this character: </div>
<paper-dropdown-menu class="visibilityDropdown"
label="Visibility">
<paper-dropdown layered class="dropdown">
<core-menu class="menu visibilityMenu" selected={{viewPermission}}>
<paper-item name="whitelist">Only people I share with</paper-item>
<paper-item name="public">Anyone with link</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</div>
<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.count}}
<div style="font-weight: 500;">
{{#if readers.length}}
<div class="paper-font-subhead">
Can View
</div>
{{#each readers}}
<div layout horizontal center>
<div flex>{{getUserName}}</div>
<paper-icon-button class="deleteShare" icon="delete"></paper-icon-button>
{{#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.count}}
<div style="font-weight: 500;">
{{#if writers.length}}
<div class="paper-font-subhead">
Can Edit
</div>
{{#each writers}}
<div layout horizontal center>
<div flex>{{username}}</div>
<paper-icon-button class="deleteShare" icon="delete"></paper-icon-button>
{{#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 layout horizontal center>
<paper-input flex id="userNameOrEmailInput" label="Username or email" floatinglabel></paper-input>
<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;"
@@ -46,8 +46,8 @@
</div>
<p style="color: red;">{{userFindError}}</p>
<paper-radio-group id="accessLevelMenu" selected="read">
<paper-radio-button name="read" label="View Only"></paper-radio-button>
<paper-radio-button name="write" label="Can Edit"></paper-radio-button>
<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>

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

@@ -1,5 +1,12 @@
Template.shareDialog.onCreated(function(){
this.userId = new ReactiveVar();
this.autorun(() => {
var char = Characters.findOne(Template.currentData()._id, {
fields: {readers: 1, writers: 1}
});
if (!char) return;
this.subscribe("userNames", _.union(char.readers, char.writers));
});
});
Template.shareDialog.helpers({
@@ -9,11 +16,16 @@ Template.shareDialog.helpers({
},
readers: function(){
var char = Characters.findOne(this._id, {fields: {readers: 1}});
return Meteor.users.find({_id: {$in: char.readers}});
return char.readers;
},
writers: function(){
var char = Characters.findOne(this._id, {fields: {writers: 1}});
return Meteor.users.find({_id: {$in: char.writers}});
//Meteor.users.find({_id: {$in: char.writers}});
return char.writers
},
username: function(id){
const user = Meteor.users.findOne(id);
return user && user.username || "user: " + id;
},
shareButtonDisabled: function(){
return !Template.instance().userId.get();
@@ -23,13 +35,10 @@ Template.shareDialog.helpers({
return "User not found";
}
},
getUserName: function() {
return this.username || "user: " + this._id;
}
});
Template.shareDialog.events({
"core-select .visibilityDropdown": function(event){
"change .visibilityDropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
@@ -70,7 +79,7 @@ Template.shareDialog.events({
},
"tap .deleteShare": function(event, instance) {
Characters.update(instance.data._id, {
$pull: {writers: this._id, readers: this._id}
$pull: {writers: this.id, readers: this.id}
});
},
});

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

@@ -26,3 +26,14 @@ paper-tabs.transparent-brown {
app-toolbar.medium-tall {
height: 108px;
}
.character-name {
padding-left: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.character-menu paper-item{
cursor: pointer;
}

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

@@ -2,30 +2,32 @@
<app-header-layout has-scrolling-region fullbleed>
<app-header fixed>
<app-toolbar class="medium-tall {{colorClass}}">
<paper-icon-button icon="menu" drawer-toggle top-item></paper-icon-button>
<div class="flex" top-item>
{{name}}
<div top-item class="layout horizontal center">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div class="flex character-name">
{{name}}
</div>
{{#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-menu class="dropdown-content black87">
<paper-icon-item id="deleteCharacter">
<iron-icon icon="delete" item-icon></iron-icon>
Delete
</paper-icon-item>
<paper-icon-item id="shareCharacter">
<iron-icon icon="social:share" item-icon></iron-icon>
Share
</paper-icon-item>
<paper-icon-item id="characterSettings">
<iron-icon icon="settings" item-icon></iron-icon>
Settings
</paper-icon-item>
</paper-menu>
</paper-menu-button>
{{/if}}
</div>
{{#if canEditCharacter _id}}
{{> colorDropdown}}
<paper-menu-button top-item>
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content" halign="right">
<paper-icon-item id="deleteCharacter">
<iron-icon icon="delete" item-icon></iron-icon>
Delete
</paper-icon-item>
<paper-icon-item id="shareCharacter">
<iron-icon icon="social:share" item-icon></iron-icon>
Share
</paper-icon-item>
<paper-icon-item id="characterSettings">
<iron-icon icon="settings" item-icon></iron-icon>
Settings
</paper-icon-item>
</paper-menu>
</paper-menu-button>
{{/if}}
<div bottom-item>
<paper-tabs id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}" attr-for-selected="name">
<paper-tab name="stats">Stats</paper-tab>

15
rpg-docs/client/views/character/characterSheet.js
View File

@@ -31,24 +31,27 @@ Template.characterSheet.events({
Characters.update(this._id, {$set: {color: event.color}});
},
"tap #deleteCharacter": function(event, instance){
GlobalUI.showDialog({
heading: "Delete " + this.name,
const menu = instance.find(".character-menu");
pushDialogStack({
data: this,
template: "deleteCharacterConfirmation",
element: event.currentTarget.parentElement.parentElement,
});
},
"tap #shareCharacter": function(event, instance){
GlobalUI.showDialog({
heading: "Share " + this.name,
const menu = instance.find(".character-menu");
pushDialogStack({
data: this,
template: "shareDialog",
element: event.currentTarget.parentElement.parentElement,
});
},
"tap #characterSettings": function(event, instance){
GlobalUI.showDialog({
heading: this.name + " Settings",
const menu = instance.find(".character-menu");
pushDialogStack({
data: this,
template: "characterSettings",
element: event.currentTarget.parentElement.parentElement,
});
},
});

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

@@ -13,19 +13,19 @@
{{/if}}
</div>
<div id="navPanel">
<a href="/">
<a href="/" tabindex="-1">
<paper-icon-item id="homeNav">
<iron-icon icon="home" item-icon></iron-icon>
Home
</paper-icon-item>
</a>
<a href="/characterList">
<a href="/characterList" tabindex="-1">
<paper-icon-item id="characters">
<iron-icon icon="social:people" item-icon></iron-icon>
Characters
</paper-icon-item>
</a>
<a href="/guide">
<a href="/guide" tabindex="-1">
<paper-icon-item id="guide">
<iron-icon icon="social:school" item-icon></iron-icon>
Guide
@@ -35,7 +35,7 @@
<iron-icon icon="bug-report" item-icon></iron-icon>
Send Feedback
</paper-icon-item>
<a href="changeLog">
<a href="changeLog" tabindex="-1">
<paper-icon-item id="changeLog">
<iron-icon icon="list" item-icon></iron-icon>
Change Log

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

@@ -14,7 +14,7 @@
<link rel="import" href="/components/iron-icons/av-icons.html">
<!--<link rel="import" href="/components/iron-icons/communication-icons.html">-->
<!--<link rel="import" href="/components/iron-icons/device-icons.html">-->
<!--<link rel="import" href="/components/iron-icons/editor-icons.html">-->
<link rel="import" href="/components/iron-icons/editor-icons.html">
<!--<link rel="import" href="/components/iron-icons/hardware-icons.html">-->
<link rel="import" href="/components/iron-icons/image-icons.html">
<link rel="import" href="/components/iron-icons/iron-icons.html">
@@ -39,6 +39,8 @@
<link rel="import" href="/components/paper-listbox/paper-listbox.html">
<link rel="import" href="/components/paper-material/paper-material.html">
<link rel="import" href="/components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="/components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="/components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="/components/paper-ripple/paper-ripple.html">
<link rel="import" href="/components/paper-slider/paper-slider.html">
<link rel="import" href="/components/paper-tabs/paper-tabs.html">

11
rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.css
View File

@@ -1,9 +1,4 @@
html /deep/ .colorDropdown paper-item{
width: 150px;
}
html /deep/ .colorDropdown {
top: 18px;
padding: 0.5em 0 0.25em 16px;
width: 150px;
.colorDropdown paper-item {
width: 150px;
cursor: pointer;
}

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

@@ -1,24 +1,10 @@
<template name="colorDropdownOld">
<paper-dropdown-menu class="colorDropdown {{colorClass color}}" label="Color">
<paper-dropdown layered class="dropdown">
<core-menu class="menu" selected={{color}}>
{{#each colors}}
<paper-item name={{key}} class="containerMenuItem {{colorClass key}}">{{className}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<template name="colorDropdown">
<paper-menu-button id="colorDropdown">
<paper-icon-button icon="editor:format-paint" noink></paper-icon-button>
<paper-dropdown class="dropdown" halign="right">
<core-menu class="menu">
{{#each colors}}
<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>
{{/each}}
</core-menu>
</paper-dropdown>
<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-menu class="dropdown-content" attr-for-selected="name" selected={{color}}>
{{#each colors}}
<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>
{{/each}}
</paper-menu>
</paper-menu-button>
</template>

5
rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
View File

@@ -5,9 +5,10 @@ Template.colorDropdown.helpers({
});
Template.colorDropdown.events({
"tap .colorMenuItem": function(event, instance){
"click paper-item": function(event, instance){
instance.find(".colorDropdown").close();
var color = event.currentTarget.getAttribute("name");
instance.$("#colorDropdown").trigger({
instance.$(".colorDropdown").trigger({
type: "color-change",
color: color,
});

4
rpg-docs/server/publications/singleCharacter.js
View File

@@ -27,10 +27,6 @@ Meteor.publish("singleCharacter", function(characterId){
SpellLists.find ({charId: characterId}, {removed: true}),
TemporaryHitPoints.find({charId: characterId}, {removed: true}),
Proficiencies.find ({charId: characterId}, {removed: true}),
Meteor.users.find (
{_id: {$in: _.union(char.readers, char.writers)}},
{fields: {username: 1}}
),
];
} else {
return [];

7
rpg-docs/server/publications/users.js Normal file
View File

@@ -0,0 +1,7 @@
Meteor.publish("userNames", function(ids){
if (!this.userId || !ids) return [];
return Meteor.users.find(
{_id: {$in: ids}},
{fields: {username: 1}}
);
});