settings area enhancements

app/scripts/util/launcher.js

@@ -4,9 +4,15 @@ var Launcher;
 
 if (window.process && window.process.versions && window.process.versions.electron) {
     Launcher = {
+        name: 'electron',
+        version: window.process.versions.electron,
         req: window.require,
         openLink: function(href) {
             this.req('shell').openExternal(href);
+        },
+        devTools: true,
+        openDevTools: function() {
+            this.req('remote').getCurrentWindow().openDevTools();
         }
     };
 }

app/scripts/util/runtime-info.js

@@ -1,10 +1,12 @@
 'use strict';
 
+var Launcher = require('./launcher');
+
 var RuntimeInfo = {
     version: '@@VERSION',
     buildDate: '@@DATE',
     userAgent: navigator.userAgent,
-    launcher: window.process && window.process.versions && window.process.versions.electron
+    launcher: Launcher ? Launcher.name + ' v' + Launcher.version : ''
 };
 
 module.exports = RuntimeInfo;

app/scripts/views/menu/menu-item-view.js

@@ -94,6 +94,8 @@ var MenuItemView = Backbone.View.extend({
     },
 
     selectItem: function(e) {
+        e.stopPropagation();
+        e.preventDefault();
         if (this.model.get('active')) {
             return;
         }
@@ -102,8 +104,6 @@ var MenuItemView = Backbone.View.extend({
         } else {
             Backbone.trigger('menu-select', { item: this.model });
         }
-        e.stopPropagation();
-        e.preventDefault();
     },
 
     selectOption: function(e) {

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

@@ -96,6 +96,9 @@ var OpenFileView = Backbone.View.extend({
             this[this.reading] = e.target.result;
             if (this.reading === 'fileData') {
                 this.model.set('name', file.name.replace(/\.\w+$/i, ''));
+                if (file.path) {
+                    this.model.set('path', file.path);
+                }
             } else {
                 this.model.set('keyFileName', file.name);
             }

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

@@ -4,6 +4,7 @@ var Backbone = require('backbone'),
     FeatureDetector = require('../../util/feature-detector'),
     PasswordDisplay = require('../../util/password-display'),
     Alerts = require('../../util/alerts'),
+    RuntimeInfo = require('../../util/runtime-info'),
     FileSaver = require('filesaver');
 
 var SettingsAboutView = Backbone.View.extend({
@@ -18,10 +19,16 @@ var SettingsAboutView = Backbone.View.extend({
         'blur #settings__file-master-pass': 'blurMasterPass'
     },
 
+    initialize: function() {
+    },
+
     render: function() {
         this.renderTemplate({
             cmd: FeatureDetector.actionShortcutSymbol(true),
+            supportFiles: RuntimeInfo.launcher,
+
             name: this.model.get('name'),
+            path: this.model.get('path'),
             password: PasswordDisplay.present(this.model.get('passwordLength')),
             defaultUser: this.model.get('defaultUser'),
             recycleBinEnabled: this.model.get('recycleBinEnabled'),
@@ -77,13 +84,20 @@ var SettingsAboutView = Backbone.View.extend({
     },
 
     focusMasterPass: function(e) {
-        e.target.value = '';
+        if (!this.passwordChanged) {
+            e.target.value = '';
+        }
+        e.target.setAttribute('type', 'text');
     },
 
     blurMasterPass: function(e) {
         if (!e.target.value) {
+            this.passwordChanged = false;
             e.target.value = PasswordDisplay.present(this.model.get('passwordLength'));
+        } else {
+            this.passwordChanged = true;
         }
+        e.target.setAttribute('type', 'password');
     }
 });
 

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

@@ -1,13 +1,15 @@
 'use strict';
 
 var Backbone = require('backbone'),
+    Launcher = require('../../util/launcher'),
     AppSettingsModel = require('../../models/app-settings-model');
 
 var SettingsGeneralView = Backbone.View.extend({
     template: require('templates/settings/settings-general.html'),
 
     events: {
-        'change .settings__general-theme': 'changeTheme'
+        'change .settings__general-theme': 'changeTheme',
+        'click .settings__general-dev-tools-link': 'openDevTools'
     },
 
     allThemes: {
@@ -20,7 +22,8 @@ var SettingsGeneralView = Backbone.View.extend({
         var activeTheme = AppSettingsModel.instance.get('theme');
         this.renderTemplate({
             themes: this.allThemes,
-            activeTheme: activeTheme
+            activeTheme: activeTheme,
+            devTools: Launcher && Launcher.devTools
         });
     },
 
@@ -28,6 +31,12 @@ var SettingsGeneralView = Backbone.View.extend({
         var theme = e.target.value;
         AppSettingsModel.instance.set('theme', theme);
         AppSettingsModel.instance.save();
+    },
+
+    openDevTools: function() {
+        if (Launcher) {
+            Launcher.openDevTools();
+        }
     }
 });
 

app/styles/areas/_settings.scss

@@ -6,7 +6,7 @@
   @include justify-content(flex-start);
   @include flex-wrap(wrap);
   @include scrollbar-on-hover;
-  padding: $base-padding;
+  margin: $base-padding;
   overflow: hidden;
   position: relative;
 
@@ -35,7 +35,7 @@
     display: inline-block;
     position: absolute;
     top: 0;
-    right: $base-padding-h * 2;
+    right: $base-padding-h;
     padding: $base-padding-v * 2 0 1px 0;
     @include th {
       background: background-color();

app/styles/base/_forms.scss

@@ -83,11 +83,6 @@ input[type=text], input[type=password], textarea, input:not([type]) {
   }
 }
 
-input[type='number'] {
-  -moz-appearance:textfield;
-  appearance:textfield;
-}
-
 textarea {
   resize: vertical;
 }
@@ -114,12 +109,23 @@ input[type="file"] {
 select {
   margin-bottom: $base-spacing;
   max-width: 100%;
-  width: auto;
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+  transition: border-color $base-duration $base-timing;
+  border-radius: $base-border-radius;
+  padding-left: $base-spacing / 6;
+
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogICAgd2lkdGg9IjMwNnB4IiBoZWlnaHQ9IjMwNnB4IiB2aWV3Qm94PSIwIDAgMzA2IDMwNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgPHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIgZmlsbD0iIzk5ODQ4MyIvPg0KPC9zdmc+DQo=);
+  background-position: calc(100% - 5px) center;
+  background-size: 10px;
+  background-repeat: no-repeat;
+
   @include th {
-    border: light-border();
-    border-radius: $base-border-radius;
     background-color: background-color();
+    border: base-border();
     color: text-color();
+    box-shadow: form-box-shadow();
     &:hover {
       border-color: accent-border-color();
     }
@@ -136,6 +142,7 @@ select {
       }
     }
   }
+  &::-ms-expand { display: none; }
 }
 
 option {

app/styles/base/_typography.scss

@@ -44,10 +44,7 @@ p {
 a {
   @include th {
     color: text-color();
-    border-bottom: 1px dotted muted-color();
-    &.muted-color {
-      border-bottom: 1px dotted muted-color-border();
-    }
+    border-bottom: 1px dotted;
   }
   text-decoration: none;
   display: inline-block;

app/templates/settings/settings-file.html

@@ -1,7 +1,14 @@
 <div>
     <h1><i class="fa fa-lock"></i> <%- name %></h1>
-    <p>This database is opened as local file. To enable auto-save and saving with shortcut <%= cmd %>S,
-    please, save it to Dropbox.</p>
+    <% if (path) { %>
+    <p>File path: <%- path %></p>
+    <% } else { %>
+    <p>This database is loaded in memory. To enable auto-save and saving with shortcut <%= cmd %>S,
+    please, save it to <%= supportFiles ? ' file or ' : '' %> Dropbox.</p>
+    <% if (!supportFiles) { %>
+    <p>Want to work seamlessly with local files? <a href="http://github.com/antelle/keeweb" target="_blank">Download a desktop app</a></p>
+    <% } %>
+    <% } %>
 
     <div class="settings__file-buttons">
         <button class="settings__file-button-save-file btn-silent">Save to file</button>
@@ -11,7 +18,7 @@
 
     <h2>Settings</h2>
     <label for="settings__file-master-pass">Master password:</label>
-    <input type="text" class="settings__input" required id="settings__file-master-pass" value="<%= password %>" />
+    <input type="password" class="settings__input" id="settings__file-master-pass" value="<%= password %>" />
     <label for="settings__file-key-file">Key file:</label>
     <select class="settings__select" id="settings__file-key-file">
         <option value="">Don't use key file</option>

app/templates/settings/settings-general.html

@@ -1,5 +1,6 @@
 <div>
     <h1><i class="fa fa-cog"></i> General Settings</h1>
+    <h2>Appearance</h2>
     <div>
         <label for="settings__general-theme">Theme:</label>
         <select class="settings__general-theme settings__select" id="settings__general-theme">
@@ -8,4 +9,8 @@
             <% }); %>
         </select>
     </div>
+    <% if (devTools) { %>
+    <h2>Advanced</h2>
+    <a class="settings__general-dev-tools-link">Show dev tools</a>
+    <% } %>
 </div>

app/templates/settings/settings-help.html

@@ -7,8 +7,24 @@
     </p>
     <h2>Problems?</h2>
     <p>If something goes wrong, please, <a href="https://github.com/antelle/keeweb/issues/new?body=<%= issueBody %>" target="_blank">open an issue on GitHub</a>
-        or <a href="http://antelle.net/" target="_blank">connect a developer</a> directly.
+        or <a href="http://antelle.net/" target="_blank">contact a developer</a> directly.
     </p>
     <p>App information:</p>
     <pre class="settings__pre"><%= appInfo %></pre>
+    <h2>Other platforms</h2>
+    <ul>
+        <li>
+            <i class="fa fa-windows"></i>
+            <i class="fa fa-apple"></i>
+            <i class="fa fa-linux"></i>
+            <a href="https://github.com/antelle/keeweb/releases" target="_blank">Desktop apps</a>
+        </li>
+        <li>
+            <i class="fa fa-chrome"></i>
+            <i class="fa fa-firefox"></i>
+            <i class="fa fa-opera"></i>
+            <i class="fa fa-internet-explorer"></i>
+            <a href="https://antelle.github.io/keeweb/" target="_blank">Web app</a>
+        </li>
+    </ul>
 </div>