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

Re-implemented paper-fab menu

Browse Source
This commit is contained in:
Stefan Zermatten
2015-05-16 00:20:49 +02:00
parent b0ac1dcc29
commit 955794b5c0
8 changed files with 102 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
rpg-docs/bower.json
View File

@@ -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-fab-menu": "cwdoh/paper-fab-menu"
"paper-elements": "Polymer/paper-elements#~0.5.5"
},
"resolutions": {
"core-component-page": "^0.5.0",

29
rpg-docs/client/views/character/inventory/inventory.html
View File

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

4
rpg-docs/client/views/character/inventory/inventory.js
View File

@@ -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,

29
rpg-docs/client/views/character/spells/spells.html
View File

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

4
rpg-docs/client/views/character/spells/spells.js
View File

@@ -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({

8
rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html Normal file
View File

@@ -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>

15
rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js Normal file
View File

@@ -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());
},
});

46
rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss Normal file
View File

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