Add open iconic magnifying class icon. Also cleanup layout and texts …

…for search field. Issue #1872
robotframework · Dec 16, 2014 · 5401e24 · 5401e24
1 parent 89c9a9b
commit 5401e24
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/src/robot/htmldata/libdoc/libdoc.css b/src/robot/htmldata/libdoc/libdoc.css
@@ -85,24 +85,38 @@ table.keywords td.args {
     display: none;
 }
 #open-search {
-    font-size: 40px;
-    font-weight: bold;
-    line-height: 30px;
-    text-align: center;
     border: 2px solid black;
     border-radius: 4px;
     width: 40px;
     height: 40px;
-    background: white;
+    background-color: white;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAY5JREFUSImt1LtrFGEUBfCfURsFHwEr29UNkS3MFklrQK0EIYUk/5IQ0FSmCCKW1mpAommToCKoK+lsLUKeSFbXFLuT3B13Hjt64INvOPeec+fOnUs2mpjHBrbRwQE+YQFTObm5qGMZf0qct7gxjPgM9kqKJ+cAs2XFf4fEX3iOe7iKsxjFHTxFO8R2ikzqqcq/oVFQUANfUm8ynhUce97qVVoGo/gaclcGBTVDQDuvigw09Lfrr+maD+TSkOIJngWNx2lyI5C3KxrcDRof0+R2IC9XNLgSNPbTZDKa7YricFr/v3EqIUZ0xxPO4FxFg0vhnoz7scFmICcqGjTDvRWJEayG57mKBg/C/U2anHDSu5+oDSlex6GTlTE2KOhVMPmACyXFL+qOZZL7Xf/3OMY17KZMrheI13px6e26nmVyX3eDxnYt4lav0qTiaTzp8VkrPNdkNyOpkyM4lEkNL0uK/CjgXw8ySHATD7GGLd0/fgfv8QiTOI93BSb/jCKT/4Isk1ZOTiWTF0H8M8aPANvFyARlADGFAAAAAElFTkSuQmCC);
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik0zLjUgMGMtMS45MyAwLTMuNSAxLjU3LTMuNSAzLjVzMS41NyAzLjUgMy41IDMuNWMuNTkgMCAxLjE3LS4xNCAxLjY2LS40MWExIDEgMCAwIDAgLjEzLjEzbDEgMWExLjAyIDEuMDIgMCAxIDAgMS40NC0xLjQ0bC0xLTFhMSAxIDAgMCAwLS4xNi0uMTNjLjI3LS40OS40NC0xLjA2LjQ0LTEuNjYgMC0xLjkzLTEuNTctMy41LTMuNS0zLjV6bTAgMWMxLjM5IDAgMi41IDEuMTEgMi41IDIuNSAwIC42Ni0uMjQgMS4yNy0uNjYgMS43Mi0uMDEuMDEtLjAyLjAyLS4wMy4wM2ExIDEgMCAwIDAtLjEzLjEzYy0uNDQuNC0xLjA0LjYzLTEuNjkuNjMtMS4zOSAwLTIuNS0xLjExLTIuNS0yLjVzMS4xMS0yLjUgMi41LTIuNXoiCiAgLz4KPC9zdmc+), none;
+    background-size: 24px 24px;
 }
 #open-search:hover {
-    background: yellow;
+    background-color: yellow;
 }
+
 fieldset {
     background: white;
+    border: 2px solid black;
+    border-radius: 4px;
 }
-#search-pattern {
-    width: 20em;
+
+fieldset fieldset {
+    border: 1px solid black;
+    margin: 4px 0;
+}
+
+#search-title {
+    font-weight: bold;
+}
+#search-string {
+    box-sizing: border-box;
+    width: 100%;
 }
 .highlight {
     background: yellow;

diff --git a/src/robot/htmldata/libdoc/libdoc.html b/src/robot/htmldata/libdoc/libdoc.html
@@ -80,7 +80,7 @@ <h1>Opening library documentation failed</h1>
         var hash = window.location.href.split('#').splice(1).join('#');
         var query = hash.slice('search?'.length);
         var params = util.parseQueryString(query);
-        $('#search-pattern').val(params.pattern);
+        $('#search-string').val(params.pattern);
         $('#include-name').prop('checked', params.name || false);
         $('#include-args').prop('checked', params.args || false);
         $('#include-doc').prop('checked', params.doc || false);
@@ -91,7 +91,7 @@ <h1>Opening library documentation failed</h1>
         var include = {name: $('#include-name').prop('checked'),
                        args: $('#include-args').prop('checked'),
                        doc: $('#include-doc').prop('checked')};
-        search($('#search-pattern').val(), include);
+        search($('#search-string').val(), include);
     }
 
     function search(string, include) {
@@ -138,7 +138,7 @@ <h1>Opening library documentation failed</h1>
     function openSearch() {
         $('#search').show();
         $('#open-search').hide();
-        $('#search-pattern').focus().select();
+        $('#search-string').focus().select();
     }
 
     function closeSearch() {
@@ -147,7 +147,7 @@ <h1>Opening library documentation failed</h1>
     }
 
     function resetSearch() {
-        $('#search-pattern').val('');
+        $('#search-string').val('');
         $('#include-name').prop('checked', true);
         $('#include-args').prop('checked', true);
         $('#include-doc').prop('checked', true);
@@ -172,11 +172,10 @@ <h2 id="Introduction">Introduction</h2>
     <div id="footer-container"></div>
     <form id="search" action="javascript:void(0)">
         <fieldset>
-            <legend>Search</legend>
-            <label for="search-pattern">Pattern</label>
-            <input type="text" id="search-pattern" onkeyup="doSearch()">
+            <legend id="search-title">Search keywords</legend>
+            <input type="text" id="search-string" onkeyup="doSearch()">
             <fieldset>
-                <legend>Include</legend>
+                <legend>Search from</legend>
                 <input type="checkbox" id="include-name" onclick="doSearch()" checked>
                 <label for="include-name">Name</label>
                 <input type="checkbox" id="include-args" onclick="doSearch()" checked>
@@ -189,7 +188,7 @@ <h2 id="Introduction">Introduction</h2>
         </fieldset>
     </form>
     <!-- TODO: Placefolder until we get real icon -->
-    <div id="open-search" onclick="openSearch()">&#8981;</div>
+    <div id="open-search" onclick="openSearch()"></div>
 </script>
 
 <script type="text/x-jquery-tmpl" id="importing-template">