Add syntax hints tooltip to WebUI

This commit is contained in:
Alan Bernstein 2017-05-08 17:59:18 -05:00
parent b7a73e97fd
commit c7e0168729
2 changed files with 71 additions and 4 deletions

View file

@ -295,4 +295,42 @@ td{
.expand {
text-align: center;
}
}
.query h2 {
display: inline-block;
}
.query-tooltip {
position: relative;
display: inline;
color: #1db598;
margin-left: 5px;
}
.query-tooltip-content {
visibility: hidden;
background-color: rgb(250, 250, 250);
border: solid 1.5px #e4eff4;
color: #102445;
border-radius: 2px;
padding: 15px;
margin-bottom: 15px;
/* Position the tooltip */
position: absolute;
/*
left: 423px;
top: 100px;
*/
z-index: 1;
}
.query-tooltip:hover+.query-tooltip-content {
visibility: visible;
}
.code{
font-family: monospace;
}

View file

@ -34,10 +34,39 @@
<div class="interface interface-active" id="interface-console">
<div class="query">
<h2>Query</h2>
<h2>Query</h2><a class="query-tooltip" href="https://www.pilosa.com/docs/webui/" target="_blank">?</a>
<div class='query-tooltip-content'>
<h5>PQL</h5>
<div class="code">
SetBit(frame=foo, row=0, column=0)<br />
ClearBit(frame=foo, row=0, column=0)<br />
SetRowAttrs(frame=foo, row=0, color="blue")<br />
SetColumnAttrs(frame=foo, column=0, shape="circle")<br />
Bitmap(frame=foo, row=0)<br />
Range(frame=foo, row=0, start="2010-01-01T00:00", end="2017-03-02T03:00")<br />
Count(&lt;BITMAP_CALL&gt;)<br />
TopN([BITMAP_CALL], frame=foo, n=20)<br />
Union([BITMAP_CALL, ...])<br />
Intersect(&lt;BITMAP_CALL&gt;, [BITMAP_CALL, ...])<br />
Difference(&lt;BITMAP_CALL&gt;, &lt;BITMAP_CALL&gt;)
</div>
<br />
<h5>Special commands</h5>
<div class="code">
:create index test [columnLabel=column]<br />
:use index test<br />
:create frame foo [rowLabel=row]<br />
:delete index test<br />
:delete frame foo
</div>
<br />
&lt;tab&gt;: autocomplete<br />
&lt;up&gt;/&lt;down&gt;: history<br />
</div>
<textarea name="name" id='query' rows="5" required></textarea>
<div class='input-controls'>
</div>
<div class='input-controls'>
<div class="input-hints">
<select class="" name="" id="index-dropdown">
<option value="0">Select index</option>
</select>