Show status text only

options.html

@@ -142,15 +142,12 @@
       <h1>Sync to cloud</h1>
       <div class="items">
         <label>
-          <span>Cloud drive</span>
+          <span class="sync-status"></span>
           <select class="cloud-name">
             <option value="none">None</option>
             <option value="dropbox">Dropbox</option>
           </select>
         </label>
-        <div class="sync-status-wrapper">
-          Status: <span class="sync-status"></span>
-        </div>
         <div class="actions">
           <button type="button" class="connect">Connect</button>
           <button type="button" class="disconnect">Disconnect</button>

options/options.css

@@ -311,3 +311,12 @@ html:not(.firefox):not(.opera) #updates {
     hyphens: auto;
   }
 }
+
+.sync-status {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sync-status::first-letter {
+  text-transform: uppercase;
+}

options/options.js

@@ -117,8 +117,8 @@ document.onclick = e => {
   function getStatusText() {
     // FIXME: i18n
     if (status.syncing) {
-      if (status.target) {
-        const [type, change] = status.target;
+      if (status.syncTarget) {
+        const [type, change] = status.syncTarget;
         if (type === 'syncPull') {
           return `pulling data ${change._id}`;
         }