Add button to suggest a new mod

src/css/main.scss

@@ -19,28 +19,13 @@ All rights reserved.
 
 // Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-$color-background:       #AAC9FF;
+// Font Faces //////////////////////////////////////////////////////////////////////////////////////
-$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-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;
 

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');

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;
+        position: absolute; right: 0; bottom: 0; left: 0; height: 3.5em;
-        background: $color-toolbar-background;
+        background: $color-background-toolbar;
         border-top: 1px solid $color-gray-light;
     }
 

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%;
+        }
+    }
 }

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;

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
+            if @isOpen
-            @$screen.css display:'none'
+                @$screen.css display:'none'
-            @$el.animate {left:-@$el.outerWidth()}, duration:Duration.normal, complete:=>
+                @$el.animate {left:-@$el.outerWidth()}, duration:Duration.normal, complete:=>
-                @$commentField.val ''
+                    @$commentField.val ''
-                @$('input, textarea').blur()
+                    @$('input, textarea').blur()
-        else
+                    resolve()
-            @$screen.on 'click', => @onToggle()
+            else
-            @$screen.css display:'block'
+                @$screen.on 'click', => @onToggle()
+                @$screen.css display:'block'
 
-            @$el.animate {left:0}, duration:Duration.normal, complete:=>
+                @$el.animate {left:0}, duration:Duration.normal, complete:=>
-                if @$nameField.val().length is 0
+                    if @$nameField.val().length is 0
-                    @$nameField.focus()
+                        @$nameField.focus()
-                else if @$emailField.val().length is 0
+                    else if @$emailField.val().length is 0
-                    @$emailField.focus()
+                        @$emailField.focus()
-                else
+                    else
-                    @$commentField.focus()
+                        @$commentField.focus()
+
+                    resolve()
 
     # BaseController Overrides #####################################################################
 

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'

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"

src/templates/mod_pack.jade

@@ -10,7 +10,11 @@
         img(src="/images/bookshelf.png")
         p Mod Pack
 
-    table
+    .panel
-        tr
+        table
-            td  
+            tr
-            td  
+                td  
+                td  
+
+        .toolbar
+            button(name="suggestMod") suggest a mod