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
{@props.tag.unreadCount}
else [] - className = "item item-tag" + if @props.select then " selected" else "" -
+ 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