Added Polymer

rpg-docs/client/views/character/characterSheet.css

@@ -1,11 +1,35 @@
-#characterSheetTabs {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: flex-start;
+paper-tabs, core-toolbar {
+	background-color: #795548;
+	color: #fff;
+	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
 }
 
-.characterTab {
-	flex-grow: 1;
-	min-width: 100px;
+core-toolbar paper-tabs {
+	box-shadow: none;
+}
+
+paper-tabs[noink][nobar] paper-tab.core-selected {
+	color: #fff;
+}
+
+::shadow #selectionBar, #onRadio  {
+	background-color: #d50000;
+}
+
+::shadow #ink {
+	color: #d50000 !important;
+}
+
+paper-tabs.transparent-brown {
+	background-color: transparent;
+	color: #795548;
+	box-shadow: none;
+}
+
+paper-tabs.transparent-brown::shadow #selectionBar {
+	background-color: #795548;
+}
+
+paper-tabs.transparent-brown paper-tab::shadow #ink {
+	color: #795548;
 }

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

@@ -1,4 +1,5 @@
 <template name="characterSheet">
+	<!--
 	<div id="characterHeader">
 		{{> characterName}}
 		{{> healthBar}}
@@ -16,4 +17,22 @@
 	<div id="characterDetails">
 		{{Template.dynamic template=getTab}}
 	</div>
+-->
+	<paper-tabs id="characterSheetTabs" scrollable="true" selected={{selectedTab}}>
+		<paper-tab>Stats</paper-tab>
+		<paper-tab>Features</paper-tab>
+		<paper-tab>Persona</paper-tab>
+		<paper-tab>Inventory</paper-tab>
+		<paper-tab>Spellbook</paper-tab>
+		<paper-tab>Journal</paper-tab>
+	</paper-tabs>
+
+	<core-animated-pages selected={{selectedTab}} transitions="slide-from-right">
+		<div>Stats</div>
+		<div>Features</div>
+		<div>Persona</div>
+		<div>Inventory</div>
+		<div>Spellbook</div>
+		<div>Journal</div>
+	</core-animated-pages>
 </template>

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

@@ -1,34 +1,35 @@
 Template.characterSheet.created = function(){
-	Template.instance().tab = new ReactiveVar("characterStats")
+	Template.instance().selectedTab = new ReactiveVar(0)
+}
+
+Template.characterSheet.rendered = function(){
+	var observer = new ObjectObserver(document.querySelector('#characterSheetTabs'));
+	var instance = Template.instance();
+	observer.open(function(added, removed, changed, getOldValueFn) {
+		Object.keys(changed).forEach(function(property) {
+			if(property === "selected"){
+				var selected = changed[property];
+				instance.selectedTab.set(selected);
+			}
+		})
+	});
 }
 
 Template.characterSheet.helpers({
-	getTab: function(){
-		return Template.instance().tab.get();
+	selectedTab: function(){
+		return Template.instance().selectedTab.get();
 	},
 });
 
-var setTab = function(value){
-	Template.instance().tab.set(value);
-}
-
 Template.characterSheet.events({
-	"click #statsTab": function(){
-		setTab("stats");
-	},
-	"click #featuresTab": function(){
-		setTab("features");
-	},
-	"click #personaTab": function(){
-		setTab("persona");
-	},
-	"click #inventoryTab": function(){
-		setTab("inventory");
-	},
-	"click #spellsTab": function(){
-		setTab("spellbook");
-	},
-	"click #journalTab": function(){
-		setTab("journal");
-	},
-})
+	
+})
+
+/* requires the following templates
+stats
+features
+persona
+inventory
+spellbook
+journal
+*/