Implement auto-save in Tooltip

icetee · Nov 21, 2017 · 6e71d8e · 6e71d8e
1 parent c04d9ff
commit 6e71d8e
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 50 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -10,7 +10,7 @@ indent_style = space
 charset = utf-8
 end_of_line = lf
 
-[{package.json,*.js,*.yml,*.json,*.cson,.*}]
+[{package.json,*.js,*.yml,*.json,*.cson,*.less,.*}]
 indent_style = space
 indent_size = 2
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,15 +2,18 @@
 
 ## [Unreleased]
 
+## [2.0.0] - 2017-11-20
+
 ## Changed
-+ Remove Chokidar package
++ Remove Chokidar package (~150 dependencies)
 + Supported native Filesystem Watcher API [PathWatcher](https://atom.io/docs/api/latest/PathWatcher) ([@putterson](https://github.com/putterson) Thanks)
++ The new major version drop supported older Atom versions.
 
 ## Fixed
 + Resolve undefined once method
 + Eslint issues
 
-## [1.3.2] - 2017-11-20
+## [1.3.4] - 2017-11-20
 
 ## Changed
 + Upgrade SSH2 and SSH2-streams

diff --git a/lib/config-schema.json b/lib/config-schema.json
@@ -75,7 +75,7 @@
     "properties": {
       "enable": {
           "type": "boolean",
-          "title": "Enable Statusbar ⚠ She has no role yet ⚠",
+          "title": "Enable Statusbar",
           "description": "Show icon in statusbar",
           "default": false,
           "order": 1

diff --git a/lib/remote-ftp.js b/lib/remote-ftp.js
@@ -8,6 +8,7 @@ import StatusBarView from './views/status-bar';
 import { hasProject, setIconHandler } from './helpers';
 import initCommands from './menus/main';
 import config from './config-schema.json';
+import RemoteStorage from './remote-storage';
 
 export default {
 
@@ -18,7 +19,9 @@ export default {
   statusBarView: null,
   subscriptions: null,
 
-  activate() {
+  activate(state) {
+    this.storage = new RemoteStorage(state);
+
     if (this.subscriptions) {
       this.deactivate();
     }
@@ -105,6 +108,7 @@ export default {
   fileSaved(text) {
     if (!hasProject()) return;
 
+    if (!this.storage.data.options.autosave) return;
     if (atom.config.get('Remote-FTP.connector.autoUploadOnSave') === 'never') return;
 
     if (!this.client.isConnected() && atom.config.get('Remote-FTP.connector.autoUploadOnSave') !== 'always') return;
@@ -143,6 +147,10 @@ export default {
     });
   },
 
+  serialize() {
+    return this.storage.data;
+  },
+
   consumeElementIcons(fn) {
     setIconHandler(fn);
     return new Disposable(() => {

diff --git a/lib/remote-storage.js b/lib/remote-storage.js
@@ -0,0 +1,22 @@
+'use babel';
+
+const version = 0x001;
+
+export default class RemoteStorage {
+  constructor(state) {
+    this.data = state && state.version === version ? state : RemoteStorage.createBlankCache();
+  }
+
+  static createBlankCache() {
+    return {
+      options: {
+        autosave: true,
+      },
+      version,
+    };
+  }
+
+  get version() {
+    return this.data.version;
+  }
+}
diff --git a/lib/views/status-bar-inner.js b/lib/views/status-bar-inner.js
@@ -6,10 +6,25 @@ import { View } from 'atom-space-pen-views';
 export default class StatusBarViewInner extends View {
   static content() {
     return this.div({
-      class: 'ftp-statusbar-view-inner inner padded',
+      class: 'ftp-statusbar-view-inner',
     }, () => {
       this.div({
-        class: 'block',
+        class: 'StatusBarHeader',
+      }, () => {
+        this.div({}, () => {
+          this.span({}, () => {
+            this.text('Remote-FTP');
+          });
+        });
+
+        this.span({
+          class: 'icon-gear',
+          outlet: 'settings',
+        });
+      });
+
+      this.div({
+        class: 'StatusBarInner',
       }, () => {
         this.div({
           class: 'inline-block-tight',
@@ -20,26 +35,12 @@ export default class StatusBarViewInner extends View {
             this.input({
               class: 'input-toggle',
               type: 'checkbox',
-              checked: 'checked',
               outlet: 'autoSave',
             });
 
             this.text(' Auto-save');
           });
         });
-
-        this.div({
-          class: 'inline-block-tight',
-        }, () => {
-          this.hr({ class: 'vh' });
-        });
-
-        this.button({
-          class: 'btn icon icon-gear inline-block-tight',
-          outlet: 'settings',
-        }, () => {
-          this.text('Settings');
-        });
       });
     });
   }
@@ -50,6 +51,9 @@ export default class StatusBarViewInner extends View {
   }
 
   attached() {
+    const autosave = atom.project['remoteftp-main'].storage.data.options.autosave;
+
+    this.autoSave.prop('checked', autosave);
     this.events();
   }
 
@@ -62,13 +66,11 @@ export default class StatusBarViewInner extends View {
    * Events
    */
   events() {
-    this.autoSave.on('click', () => {
-      console.log('autoSave click');
-      this.emitter.emit('change-auto-save');
+    this.autoSave.on('click', (e) => {
+      this.emitter.emit('change-auto-save', this.autoSave.prop('checked'), e);
     });
 
     this.settings.on('click', () => {
-      console.log('settings click');
       this.emitter.emit('open-settings');
     });
   }

diff --git a/lib/views/status-bar.js b/lib/views/status-bar.js
@@ -62,8 +62,8 @@ class StatusBarView extends View {
       this.setIconHandler();
     });
 
-    this.innerBar.onDidChangeAutoSave(() => {
-
+    this.innerBar.onDidChangeAutoSave((newValue) => {
+      this.ftp.storage.data.options.autosave = newValue;
     });
 
     this.innerBar.onDidOpenSettings(() => {
@@ -97,9 +97,10 @@ class StatusBarView extends View {
   setToolTip() {
     this.subscriptions.add(
       atom.tooltips.add(this, {
-        html: true,
+        item: this.innerBar.element,
+        class: 'RemoteFtpPopoverTooltip',
         trigger: 'click',
-        title: this.innerBar.element.outerHTML,
+        placement: 'top',
       }),
     );
   }

diff --git a/styles/remote-ftp.less b/styles/remote-ftp.less
@@ -99,11 +99,11 @@
 
   .project-root.project-root > .header {
     &::before {
-        line-height: 2.5em !important;
+      line-height: 2.5em !important;
     }
 
     .name {
-        line-height: 2.5em;
+      line-height: 2.5em;
     }
   }
 
@@ -355,7 +355,6 @@
             }
           }
         }
-
       }
 
       .permissions-wrapper-block {
@@ -365,36 +364,62 @@
   }
 }
 
-.statusbar-view-tooltip.remote-ftp.tooltip {
-  .tooltip-arrow {
-    border-top-color: @base-border-color;
-  }
+.RemoteFtpPopoverTooltip {
+  user-select: none;
 
-  .tooltip-inner {
-    background-color: @base-border-color;
+  &.tooltip {
+    width: 215px;
+    padding-left: @component-padding;
+    padding-right: @component-padding;
     box-sizing: border-box;
-    padding-left: 10px;
-    padding-right: 10px;
+    font-size: 12px !important;
+  }
 
-    .inner {
-      background-color: @base-background-color;
-    }
+  .tooltip-inner.tooltip-inner.tooltip-inner.tooltip-inner {
+    background-color: @tool-panel-background-color;
+    border: 1px solid @base-border-color;
+    box-shadow: 0 4px 8px hsla(0, 0, 0, .1);
+    color: @text-color;
+    max-height: 300px;
+    white-space: normal;
+    overflow-y: auto;
+    padding: 0 !important;
+  }
 
-    hr.vh {
-      transform: rotate(90deg);
-      margin: 0;
-      line-height: normal;
-      width: 15px;
-      border: 1px solid @input-background-color;
+  &.top .tooltip-arrow.tooltip-arrow {
+    width: @component-padding;
+    height: @component-padding;
+    border-width: 0 0 1px 1px;
+    border-color: @base-border-color;
+    background-color: @tool-panel-background-color;
+    border-bottom-right-radius: 2px;
+    transform: rotate(-45deg);
+  }
+
+  .StatusBarHeader {
+    border-bottom: 1px solid @base-border-color;
+    display: flex;
+    padding: @component-padding;
+
+    div {
+      flex: auto;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
     }
   }
+
+  .StatusBarInner {
+    display: flex;
+    padding: @component-padding;
+  }
 }
 
 .statusbar-view.remote-ftp {
   display: inline-block;
 }
-
 /* NOTE: Fix modal overlay */
+
 .tooltip {
   z-index: 10000;
 }