diff --git a/exports/ui-components.coffee b/exports/ui-components.coffee
index 4b8253288..3bbfebd98 100644
--- a/exports/ui-components.coffee
+++ b/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'
diff --git a/internal_packages/account-sidebar/lib/account-sidebar-store.coffee b/internal_packages/account-sidebar/lib/account-sidebar-store.coffee
index b7829b911..0234e85b6 100644
--- a/internal_packages/account-sidebar/lib/account-sidebar-store.coffee
+++ b/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
diff --git a/internal_packages/account-sidebar/lib/account-sidebar-tag-item.cjsx b/internal_packages/account-sidebar/lib/account-sidebar-tag-item.cjsx
index 01a737632..7a0a1616b 100644
--- a/internal_packages/account-sidebar/lib/account-sidebar-tag-item.cjsx
+++ b/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
+ classSet = React.addons.classSet
+ 'item': true
+ 'item-tag': true
+ 'selected': @props.select
+
+
{unread}
+
{@props.tag.name}
diff --git a/internal_packages/account-sidebar/stylesheets/account-sidebar.less b/internal_packages/account-sidebar/stylesheets/account-sidebar.less
index b2de527eb..81d875d00 100644
--- a/internal_packages/account-sidebar/stylesheets/account-sidebar.less
+++ b/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;
diff --git a/internal_packages/composer/lib/new-compose-button.cjsx b/internal_packages/composer/lib/new-compose-button.cjsx
index 5646e2e72..f925d4971 100644
--- a/internal_packages/composer/lib/new-compose-button.cjsx
+++ b/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: ->
_onNewCompose: -> Actions.composeNewBlankDraft()
diff --git a/src/components/retina-img.cjsx b/src/components/retina-img.cjsx
new file mode 100644
index 000000000..930306fd4
--- /dev/null
+++ b/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
+
+

+
+ _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)
diff --git a/src/flux/models/utils.coffee b/src/flux/models/utils.coffee
index bb9ef92fe..91f355220 100644
--- a/src/flux/models/utils.coffee
+++ b/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
diff --git a/static/images/source-list/Archive-OnDark-@1x.png b/static/images/source-list/archive-selected@1x.png
similarity index 100%
rename from static/images/source-list/Archive-OnDark-@1x.png
rename to static/images/source-list/archive-selected@1x.png
diff --git a/static/images/source-list/Archive-OnDark-@2x.png b/static/images/source-list/archive-selected@2x.png
similarity index 100%
rename from static/images/source-list/Archive-OnDark-@2x.png
rename to static/images/source-list/archive-selected@2x.png
diff --git a/static/images/source-list/Archive-OnLight-@1x.png b/static/images/source-list/archive@1x.png
similarity index 100%
rename from static/images/source-list/Archive-OnLight-@1x.png
rename to static/images/source-list/archive@1x.png
diff --git a/static/images/source-list/Archive-OnLight-@2x.png b/static/images/source-list/archive@2x.png
similarity index 100%
rename from static/images/source-list/Archive-OnLight-@2x.png
rename to static/images/source-list/archive@2x.png
diff --git a/static/images/source-list/Drafts-OnDark-@1x.png b/static/images/source-list/drafts-selected@1x.png
similarity index 100%
rename from static/images/source-list/Drafts-OnDark-@1x.png
rename to static/images/source-list/drafts-selected@1x.png
diff --git a/static/images/source-list/Drafts-OnDark-@2x.png b/static/images/source-list/drafts-selected@2x.png
similarity index 100%
rename from static/images/source-list/Drafts-OnDark-@2x.png
rename to static/images/source-list/drafts-selected@2x.png
diff --git a/static/images/source-list/Drafts-OnLight-@1x.png b/static/images/source-list/drafts@1x.png
similarity index 100%
rename from static/images/source-list/Drafts-OnLight-@1x.png
rename to static/images/source-list/drafts@1x.png
diff --git a/static/images/source-list/Drafts-OnLight-@2x.png b/static/images/source-list/drafts@2x.png
similarity index 100%
rename from static/images/source-list/Drafts-OnLight-@2x.png
rename to static/images/source-list/drafts@2x.png
diff --git a/static/images/source-list/Folder-OnDark-@1x.png b/static/images/source-list/folder-selected@1x.png
similarity index 100%
rename from static/images/source-list/Folder-OnDark-@1x.png
rename to static/images/source-list/folder-selected@1x.png
diff --git a/static/images/source-list/Folder-OnDark-@2x.png b/static/images/source-list/folder-selected@2x.png
similarity index 100%
rename from static/images/source-list/Folder-OnDark-@2x.png
rename to static/images/source-list/folder-selected@2x.png
diff --git a/static/images/source-list/Folder-OnLight-@1x.png b/static/images/source-list/folder@1x.png
similarity index 100%
rename from static/images/source-list/Folder-OnLight-@1x.png
rename to static/images/source-list/folder@1x.png
diff --git a/static/images/source-list/Folder-OnLight-@2x.png b/static/images/source-list/folder@2x.png
similarity index 100%
rename from static/images/source-list/Folder-OnLight-@2x.png
rename to static/images/source-list/folder@2x.png
diff --git a/static/images/source-list/Inbox-OnDark-@1x.png b/static/images/source-list/inbox-selected@1x.png
similarity index 100%
rename from static/images/source-list/Inbox-OnDark-@1x.png
rename to static/images/source-list/inbox-selected@1x.png
diff --git a/static/images/source-list/Inbox-OnDark-@2x.png b/static/images/source-list/inbox-selected@2x.png
similarity index 100%
rename from static/images/source-list/Inbox-OnDark-@2x.png
rename to static/images/source-list/inbox-selected@2x.png
diff --git a/static/images/source-list/Inbox-OnLight-@1x.png b/static/images/source-list/inbox@1x.png
similarity index 100%
rename from static/images/source-list/Inbox-OnLight-@1x.png
rename to static/images/source-list/inbox@1x.png
diff --git a/static/images/source-list/Inbox-OnLight-@2x.png b/static/images/source-list/inbox@2x.png
similarity index 100%
rename from static/images/source-list/Inbox-OnLight-@2x.png
rename to static/images/source-list/inbox@2x.png
diff --git a/static/images/source-list/Sent-OnDark-@1x.png b/static/images/source-list/sent-selected@1x.png
similarity index 100%
rename from static/images/source-list/Sent-OnDark-@1x.png
rename to static/images/source-list/sent-selected@1x.png
diff --git a/static/images/source-list/Sent-OnDark-@2x.png b/static/images/source-list/sent-selected@2x.png
similarity index 100%
rename from static/images/source-list/Sent-OnDark-@2x.png
rename to static/images/source-list/sent-selected@2x.png
diff --git a/static/images/source-list/Sent-OnLight-@1x.png b/static/images/source-list/sent@1x.png
similarity index 100%
rename from static/images/source-list/Sent-OnLight-@1x.png
rename to static/images/source-list/sent@1x.png
diff --git a/static/images/source-list/Sent-OnLight-@2x.png b/static/images/source-list/sent@2x.png
similarity index 100%
rename from static/images/source-list/Sent-OnLight-@2x.png
rename to static/images/source-list/sent@2x.png
diff --git a/static/images/source-list/Trash-OnDark-@1x.png b/static/images/source-list/trash-selected@1x.png
similarity index 100%
rename from static/images/source-list/Trash-OnDark-@1x.png
rename to static/images/source-list/trash-selected@1x.png
diff --git a/static/images/source-list/Trash-OnDark-@2x.png b/static/images/source-list/trash-selected@2x.png
similarity index 100%
rename from static/images/source-list/Trash-OnDark-@2x.png
rename to static/images/source-list/trash-selected@2x.png
diff --git a/static/images/source-list/Trash-OnLight-@1x.png b/static/images/source-list/trash@1x.png
similarity index 100%
rename from static/images/source-list/Trash-OnLight-@1x.png
rename to static/images/source-list/trash@1x.png
diff --git a/static/images/source-list/Trash-OnLight-@2x.png b/static/images/source-list/trash@2x.png
similarity index 100%
rename from static/images/source-list/Trash-OnLight-@2x.png
rename to static/images/source-list/trash@2x.png