fix(sidebar): ui tweaks to narrow sidebar

internal_packages/message-list/stylesheets/message-list.less

@@ -61,6 +61,10 @@ body.platform-win32 {
       border-radius: 0;
     }
   }
+
+  .sidebar-section {
+    border-radius: 0;
+  }
 }
 
 .sheet-toolbar {
@@ -652,6 +656,9 @@ body.platform-win32 {
 .sidebar-participant-picker {
   padding: 10px 5px 20px 5px;
   text-align: right;
+  select {
+    max-width: 100%;
+  }
 }
 
 .column-MessageListSidebar {

internal_packages/participant-profile/lib/sidebar-participant-profile.jsx

@@ -2,7 +2,7 @@
 import _ from 'underscore'
 import React from 'react'
 import {shell} from 'electron'
-import {Utils} from 'nylas-exports'
+import {DOMUtils, Utils} from 'nylas-exports'
 import {RetinaImg} from 'nylas-component-kit'
 import ParticipantProfileStore from './participant-profile-store'
 
@@ -78,8 +78,8 @@ export default class SidebarParticipantProfile extends React.Component {
   _renderCorePersonalInfo() {
     return (
       <div className="core-personal-info">
-        <div className="full-name">{this.props.contact.fullName()}</div>
-        <div className="email">{this.props.contact.email}</div>
+        <div className="selectable full-name" onClick={this._select}>{this.props.contact.fullName()}</div>
+        <div className="selectable email" onClick={this._select}>{this.props.contact.email}</div>
         <div className="social-profiles-wrap">{this._renderSocialProfiles()}</div>
       </div>
     )
@@ -115,14 +115,14 @@ export default class SidebarParticipantProfile extends React.Component {
       title = <span>{this.state.title},&nbsp;</span>
     }
     return (
-      <p className="current-job">{title}{this.state.employer}</p>
+      <p className="selectable current-job">{title}{this.state.employer}</p>
     )
   }
 
   _renderBio() {
     if (!this.state.bio) { return false; }
     return (
-      <p className="bio">{this.state.bio}</p>
+      <p className="selectable bio">{this.state.bio}</p>
     )
   }
 
@@ -132,12 +132,25 @@ export default class SidebarParticipantProfile extends React.Component {
       <p className="location">
         <RetinaImg url={`nylas://participant-profile/assets/location-icon@2x.png`}
                    mode={RetinaImg.Mode.ContentPreserve}
-                   style={{marginRight: 10}} />
-        {this.state.location}
+                   style={{float: "left"}} />
+        <span className="selectable" style={{display: "block", marginLeft: 20}}>{this.state.location}</span>
       </p>
     )
   }
 
+  _select(event) {
+    const el = event.target;
+    const sel = document.getSelection()
+    if (el.contains(sel.anchorNode) && !sel.isCollapsed) {
+      return
+    }
+    const anchor = DOMUtils.findFirstTextNode(el)
+    const focus = DOMUtils.findLastTextNode(el)
+    if (anchor && focus && focus.data) {
+      sel.setBaseAndExtent(anchor, 0, focus, focus.data.length)
+    }
+  }
+
   render() {
     return (
       <div className="participant-profile">

internal_packages/participant-profile/stylesheets/participant-profile.less

@@ -60,6 +60,8 @@
         font-size: 22px;
         font-weight: 500;
         color: white;
+        box-shadow: inset 0 0 1px rgba(0,0,0,0.18);
+        background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
       }
     }
   }
@@ -67,6 +69,13 @@
   .core-personal-info {
     padding-top: 30px;
     text-align: center;
+
+    .full-name, .email {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .full-name {
       font-size: 16px;
     }
@@ -93,9 +102,12 @@
 
 body.platform-win32 {
   .participant-profile {
-    * {
+    border-radius: 0;
+    .profile-photo {
       border-radius: 0;
     }
+  }
+  .related-threads {
     border-radius: 0;
   }
 }

static/selection.less

@@ -11,6 +11,9 @@ input, textarea, div[contenteditable], {
   user-select: auto;
 }
 .selectable {
+  &:hover {
+    cursor: text;
+  }
   -webkit-user-select: auto;
   user-select: auto;
 }