Merge branch 'development'

wallabag · May 20, 2019 · cc324fb · cc324fb
2 parents fbbaed4 + d577dd1
commit cc324fb
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 25 deletions.
diff --git a/wallabagger/_locales/ru/messages.json b/wallabagger/_locales/ru/messages.json
@@ -216,7 +216,7 @@
     "description": "Options"
   },
   "Unread": {
-    "message": "Нерочитано",
+    "message": "Непрочитано",
     "description": "background"
   },
   "Unset_this_article_as_archived_into_Wallabag": {

diff --git a/wallabagger/js/background.js b/wallabagger/js/background.js
@@ -310,10 +310,19 @@ function onRuntimeConnect (port) {
     Port.onMessage.addListener(onPortMessage);
 }
 
+function onRuntimeInstalled (details) {
+    if (details.reason === 'install') {
+        browser.tabs.create({
+            url: chrome.runtime.getURL('/options.html')
+        });
+    }
+}
+
 function addListeners () {
     browser.contextMenus.onClicked.addListener(onContextMenusClicked);
     browser.commands.onCommand.addListener(onCommandsCommand);
     browser.runtime.onConnect.addListener(onRuntimeConnect);
+    browser.runtime.onInstalled.addListener(onRuntimeInstalled);
 }
 
 const browserIcon = {
@@ -444,7 +453,7 @@ function savePageToWallabag (url, resetIcon) {
                     postIfConnected({ response: 'article', article: cutArticle(data) });
                     cache.set(url, cutArticle(data));
                     saveExistFlag(url, existStates.exists);
-                    if (api.data.AllowExistCheck === false || resetIcon) {
+                    if (api.data.AllowExistCheck !== true || resetIcon) {
                         browserIcon.timedToDefault();
                     }
                 } else {
@@ -484,7 +493,7 @@ const requestExists = (url) =>
             let icon = 'default';
             if (data.exists) {
                 icon = 'good';
-                if (api.data.AllowExistCheck === false) {
+                if (api.data.AllowExistCheck !== true) {
                     browserIcon.setTimed(icon);
                 }
             }

diff --git a/wallabagger/js/options.js b/wallabagger/js/options.js
@@ -301,26 +301,46 @@ OptionsController.prototype = {
 
     checkUrlClick: function (e) {
         e.preventDefault();
-
-        if (this.wallabagurlinput_.value !== '') {
-            this.wallabagurlinput_.value = this._urlSanitized(this.wallabagurlinput_.value);
-            Object.assign(this.data, { Url: this.protocolLabel_.textContent + this.wallabagurlinput_.value });
+        const urlDirty = this._getUrl();
+        if (urlDirty !== '') {
+            this._setProtocolCheck(urlDirty);
+            this._setUrl(urlDirty);
+            Object.assign(this.data, { Url: this.protocolLabel_.textContent + this._getUrl() });
             this.port.postMessage({request: 'setup-checkurl', data: this.data});
         }
     },
 
-    _urlSanitized: function (url) {
-        return url.replace(/\/$/, '');
+    _urlSanitized: function (urlDirty) {
+        const url = urlDirty
+            .replace(new RegExp(/^http(s?):\/\//, 'gm'), '')
+            .replace(/\/$/, '');
+        return url;
     },
 
-    setFields: function () {
+    _setProtocolCheck (url) {
         const re = /^(http|https):\/\/(.*)/;
-        if (re.test(this.data.Url)) {
-            const res = re.exec(this.data.Url);
+        if (re.test(url)) {
+            const res = re.exec(url);
             this.protocolCheck_.checked = (res[1] === 'https');
             this.protocolLabel_.textContent = res[1] + '://';
-            this.wallabagurlinput_.value = res[2];
         };
+    },
+
+    _getUrl () {
+        return this.wallabagurlinput_.value;
+    },
+
+    _setUrl (urlDirty) {
+        const url = this._urlSanitized(urlDirty);
+        this.wallabagurlinput_.value = url;
+    },
+
+    setFields: function () {
+        const urlDirty = this.data.Url;
+        if (typeof (urlDirty) === 'string' && urlDirty.length > 0) {
+            this._setProtocolCheck(urlDirty);
+            this._setUrl(urlDirty);
+        }
 
         if (this.wallabagurlinput_.value !== '') {
             this._show(this.tokenSection_);

diff --git a/wallabagger/manifest.json b/wallabagger/manifest.json
@@ -2,7 +2,7 @@
   "name": "Wallabagger",
   "manifest_version": 2,
   "default_locale": "en",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "__MSG_Extension_description__",
   "icons": {
     "16": "img/wallabag-icon-48a.png",
@@ -28,7 +28,8 @@
     "contextMenus"
   ],
   "options_ui": {
-    "page": "options.html"
+    "page": "options.html",
+    "open_in_tab": true
   },
   "commands": {
     "_execute_browser_action": {

diff --git a/wallabagger/options.html b/wallabagger/options.html
@@ -4,10 +4,26 @@
 <head>
     <meta charset="utf-8" />
     <title>Wallabagger options</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/spectre.min.css">
     <style>
-        body { padding: 0 10px 10px; min-width: 800px; background-color: transparent; font-size: 1.3rem }
+        body {
+            display: flex;
+            margin: 10px auto;
+            max-width: 800px;
+            flex-direction: column;
+            background-color: transparent;
+            font-size: 1.3rem;
+        }
         form, section { margin-top: 5px; }
+        .main-logo {
+            margin: 0 auto;
+            width: 64px;
+            height: 64px;
+        }
+        .columns {
+            display: block;
+        }
         .btn,
         .form-input,
         .input-group .input-group-addon {
@@ -27,18 +43,57 @@
         .wallabag-url .form-input {
             max-width: 60%;
         }
+
+        .url-group {
+            display: flex;
+            min-width: 70%;
+            flex-grow: 1;
+        }
+
+        .wallabag-url-group {
+            flex-wrap: wrap;
+        }
+
+        .params-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+        }
+
+        .params-button {
+            margin-bottom: 5px;
+        }
+
+        @media (min-width: 500px) {
+            .columns {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+
+            .main-column {
+                min-width: 500px;
+            }
+
+            .side-column {
+                min-width: 300px;
+            }
+        }
     </style>
 </head>
 
 <body>
+    <img src="img/wallabag-icon-128.png" alt="wallabag logo" class="main-logo">
     <div class="columns">
-        <div class="column col-6">
+        <div class="column main-column">
             <form action="." id="wallabagurl-section">
                 <div class="form-group">
                     <label class="form-label" for="input-wallabagurl" data-i18n="Wallabag_URL">Wallabag URL</label>
-                    <div class="input-group wallabag-url">
-                        <span class="input-group-addon" id="input-group-wallabagurl">https://</span>
-                        <input class="form-input" type="text" id="input-wallabagurl" placeholder="app.wallabag.it" />
+                    <div class="input-group wallabag-url-group">
+                        <span class="url-group">
+                            <span class="input-group-addon" id="input-group-wallabagurl">https://</span>
+                            <input class="form-input wallabag-url" type="text" id="input-wallabagurl" placeholder="app.wallabag.it" />
+                        </span>
                         <button class="btn input-group-btn" id="checkurl-button" data-i18n="Check_URL">Check URL</button>
 
                     </div>
@@ -83,7 +138,7 @@
 
             </form>
         </div>
-        <div class="column col-6">
+        <div class="column side-column">
             <table class="table">
                 <thead>
                     <tr>
@@ -136,10 +191,10 @@
             </div>
         </div>
     </div>
-    <div class="column col-12 pt-10">
-        <button class="btn" id="clear-button" data-i18n="Reset_parameters">Reset parameters</button>
-        <button class="btn" id="saveToFile-button" data-i18n="Save_to_file">Save to file</button>
-        <button class="btn" id="loadFromFile-button" data-i18n="Load_from_file">Load from file</button>
+    <div class="column col-12 pt-10 params-buttons">
+        <button class="btn params-button" id="clear-button" data-i18n="Reset_parameters">Reset parameters</button>
+        <button class="btn params-button" id="saveToFile-button" data-i18n="Save_to_file">Save to file</button>
+        <button class="btn params-button" id="loadFromFile-button" data-i18n="Load_from_file">Load from file</button>
         <input type="file" style="display:none" id="openFile-dialog"/>
     </div>
 

diff --git a/wallabagger/popup.html b/wallabagger/popup.html
@@ -2,6 +2,7 @@
 <html>
 
 <head>
+    <meta charset="utf-8">
     <title>Wallabagger</title>
     <link rel="stylesheet" href="css/spectre.min.css">
     <link rel="stylesheet" href="css/icomoon.css">