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/style/cards.scss

@@ -0,0 +1,91 @@
+@import "bourbon/bourbon";
+
+$thickColumnWidth: 304px;
+$thinColumnWidth: 240px;
+
+//Column layouts of cards
+.column-container {
+	@include column-fill(balance);
+	@include column-gap(8px);
+	@include column-width($thickColumnWidth);
+	padding: 8px;
+
+	&.thin-columns {
+		@include column-count(4);
+		@include column-width($thinColumnWidth);
+	}
+}
+
+//Cards
+.card {
+	background: white;
+	border-radius: 2px;
+
+	.column-container & {
+		margin-bottom: 8px;
+		width: 100%;
+		//hack to stop flickering
+		-webkit-backface-visibility: hidden;
+		-webkit-transform: translateX(0);
+		//stop breaking over column divide
+		-webkit-column-break-inside: avoid;
+		page-break-inside: avoid;
+		break-inside: avoid;
+		//Fixes extra margin at top of columns
+		display: inline-block;
+	}
+
+	.top {
+		cursor: pointer;
+		padding: 16px;
+		border-radius: 2px 2px 0 0;
+		&.white {
+			cursor: auto;
+			padding: 16px;
+			border-bottom: rgba(0,0,0,0.12) solid 1px;
+		}
+		paper-checkbox::shadow #ink[checked] {
+			color: #ffffff;
+		}
+		paper-checkbox::shadow #ink {
+			color: #ffffff;
+		}
+		paper-checkbox::shadow #checkbox.checked {
+			background-color: #ffffff;
+			background-color: rgba(255,255,255,0.27);
+			border-color: #ffffff;
+			border-color: rgba(255,255,255,0.27);
+		}
+		paper-checkbox::shadow #checkbox {
+			border-color: #ffffff;
+			border-color: rgba(255,255,255,0.54);
+		}
+	}
+	.bottom {
+		padding: 16px;
+		border-radius: 0 0 2px 2px;
+		&.list {
+			padding: 0 0 16px 0;
+			.subhead {
+				color: rgba(0,0,0,0.54);
+				font-size: 14px;
+				font-weight: 500;
+				letter-spacing: 0.010em;
+				padding: 12px 16px 12px 16px;
+			}
+		}
+		&.text {
+			white-space: pre-wrap;
+		}
+	}
+	.left {
+		padding: 16px;
+		border-radius: 2px 0 0 2px;
+		text-align: center;
+		min-width: 72px;
+	}
+	.right {
+		padding: 16px;
+		border-radius: 0 2px 2px 0;
+	}
+}

rpg-docs/client/style/main.scss

@@ -1,9 +1,6 @@
 @import "bourbon/bourbon";
 @import "colors";
 
-$thickColumnWidth: 304px;
-$thinColumnWidth: 240px;
-
 //apply a natural box layout model to all elements
 *, *:before, *:after {
 	-moz-box-sizing: border-box;
@@ -41,93 +38,6 @@ hr {
 	right: 24px;
 }
 
-//Column layouts of cards
-.column-container {
-	@include column-fill(balance);
-	@include column-gap(8px);
-	@include column-width($thickColumnWidth);
-	padding: 8px;
-
-	&.thin-columns {
-		@include column-count(4);
-		@include column-width($thinColumnWidth);
-	}
-}
-
-//Cards
-.card {
-	background: white;
-	border-radius: 2px;
-
-	.column-container & {
-		margin-bottom: 8px;
-		width: 100%;
-		//hack to stop flickering
-		-webkit-backface-visibility: hidden;
-		-webkit-transform: translateX(0);
-		//stop breaking over column divide
-		-webkit-column-break-inside: avoid;
-		page-break-inside: avoid;
-		break-inside: avoid;
-		//Fixes extra margin at top of columns
-		display: inline-block;
-	}
-
-	.top {
-		cursor: pointer;
-		padding: 16px;
-		border-radius: 2px 2px 0 0;
-		&.white {
-			cursor: auto;
-			padding: 16px;
-			border-bottom: rgba(0,0,0,0.12) solid 1px;
-		}
-		paper-checkbox::shadow #ink[checked] {
-			color: #ffffff;
-		}
-		paper-checkbox::shadow #ink {
-			color: #ffffff;
-		}
-		paper-checkbox::shadow #checkbox.checked {
-			background-color: #ffffff;
-			background-color: rgba(255,255,255,0.27);
-			border-color: #ffffff;
-			border-color: rgba(255,255,255,0.27);
-		}
-		paper-checkbox::shadow #checkbox {
-			border-color: #ffffff;
-			border-color: rgba(255,255,255,0.54);
-		}
-	}
-	.bottom {
-		padding: 16px;
-		border-radius: 0 0 2px 2px;
-		&.list {
-			padding: 0 0 16px 0;
-			.subhead {
-				color: rgba(0,0,0,0.54);
-				font-size: 14px;
-				font-weight: 500;
-				letter-spacing: 0.010em;
-				padding: 12px 16px 12px 16px;
-			}
-		}
-		&.text {
-			white-space: pre-wrap;
-		}
-	}
-	.left {
-		padding: 16px;
-		border-radius: 2px 0 0 2px;
-		text-align: center;
-		min-width: 72px;
-	}
-	.right {
-		padding: 16px;
-		border-radius: 0 2px 2px 0;
-	}
-}
-
 //Buttons
 paper-button {
 	color: #000;
@@ -146,3 +56,7 @@ paper-button {
 .clickable, core-item, paper-tab {
 	cursor: pointer;
 }
+
+.fab-buffer {
+    height: 100px;
+}

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));
+	}
+}
+

rpg-docs/private/changeLogs/changeLogs.js

@@ -68,3 +68,11 @@ ChangeLogs.insert({
 		"Fixed the styling and rounding of some of the detail boxes",
 	],
 });
+
+ChangeLogs.insert({
+	version: "0.3.0",
+	changes: [
+		"Refactored character sheet user interface.",
+		"Removed a lot of unneeded effects and webcomponents, should result in significantly improved performance on low-powered devices.",
+	],
+});