this fixes gorhill#650; code reviewed changes re. gorhill#1202, gorhi…

…ll#1545; fine tuning picker UI
joeyryken · Apr 16, 2016 · e475e1e · e475e1e
1 parent 9099c09
commit e475e1e
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 126 deletions.
diff --git a/src/epicker.html b/src/epicker.html
@@ -42,7 +42,15 @@
     opacity: 1;
 }
 #create:not(:disabled) {
-    background-color: #ffdca8;
+    background-color: hsl(36, 100%, 83%);
+    border-color: hsl(36, 50%, 60%);
+}
+#preview {
+    float: left;
+}
+body.preview #preview {
+    background-color: hsl(204, 100%, 83%);
+    border-color: hsl(204, 50%, 60%);
 }
 section {
     border: 0;
@@ -78,7 +86,7 @@
     overflow: hidden;
 }
 aside > ul {
-    height: 16em;
+    max-height: 16em;
     overflow-y: auto;
 }
 aside > ul > li:first-of-type {
@@ -124,14 +132,19 @@
 svg > path + path {
     stroke: #F00;
     stroke-width: 0.5px;
-    fill: rgba(255,31,31,0.25);
+    fill: rgba(255,63,63,0.20);
+}
+body.preview svg > path:first-child {
+    fill: rgba(0,0,0,0.10);
+}
+body.preview svg > path + path {
+    fill: rgba(0,0,0,0.10);
 }
 aside {
     background-color: #eee;
     bottom: 4px;
     box-sizing: border-box;
     visibility: hidden;
-    height: calc(40% - 4px);
     padding: 4px;
     position: fixed;
     right: 4px;
@@ -154,7 +167,8 @@
 <section>
     <textarea lang="en" dir="ltr" spellcheck="false"></textarea>
     <div><!--
-    --><button id="create" type="button" disabled="disabled">{{create}}</button><!--
+    --><button id="preview" type="button">{{preview}}</button><!--
+    --><button id="create" type="button" disabled>{{create}}</button><!--
     --><button id="pick" type="button">{{pick}}</button><!--
     --><button id="quit" type="button">{{quit}}</button><!--
     --></div>

diff --git a/src/js/messaging.js b/src/js/messaging.js
@@ -19,8 +19,6 @@
     Home: https://github.com/gorhill/uBlock
 */
 
-/* global µBlock, vAPI */
-
 /******************************************************************************/
 /******************************************************************************/
 
@@ -603,6 +601,7 @@ var onMessage = function(request, sender, callback) {
                 create: vAPI.i18n('pickerCreate'),
                 pick: vAPI.i18n('pickerPick'),
                 quit: vAPI.i18n('pickerQuit'),
+                preview: vAPI.i18n('pickerPreview'),
                 netFilters: vAPI.i18n('pickerNetFilters'),
                 cosmeticFilters: vAPI.i18n('pickerCosmeticFilters'),
                 cosmeticFiltersHint: vAPI.i18n('pickerCosmeticFiltersHint')