From 2e9a2ac167e1d8f19ac295a968d1bbb767d6c2aa Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Wed, 17 Jun 2015 20:40:08 -0700
Subject: [PATCH] feat(salesforce): new UI for Salesforce

Summary:
style opportunity picker and placeholder on tokenizing text fields

UI for synced opportunities

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D1655
---
 internal_packages/composer/stylesheets/composer.less     | 5 +++--
 .../message-templates/lib/template-picker.cjsx           | 2 +-
 .../onboarding/lib/external-auth-webview-page.cjsx       | 2 +-
 internal_packages/onboarding/lib/page.cjsx               | 2 +-
 .../sidebar-fullcontact/lib/sidebar-fullcontact.cjsx     | 1 +
 package.json                                             | 2 +-
 src/components/generated-form.cjsx                       | 4 ++--
 src/components/tokenizing-text-field.cjsx                | 8 ++++++++
 static/buttons.less                                      | 5 ++++-
 static/components/tokenizing-text-field.less             | 9 +++++++++
 10 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index ce4d6beae..9e946ce27 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -203,8 +203,9 @@ body.is-blurred .composer-inner-wrap .tokenizing-field .token {
   .composer-inner-wrap {
 
     .composer-action-bar-wrap {
-      background: @background-secondary;
-      border-top:1px solid @border-color-divider;
+      background: #fcfcfc;
+      border-top: 1px solid #eaeaea;
+      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.03);
     }
 
     .composer-action-bar-content {
diff --git a/internal_packages/message-templates/lib/template-picker.cjsx b/internal_packages/message-templates/lib/template-picker.cjsx
index 0b1700132..da035fbd1 100644
--- a/internal_packages/message-templates/lib/template-picker.cjsx
+++ b/internal_packages/message-templates/lib/template-picker.cjsx
@@ -22,7 +22,7 @@ class TemplatePicker extends React.Component
     @unsubscribe() if @unsubscribe
 
   render: =>
-    button = <button className="btn btn-toolbar" style={padding: "2px 9px"}>
+    button = <button className="btn btn-toolbar narrow">
       <RetinaImg name="icon-composer-templates.png" mode={RetinaImg.Mode.ContentIsMask}/>
       &nbsp;
       <RetinaImg name="icon-composer-dropdown.png" mode={RetinaImg.Mode.ContentIsMask}/>
diff --git a/internal_packages/onboarding/lib/external-auth-webview-page.cjsx b/internal_packages/onboarding/lib/external-auth-webview-page.cjsx
index 368a8b99e..08b29d9dd 100644
--- a/internal_packages/onboarding/lib/external-auth-webview-page.cjsx
+++ b/internal_packages/onboarding/lib/external-auth-webview-page.cjsx
@@ -57,7 +57,7 @@ class ExternalAuthWebviewPage extends Page
     , 20
 
     @_listeners =
-     "new-window": (e) ->
+      "new-window": (e) ->
         require('shell').openExternal(e.url)
       "did-start-loading": (e) =>
         @_setUserAgent(e, webview)
diff --git a/internal_packages/onboarding/lib/page.cjsx b/internal_packages/onboarding/lib/page.cjsx
index e69054f07..5ed89fa30 100644
--- a/internal_packages/onboarding/lib/page.cjsx
+++ b/internal_packages/onboarding/lib/page.cjsx
@@ -30,7 +30,7 @@ class Page extends React.Component
 
     <RetinaImg ref="spinner"
                style={styles}
-               name="setup-spinner.gif"
+               name="Setup-Spinner.gif"
                mode={RetinaImg.Mode.ContentPreserve}/>
 
 module.exports = Page
diff --git a/internal_packages/sidebar-fullcontact/lib/sidebar-fullcontact.cjsx b/internal_packages/sidebar-fullcontact/lib/sidebar-fullcontact.cjsx
index 0e6f488e3..863630c77 100644
--- a/internal_packages/sidebar-fullcontact/lib/sidebar-fullcontact.cjsx
+++ b/internal_packages/sidebar-fullcontact/lib/sidebar-fullcontact.cjsx
@@ -28,6 +28,7 @@ class SidebarFullContact extends React.Component
       <SidebarFullContactDetails contact={@state.focusedContact ? {}}
                                  fullContact={@_fullContact()}/>
       <InjectedComponentSet matching={role: "sidebar:focusedContactInfo"}
+                            direction="column"
                             exposedProps={focusedContact: @state.focusedContact}/>
     </div>
 
diff --git a/package.json b/package.json
index b98726b60..48fdfa072 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nylas",
   "productName": "Nylas",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "An email OS",
   "main": "./src/browser/main.js",
   "repository": {
diff --git a/src/components/generated-form.cjsx b/src/components/generated-form.cjsx
index ca251571c..af9d467e2 100644
--- a/src/components/generated-form.cjsx
+++ b/src/components/generated-form.cjsx
@@ -171,8 +171,8 @@ class FormItem extends React.Component
       React.createElement("input", inputProps)
     else if @props.type is "select"
       options = (@props.selectOptions ? []).map (optionData) ->
-        <option {...optionData} key={optionData.value} >{optionData.label}</option>
-      options.unshift(<option key={"blank-option"}></option>)
+        <option {...optionData} key={"#{Utils.generateTempId()}-optionData.value"} >{optionData.label}</option>
+      options.unshift(<option key={"#{Utils.generateTempId()}-blank-option"}></option>)
       <select {...inputProps}>{options}</select>
     else if @props.type is "textarea"
       React.createElement("textarea", inputProps)
diff --git a/src/components/tokenizing-text-field.cjsx b/src/components/tokenizing-text-field.cjsx
index 833ba0143..2b7f17b2e 100644
--- a/src/components/tokenizing-text-field.cjsx
+++ b/src/components/tokenizing-text-field.cjsx
@@ -226,6 +226,8 @@ TokenizingTextField = React.createClass
     <div key="field-component" onClick={@focus} {...@dropTargetFor('token')}>
       {@_renderPrompt()}
       <div className="tokenizing-field-input">
+        {@_placeholder()}
+
         {@_fieldTokenComponents()}
 
         {@_inputEl()}
@@ -263,6 +265,12 @@ TokenizingTextField = React.createClass
              tabIndex={@props.tabIndex}
              value={@state.inputValue} />
 
+  _placeholder: ->
+    if not @state.focus and @props.placeholder?
+      return <div className="placeholder">{@props.placeholder}</div>
+    else
+      return <span></span>
+
   _atMaxTokens: ->
     if @props.maxTokens
       @props.tokens.length >= @props.maxTokens
diff --git a/static/buttons.less b/static/buttons.less
index 4216482b3..c2ded0d69 100644
--- a/static/buttons.less
+++ b/static/buttons.less
@@ -102,8 +102,11 @@ button, html input[type="button"] {
 }
 
 .btn-toolbar {
-  min-height: 24px;
+  height: 24px;
   padding: 2px 13px;
+  &.narrow {
+    padding: 2px 9px;
+  }
 }
 
 .btn-gradient {
diff --git a/static/components/tokenizing-text-field.less b/static/components/tokenizing-text-field.less
index 8cd6d16b3..2a9e9b191 100644
--- a/static/components/tokenizing-text-field.less
+++ b/static/components/tokenizing-text-field.less
@@ -116,6 +116,15 @@
       box-shadow: none;
     }
   }
+
+  .placeholder {
+    color: fade(@text-color, 50%);
+    position: absolute;
+    top: 50%;
+    margin-top: -0.8em;
+    left: 1em;
+    font-size: 12px;
+  }
 }
 
 body.is-blurred .tokenizing-field .token {