save to... in file settings

app/scripts/util/locale.js

@@ -275,11 +275,11 @@ var Locale = {
     setFileLocalHint: 'Want to work seamlessly with local files?',
     setFileDownloadApp: 'Download a desktop app',
     setFileSave: 'Save',
-    setFileSyncWith: 'Sync with {}',
-    setFileSaveFile: 'Save to file',
-    setFileExportXml: 'Export to XML',
+    setFileSaveTo: 'Save to ...',
     setFileClose: 'Close',
     setFileSync: 'Sync',
+    setFileSaveToFile: 'File',
+    setFileSaveToXml: 'XML',
     setFileLastSync: 'Last sync',
     setFileLastSyncUnknown: 'unknown',
     setFileSyncInProgress: 'sync in progress',

app/scripts/views/settings/settings-file-view.js

@@ -18,10 +18,11 @@ var SettingsFileView = Backbone.View.extend({
 
     events: {
         'click .settings__file-button-save-default': 'saveDefault',
-        'click .settings__file-button-save-file': 'saveToFile',
-        'click .settings__file-button-export-xml': 'exportAsXml',
-        'click .settings__file-button-save-dropbox': 'saveToDropbox',
+        'click .settings__file-button-save-choose': 'toggleChooser',
         'click .settings__file-button-close': 'closeFile',
+        'click .settings__file-save-to-file': 'saveToFile',
+        'click .settings__file-save-to-xml': 'saveToXml',
+        'click .settings__file-save-to-storage': 'saveToStorage',
         'change #settings__file-key-file': 'keyFileChange',
         'click #settings__file-file-select-link': 'triggerSelectFile',
         'change #settings__file-file-select': 'fileSelected',
@@ -43,11 +44,19 @@ var SettingsFileView = Backbone.View.extend({
     },
 
     render: function() {
+        var storageProviders = [];
+        var fileStorage = this.model.get('storage');
+        Object.keys(Storage).forEach(function(name) {
+            var prv = Storage[name];
+            if (!prv.system && prv.enabled && name !== fileStorage) {
+                storageProviders.push(prv);
+            }
+        });
+        storageProviders.sort(function(x, y) { return (x.uipos || Infinity) - (y.uipos || Infinity); });
         this.renderTemplate({
             cmd: FeatureDetector.actionShortcutSymbol(true),
             supportFiles: !!Launcher,
             desktopLink: Links.Desktop,
-
             name: this.model.get('name'),
             path: this.model.get('path'),
             storage: this.model.get('storage'),
@@ -59,7 +68,8 @@ var SettingsFileView = Backbone.View.extend({
             recycleBinEnabled: this.model.get('recycleBinEnabled'),
             historyMaxItems: this.model.get('historyMaxItems'),
             historyMaxSize: Math.round(this.model.get('historyMaxSize') / 1024 / 1024),
-            keyEncryptionRounds: this.model.get('keyEncryptionRounds')
+            keyEncryptionRounds: this.model.get('keyEncryptionRounds'),
+            storageProviders: storageProviders
         });
         if (!this.model.get('created')) {
             this.$el.find('.settings__file-master-pass-warning').toggle(this.model.get('passwordChanged'));
@@ -132,6 +142,10 @@ var SettingsFileView = Backbone.View.extend({
         this.save();
     },
 
+    toggleChooser: function() {
+        this.$el.find('.settings__file-save-choose').toggleClass('hide');
+    },
+
     saveToFile: function(skipValidation) {
         if (skipValidation !== true && !this.validatePassword(this.saveToFile.bind(this, true))) {
             return;
@@ -167,13 +181,25 @@ var SettingsFileView = Backbone.View.extend({
         }
     },
 
-    exportAsXml: function() {
+    saveToXml: function() {
         this.model.getXml((function(xml) {
             var blob = new Blob([xml], {type: 'text/xml'});
             FileSaver.saveAs(blob, this.model.get('name') + '.xml');
         }).bind(this));
     },
 
+    saveToStorage: function(e) {
+        if (this.model.get('syncing')) {
+            return;
+        }
+        var storageName = $(e.target).closest('.settings__file-save-to-storage').data('storage');
+        var storage = Storage[storageName];
+        if (!storage) {
+            return;
+        }
+        Alerts.notImplemented();
+    },
+
     saveToDropbox: function() {
         var that = this;
         this.model.set('syncing', true);

app/styles/areas/_open.scss

@@ -32,13 +32,6 @@
       line-height: 0;
       >svg {
         @include size(1em);
-        path {
-          transition: fill $base-duration $base-timing;
-          @include th { fill: text-color(); }
-          .open__icon:hover & {
-            @include th { fill: medium-color(); }
-          }
-        }
       }
     }
   }

app/styles/areas/_settings.scss

@@ -81,6 +81,26 @@
     display: none;
   }
 
+  &__file-save-to {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: $base-padding-h;
+    text-align: center;
+    >i, >svg {
+      display: block;
+      font-size: 3em;
+      padding: $base-padding-px;
+      margin: auto;
+    }
+    >svg {
+      @include size(1em);
+    }
+    &:hover {
+      transition: color $base-duration $base-timing;
+      @include th { color: medium-color(); }
+    }
+  }
+
   &__general-update-buttons {
     margin-top: $base-spacing;
   }

app/styles/base/_buttons.scss

@@ -86,3 +86,13 @@
     }
   }
 }
+
+.svg-btn {
+  svg path {
+    transition: fill $base-duration $base-timing;
+    @include th { fill: text-color(); }
+  }
+  &:hover svg path {
+    @include th { fill: medium-color(); }
+  }
+}

app/templates/open.hbs

@@ -22,7 +22,7 @@
     </div>
     <div class="open__icons open__icons--lower hide">
         {{#each storageProviders as |prv|}}
-        <div class="open__icon open__icon-storage" data-storage="{{prv.name}}">
+        <div class="open__icon open__icon-storage svg-btn" data-storage="{{prv.name}}">
             {{#if prv.icon}}<i class="fa fa-{{prv.icon}} open__icon-i"></i>{{/if}}
             {{#if prv.iconSvg}}<div class="open__icon-svg">{{{prv.iconSvg}}}</div>{{/if}}
             <div class="open__icon-text">{{res prv.name}}</div>

app/templates/settings/settings-file.hbs

@@ -11,14 +11,31 @@
     {{/if}}
 
     <div class="settings__file-buttons">
-        {{#ifemptyoreq storage 'file'}}<button class="settings__file-button-save-default">{{res 'setFileSave'}}</button>{{/ifemptyoreq}}
-        <button class="settings__file-button-save-dropbox {{#ifneq storage 'dropbox'}}btn-silent{{/ifneq}}"
-            {{#if syncing}}disabled{{/if}}>{{#res 'setFileSyncWith'}}Dropbox{{/res}}</button>
-        {{#ifneq storage 'file'}}<button class="settings__file-button-save-file btn-silent">{{res 'setFileSaveFile'}}</button>{{/ifneq}}
-        <button class="settings__file-button-export-xml btn-silent">{{res 'setFileExportXml'}}</button>
+        <button class="settings__file-button-save-default" {{#if syncing}}disabled{{/if}}>{{res 'setFileSave'}}</button>
+        <button class="settings__file-button-save-choose btn-silent"
+            {{#if syncing}}disabled{{/if}}>{{res 'setFileSaveTo'}}</button>
         <button class="settings__file-button-close btn-silent">{{res 'setFileClose'}}</button>
     </div>
 
+    <div class="settings__file-save-choose hide">
+        <h2>{{res 'setFileSaveTo'}}</h2>
+        {{#ifneq storage 'file'}}
+        <div class="settings__file-save-to settings__file-save-to-file">
+            <i class="fa fa-file-text-o"></i>{{res 'setFileSaveToFile'}}
+        </div>
+        {{/ifneq}}
+        {{#each storageProviders as |prv|}}
+            <div class="settings__file-save-to settings__file-save-to-storage svg-btn" data-storage="{{prv.name}}">
+                {{#if prv.icon}}<i class="fa fa-{{prv.icon}}"></i>{{/if}}
+                {{#if prv.iconSvg}}{{{prv.iconSvg}}}{{/if}}
+                <span>{{res prv.name}}</span>
+            </div>
+        {{/each}}
+        <div class="settings__file-save-to settings__file-save-to-xml">
+            <i class="fa fa-code"></i>{{res 'setFileSaveToXml'}}
+        </div>
+    </div>
+
     {{#if storage}}
     <h2>{{res 'setFileSync'}}</h2>
     <div>{{res 'setFileLastSync'}}: {{#if syncDate}}{{syncDate}}{{else}}{{res 'setFileLastSyncUnknown'}}{{/if}} {{#if syncing}}({{res 'setFileSyncInProgress'}}...){{/if}}</div>