Re-implemented paper-fab menu

rpg-docs/bower.json

@@ -15,8 +15,7 @@
   "dependencies": {
     "polymer": "Polymer/polymer#~0.5.5",
     "core-elements": "Polymer/core-elements#~0.5.5",
-    "paper-elements": "Polymer/paper-elements#~0.5.5",
+    "paper-elements": "Polymer/paper-elements#~0.5.5"
-	"paper-fab-menu": "cwdoh/paper-fab-menu"
   },
   "resolutions": {
     "core-component-page": "^0.5.0",

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

@@ -100,21 +100,20 @@
 			<div class="fab-buffer"></div>
 		</div>
 		{{#if canEditCharacter _id}}
-			<paper-fab-menu id="inventoryAddMenu" 
+			{{#fabMenu}}
-							icon="add" 
+				<core-tooltip label="New container" position="left">
-							closeIcon="close" 
+					<paper-fab icon="work"
-							duration="0.3">
+							   class="addContainer"
-				<paper-fab-menu-item id="addItem"
+							   mini>
-									 icon="note-add"
+					</paper-fab>
-									 color="#d23f31"
+				</core-tooltip>
-									 tooltip="Item">
+				<core-tooltip label="New item" position="left">
-				</paper-fab-menu-item>
+					<paper-fab icon="note-add"
-				<paper-fab-menu-item id="addContainer"
+							   class="addItem"
-									 icon="work"
+							   mini>
-									 color="#d23f31"
+					</paper-fab>
-									 tooltip="Container">
+				</core-tooltip>
-				</paper-fab-menu-item>
+			{{/fabMenu}}
-			</paper-fab-menu>
 		{{/if}}
 	</div>
 </template>

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

@@ -103,7 +103,7 @@ Template.inventory.helpers({
 });
 
 Template.inventory.events({
-	"tap #addItem": function(event){
+	"tap .addItem": function(event){
 		var charId = this._id;
 		Items.insert({
 			charId: charId,
@@ -120,7 +120,7 @@ Template.inventory.events({
 			});
 		});
 	},
-	"tap #addContainer": function(event){
+	"tap .addContainer": function(event){
 		var containerId = Containers.insert({
 			name: "New Container",
 			isCarried: true,

rpg-docs/client/views/character/spells/spells.html

@@ -128,20 +128,19 @@
 		</div>
 	</div>
 	{{#if canEditCharacter _id}}
-		<paper-fab-menu id="inventoryAddMenu"
+		{{#fabMenu}}
-						icon="add"
+			<core-tooltip label="New spell list" position="left">
-						closeIcon="close"
+				<paper-fab icon="work"
-						duration="0.3">
+						   class="addSpellList"
-			<paper-fab-menu-item id="addSpell"
+						   mini>
-								 icon="note-add"
+				</paper-fab>
-								 color="#d23f31"
+			</core-tooltip>
-								 tooltip="Spell">
+			<core-tooltip label="New spell" position="left">
-			</paper-fab-menu-item>
+				<paper-fab icon="note-add"
-			<paper-fab-menu-item id="addSpellList"
+						   class="addSpell"
-								 icon="work"
+						   mini>
-								 color="#d23f31"
+				</paper-fab>
-								 tooltip="Spell List">
+			</core-tooltip>
-			</paper-fab-menu-item>
+		{{/fabMenu}}
-		</paper-fab-menu>
 	{{/if}}
 </template>

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

@@ -184,7 +184,7 @@ Template.spells.events({
 			heroId:   this._id,
 		});
 	},
-	"tap #addSpellList": function(event){
+	"tap .addSpellList": function(event){
 		var charId = this.charId;
 		SpellLists.insert({
 			name: "New SpellList",
@@ -201,7 +201,7 @@ Template.spells.events({
 			}
 		});
 	},
-	"tap #addSpell": function(event){
+	"tap .addSpell": function(event){
 		var charId = this.charId;
 		var listId = SpellLists.findOne({charId: this._id})._id;
 		Spells.insert({

rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html

@@ -0,0 +1,8 @@
+<template name="fabMenu">
+	<paper-fab class="floatyButton expand-menu {{#if active}}active{{/if}}" 
+			   icon="add"></paper-fab>
+	<div class="{{#if active}}active{{/if}} mini-holder"
+		 layout vertical center>
+		{{> UI.contentBlock}}
+	</div>
+</template>

rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js

@@ -0,0 +1,15 @@
+Template.fabMenu.onCreated(function() {
+	this.active = new ReactiveVar(false);
+});
+
+Template.fabMenu.helpers({
+	active: function() {
+		return Template.instance().active.get();
+	},
+});
+
+Template.fabMenu.events({
+	"tap .expand-menu": function(event, instance) {
+		instance.active.set(!instance.active.get());
+	},
+});

rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss

@@ -0,0 +1,46 @@
+@import "bourbon/bourbon";
+
+.mini-holder {
+	position: absolute;
+	padding: 4px;
+	bottom: 80px;
+	right: 24px;
+	width: 56px;
+	pointer-events: none;
+	flex-direction: column-reverse !important;
+	core-tooltip{
+		@include transform(scale(0));
+		@include transition-property(transform);
+		@include transition-duration(0.3s);
+		@include transition-timing-function(ease-in-out);
+		margin: 4px;
+	}
+	&.active {
+		pointer-events: auto;
+		core-tooltip{
+			@include transform(scale(1));
+		}
+		core-tooltip:nth-child(2){
+			@include transition-delay(0.1s);
+		}
+		core-tooltip:nth-child(3){
+			@include transition-delay(0.2s);
+		}
+		core-tooltip:nth-child(4){
+			@include transition-delay(0.3s);
+		}
+		core-tooltip:nth-child(5){
+			@include transition-delay(0.4s);
+		}
+	}
+}
+
+.expand-menu {
+	&::shadow core-icon {
+		@include transition(transform 0.3s ease-in-out);
+	}
+	&.active::shadow core-icon{
+		@include transform(rotate(405deg));
+	}
+}
+