From 137a94f2514feeca6785c382655b0001fb0576e6 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Wed, 18 Jan 2017 15:04:09 +0200
Subject: [PATCH] Began moving character sheet and related menus to Polymer 1

---
 .../client/views/GeneralCSS/typography.css    | 27 ++++++++-
 .../characterSettings/shareDialog.html        | 58 +++++++++----------
 .../characterSettings/shareDialog.js          | 23 +++++---
 .../client/views/character/characterSheet.css | 11 ++++
 .../views/character/characterSheet.html       | 48 +++++++--------
 .../client/views/character/characterSheet.js  | 15 +++--
 rpg-docs/client/views/layout/layout.html      |  8 +--
 .../client/views/layout/polymerImports.html   |  4 +-
 .../colorDropdown/colorDropdown.css           | 11 +---
 .../colorDropdown/colorDropdown.html          | 28 +++------
 .../colorDropdown/colorDropdown.js            |  5 +-
 .../server/publications/singleCharacter.js    |  4 --
 rpg-docs/server/publications/users.js         |  7 +++
 13 files changed, 142 insertions(+), 107 deletions(-)
 create mode 100644 rpg-docs/server/publications/users.js

diff --git a/rpg-docs/client/views/GeneralCSS/typography.css b/rpg-docs/client/views/GeneralCSS/typography.css
index 5c770053..862706e2 100644
--- a/rpg-docs/client/views/GeneralCSS/typography.css
+++ b/rpg-docs/client/views/GeneralCSS/typography.css
@@ -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);
+}
diff --git a/rpg-docs/client/views/character/characterSettings/shareDialog.html b/rpg-docs/client/views/character/characterSettings/shareDialog.html
index d788ac2e..a5203959 100644
--- a/rpg-docs/client/views/character/characterSettings/shareDialog.html
+++ b/rpg-docs/client/views/character/characterSettings/shareDialog.html
@@ -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>
diff --git a/rpg-docs/client/views/character/characterSettings/shareDialog.js b/rpg-docs/client/views/character/characterSettings/shareDialog.js
index e5ed3198..e2b92b11 100644
--- a/rpg-docs/client/views/character/characterSettings/shareDialog.js
+++ b/rpg-docs/client/views/character/characterSettings/shareDialog.js
@@ -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}
 		});
 	},
 });
diff --git a/rpg-docs/client/views/character/characterSheet.css b/rpg-docs/client/views/character/characterSheet.css
index 96c4f398..764ad2a2 100644
--- a/rpg-docs/client/views/character/characterSheet.css
+++ b/rpg-docs/client/views/character/characterSheet.css
@@ -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;
+}
diff --git a/rpg-docs/client/views/character/characterSheet.html b/rpg-docs/client/views/character/characterSheet.html
index f0633235..95544a86 100644
--- a/rpg-docs/client/views/character/characterSheet.html
+++ b/rpg-docs/client/views/character/characterSheet.html
@@ -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>
diff --git a/rpg-docs/client/views/character/characterSheet.js b/rpg-docs/client/views/character/characterSheet.js
index 61cb4a7d..c29332bf 100644
--- a/rpg-docs/client/views/character/characterSheet.js
+++ b/rpg-docs/client/views/character/characterSheet.js
@@ -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,
 		});
 	},
 });
diff --git a/rpg-docs/client/views/layout/layout.html b/rpg-docs/client/views/layout/layout.html
index 1ca08b88..4251d82c 100644
--- a/rpg-docs/client/views/layout/layout.html
+++ b/rpg-docs/client/views/layout/layout.html
@@ -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
diff --git a/rpg-docs/client/views/layout/polymerImports.html b/rpg-docs/client/views/layout/polymerImports.html
index 1889565d..c79e791a 100644
--- a/rpg-docs/client/views/layout/polymerImports.html
+++ b/rpg-docs/client/views/layout/polymerImports.html
@@ -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">
diff --git a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.css b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.css
index ae4379ab..b83e917b 100644
--- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.css
+++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.css
@@ -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;
 }
diff --git a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
index b5ac46f8..26cbbe16 100644
--- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
+++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
@@ -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>
diff --git a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
index 94b98dc0..1e7af670 100644
--- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
+++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
@@ -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,
 		});
diff --git a/rpg-docs/server/publications/singleCharacter.js b/rpg-docs/server/publications/singleCharacter.js
index 94d3015c..13632db3 100644
--- a/rpg-docs/server/publications/singleCharacter.js
+++ b/rpg-docs/server/publications/singleCharacter.js
@@ -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 [];
diff --git a/rpg-docs/server/publications/users.js b/rpg-docs/server/publications/users.js
new file mode 100644
index 00000000..df759364
--- /dev/null
+++ b/rpg-docs/server/publications/users.js
@@ -0,0 +1,7 @@
+Meteor.publish("userNames", function(ids){
+	if (!this.userId || !ids) return [];
+	return Meteor.users.find(
+		{_id: {$in: ids}},
+		{fields: {username: 1}}
+	);
+});