From 999b23e3660ad65138db76a9f7e9e592c46a9818 Mon Sep 17 00:00:00 2001 From: Mike Frysinger Date: Sat, 22 Mar 2014 04:48:14 -0400 Subject: [PATCH] rewrite options page to be more chrome-like --- .gitmodules | 3 + _locales/en/messages.json | 9 +- chrome-bootstrap | 1 + css/options.css | 126 +------------------- images/check.png | Bin 328 -> 276 bytes javascript/options.js | 22 ++-- views/options.html | 236 +++++++++++++++++++++----------------- 7 files changed, 151 insertions(+), 246 deletions(-) create mode 100644 .gitmodules create mode 160000 chrome-bootstrap 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 d049b55ac84628f9b0fdaf59eb29b25737fd4b0f..57105a1531d12e83745f6244ff3dc99d7c98db2a 100644 GIT binary patch delta 211 zcmV;^04)E=0+a%fNq@FUL_t(I%VYTe|33q@F~g{##4BcCKw%>RNg!sYnoEJe9Ec|Y zu`}5&MFaLgyab4&P<%mwp@Bd=6Nt-zn2AzDS%EkmYG4ksW#k&l4aAjD14}^`kYp$j zOaWqlAZCH;5d-38sDX7r%n37y6hj@M22=sD1rYZ^`5=RNkxUID#ZVAPg&G9Ioj@#v z99!fV3i4tT)W9AfmPStk~48gB4hvn N002ovPDHLkV1ngrQ0)K! delta 264 zcmV+j0r&ot0>}c8Nq_1|L_t(|+G70w|33q@0TTlaz%VtGk&zLFjf5qEn4K&`ks}qv zhVspUxDtqMFeHh=Sb#kcF9G5xWV2W(2)aNZ_5k8bK)eE3f*eCxfj9|>jez(v&}CDQ z!zoPSQ3>X2zeg{IDz;(E<=e9)6t@Da2W~^U;xpMi7Tb)g?s=2 O002ovPDHLkU;% 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 - -

-
-
-
-
-
- -

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

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

+
+
+ +
+

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

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

+ +
+ +
+ +
+ +
+
+ +
+
+ +
+ -- 2.39.2