New RetinaImg component, images in sidebar

exports/ui-components.coffee

@@ -7,4 +7,4 @@ module.exports =
   TokenizingTextField: require '../src/components/tokenizing-text-field'
   ResizableRegion: require '../src/components/resizable-region'
   Flexbox: require '../src/components/flexbox'
-
+  RetinaImg: require '../src/components/retina-img'

internal_packages/account-sidebar/lib/account-sidebar-store.coffee

@@ -44,7 +44,7 @@ AccountSidebarStore = Reflux.createStore
 
       lastSections = @_sections
       @_sections = [
-        { label: namespace.emailAddress, tags: mainTags }
+        { label: 'Mailboxes', tags: mainTags }
       ]
 
       if _.isEqual(@_sections, lastSections) is false

internal_packages/account-sidebar/lib/account-sidebar-tag-item.cjsx

@@ -1,13 +1,19 @@
 React = require 'react'
-{Actions} = require("inbox-exports")
+{Actions, Utils} = require 'inbox-exports'
+{RetinaImg} = require 'ui-components'
 
 module.exports =
 AccountSidebarTagItem = React.createClass
   render: ->
     unread = if @props.tag.unreadCount > 0 then <div className="unread">{@props.tag.unreadCount}</div> else []
-    className = "item item-tag" + if @props.select then " selected" else ""
-    <div className={className} onClick={@_onClick} id={@props.tag.id}>
+    classSet =  React.addons.classSet
+      'item': true
+      'item-tag': true
+      'selected': @props.select
+
+    <div className={classSet} onClick={@_onClick} id={@props.tag.id}>
       {unread}
+      <RetinaImg name={"#{@props.tag.id}.png"} fallback={'folder.png'} selected={@props.select}/>
       <span className="name"> {@props.tag.name}</span>
     </div>
 

internal_packages/account-sidebar/stylesheets/account-sidebar.less

@@ -16,7 +16,7 @@
     font-weight: 400;
     padding-left: @padding-base-horizontal;
     padding-right: @padding-base-horizontal;
-    line-height: @line-height-large;
+    line-height: @line-height-large * 1.1;
   }
 
   .item-divider {
@@ -31,13 +31,21 @@
       float: right;
       vertical-align: baseline;
       background: @source-list-bg;
-      margin-top: floor(@line-height-large - @line-height-small)/2.1;
+      margin-top: floor(@line-height-large - @line-height-small)/2;
       line-height: @line-height-small;
       padding: @padding-xs-vertical @padding-xs-horizontal @padding-xs-vertical @padding-xs-horizontal;
       color: @source-list-active-bg;
       border-radius: @border-radius-small;
       font-weight: 500;
     }
+    img {
+    }
+    .name {
+      text-transform: capitalize;
+      margin-left: @padding-xs-horizontal;
+      position:relative;
+      top:1px;
+    }
     &.selected {
       background: @source-list-active-bg;
       color: @source-list-active-color;

internal_packages/composer/lib/new-compose-button.cjsx

@@ -1,11 +1,12 @@
 React = require 'react'
 {Message, Actions, NamespaceStore} = require 'inbox-exports'
+{RetinaImg} = require 'ui-components'
 
 module.exports =
 NewComposeButton = React.createClass
   render: ->
     <button className="btn btn-compose" onClick={@_onNewCompose}>
-        <i className="fa fa-pencil"></i>&nbsp;Compose
+      <RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
     </button>
 
   _onNewCompose: -> Actions.composeNewBlankDraft()

src/components/retina-img.cjsx

@@ -0,0 +1,33 @@
+React = require 'react'
+{Utils} = require "inbox-exports"
+
+module.exports =
+RetinaImg = React.createClass
+  displayName: 'RetinaImg'
+  propTypes:
+    name: React.PropTypes.string
+    style: React.PropTypes.object
+
+    # Optional additional properties which adjust the provided
+    # name. Makes it easy to write parent components when images
+    # are used in some standard ways.
+    fallback: React.PropTypes.string # Use when image cannot be found
+    selected: React.PropTypes.bool # Appends -selected when true
+    active: React.PropTypes.bool # Appends -active when true
+
+  render: ->
+    path = @_pathFor(@props.name) ? @_pathFor(@props.fallback) ? ''
+    pathIsRetina = path.indexOf('@2x') > 0
+
+    style = @props.style ? {}
+    style.zoom = if pathIsRetina then 0.5 else 1
+
+    <img src={path} style={style} />
+  
+  _pathFor: (name) ->
+    [basename, ext] = name.split('.')
+    if @props.active is true
+      name = "#{basename}-active.#{ext}"
+    if @props.selected is true
+      name = "#{basename}-selected.#{ext}"
+    Utils.imageNamed(name)

src/flux/models/utils.coffee

@@ -1,5 +1,7 @@
+fs = require('fs-plus')
+path = require('path')
 
-utils =
+Utils =
   modelClassMap: ->
     Thread = require './thread'
     Message = require './message'
@@ -51,7 +53,7 @@ utils =
   modelFromJSON: (json) ->
     # These imports can't go at the top of the file
     # because they cause circular requires
-    klass = utils.modelClassMap()[json.object]
+    klass = Utils.modelClassMap()[json.object]
     throw (new Error "Unsure of how to inflate #{JSON.stringify(json)}") unless klass
     throw (new Error "Cannot inflate #{json.object}, require did not return constructor") unless klass instanceof Function
     object = new klass()
@@ -60,7 +62,7 @@ utils =
 
   modelReviver: (k, v) ->
     return v if k == ""
-    v = utils.modelFromJSON(v) if (v instanceof Object && v['object'])
+    v = Utils.modelFromJSON(v) if (v instanceof Object && v['object'])
     v
 
   generateTempId: ->
@@ -74,6 +76,21 @@ utils =
 
   tableNameForJoin: (primaryKlass, secondaryKlass) ->
     "#{primaryKlass.name}-#{secondaryKlass.name}"
+  
+  imageNamed: (fullname) ->
+    [name, ext] = fullname.split('.')
+
+    if Utils.images is undefined
+      Utils.images = {}
+      files = fs.listTreeSync('./static/images')
+      for file in files
+        Utils.images[path.basename(file)] = file.substr(7)
+      console.log('Loaded Images', Utils.images)
+
+    if window.devicePixelRatio > 1
+      return Utils.images["#{name}@2x.#{ext}"] ? Utils.images[fullname]
+    else
+      return Utils.images["#{name}@1x.#{ext}"] ? Utils.images[fullname]
 
   containsQuotedText: (html) ->
     # I know this is gross - one day we'll replace it with a nice system.
@@ -90,4 +107,4 @@ utils =
       return true if html.match(regex)
     return false
 
-module.exports = utils
+module.exports = Utils