Added moving item dialog, that can't actually be triggered

rpg-docs/client/views/character/inventory/inventory.js

@@ -174,6 +174,20 @@ Template.inventory.events({
 			heroId:   itemId,
 		});
 	},
+	"hold .inventoryItem": function(event, instance) {
+		var itemId = this._id;
+		var charId = Template.parentData()._id;
+		var containerId = this.parent.id;
+		GlobalUI.showDialog({
+			template: "moveItemDialog",
+			data:     {
+				charId: charId,
+				itemId: itemId,
+				containerId: containerId,
+			},
+			heading:   "Move " + this.pluralName(),
+		});
+	},
 	"tap .incrementButtons": function(event) {
 		event.stopPropagation();
 	},

rpg-docs/client/views/character/inventory/moveItemDialog/moveItemDialog.css

@@ -0,0 +1,7 @@
+html /deep/ .moveItemDialog paper-tabs::shadow #selectionBar {
+	background-color: #D50000;
+}
+
+html /deep/ .moveItemDialog paper-tab::shadow #ink {
+	color: #D50000;
+}

rpg-docs/client/views/character/inventory/moveItemDialog/moveItemDialog.html

@@ -0,0 +1,49 @@
+<template name="moveItemDialog">
+	<div class="moveItemDialog">
+		<paper-tabs selected="{{selectedTab}}">
+			<paper-tab name="containers"
+					   class="clickable">
+				Containers
+			</paper-tab>
+			<paper-tab name="characters"
+					   class="clickable">
+				Characters
+			</paper-tab>
+		</paper-tabs>
+		<core-animated-pages selected="{{selectedTab}}"
+							 transitions="slide-from-right"
+							 style="width: 250px;
+									height: 200px;
+									overflow-y: auto;
+									overflow-x: hidden;">
+			<section name="containers">
+				<core-menu id="containerMenu" style="margin: 0;">
+					{{#each containers}}
+						<paper-item name={{_id}}
+									layout horizontal center>
+							<core-icon icon="image:brightness-1"
+									   style="color: {{hexColor color}};
+											  margin-right: 16px;">
+							</core-icon>
+							<div>{{name}}</div>
+						</paper-item>
+					{{/each}}
+				</core-menu>
+			</section>
+			<section name="characters">
+				<core-menu id="characterMenu"  style="margin: 0;">
+					{{#each characters}}
+					<paper-item name={{_id}}
+								layout horizontal center>
+						<div class="item small">
+							{{name}}
+						</div>
+					</paper-item>
+					{{/each}}
+				</core-menu>
+			</section>
+		</core-animated-pages>
+	</div>
+	<paper-button id="cancelButton" affirmative> Cancel </paper-button>
+	<paper-button id="moveButton" affirmative> Move </paper-button>
+</template>

rpg-docs/client/views/character/inventory/moveItemDialog/moveItemDialog.js

@@ -0,0 +1,56 @@
+Template.moveItemDialog.onCreated(function() {
+	Session.setDefault("moveItemDialogTab", "containers");
+});
+
+Template.moveItemDialog.helpers({
+	selectedTab: function() {
+		return Session.get("moveItemDialogTab");
+	},
+	characters: function() {
+		var userId = Meteor.userId();
+		return Characters.find(
+			{
+				$or: [
+					{readers: userId},
+					{writers: userId},
+					{owner: userId},
+				],
+				_id: {$ne: this.charId},
+			},
+			{fields: {name: 1}}
+		);
+	},
+	containers: function(){
+		return Containers.find(
+			{
+				charId: this.charId,
+				_id: {$ne: this.containerId},
+			},
+			{
+				fields: {color: 1, name: 1},
+				sort: {color: 1, name: 1},
+			}
+		);
+	},
+});
+
+Template.moveItemDialog.events({
+	"tap paper-tab": function(event) {
+		Session.set("moveItemDialogTab", event.currentTarget.getAttribute("name"));
+	},
+	"tap #moveButton": function(event, instance) {
+		var tab = Session.get("moveItemDialogTab");
+		if (tab === "containers"){
+			var containerId = instance.find("#containerMenu").selected;
+			if (!containerId) throw "no menu selection";
+			Meteor.call("moveItemToContainer", this.itemId, containerId);
+		} else if (tab === "characters"){
+			var characterId = instance.find("#characterMenu").selected;
+			if (!characterId) throw "no menu selection";
+			Meteor.call("moveItemToCharacter", this.itemId, characterId);
+		} else {
+			throw "Move item dialog tab is not set to containers or character," +
+				" it is set to " + tab;
+		}
+	},
+});

rpg-docs/client/views/character/stats/healthCard/healthCard.css

@@ -1,4 +1,4 @@
-.healthCard paper-slider{
+.healthCard paper-diff-slider{
 	width: 100%;
 	margin-right: 8px;
 }

rpg-docs/client/views/character/stats/healthCard/healthCard.html

@@ -10,24 +10,24 @@
 		</div>
 		<div class="right" flex layout vertical center-justified style="min-width: 180px;">
 			<div layout horizontal>
-				<paper-slider id="hitPointSlider"
+				<paper-diff-slider id="hitPointSlider"
 							  value={{attributeValue "hitPoints"}}
 							  max={{attributeBase "hitPoints"}} 
 							  editable pin
 							  role="slider"
-							  ></paper-slider>
+							  ></paper-diff-slider>
 			</div>
 			{{#each tempHitPoints}}
 				<div>
 					{{name}}
 					<div layout horizontal>
-					<paper-slider class="tempHitPointSlider"
+					<paper-diff-slider class="tempHitPointSlider"
 							  value={{left}}
 							  max={{maximum}}
 							  editable pin
 							  role="slider"
 							  flex
-							  ></paper-slider>
+							  ></paper-diff-slider>
 					{{#unless left}}{{#unless deleteOnZero}}
 						<paper-icon-button class="deleteTHP" icon="delete"></paper-icon-button>
 					{{/unless}}{{/unless}}

rpg-docs/client/views/layout/imports.html

@@ -33,11 +33,12 @@
 <link rel="import" href="/components/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="/components/paper-shadow/paper-shadow.html">
 <link rel="import" href="/components/paper-spinner/paper-spinner.html">
+<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">
 
 <!--custom components-->
 <link rel="import" href="/custom_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="/custom_components/paper-slider-diff/paper-slider.html">
+<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
 <link rel="import" href="/custom_components/swipe-detect/swipe-detect.html">

rpg-docs/public/custom_components/paper-diff-slider/paper-diff-slider.html

@@ -8,55 +8,55 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <!--
-`paper-slider` allows user to select a value from a range of values by
+`paper-diff-slider` allows user to select a value from a range of values by
 moving the slider thumb.  The interactive nature of the slider makes it a 
 great choice for settings that reflect intensity levels, such as volume, 
 brightness, or color saturation.
 
 Example:
 
-    <paper-slider></paper-slider>
+    <paper-diff-slider></paper-diff-slider>
 
 Use `min` and `max` to specify the slider range.  Default is 0 to 100.
 
 Example:
 
-    <paper-slider min="10" max="200" value="110"></paper-slider>
+    <paper-diff-slider min="10" max="200" value="110"></paper-diff-slider>
 
 Styling slider:
 
 To change the slider progress bar color:
 
-    paper-slider::shadow #sliderBar::shadow #activeProgress {
+    paper-diff-slider::shadow #sliderBar::shadow #activeProgress {
       background-color: #0f9d58;
     }
 
 To change the slider knob color:
 
-    paper-slider::shadow #sliderKnobInner {
+    paper-diff-slider::shadow #sliderKnobInner {
       background-color: #0f9d58;
     }
 
 To change the slider pin color:
 
-    paper-slider::shadow #sliderKnobInner::before {
+    paper-diff-slider::shadow #sliderKnobInner::before {
       background-color: #0f9d58;
     }
 
 To change the slider pin's font color:
 
-    paper-slider::shadow #sliderKnob > #sliderKnobInner::after {
+    paper-diff-slider::shadow #sliderKnob > #sliderKnobInner::after {
       color: #0f9d58
     }
 
 To change the slider secondary progress bar color:
 
-    paper-slider::shadow #sliderBar::shadow #secondaryProgress {
+    paper-diff-slider::shadow #sliderBar::shadow #secondaryProgress {
       background-color: #0f9d58;
     }
 
 @group Paper Elements
-@element paper-slider
+@element paper-diff-slider
 @extends core-range
 @homepage github.io
 -->
@@ -65,10 +65,10 @@ To change the slider secondary progress bar color:
 <link rel="import" href="../../components/paper-progress/paper-progress.html">
 <link rel="import" href="../../components/paper-input/paper-input.html">
 
-<polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100">
+<polymer-element name="paper-diff-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100">
 <template>
 
-  <link rel="stylesheet" href="paper-slider.css">
+  <link rel="stylesheet" href="paper-diff-slider.css">
 
   <template if="{{!disabled}}">
     <core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys>
@@ -109,7 +109,7 @@ To change the slider secondary progress bar color:
 </template>
 <script>
 
-  Polymer('paper-slider', {
+  Polymer('paper-diff-slider', {
 
     /**
      * Fired when the slider's value changes.