visual lock layout

app/scripts/views/open-view.js

@@ -395,7 +395,7 @@ var OpenView = Backbone.View.extend({
         if (this.dropboxLoading || this.file.get('opening')) {
             return;
         }
-        var name = $(e.target).closest('.open__last-item').data('name');
+        var name = $(e.target).closest('.open__last-item').data('name').toString();
         if ($(e.target).is('.open__last-item-icon-del')) {
             this.delLast(name);
             return;

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

@@ -13,7 +13,7 @@ var VisualLockView = Backbone.View.extend({
     },
 
     render: function () {
-        this.renderTemplate(this.model);
+        this.renderTemplate($.extend(this.model, { fileName: 'TODO' }));
         return this;
     }
 });

app/styles/areas/_open.scss

@@ -2,7 +2,6 @@
   @include flex(1);
   @include display(flex);
   @include align-self(stretch);
-  @include display(flex);
   @include align-items(center);
   @include flex-direction(column);
   @include justify-content(center);
@@ -73,7 +72,7 @@
   }
 
   input[type=password].open__pass-input {
-    font-size: 22px;
+    font-size: $large-pass-font-size;
     margin-bottom: 0;
     &[readonly] { cursor: pointer; }
     @include mobile {

app/styles/areas/_visual-lock.scss

@@ -1,3 +1,30 @@
 .vlock {
+  @include flex(1);
+  @include display(flex);
+  @include align-self(stretch);
+  @include align-items(center);
+  @include flex-direction(column);
+  @include justify-content(center);
 
+  &__input-wrap, &__text {
+    width: 30em;
+    position: relative;
+  }
+  &-enter-btn {
+    padding: .6em $base-spacing;
+    position: absolute;
+    left: 100%;
+    top: 0;
+    cursor: pointer;
+    >i { font-size: 3em; }
+    @include mobile { display: none; }
+    @include th { color: muted-color(); }
+    &:hover {
+      @include th { color: medium-color(); }
+    }
+  }
+  input[type=password].vlock__input {
+    font-size: $large-pass-font-size;
+    width: 100%;
+  }
 }

app/styles/base/_variables.scss

@@ -6,6 +6,7 @@ $monospace-font-family: monaco,Consolas,"Lucida Console",monospace;
 
 // Font Sizes
 $base-font-size: 12px;
+$large-pass-font-size: 22px;
 
 // Line height
 $base-line-height: 1.5;

app/templates/visual-lock.html

@@ -1,11 +1,19 @@
 <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 class="vlock__input-wrap">
+        <input type="password" class="vlock__input" autofocus placeholder="Password for <%- fileName %>"
+               size="30" autocomplete="off" />
+        <div class="vlock-enter-btn"><i class="fa fa-level-down fa-rotate-90"></i></div>
+    </div>
+    <div class="vlock__text">
+        <div>To continue, please, enter password for <%- fileName %>.</div>
+        <div>
+            <% 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') { %>
+            Your files are still not saved because auto-save is disabled.
+            <% } %>
+        </div>
     </div>
 </div>