From: Mike Frysinger Date: Sat, 22 Mar 2014 08:48:14 +0000 (-0400) Subject: rewrite options page to be more chrome-like X-Git-Tag: v1.5.3~1 X-Git-Url: https://git.wh0rd.org/?a=commitdiff_plain;h=999b23e3660ad65138db76a9f7e9e592c46a9818;p=chrome-ext%2Fclearhistory-advance-fork.git rewrite options page to be more chrome-like --- diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..5623dde --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "chrome-bootstrap"] + path = chrome-bootstrap + url = https://github.com/roykolak/chrome-bootstrap.git diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 13074bf..9ad84d3 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -3,10 +3,15 @@ "description": {"message": "Quickly clears the browser history. This is a fork of the Google version with more advanced options."}, "title": {"message": "Click to clear history"}, "direction": {"message": "ltr"}, + "frameOptions": {"message": "Options"}, + "headerTimeRange": {"message": "Time Range"}, + "headerUserInterface": {"message": "User Interface"}, + "headerDataSelection": {"message": "Data Selection"}, "optionsTitle": {"message": "Options for Clear History [Advance Fork]"}, "optionsHeader": {"message": "Clear History [Advance Fork]"}, "optionsTimeFor": {"message": "Delete history for:"}, - "optionsTimeStart": {"message": "Clear entries newer than the selected time (otherwise, entries older than the selection will be cleared)"}, + "optionsTimeStartNewer": {"message": "Clear entries newer than the selected time"}, + "optionsTimeStartOlder": {"message": "Clear entries older than the selected time"}, "optionsTime": { "message": "Last $num$ $units$", "placeholders": { @@ -16,7 +21,7 @@ }, "optionsTimeAll": {"message": "Everything"}, "optionsPrompt": {"message": "Prompt before deleting"}, - "optionsCookies": {"message": "Clear all cookies"}, + "optionsCookies": {"message": "Clear all cookies (sorry, selective clearing not available)"}, "optionsDownloads": {"message": "Clear download history"}, "optionsSaved": {"message": "Preferences saved!"}, "optionsAutoclear": {"message": "Automatically purge old entries"}, diff --git a/chrome-bootstrap b/chrome-bootstrap new file mode 160000 index 0000000..419698e --- /dev/null +++ b/chrome-bootstrap @@ -0,0 +1 @@ +Subproject commit 419698ec6fe922487d2fe3f11c92fd1c8ffbd8a6 diff --git a/css/options.css b/css/options.css index 95dee56..e83e135 100644 --- a/css/options.css +++ b/css/options.css @@ -6,88 +6,13 @@ */ @CHARSET "UTF-8"; -body { - background-color: #eef; - color: #222; - direction: __MSG_@@bidi_dir__; /* Predefined message from Chrome Extension */ - font: 13px/18px "Arial"; -} -header { - color: #333; - margin: 0 auto; - text-align: left; - width: 400px; -} -h1 { - color: #dd4b39; - font: 20px/24px "Arial" normal; - margin: 5px 0 0; - padding: 0 5px 3px; -} -h1 > img, -h1 > span { - vertical-align: middle; -} -hr { - background-color: #ebebeb; - border: none; - clear: both; - height: 1px; - margin: 5px auto; - width: 400px; -} -#content { - background-color: #fff; - border: 4px solid rgba(0, 0, 0, 0.2); - border-radius: 12px; - margin: 40px auto 0; - padding: 10px 10px 0; - width: 500px; -} -#opt-form { - margin: 10px auto; - overflow: hidden; - width: 400px; -} -#opt-time, -#opt-prompt, -#opt-cookies, -#opt-downloads, -#opt-autoclear { - background-color: white; - clear: left; - margin: 5px auto; - overflow: hidden; - padding: 5px 5px; -} -.opt-name { - float: left; - width: 175px; -} -.opt-value { - float: left; - width: 215px; -} -.opt-value .opt-option { - clear: left; - margin-bottom: 5px; - overflow: hidden; -} -.opt-value .opt-option .opt-chk { - float: left; -} -.opt-value .opt-option .opt-label { - float: left; - margin-top: -3px; - padding-left: 6px; -} -#optionsSaved { +div#optionsSaved { clear: left; margin: 10px auto 5px; padding: 5px; text-align: center; } -#optionsSaved b { +div#optionsSaved b { background-color: #f9edbe; border: 1px solid #f0c36d; border-radius: 2px; @@ -97,52 +22,7 @@ hr { padding: 6px 16px; -webkit-transition: opacity 130ms ease-in-out; } -#optionsSaved.show b { +div#optionsSaved.show b { opacity: 1; -webkit-transition: opacity 50ms ease-in-out; } -input[type="checkbox"], -input[type="radio"] { - -webkit-appearance: none; - background-color: white; - border: 1px solid #dcdcdc; - height: 13px; - margin: 0; - width: 13px; -} -input[type="radio"] { - border-radius: 50%; - height: 15px; - width: 15px; -} -input[type="checkbox"]:hover, -input[type="radio"]:hover { - border-color: #c6c6c6; - -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1) -} -input[type="checkbox"]:active, -input[type="radio"]:active { - background-color: #ebebeb; - border-color: #c6c6c6; -} -input[type="radio"]:checked::after { - background: #666; - border-radius: 50%; - content: ''; - display: block; - height: 7px; - margin: 3px auto; - width: 7px; -} -input[type="checkbox"]:checked::after { - content: url('../images/check.png'); - display: block; - left: -5px; - position: relative; - top: -6px; -} -input[type="checkbox"]:focus, -input[type="radio"]:focus { - outline: none; - border-color: #4d90fe; -} diff --git a/images/check.png b/images/check.png index d049b55..57105a1 100644 Binary files a/images/check.png and b/images/check.png differ diff --git a/javascript/options.js b/javascript/options.js index f40b46c..bd3a227 100644 --- a/javascript/options.js +++ b/javascript/options.js @@ -26,21 +26,15 @@ function init() { elements[1].innerText = message; }); - $('#optionsTitle')[0].innerText = chrome.i18n.getMessage('optionsTitle'); - $('#optionsHeader')[0].innerText = chrome.i18n.getMessage('optionsHeader'); - $('#optionsPrompt')[0].innerText = chrome.i18n.getMessage('optionsPrompt'); - $('#optionsTimeFor')[0].innerText = chrome.i18n.getMessage('optionsTimeFor'); - $('#optionsTimeStart')[0].innerText = chrome.i18n.getMessage('optionsTimeStart'); - $('#optionsCookies')[0].innerText = chrome.i18n.getMessage('optionsCookies'); - $('#optionsDownloads')[0].innerText = chrome.i18n.getMessage('optionsDownloads'); - $('#optionsAutoclear')[0].innerText = chrome.i18n.getMessage('optionsAutoclear'); - $('#optionsSaved > b')[0].innerText = chrome.i18n.getMessage('optionsSaved'); + $('[i18n-content]').forEach(function(ele) { + ele.innerText = chrome.i18n.getMessage(ele.getAttribute('i18n-content')); + }); // Bind all the callbacks - $('#opt-time input.opt-chk[type=radio]').forEach(function(e) { + $('input[type=radio]').forEach(function(e) { e.onclick = toggle; }); - $('input.opt-chk[type=checkbox]').forEach(function(e) { + $('input[type=checkbox]').forEach(function(e) { e.onclick = setCheck; }); @@ -56,7 +50,7 @@ function init() { var clearDownloads = s.downloads || CONSTANTS.NO; var autoClear = s.autoclear || CONSTANTS.NO; - $('input[name=timeStart]')[0].checked = (timeStart === CONSTANTS.YES); + $('input[name=timeStart][value="' + timeStart + '"]')[0].checked = true; $('input[name=time][value="' + time + '"]')[0].checked = true; $('input[name=prompt]')[0].checked = (showPrompt === CONSTANTS.YES); $('input[name=cookies]')[0].checked = (clearCookies === CONSTANTS.YES); @@ -70,7 +64,9 @@ function init() { * @this {HTMLInputElement} The element (radio button) that was clicked. */ function toggle() { - chrome.storage.sync.set({'time': this.value}); + var setting = {}; + setting[this.name] = this.value; + chrome.storage.sync.set(setting); optionSaved(); } diff --git a/views/options.html b/views/options.html index ca3ca6f..33e3748 100644 --- a/views/options.html +++ b/views/options.html @@ -9,118 +9,138 @@ - + + - -
-
-

- Clear History logo - -

-
-
-
-
-
- -

-
- -
-
-
-
-
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
-
-
-
-
-
-
-   -
-
-
- -
-
-
-
-
-
-
-   -
-
-
- -
-
-
-
-
-
-   -
-
-
- -
-
-
-
-
-
-
-   -
-
-
- -
-
-
-
-
-
- + + +
+ +
+

+
    +
  • + +
    • +
+
    +
  •  
    • +
+
+ +
+
+
+

+
+
+ +
+

+ +
+ +
+
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+

+ +
+ +
+ +
+ +
+
+ +
+

+ +
+ +
+ +
+ +
+
+ +
+
+ +
+