Header name fixes

jsapp/js/bem.es6

@@ -13,9 +13,7 @@ bem.Loading__msg = bem.Loading.__('msg');
 
 bem.AssetRow = BEM('asset-row', '<li>');
 bem.AssetRow__cell        = bem.AssetRow.__('cell');
-
 bem.AssetRow__cellmeta    = bem.AssetRow.__('cellmeta');
-bem.AssetRow__name        = bem.AssetRow.__('name', '<span>');
 bem.AssetRow__description = bem.AssetRow.__('description', '<span>');
 bem.AssetRow__tags        = bem.AssetRow.__('tags');
 bem.AssetRow__tags__tag   = bem.AssetRow.__('tags__tag', '<span>');

jsapp/js/components/assetrow.es6

@@ -10,15 +10,10 @@ import stores from '../stores';
 import mixins from '../mixins';
 import {dataInterface} from '../dataInterface';
 import {ASSET_TYPES} from '../constants';
-
 import TagInput from '../components/tagInput';
-
 import {
   formatTime,
-  anonUsername,
-  t,
-  assign,
-  validFileTypes
+  t
 } from '../utils';
 
 class AssetRow extends React.Component {
@@ -32,17 +27,6 @@ class AssetRow extends React.Component {
     this.escFunction = this.escFunction.bind(this);
     autoBind(this);
   }
-  // clickAsset (evt) {
-  //   // this click was not intended for a button
-  //   evt.nativeEvent.preventDefault();
-  //   evt.nativeEvent.stopImmediatePropagation();
-  //   evt.preventDefault();
-
-  //   // if no asset is selected, then this asset
-  //   // otherwise, toggle selection (unselect if already selected)
-  //   // let forceSelect = (stores.selectedAsset.uid === false);
-  //   // stores.selectedAsset.toggleSelect(this.props.uid, forceSelect);
-  // }
   clickAssetButton (evt) {
     var clickedActionIcon = $(evt.target).closest('[data-action]').get(0);
     if (clickedActionIcon) {
@@ -171,13 +155,11 @@ class AssetRow extends React.Component {
                 data-kind={this.props.kind}
                 data-asset-type={this.props.kind}
                 draggable={false}
-                className={`asset-row__celllink asset-row__celllink-name ${linkClassName}`}
+                className={`asset-row__celllink asset-row__celllink--name ${linkClassName}`}
               >
-                <bem.AssetRow__name>
-                  <ui.AssetName {...this.props} />
-                </bem.AssetRow__name>
+                <ui.AssetName {...this.props} />
               </Link>
-              { this.props.asset_type && this.props.asset_type === 'survey' &&
+              { this.props.asset_type && this.props.asset_type === 'survey' && this.props.settings.description &&
                 <bem.AssetRow__description>
                   {this.props.settings.description}
                 </bem.AssetRow__description>

jsapp/js/components/header.es6

@@ -3,10 +3,8 @@ import PropTypes from 'prop-types';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import { hashHistory } from 'react-router';
-import Select from 'react-select';
 import alertify from 'alertifyjs';
 import ui from '../ui';
-
 import stores from '../stores';
 import Reflux from 'reflux';
 import bem from '../bem';
@@ -21,28 +19,14 @@ import {
   stringToColor,
 } from '../utils';
 import searches from '../searches';
-
-import {
-  ListSearch,
-  ListTagFilter,
-} from '../components/list';
+import {ListSearch} from '../components/list';
 
 let typingTimer;
 
-function langsToValues (langs) {
-  return langs.map(function(lang) {
-    return {
-      value: lang[0],
-      label: lang[1],
-    };
-  });
-}
-
 class MainHeader extends Reflux.Component {
   constructor(props){
     super(props);
     this.state = assign({
-      dataPopoverShowing: false,
       asset: false,
       currentLang: currentLang(),
       libraryFiltersContext: searches.getSearchContext('library', {
@@ -56,8 +40,7 @@ class MainHeader extends Reflux.Component {
           assetType: 'asset_type:survey',
         },
         filterTags: 'asset_type:survey',
-      }),
-      _langIndex: 0
+      })
     }, stores.pageState.state);
     this.stores = [
       stores.session,
@@ -69,14 +52,14 @@ class MainHeader extends Reflux.Component {
     document.body.classList.add('hide-edge');
     this.listenTo(stores.asset, this.assetLoad);
   }
+  componentWillUpdate(newProps) {
+    if (this.props.assetid !== newProps.assetid) {
+      this.setState({asset: false});
+    }
+  }
   assetLoad(data) {
-    var assetid = this.props.assetid;
-    var asset = data[assetid];
-
-    this.setState(assign({
-        asset: asset
-      }
-    ));
+    const asset = data[this.props.assetid];
+    this.setState(assign({asset: asset}));
   }
   logout () {
     actions.auth.logout();
@@ -200,6 +183,23 @@ class MainHeader extends Reflux.Component {
   toggleFixedDrawer() {
     stores.pageState.toggleFixedDrawer();
   }
+  updateAssetTitle() {
+    if (!this.state.asset.name.trim()) {
+      alertify.error(t('Please enter a title for your project'));
+      return false;
+    } else {
+      actions.resources.updateAsset(
+        this.state.asset.uid,
+        {
+          name: this.state.asset.name,
+          settings: JSON.stringify({
+            description: this.state.asset.settings.description
+          })
+        }
+      );
+      return true;
+    }
+  }
   assetTitleChange (e) {
     var asset = this.state.asset;
     if (e.target.name == 'title')
@@ -212,29 +212,26 @@ class MainHeader extends Reflux.Component {
     });
 
     clearTimeout(typingTimer);
-
-    typingTimer = setTimeout(() => {
-      if (!this.state.asset.name.trim()) {
-        alertify.error(t('Please enter a title for your project'));
-      } else {
-        actions.resources.updateAsset(
-          this.state.asset.uid,
-          {
-            name: this.state.asset.name,
-            settings: JSON.stringify({
-              description: this.state.asset.settings.description,
-            }),
-          }
-        );
+    typingTimer = setTimeout(this.updateAssetTitle.bind(this), 1500);
+  }
+  assetTitleKeyDown(evt) {
+    if (evt.key === 'Enter') {
+      clearTimeout(typingTimer);
+      if (this.updateAssetTitle()) {
+        evt.currentTarget.blur();
       }
-    }, 1500);
-
+    }
   }
   render () {
     var userCanEditAsset = false;
     if (this.state.asset)
       userCanEditAsset = this.userCan('change_asset', this.state.asset);
 
+    const formTitleNameMods = [];
+    if (typeof this.state.asset.name === 'string' && this.state.asset.name.length > 125) {
+      formTitleNameMods.push('long');
+    }
+
     return (
         <header className='mdl-layout__header'>
           <div className='mdl-layout__header-row'>
@@ -263,13 +260,15 @@ class MainHeader extends Reflux.Component {
                 :
                   <i className='k-icon-drafts' />
                 }
-                <bem.FormTitle__name>
-                  <input type='text'
-                        name='title'
-                        placeholder={t('Project title')}
-                        value={this.state.asset.name ? this.state.asset.name : ''}
-                        onChange={this.assetTitleChange}
-                        disabled={!userCanEditAsset}
+                <bem.FormTitle__name m={formTitleNameMods}>
+                  <input
+                    type='text'
+                    name='title'
+                    placeholder={t('Project title')}
+                    value={this.state.asset.name ? this.state.asset.name : ''}
+                    onChange={this.assetTitleChange}
+                    onKeyDown={this.assetTitleKeyDown}
+                    disabled={!userCanEditAsset}
                   />
                 </bem.FormTitle__name>
                 { this.state.asset.has_deployment &&

jsapp/scss/components/_kobo.asset-name.scss

@@ -1,5 +1,5 @@
 .asset-name {
-  &--empty {
+  &.asset-name--empty {
     font-style: italic;
   }
 
@@ -12,7 +12,7 @@
 }
 
 .sidebar-asset-name {
-  &--noname {
+  &.asset-name--noname {
     font-style: italic;
   }
 }

jsapp/scss/components/_kobo.asset-row.scss

@@ -6,9 +6,8 @@ $asset-row-spacing: 6px;
   list-style-type: none;
   border-top: 1px solid $divider-color;
   padding: $asset-row-spacing $asset-row-spacing * 2;
-  white-space: nowrap;
   transition: max-height 0.5s ease, opacity 0.5s ease;
-  min-height: 52px;
+  min-height: 49px;
   opacity: 1;
   position: relative;
   align-items: flex-start;
@@ -28,9 +27,6 @@ $asset-row-spacing: 6px;
     > .asset-row__cell {
       min-width: 0;
       vertical-align: top;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
 
       &.asset-row__cell--type {
         text-transform: capitalize;
@@ -42,11 +38,11 @@ $asset-row-spacing: 6px;
     border-top: 1px solid $divider-color;
   }
 
-  &--deleting {
+  &.asset-row--deleting {
     opacity: 0.5;
   }
 
-  &--deleted {
+  &.asset-row--deleted {
     transition: max-height 0.5s ease, opacity 0.5s ease;
     opacity: 0;
     max-height: 0px;
@@ -58,12 +54,18 @@ $asset-row-spacing: 6px;
 
   .asset-row__celllink--name {
     display: inline-block;
-    width: 98%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-size: 14px;
     vertical-align: top;
-    padding: 4px 0px;
+    font-size: 14px;
+  }
+
+  .asset-row__description,
+  .asset-row__celllink--name .asset-name,
+  .asset-row__cell--date-created .date,
+  .asset-row__cell--date-modified .date {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   // default row-icon styles are meant for "--question"
@@ -98,9 +100,6 @@ $asset-row-spacing: 6px;
     display: block;
     color: $cool-gray;
     font-size: 13px;
-    max-width: 96%;
-    text-overflow: ellipsis;
-    overflow: hidden;
   }
 
   .asset-row__cell--tags {
@@ -161,7 +160,7 @@ $asset-row-spacing: 6px;
     }
   }
 
-  &--display-tags .asset-row__action-icon--tagsToggle {
+  &.asset-row--display-tags .asset-row__action-icon--tagsToggle {
     background-color: transparent;
     color: $cool-blue;
   }
@@ -188,6 +187,10 @@ $asset-row-spacing: 6px;
 
     a.asset-row__celllink {
       color: $black;
+
+      &:hover {
+        color: $cool-blue;
+      }
     }
   }
 }