From 955794b5c0536fd5513a89418a9b230f7d3cef8d Mon Sep 17 00:00:00 2001 From: Stefan Zermatten Date: Sat, 16 May 2015 00:20:49 +0200 Subject: [PATCH] Re-implemented paper-fab menu --- rpg-docs/bower.json | 3 +- .../views/character/inventory/inventory.html | 29 ++++++------ .../views/character/inventory/inventory.js | 4 +- .../client/views/character/spells/spells.html | 29 ++++++------ .../client/views/character/spells/spells.js | 4 +- .../views/paperTemplates/fabMenu/fabMenu.html | 8 ++++ .../views/paperTemplates/fabMenu/fabMenu.js | 15 ++++++ .../views/paperTemplates/fabMenu/fabMenu.scss | 46 +++++++++++++++++++ 8 files changed, 102 insertions(+), 36 deletions(-) create mode 100644 rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html create mode 100644 rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js create mode 100644 rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss diff --git a/rpg-docs/bower.json b/rpg-docs/bower.json index 6446b645..22bae9ab 100644 --- a/rpg-docs/bower.json +++ b/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-fab-menu": "cwdoh/paper-fab-menu" + "paper-elements": "Polymer/paper-elements#~0.5.5" }, "resolutions": { "core-component-page": "^0.5.0", diff --git a/rpg-docs/client/views/character/inventory/inventory.html b/rpg-docs/client/views/character/inventory/inventory.html index f16bd4bc..8a1d8cdd 100644 --- a/rpg-docs/client/views/character/inventory/inventory.html +++ b/rpg-docs/client/views/character/inventory/inventory.html @@ -100,21 +100,20 @@
{{#if canEditCharacter _id}} - - - - - - + {{#fabMenu}} + + + + + + + + + {{/fabMenu}} {{/if}} diff --git a/rpg-docs/client/views/character/inventory/inventory.js b/rpg-docs/client/views/character/inventory/inventory.js index ae0a4ce0..63a38602 100644 --- a/rpg-docs/client/views/character/inventory/inventory.js +++ b/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, diff --git a/rpg-docs/client/views/character/spells/spells.html b/rpg-docs/client/views/character/spells/spells.html index 8ee12bb1..da79791e 100644 --- a/rpg-docs/client/views/character/spells/spells.html +++ b/rpg-docs/client/views/character/spells/spells.html @@ -128,20 +128,19 @@ {{#if canEditCharacter _id}} - - - - - - + {{#fabMenu}} + + + + + + + + + {{/fabMenu}} {{/if}} \ No newline at end of file diff --git a/rpg-docs/client/views/character/spells/spells.js b/rpg-docs/client/views/character/spells/spells.js index c0529ffa..6f9d4438 100644 --- a/rpg-docs/client/views/character/spells/spells.js +++ b/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({ diff --git a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html new file mode 100644 index 00000000..78ae0718 --- /dev/null +++ b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js new file mode 100644 index 00000000..968646d3 --- /dev/null +++ b/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()); + }, +}); \ No newline at end of file diff --git a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss new file mode 100644 index 00000000..d068f0e3 --- /dev/null +++ b/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)); + } +} +