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/style/cards.scss b/rpg-docs/client/style/cards.scss new file mode 100644 index 00000000..533bfc5f --- /dev/null +++ b/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; + } +} diff --git a/rpg-docs/client/style/main.scss b/rpg-docs/client/style/main.scss index 4d570b23..043ae7bb 100644 --- a/rpg-docs/client/style/main.scss +++ b/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; @@ -147,6 +57,7 @@ paper-button { cursor: pointer; } +<<<<<<< HEAD .pre-wrap, .prewrap{ white-space: pre-wrap; } @@ -157,4 +68,8 @@ paper-button { .fullwidth { width: 100%; +======= +.fab-buffer { + height: 100px; +>>>>>>> origin/master } diff --git a/rpg-docs/client/views/character/inventory/inventory.html b/rpg-docs/client/views/character/inventory/inventory.html index af154eea..f0edb021 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 a1c54cd3..cda5df98 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)); + } +} + diff --git a/rpg-docs/private/changeLogs/changeLogs.js b/rpg-docs/private/changeLogs/changeLogs.js index cd010dee..9874f02e 100644 --- a/rpg-docs/private/changeLogs/changeLogs.js +++ b/rpg-docs/private/changeLogs/changeLogs.js @@ -76,3 +76,10 @@ ChangeLogs.insert({ "Removed a lot of unneeded effects and webcomponents, should result in significantly improved performance on low-powered devices.", ], }); + +ChangeLogs.insert({ + version: "0.3.1", + changes: [ + "Re-implemented floating action button menu component to move away from the broken third party implementation.", + ], +});