visual lock view prototype

app/scripts/models/app-model.js

@@ -197,6 +197,10 @@ var AppModel = Backbone.Model.extend({
     createNewGroup: function() {
         var sel = this.getFirstSelectedGroup();
         return GroupModel.newGroup(sel.group, sel.file);
+    },
+
+    setVisualLock: function(visualLock) {
+        this.visualLock = visualLock;
     }
 });
 

app/scripts/views/app-view.js

@@ -9,6 +9,7 @@ var Backbone = require('backbone'),
     GrpView = require('../views/grp-view'),
     OpenView = require('../views/open-view'),
     SettingsView = require('../views/settings/settings-view'),
+    VisualLockView = require('../views/visual-lock-view'),
     Alerts = require('../comp/alerts'),
     Keys = require('../const/keys'),
     KeyHandler = require('../comp/key-handler'),
@@ -259,7 +260,7 @@ var AppView = Backbone.View.extend({
 
     lockWorkspace: function(autoInit) {
         var that = this;
-        if (Alerts.alertDisplayed) { // TODO: check visual lock as well
+        if (Alerts.alertDisplayed || this.model.visualLock) {
             return;
         }
         if (this.model.files.hasUnsavedFiles()) {
@@ -267,7 +268,7 @@ var AppView = Backbone.View.extend({
                 this.saveAndLock(autoInit);
             } else {
                 if (autoInit) {
-                    this.visualLock({ reason: 'autoSaveDisabled' });
+                    this.showVisualLock({ reason: 'autoSaveDisabled' });
                     return;
                 }
                 Alerts.alert({
@@ -297,8 +298,22 @@ var AppView = Backbone.View.extend({
         }
     },
 
-    visualLock: function() {
-        // TODO: think and implement
+    showVisualLock: function(config) {
+        if (this.model.visualLock) {
+            return;
+        }
+        this.views.menu.hide();
+        this.views.menuDrag.hide();
+        this.views.list.hide();
+        this.views.listDrag.hide();
+        this.views.details.hide();
+        this.views.grp.hide();
+        this.views.footer.toggle(this.model.files.hasOpenFiles());
+        this.hideSettings();
+        this.hideOpenFile();
+        this.views.visualLock = new VisualLockView({model: config}).render();
+        this.model.setVisualLock(true);
+        this.views.footer.render();
     },
 
     saveAndLock: function(autoInit) {
@@ -307,7 +322,7 @@ var AppView = Backbone.View.extend({
             errorFiles = [],
             that = this;
         if (this.model.files.some(function(file) { return file.get('modified') && !file.get('path'); })) {
-            this.visualLock({ reason: 'localFiles' }); // TODO: removed once sync is implemented
+            this.showVisualLock({ reason: 'localFiles' }); // TODO: removed once sync is implemented
             return;
         }
         this.model.files.forEach(function(file) {
@@ -316,7 +331,6 @@ var AppView = Backbone.View.extend({
             }
             if (file.get('path')) {
                 try {
-                    // TODO: prevent Dropbox errors from being displayed
                     file.autoSave(fileSaved.bind(this, file));
                     pendingCallbacks++;
                 } catch (e) {
@@ -335,9 +349,8 @@ var AppView = Backbone.View.extend({
             if (--pendingCallbacks === 0) {
                 if (errorFiles.length) {
                     if (autoInit) {
-                        that.visualLock({ reason: 'saveError', errorFiles: errorFiles });
-                    } else {
-                        // TODO: won't this show double error in case of Dropbox save error?
+                        that.showVisualLock({ reason: 'saveError', errorFiles: errorFiles });
+                    } else if (!Alerts.alertDisplayed) {
                         Alerts.error({
                             header: 'Save Error',
                             body: 'Failed to auto-save file' + (errorFiles.length > 1 ? 's: ' : '') + ' ' + errorFiles.join(', ')
@@ -351,7 +364,7 @@ var AppView = Backbone.View.extend({
     },
 
     closeAllFilesAndShowFirst: function() {
-        var firstFile = this.model.files.find(function(file) { return !file.get('demo'); });
+        var firstFile = this.model.files.find(function(file) { return !file.get('demo') && !file.get('created'); });
         this.model.closeAllFiles();
         if (firstFile) {
             this.views.open.showClosedFile(firstFile);

app/scripts/views/footer-view.js

@@ -35,16 +35,23 @@ var FooterView = Backbone.View.extend({
     render: function () {
         this.$el.html(this.template({
             files: this.model.files,
-            updateAvailable: ['ready', 'found'].indexOf(UpdateModel.instance.get('updateStatus')) >= 0
+            updateAvailable: ['ready', 'found'].indexOf(UpdateModel.instance.get('updateStatus')) >= 0,
+            visualLock: this.model.visualLock
         }));
         return this;
     },
 
     lockWorkspace: function() {
+        if (this.model.visualLock) {
+            return;
+        }
         Backbone.trigger('lock-workspace');
     },
 
     genPass: function(e) {
+        if (this.model.visualLock) {
+            return;
+        }
         e.stopPropagation();
         if (this.views.gen) {
             this.views.gen.remove();
@@ -61,6 +68,9 @@ var FooterView = Backbone.View.extend({
     },
 
     showFile: function(e) {
+        if (this.model.visualLock) {
+            return;
+        }
         var fileId = $(e.target).closest('.footer__db-item').data('file-id');
         if (fileId) {
             Backbone.trigger('show-file', { fileId: fileId });
@@ -68,22 +78,37 @@ var FooterView = Backbone.View.extend({
     },
 
     openFile: function() {
+        if (this.model.visualLock) {
+            return;
+        }
         Backbone.trigger('open-file');
     },
 
     saveAll: function() {
+        if (this.model.visualLock) {
+            return;
+        }
         Backbone.trigger('save-all');
     },
 
     switchView: function() {
+        if (this.model.visualLock) {
+            return;
+        }
         Backbone.trigger('switch-view');
     },
 
     toggleHelp: function() {
+        if (this.model.visualLock) {
+            return;
+        }
         Backbone.trigger('toggle-settings', 'help');
     },
 
     toggleSettings: function() {
+        if (this.model.visualLock) {
+            return;
+        }
         Backbone.trigger('toggle-settings', 'general');
     }
 });

app/scripts/views/visual-lock-view.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var Backbone = require('backbone');
+
+var VisualLockView = Backbone.View.extend({
+    template: require('templates/visual-lock.html'),
+    el: '.app__body',
+
+    events: {
+    },
+
+    initialize: function () {
+    },
+
+    render: function () {
+        this.renderTemplate(this.model);
+        return this;
+    }
+});
+
+module.exports = VisualLockView;

app/styles/areas/_footer.scss

@@ -11,6 +11,13 @@
     padding: $medium-padding;
     padding-right: 1.3em;
     white-space: nowrap;
+    .footer--locked>& {
+      cursor: default;
+      &:hover {
+        background: transparent;
+        border-top-color: transparent;
+      }
+    }
     &.footer__db--dimmed {
       @include th {
         color: muted-color();

app/styles/areas/_visual-lock.scss

@@ -0,0 +1,3 @@
+.vlock {
+
+}

app/styles/main.scss

@@ -29,3 +29,4 @@
 @import "areas/menu";
 @import "areas/open";
 @import "areas/settings";
+@import "areas/visual-lock";

app/templates/footer.html

@@ -1,4 +1,4 @@
-<div class="footer">
+<div class="footer <%= visualLock ? 'footer--locked' : '' %>">
     <% files.forEach(function(file) { %>
     <div class="footer__db footer__db-item <%= file.get('open') ? '' : 'footer__db--dimmed' %>" data-file-id="<%= file.cid %>">
         <i class="fa fa-<%= file.get('open') ? 'unlock' : 'lock' %>"></i> <%- file.get('name') %>
@@ -6,6 +6,7 @@
         <% if (file.get('syncing')) { %><i class="fa fa-refresh fa-spin footer__db-sign"></i><% } %>
     </div>
     <% }); %>
+    <% if (!visualLock) { %>
     <div class="footer__db footer__db--dimmed footer__db--expanded footer__db-open"><i class="fa fa-plus"></i> Open / New</div>
     <!--<div class="footer__btn footer__btn-view"><i class="fa fa-list-ul"></i></div>-->
     <div class="footer__btn footer__btn-help"><i class="fa fa-question"></i></div>
@@ -18,4 +19,5 @@
     </div>
     <div class="footer__btn footer__btn-generate"><i class="fa fa-bolt"></i></div>
     <div class="footer__btn footer__btn-lock"><i class="fa fa-lock"></i></div>
+    <% } %>
 </div>

app/templates/visual-lock.html

@@ -0,0 +1,11 @@
+<div class="vlock">
+    <div class="vlock__description">
+        <% if (reason === 'localFiles') { %>
+        You have opened some files which cannot be auto-saved
+        <% } else if (reason === 'saveError') { %>
+        Failed to save file<%- (errorFiles.length > 1 ? 's: ' : ' ') + errorFiles.join(', ') %>
+        <% } else if (reason === 'autoSaveDisabled') { %>
+        You can auto-save files on lock. Enable it?
+        <% } %>
+    </div>
+</div>