jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Firefox now works... barely

Browse Source
This commit is contained in:
Stefan Zermatten
2017-02-10 14:01:06 +02:00
parent eb4336b3e9
commit 576c1f953b
7 changed files with 119 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
rpg-docs/client/views/character/characterSheet.js
View File

@@ -4,28 +4,32 @@ Template.characterSheet.onRendered(function() {
Session.setDefault(this.data._id + ".selectedTab", "0");
// Keep the header's scroll target up to date with the currently selected tab
const header = this.find("app-header");
let header;
this.autorun(() => {
const tab = getTab(Template.currentData()._id);
header = header || this.find("app-header");
if (!header) return;
Tracker.afterFlush(() => {
header.scrollTarget = this.find("#tabPages .iron-selected");
header._scrollHandler();
header._scrollHandler && header._scrollHandler();
});
});
// Store all the tab page components for use in animations
tabPages = _.times(6, (n) =>
this.$(`.tab-page:nth-child(${n + 1})`)
);
tabSliders = _.times(6, (n) =>
tabPages[n].find(".animation-slider")
);
tabFabs = _.times(6, (n) =>
tabPages[n].find(".floatyButton")
);
tabFabMenus = _.times(6, (n) =>
tabPages[n].find(".mini-holder")
);
_.defer(() => {
// Store all the tab page components for use in animations
tabPages = _.times(6, (n) =>
this.$(`.tab-page:nth-child(${n + 1})`)
);
tabSliders = _.times(6, (n) =>
tabPages[n].find(".animation-slider")
);
tabFabs = _.times(6, (n) =>
tabPages[n].find(".floatyButton")
);
tabFabMenus = _.times(6, (n) =>
tabPages[n].find(".mini-holder")
);
})
//watch this character and make sure their encumbrance is updated
//trackEncumbranceConditions(this.data._id, this);
@@ -175,6 +179,7 @@ Template.characterSheet.events({
setTab(this._id, event.target.selected);
},
"color-change": function(event, instance){
console.log("character color change")
Characters.update(this._id, {$set: {color: event.color}});
},
"click #deleteCharacter": function(event, instance){

98
rpg-docs/client/views/layout/layout.html
View File

@@ -1,53 +1,7 @@
<template name="layout">
<app-drawer-layout class="layout" responsive-width="905px" fullbleed>
<app-drawer>
<app-header-layout class="white" has-scrolling-region>
<app-header id="accountSummary" effects="waterfall parallax-background" condenses fixed>
<app-toolbar>
{{#if currentUser}}
<a href="/account" style="text-decoration: underline; cursor: pointer; font-size: 16px;">
{{profileLink}}
</a>
{{else}}
<a href="/sign-in" style="text-decoration: underline; cursor: pointer; font-size: 16px;">
Sign in
</a>
{{/if}}
</app-toolbar>
</app-header>
<div id="navPanel">
<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" tabindex="-1">
<paper-icon-item id="characters">
<iron-icon icon="social:people" item-icon></iron-icon>
Characters
</paper-icon-item>
</a>
<a href="/guide" tabindex="-1">
<paper-icon-item id="guide">
<iron-icon icon="social:school" item-icon></iron-icon>
Guide
</paper-icon-item>
</a>
<paper-icon-item id="feedback">
<iron-icon icon="bug-report" item-icon></iron-icon>
Send Feedback
</paper-icon-item>
<a href="changeLog" tabindex="-1">
<paper-icon-item id="changeLog">
<iron-icon icon="list" item-icon></iron-icon>
Change Log
</paper-icon-item>
</a>
<hr style="margin: 16px 0 24px 0;">
{{> characterSideList}}
</div>
</app-header-layout>
{{> appDrawer}}
</app-drawer>
{{> yield}}
</app-drawer-layout>
@@ -56,3 +10,53 @@
</paper-toast>
{{> dialogStack}}
</template>
<template name="appDrawer">
<app-header-layout class="white" has-scrolling-region>
<app-header id="accountSummary" effects="waterfall parallax-background" condenses fixed>
<app-toolbar>
{{#if currentUser}}
<a href="/account" style="text-decoration: underline; cursor: pointer; font-size: 16px;">
{{profileLink}}
</a>
{{else}}
<a href="/sign-in" style="text-decoration: underline; cursor: pointer; font-size: 16px;">
Sign in
</a>
{{/if}}
</app-toolbar>
</app-header>
<div id="navPanel">
<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" tabindex="-1">
<paper-icon-item id="characters">
<iron-icon icon="social:people" item-icon></iron-icon>
Characters
</paper-icon-item>
</a>
<a href="/guide" tabindex="-1">
<paper-icon-item id="guide">
<iron-icon icon="social:school" item-icon></iron-icon>
Guide
</paper-icon-item>
</a>
<paper-icon-item class="feedback">
<iron-icon icon="bug-report" item-icon></iron-icon>
Send Feedback
</paper-icon-item>
<a href="changeLog" tabindex="-1">
<paper-icon-item id="changeLog">
<iron-icon icon="list" item-icon></iron-icon>
Change Log
</paper-icon-item>
</a>
<hr style="margin: 16px 0 24px 0;">
{{> characterSideList}}
</div>
</app-header-layout>
</template>

20
rpg-docs/client/views/layout/layout.js
View File

@@ -2,18 +2,7 @@ Template.layout.onCreated(function() {
this.subscribe("user");
});
Template.layout.rendered = function() {
$(window).on("popstate", GlobalUI.popStateHandler);
};
Template.layout.destroyed = function() {
$(window).off("popstate", GlobalUI.popStateHandler);
};
Template.layout.helpers({
notSelected: function(){
return Session.get("global.ui.detailShow") ? "not-selected" : null;
},
Template.appDrawer.helpers({
profileLink: function() {
var user = Meteor.user();
return user.profile && user.profile.username || user.username || "My Account";
@@ -22,17 +11,18 @@ Template.layout.helpers({
let drawerLayout;
const closeDrawer = function(instance){
if (!drawerLayout) drawerLayout = instance.find("app-drawer-layout");
if (!drawerLayout) drawerLayout = $("app-drawer-layout")[0];
if (drawerLayout && drawerLayout.narrow){
drawerLayout.drawer.close();
}
}
Template.layout.events({
Template.appDrawer.events({
"click app-drawer a": function(event, instance){
closeDrawer(instance);
},
"click #feedback": function(event, instance) {
"click .feedback": function(event, instance) {
console.log("feedback clicked");
pushDialogStack({
template: "feedback",
element: event.currentTarget,

26
rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.js
View File

@@ -88,10 +88,11 @@ const shrinkAnimation = ({element, reverse}) => {
const dialogOpenAnimation = ({element, returnElement, dialog}) => {
// hide all floaty buttons when we open the first dialog
let fabs = $(".mini-holder paper-fab, .floatyButton").filter(
(index, el) => el !== element && el !== returnElement
);
if (dialogs._array.length === 1) {
shrinkAnimation({
element: $(".mini-holder paper-fab, .floatyButton")
});
shrinkAnimation({element: fabs});
}
const dialogRect = dialog.getBoundingClientRect();
@@ -124,10 +125,12 @@ const dialogOpenAnimation = ({element, returnElement, dialog}) => {
const dialogCloseAnimation = ({element, returnElement, dialog, callback}) => {
// unhide all floaty buttons when we close the last dialog
if (!dialogs._array.length) shrinkAnimation({
element: $(".mini-holder paper-fab, .floatyButton"),
reverse: true,
});
let fabs = $(".mini-holder paper-fab, .floatyButton").filter(
(index, el) => el !== element && el !== returnElement
);
if (dialogs._array.length === 1) {
shrinkAnimation({element: fabs, revese: true});
}
// We are returning to a different element
// pop the original element back in and use the returnElement in its place
@@ -212,10 +215,9 @@ const dialogCloseAnimation = ({element, returnElement, dialog, callback}) => {
}, duration);
};
Template.dialogStack.uihooks({
".dialog": {
container: ".dialog-sizer",
insert: function(node, next, tpl) {
Template.dialogStack.onRendered(function(){
$(".dialog-sizer")[0]._uihooks = {
insertElement: function(node, next) {
$(node).insertBefore(next);
const data = Blaze.getData(node);
if (data.element){
@@ -230,7 +232,7 @@ Template.dialogStack.uihooks({
});
}
},
remove: function(node, tpl) {
removeElement: function(node) {
const element = node._dialogStackElement;
const returnElement = node._dialogStackReturnElement;
if (element){

14
rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js
View File

@@ -7,12 +7,14 @@ Template.fabMenu.onRendered(function(){
// Do a spin animation to turn the + icon into a x when active
this.autorun(() => {
const active = this.active.get();
const iconStyle = active ?
"transition: transform 0.3s ease; transform: rotate(225deg);" :
"transition: transform 0.3s ease;";
fab.updateStyles({
["--paper-fab-iron-icon"]: iconStyle,
});
if (fab && fab.updateStyles){
const iconStyle = active ?
"transition: transform 0.3s ease; transform: rotate(225deg);" :
"transition: transform 0.3s ease;";
fab.updateStyles({
["--paper-fab-iron-icon"]: iconStyle,
});
}
})
});