diff --git a/src/css/main.scss b/src/css/main.scss index a50e57582..ee93094f7 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -19,28 +19,13 @@ All rights reserved. // Constants /////////////////////////////////////////////////////////////////////////////////////////////////////////// -$color-background: #AAC9FF; -$color-bedrock: #0A0A0A; -$color-brick-dark: #7A7A7A; -$color-brick-light: #D9D9D9; -$color-content: rgba(230, 230, 230, 0.90); -$color-dirt: #906647; -$color-error-new: #CD0000; -$color-error: #F3C2C2; -$color-ice: #8AA7E6; -$color-footer: #3D1D09; -$color-footer-text: white; -$color-gray-faint: #F2F2F2; -$color-gray-light: #CCCCCC; -$color-gray-medium: #A6A6A6; -$color-gray-dark: #8B8B8B; -$color-gray-shadow: #444444; -$color-table-background: white; -$color-toolbar-background: rgba(255, 255, 255, 0.75); +// Font Faces ////////////////////////////////////////////////////////////////////////////////////// $font-family-header: 'PressStart'; $font-family-normal: sans-serif; -$font-family-input: monospace; +$font-family-input: monospace; + +// Font Sizes ////////////////////////////////////////////////////////////////////////////////////// $font-size-small: 1.1em; $font-size-normal: 1.3em; @@ -48,6 +33,37 @@ $font-size-large: 1.6em; $font-size-x-large: 2.0em; $font-size-xx-large: 3.0em; +// Gray Palette //////////////////////////////////////////////////////////////////////////////////// + +$color-gray-faint: #F2F2F2; +$color-gray-light: #CCCCCC; +$color-gray-medium: #A6A6A6; +$color-gray-dark: #8B8B8B; +$color-gray-shadow: #444444; + +// Object Background Colors //////////////////////////////////////////////////////////////////////// + +$color-bedrock: #0A0A0A; +$color-brick-dark: #7A7A7A; +$color-brick-light: #D9D9D9; +$color-dirt: #906647; +$color-ice: #8AA7E6; + +// Style Colors //////////////////////////////////////////////////////////////////////////////////// + +$color-active: #5C8AE6; +$color-active-hover: #2E6BE6; +$color-background: #AAC9FF; +$color-background-panel: #FFFFFF; +$color-background-toolbar: rgba(255, 255, 255, 0.75); +$color-content: rgba(230, 230, 230, 0.90); +$color-error-new: #CD0000; +$color-error: #F3C2C2; +$color-footer: #3D1D09; +$color-footer-text: #FFFFFF; + +// Z-Index Layers ////////////////////////////////////////////////////////////////////////////////// + $layer-normal: 0; $layer-screen: 5; $layer-dialog: 10; @@ -59,6 +75,22 @@ body { font-size: 10px; } +button { + background: $color-gray-faint; + border: 0.1em solid $color-gray-medium; + border-radius: 1em; + color: $color-active; + cursor: pointer; + font-size: $font-size-normal; + font-weight: bold; + padding: 0.1em 1em; + + &:hover { + background: white; + color: $color-active-hover; + } +} + h1 { margin-bottom: 1em; diff --git a/src/css/templates/crafting_table.scss b/src/css/templates/crafting_table.scss index 5681f77f2..a7dd6d641 100644 --- a/src/css/templates/crafting_table.scss +++ b/src/css/templates/crafting_table.scss @@ -12,7 +12,7 @@ All rights reserved. .panel { position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em; - background: $color-table-background; + background: $color-background-panel; .prev { background: url('/images/arrow-left-disabled.png'); diff --git a/src/css/templates/inventory.scss b/src/css/templates/inventory.scss index 8565c7a9b..821e5e8c6 100644 --- a/src/css/templates/inventory.scss +++ b/src/css/templates/inventory.scss @@ -15,7 +15,7 @@ All rights reserved. .panel { position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em; - background: $color-table-background; + background: $color-background-panel; text-align: right; } @@ -26,8 +26,8 @@ All rights reserved. } .toolbar { - position: absolute; right: 0; bottom: 0; left: 0; height: 3em; - background: $color-toolbar-background; + position: absolute; right: 0; bottom: 0; left: 0; height: 3.5em; + background: $color-background-toolbar; border-top: 1px solid $color-gray-light; } diff --git a/src/css/templates/mod_pack.scss b/src/css/templates/mod_pack.scss index 8c1ab83a8..7004d72a2 100644 --- a/src/css/templates/mod_pack.scss +++ b/src/css/templates/mod_pack.scss @@ -6,15 +6,10 @@ All rights reserved. */ .view__mod_pack { - button { - @include center-vertical; - position: absolute; right: 1em; - } input { border: 0; font-size: 1.5em; width: 90%; } table { - background: white; margin: 0 auto; width: 100%; @@ -28,4 +23,19 @@ All rights reserved. td:nth-child(2) { width: 30%; } td:nth-child(3) { width: 65%; border-left: 0.1em solid $color-brick-light; } } + + .panel { + background: white; + } + + .toolbar { + position: relative; width: 35%; + margin-top: 1em; + padding: 1em 1em; + text-align: center; + + button { + position: relative; width: 66%; + } + } } diff --git a/src/css/templates/stack.scss b/src/css/templates/stack.scss index 81059297e..20f4dcec5 100644 --- a/src/css/templates/stack.scss +++ b/src/css/templates/stack.scss @@ -12,7 +12,7 @@ All rights reserved. .quantity { border-radius: 0.75em; background: $color-ice; - color: $color-table-background; + color: $color-background-panel; font-size: $font-size-normal; font-weight: bold; text-align: center; diff --git a/src/scripts/controllers/feedback_controller.coffee b/src/scripts/controllers/feedback_controller.coffee index 3980f3f6a..636f4742c 100644 --- a/src/scripts/controllers/feedback_controller.coffee +++ b/src/scripts/controllers/feedback_controller.coffee @@ -21,6 +21,13 @@ module.exports = class FeedbackController extends BaseController Object.defineProperty this, 'isOpen', get:-> @$el.offset().left is 0 + # Public Methods ############################################################################### + + enterFeedback: (message)-> + promise = w(true) + if not @isOpen then promise = @onToggle() + promise.then => @$commentField.val message + # Event Methods ################################################################################ onSendClicked: -> @@ -55,24 +62,28 @@ module.exports = class FeedbackController extends BaseController @$sendButton.attr 'disabled', 'disabled' onToggle: -> - @$screen.off 'click' + w.promise (resolve)=> + @$screen.off 'click' - if @isOpen - @$screen.css display:'none' - @$el.animate {left:-@$el.outerWidth()}, duration:Duration.normal, complete:=> - @$commentField.val '' - @$('input, textarea').blur() - else - @$screen.on 'click', => @onToggle() - @$screen.css display:'block' + if @isOpen + @$screen.css display:'none' + @$el.animate {left:-@$el.outerWidth()}, duration:Duration.normal, complete:=> + @$commentField.val '' + @$('input, textarea').blur() + resolve() + else + @$screen.on 'click', => @onToggle() + @$screen.css display:'block' - @$el.animate {left:0}, duration:Duration.normal, complete:=> - if @$nameField.val().length is 0 - @$nameField.focus() - else if @$emailField.val().length is 0 - @$emailField.focus() - else - @$commentField.focus() + @$el.animate {left:0}, duration:Duration.normal, complete:=> + if @$nameField.val().length is 0 + @$nameField.focus() + else if @$emailField.val().length is 0 + @$emailField.focus() + else + @$commentField.focus() + + resolve() # BaseController Overrides ##################################################################### diff --git a/src/scripts/controllers/mod_pack_controller.coffee b/src/scripts/controllers/mod_pack_controller.coffee index 06d636f90..b906fd245 100644 --- a/src/scripts/controllers/mod_pack_controller.coffee +++ b/src/scripts/controllers/mod_pack_controller.coffee @@ -20,6 +20,12 @@ module.exports = class ModPackController extends BaseController options.templateName = 'mod_pack' super options + # Event Methods ################################################################################ + + onSuggestModClicked: -> + return unless global.feedbackController? + global.feedbackController.enterFeedback 'Please add mod:\n\n' + # BaseController Overrides ##################################################################### onWillRender: -> @@ -28,6 +34,7 @@ module.exports = class ModPackController extends BaseController onDidRender: -> @$table = @$('table') + @$toolbar = @$('.toolbar') super refresh: -> @@ -42,4 +49,14 @@ module.exports = class ModPackController extends BaseController @_modVersionControllers.push controller @$table.prepend controller.$el + if global.feedbackController? + @$toolbar.show duration:0 + else + @$toolbar.hide duration:0 + super + + # Backbone.View Overrides ###################################################################### + + events: + 'click button[name="suggestMod"]': 'onSuggestModClicked' diff --git a/src/scripts/main.coffee b/src/scripts/main.coffee index 149651b0a..7d07f4406 100644 --- a/src/scripts/main.coffee +++ b/src/scripts/main.coffee @@ -14,6 +14,7 @@ CraftingGuideRouter = require './crafting_guide_router' if typeof(global) is 'undefined' window.global = window + global = window.global global.logger = new Logger global.router = new CraftingGuideRouter @@ -31,7 +32,7 @@ switch window.location.hostname global.env = 'production' logger.level = Logger.INFO -feedbackController = new FeedbackController el:'.view__feedback' +global.feedbackController = new FeedbackController el:'.view__feedback' feedbackController.render() logger.info "CraftingGuide is ready" diff --git a/src/templates/mod_pack.jade b/src/templates/mod_pack.jade index fd2b6728f..2023e1041 100644 --- a/src/templates/mod_pack.jade +++ b/src/templates/mod_pack.jade @@ -10,7 +10,11 @@ img(src="/images/bookshelf.png") p Mod Pack - table - tr - td   - td   + .panel + table + tr + td   + td   + + .toolbar + button(name="suggestMod") suggest a mod \ No newline at end of file