fix(EntityDetailsHeader): fix overflow text in entity name

ibi-group · Mar 2, 2017 · 1d170cf · 1d170cf
1 parent de0af3a
commit 1d170cf
Showing 1 changed file with 27 additions and 20 deletions.
diff --git a/lib/editor/components/EntityDetailsHeader.js b/lib/editor/components/EntityDetailsHeader.js
@@ -32,9 +32,12 @@ export default class EntityDetailsHeader extends Component {
     const entityName = activeComponent === 'feedinfo' ? 'Feed Info' : getEntityName(activeComponent, activeEntity)
     const icon = gtfsIcons.find(i => i.id === activeComponent)
     const iconName = icon ? icon.icon : null
+    const nameWidth = activeComponent === 'stop' || activeComponent === 'route'
+      ? '130px'
+      : '170px'
     return (
       <div style={{height: '100px'}}>
-        <h5 style={{width: '100%', minHeight: '30px'}}>
+        <h5 style={{width: '100%'}}>
           <ButtonToolbar className='pull-right'>
             {activeComponent === 'stop' || activeComponent === 'route'
               ? <OverlayTrigger placement='bottom' overlay={<Tooltip id='tooltip'>Zoom to {activeComponent}</Tooltip>}>
@@ -95,26 +98,30 @@ export default class EntityDetailsHeader extends Component {
               </Button>
             </OverlayTrigger>
           </ButtonToolbar>
-          {activeComponent === 'route' && activeEntity
-            ? <span className='fa-stack'>
-              <Icon type='square' style={{color: `#${activeEntity.route_color ? activeEntity.route_color : 'fff'}`}} className='fa-stack-2x' />
-              <Icon type='bus' style={{color: `#${activeEntity.route_text_color ? activeEntity.route_text_color : '000'}`}} className='fa-stack-1x' />
-            </span>
-            : iconName
-            ? <span className='fa-stack'>
-              <Icon type='square' className='fa-stack-2x' />
-              <Icon type={iconName} className='fa-inverse fa-stack-1x' />
-            </span>
-            // schedule exception icon if no icon founds
-            : <span className='fa-stack'>
-              <Icon type='calendar' className='fa-stack-1x' />
-              <Icon type='ban' className='text-danger fa-stack-2x' />
-            </span>
-          }
+          <span style={{position: 'relative', top: '-4px'}}>
+            {activeComponent === 'route' && activeEntity
+              ? <span className='fa-stack'>
+                <Icon type='square' style={{color: `#${activeEntity.route_color ? activeEntity.route_color : 'fff'}`}} className='fa-stack-2x' />
+                <Icon type='bus' style={{color: `#${activeEntity.route_text_color ? activeEntity.route_text_color : '000'}`}} className='fa-stack-1x' />
+              </span>
+              : iconName
+              ? <span className='fa-stack'>
+                <Icon type='square' className='fa-stack-2x' />
+                <Icon type={iconName} className='fa-inverse fa-stack-1x' />
+              </span>
+              // schedule exception icon if no icon founds
+              : <span className='fa-stack'>
+                <Icon type='calendar' className='fa-stack-1x' />
+                <Icon type='ban' className='text-danger fa-stack-2x' />
+              </span>
+            }
+          </span>
           {'  '}
-          <span title={entityName}>
-            {
-              `${entityName && entityName.length > 18 ? entityName.substr(0, 18) + '...' : entityName}`
+          <span
+            title={entityName}
+            style={{width: nameWidth, paddingTop: '8px', display: 'inline-block', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden'}}>
+            {entityName
+              // `${entityName && entityName.length > 18 ? entityName.substr(0, 18) + '...' : entityName}`
             }
           </span>
         </h5>