]> git.wh0rd.org - chrome-ext/clearhistory-advance-fork.git/blobdiff - views/options.html
rewrite options page to be more chrome-like
[chrome-ext/clearhistory-advance-fork.git] / views / options.html
index ca3ca6ffdfec146607ea987d596f422312dc2c13..33e3748297b98f3d4cc6308ef0447c3a4a80b22a 100644 (file)
 <html>
   <head>
     <title id="optionsTitle"></title>
-    <link rel="stylesheet" type="text/css" href="../css/options.css">
+    <link rel="stylesheet" type="text/css" href="../chrome-bootstrap/chrome-bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="../css/options.css" />
   </head>
-  <body>
-    <div id="content">
-      <header>
-        <h1>
-          <img alt="Clear History logo" src="../images/icon32.png">
-          <span id="optionsHeader"></span>
-        </h1>
-      </header>
-      <hr>
-      <div id="opt-form">
-        <div id="opt-time">
-          <div class="opt-name">
-            <b id="optionsTimeFor"></b>
-            <br><br>
-            <div class="opt-timeStart">
-              <input name="timeStart" class="opt-chk" type="checkbox" checked>
-              <div class="opt-label" id="optionsTimeStart"></div>
-            </div>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">   <!-- 1 hour -->
-              <input name="time" class="opt-chk" type="radio" value="1"
-                tabindex="1">
-              <div class="opt-label" id="opt-1"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 2 hours -->
-              <input name="time" class="opt-chk" type="radio" value="2">
-              <div class="opt-label" id="opt-2"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 1 day -->
-              <input name="time" class="opt-chk" type="radio" value="24">
-              <div class="opt-label" id="opt-24"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 7 days -->
-              <input name="time" class="opt-chk" type="radio" value="168">
-              <div class="opt-label" id="opt-168"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 14 days -->
-              <input name="time" class="opt-chk" type="radio" value="336">
-              <div class="opt-label" id="opt-336"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">   <!-- 30 days -->
-              <input name="time" class="opt-chk" type="radio" value="720">
-              <div class="opt-label" id="opt-720"></div>
-            </div>
-            <!-- <br> -->
-            <div class="opt-option">
-              <input name="time" class="opt-chk" type="radio" value="-1">
-              <div class="opt-label" id="opt--1"></div>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div id="opt-prompt">
-          <div class="opt-name">
-            <b>&nbsp;</b>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">
-              <input name="prompt" class="opt-chk" type="checkbox" checked>
-              <div class="opt-label" id="optionsPrompt"></div>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div id="opt-cookies">
-          <div class="opt-name">
-            <b>&nbsp;</b>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">
-              <input name="cookies" class="opt-chk" type="checkbox">
-              <div class="opt-label" id="optionsCookies"></div>
-            </div>
-          </div>
-        </div>
-        <div id="opt-downloads">
-          <div class="opt-name">
-            <b>&nbsp;</b>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">
-              <input name="downloads" class="opt-chk" type="checkbox">
-              <div class="opt-label" id="optionsDownloads"></div>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div id="opt-autoclear">
-          <div class="opt-name">
-            <b>&nbsp;</b>
-          </div>
-          <div class="opt-value">
-            <div class="opt-option">
-              <input name="autoclear" class="opt-chk" type="checkbox">
-              <div class="opt-label" id="optionsAutoclear"></div>
-            </div>
-          </div>
-        </div>
-        <hr>
-        <div id="optionsSaved">
-          <b></b>
+
+<body class="chrome-bootstrap">
+  <div class="frame">
+
+    <div class="navigation">
+      <h1><a href="#" i18n-content="optionsHeader"></a></h1>
+      <ul class="menu">
+        <li class="selected">
+          <a href="#options" i18n-content="frameOptions"></a>
+        </li>
+      </ul>
+      <ul>
+        <li>&nbsp;<img src='../images/icon128.png'/></li>
+      </ul>
+    </div>
+
+    <div class="mainview view">
+      <div id="options" class="selected">
+        <header>
+          <h1 i18n-content="frameOptions"></h1>
+        </header>
+        <div class="content">
+
+<section>
+ <h3 i18n-content="headerTimeRange"></h3>
+
+ <div class="radio">
+ <label>
+  <input name="timeStart" type="radio" value="yes" selected/>
+  <span i18n-content="optionsTimeStartNewer"></span>
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+  <input name="timeStart" type="radio" value="no"/>
+  <span i18n-content="optionsTimeStartOlder"></span>
+ </label>
+ </div>
+
+ <br/>
+
+ <div class="radio">
+ <label>   <!-- 1 hour -->
+  <input name="time" type="radio" value="1" tabindex="1"/>
+  <span class="opt-label" id="opt-1"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 2 hours -->
+  <input name="time" type="radio" value="2"/>
+  <span class="opt-label" id="opt-2"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 1 day -->
+  <input name="time" type="radio" value="24"/>
+  <span class="opt-label" id="opt-24"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 7 days -->
+  <input name="time" type="radio" value="168"/>
+  <span class="opt-label" id="opt-168"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 14 days -->
+  <input name="time" type="radio" value="336"/>
+  <span class="opt-label" id="opt-336"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>   <!-- 30 days -->
+  <input name="time" type="radio" value="720"/>
+  <span class="opt-label" id="opt-720"></span>
+ </label>
+ </div>
+ <div class="radio">
+ <label>
+  <input name="time" type="radio" value="-1"/>
+  <span class="opt-label" id="opt--1"></span>
+ </label>
+ </div>
+</section>
+
+<section>
+ <h3 i18n-content='headerUserInterface'></h3>
+
+ <div class="checkbox">
+ <label>
+  <input name="prompt" type="checkbox" checked/>
+  <span i18n-content="optionsPrompt"></span>
+ </label>
+ </div>
+
+ <div class="checkbox">
+ <label>
+  <input name="autoclear" type="checkbox"/>
+  <span i18n-content="optionsAutoclear"></span>
+ </label>
+ </div>
+</section>
+
+<section>
+ <h3 i18n-content='headerDataSelection'></h3>
+
+ <div class="checkbox">
+ <label>
+  <input name="cookies" type="checkbox"/>
+  <span i18n-content="optionsCookies"></span>
+ </label>
+ </div>
+
+ <div class="checkbox">
+ <label>
+  <input name="downloads" type="checkbox"/>
+  <span i18n-content="optionsDownloads"></span>
+ </label>
+ </div>
+</section>
+
+<div id="optionsSaved"><b i18n-content="optionsSaved"></b></div>
+
         </div>
       </div>
     </div>
+
+  </div>
+
     <script src="../javascript/background.js"></script>
     <script src="../javascript/util.js"></script>
     <script src="../javascript/options.js"></script>