Fix issue with unnamed files causing “click to download inline image” prompt #262

app/internal_packages/composer/styles/composer.less

@@ -73,16 +73,20 @@
   .inner {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
     background: @background-primary;
     border-bottom: 1px solid @border-color-divider;
     z-index: 2;
     width: 100%;
+
+    padding-right: 10px;
   }
 
   .toolbar-section {
     display: flex;
     flex-direction: row;
+    flex-shrink: 0;
     align-items: center;
   }
 

app/src/components/composer-editor/composer-editor-toolbar.jsx

@@ -44,20 +44,22 @@ export default class ComposerEditorToolbar extends React.Component {
     const { value, onChange, plugins } = this.props;
     const sections = [];
 
-    plugins.forEach(({ toolbarComponents, toolbarSectionClass }, idx) => {
-      if (toolbarComponents && toolbarComponents.length) {
-        const sectionItems = toolbarComponents.map((Component, cdx) => (
-          <Component key={`${idx}-${cdx}`} value={value} onChange={onChange} />
-        ));
-        if (sections.length) {
-          sectionItems.unshift(<div key={idx} className="divider" />);
-        }
-        sections.push(
-          <div key={idx} className={`toolbar-section ${toolbarSectionClass || ''}`}>
-            {sectionItems}
-          </div>
-        );
+    const pluginsWithToolbars = plugins.filter(
+      (p, idx) => p.toolbarComponents && p.toolbarComponents.length
+    );
+
+    pluginsWithToolbars.forEach(({ toolbarComponents, toolbarSectionClass }, idx) => {
+      const sectionItems = toolbarComponents.map((Component, cdx) => (
+        <Component key={`${idx}-${cdx}`} value={value} onChange={onChange} />
+      ));
+      if (idx < pluginsWithToolbars.length - 1) {
+        sectionItems.push(<div key="divider" className="divider" />);
       }
+      sections.push(
+        <div key={idx} className={`toolbar-section ${toolbarSectionClass || ''}`}>
+          {sectionItems}
+        </div>
+      );
     });
 
     return (

app/src/flux/models/file.es6

@@ -46,6 +46,9 @@ export default class File extends Model {
   // name if one is present, and falls back to appropriate default name based on
   // the contentType. It will always return a non-empty string.
   displayName() {
+    // BG: This logic has been moved to the sync side - all files should always have names
+    // as of the 1.1 release. This is just here still because people's local dbs could
+    // still contain unnammed files.
     const defaultNames = {
       'text/calendar': 'Event.ics',
       'image/png': 'Unnamed Image.png',

mailsync

@@ -1 +1 @@
-Subproject commit bfda4b1b9a62896fb89c84c8bf50a83c688a6f47
+Subproject commit 91d6d6d75f65dc6bcac0aa276c54858c06ca1885