generator markup

app/scripts/views/footer-view.js

@@ -3,7 +3,7 @@
 var Backbone = require('backbone'),
     Keys = require('../const/keys'),
     KeyHandler = require('../util/key-handler'),
-    Alerts = require('../util/alerts');
+    GeneratorView = require('./generator-view');
 
 var FooterView = Backbone.View.extend({
     template: require('templates/footer.html'),
@@ -37,7 +37,13 @@ var FooterView = Backbone.View.extend({
     },
 
     genPass: function() {
-        Alerts.notImplemented();
+        var el = this.$el.find('.footer__btn-generate'),
+            rect = el[0].getBoundingClientRect(),
+            bodyRect = document.body.getBoundingClientRect(),
+            right = bodyRect.right - rect.right,
+            bottom = bodyRect.bottom - rect.top;
+        var generator = new GeneratorView({ model: { pos: { right: right, bottom: bottom } } });
+        generator.render();
     },
 
     showFile: function(e) {

app/scripts/views/generator-view.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var Backbone = require('backbone');
+
+var GeneratorView = Backbone.View.extend({
+    el: 'body',
+
+    template: require('templates/generator.html'),
+
+    events: {
+        'mousedown': 'mousedown'
+    },
+
+    initialize: function () {
+        $('body').one('mousedown', this.remove.bind(this));
+    },
+
+    render: function() {
+        this.renderTemplate();
+        this.$el.css(this.model.pos);
+    },
+
+    mousedown: function(e) {
+        e.stopPropagation();
+    }
+});
+
+module.exports = GeneratorView;

app/styles/areas/_details.scss

@@ -449,12 +449,7 @@
 
   &__tags-autocomplete {
     position: absolute;
-    @include th {
-      color: text-color();
-      background: background-color();
-      border: 1px solid light-border-color();
-      box-shadow: dropdown-box-shadow();
-    }
+    @include dropdown;
     &-tag {
       padding: $base-padding;
       display: inline-block;

app/styles/areas/_generator.scss

@@ -0,0 +1,7 @@
+.gen {
+  position: absolute;
+  @include dropdown;
+  padding: $base-padding;
+  &__input-small {
+  }
+}

app/styles/common/_dates.scss

@@ -1,10 +1,5 @@
 .pika-single {
-  @include th {
-    color: text-color();
-    background: background-color();
-    border: 1px solid light-border-color();
-    box-shadow: dropdown-box-shadow();
-  }
+  @include dropdown;
 }
 
 .pika-label {

app/styles/main.scss

@@ -8,6 +8,7 @@
 @import "base/base";
 
 @import "utils/drag";
+@import "utils/dropdown";
 @import "utils/selection";
 
 @import "common/dates";
@@ -21,6 +22,7 @@
 @import "areas/app";
 @import "areas/details";
 @import "areas/footer";
+@import "areas/generator";
 @import "areas/list";
 @import "areas/menu";
 @import "areas/open";

app/styles/utils/_dropdown.scss

@@ -0,0 +1,8 @@
+@mixin dropdown {
+  @include th {
+    color: text-color();
+    background: background-color();
+    border: 1px solid light-border-color();
+    box-shadow: dropdown-box-shadow();
+  }
+}

app/templates/generator.html

@@ -0,0 +1,20 @@
+<div class="gen">
+    <input type="text" class="gen__input-small" id="gen__text-len" value="16" maxlength="2" size="2" />
+    <label for="gen__text-len">symbols</label>
+    <div>
+        <input type="checkbox" id="gen__check-upper" checked><label for="gen__check-upper">ABC</label>
+        <input type="checkbox" id="gen__check-lower" checked><label for="gen__check-lower">abc</label>
+    </div>
+    <div>
+        <input type="checkbox" id="gen__check-digits" checked><label for="gen__check-digits">123</label>
+        <input type="checkbox" id="gen__check-special"><label for="gen__check-special">!@#</label>
+    </div>
+    <div>
+        <input type="checkbox" id="gen__check-brackets"><label for="gen__check-brackets">({<</label>
+        <input type="checkbox" id="gen__check-high"><label for="gen__check-high">äæ±</label>
+    </div>
+    <div>
+        <input type="checkbox" id="gen__check-ambiguous"><label for="gen__check-ambiguous">0Oo</label>
+    </div>
+    <div class="gen__result">password</div>
+</div>

app/templates/settings/settings-shortcuts.html

@@ -11,3 +11,4 @@
 <div><span class="shortcut"><%= alt %>N</span> create entry</div>
 <div><span class="shortcut"><%= cmd %>O</span> open / new</div>
 <div><span class="shortcut"><%= cmd %>S</span> save</div>
+<div><span class="shortcut"><%= cmd %>G</span> generate</div>