mirror of
https://github.com/gryf/pentadactyl-pm.git
synced 2025-12-23 19:22:25 +01:00
Add gradient to completions output. Leave space for top arrow, as well
This commit is contained in:
Kris Maglione
@@ -21,117 +21,6 @@
|
||||
<!-- No white space. The table is white-space: pre; :( -->
|
||||
<content><html:span class="td-strut"/><html:span class="td-span"><children/></html:span></content>
|
||||
</binding>
|
||||
<binding id="gradient" inheritstyle="true">
|
||||
<content>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space: normal; border: 1px solid green; margin: 6px;">
|
||||
<div xbl:inherits="style=right" style="height: 3px"/>
|
||||
<table width="100%" style="height: 3px; margin-top: -3px">
|
||||
<tr>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.01"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.02"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.03"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.04"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.05"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.06"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.07"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.08"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.09"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.1"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.11"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.12"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.13"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.14"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.15"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.16"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.17"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.18"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.19"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.2"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.21"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.22"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.23"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.24"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.25"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.26"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.27"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.28"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.29"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.3"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.31"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.32"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.33"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.34"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.35"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.36"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.37"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.38"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.39"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.4"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.41"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.42"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.43"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.44"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.45"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.46"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.47"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.48"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.49"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.5"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.51"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.52"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.53"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.54"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.55"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.56"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.57"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.58"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.59"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.6"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.61"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.62"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.63"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.64"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.65"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.66"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.67"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.68"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.69"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.7"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.71"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.72"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.73"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.74"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.75"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.76"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.77"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.78"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.79"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.8"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.81"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.82"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.83"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.84"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.85"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.86"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.87"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.88"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.89"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.9"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.91"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.92"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.93"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.94"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.95"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.96"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.97"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.98"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 0.99"/>
|
||||
<td xbl:inherits="style=left" style="opacity: 1"/>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</content>
|
||||
</binding>
|
||||
</bindings>
|
||||
|
||||
<!-- vim:se ft=xbl sw=4 sts=4 tw=0 et: -->
|
||||
|
||||
@@ -27,7 +27,7 @@ function Highlights(name, store, serial)
|
||||
Preview color: gray;
|
||||
|
||||
CompTitle color: magenta; background: white; font-weight: bold;
|
||||
CompTitle>* border-bottom: 1px dashed magenta;
|
||||
CompTitle>* /* border-bottom: 1px dashed magenta; */
|
||||
CompMsg font-style: italic; margin-left: 16px;
|
||||
CompItem
|
||||
CompItem[selected] background: yellow;
|
||||
@@ -41,6 +41,10 @@ function Highlights(name, store, serial)
|
||||
CompMore text-align: center; height: .5ex; line-height: .5ex;
|
||||
CompMore::after content: "\2304" /* Unicode down arrowhead */
|
||||
|
||||
Gradient height: 1px; margin-bottom: -1px;
|
||||
GradientLeft background-color: magenta;
|
||||
GradientRight background-color: white;
|
||||
|
||||
Indicator color: blue;
|
||||
Filter font-weight: bold;
|
||||
|
||||
|
||||
@@ -1323,6 +1323,17 @@ function ItemList(id) //{{{
|
||||
doc.body.appendChild(doc.createTextNode(""));
|
||||
doc.body.style.borderTop = "1px solid black"; // FIXME: For cases where completions/MOW are shown at once, or ls=0. Should use :highlight.
|
||||
|
||||
let gradient =
|
||||
<div highlight="Gradient">
|
||||
<div style="height: 0px"><div highlight="GradientRight Gradient"/></div>
|
||||
<table highlight="Gradient" width="100%">
|
||||
<tr>
|
||||
{ template.map(util.range(0, 100), function (i)
|
||||
<td highlight="GradientLeft" style={"opacity: " + (1 - i / 100)}/>) }
|
||||
</tr>
|
||||
</table>
|
||||
</div>;
|
||||
|
||||
var items = null;
|
||||
var startIndex = -1; // The index of the first displayed item
|
||||
var endIndex = -1; // The index one *after* the last displayed item
|
||||
@@ -1371,6 +1382,7 @@ function ItemList(id) //{{{
|
||||
<div highlight="Completions">
|
||||
{ context.createRow(context.title || [], "CompTitle") }
|
||||
</div>
|
||||
{ gradient }
|
||||
<div key="message" highlight="CompMsg"/>
|
||||
<div key="up" highlight="CompLess"/>
|
||||
<div key="items" highlight="Completions"/>
|
||||
@@ -1418,7 +1430,7 @@ function ItemList(id) //{{{
|
||||
nodes.message.textContent = context.message;
|
||||
nodes.message.style.display = context.message ? "block" : "none";
|
||||
nodes.waiting.style.display = context.incomplete ? "block" : "none";
|
||||
nodes.up.style.display = "none";
|
||||
nodes.up.style.opacity = "0";
|
||||
nodes.down.style.display = "none";
|
||||
|
||||
let root = nodes.root
|
||||
@@ -1446,8 +1458,13 @@ function ItemList(id) //{{{
|
||||
else if (!display && row.parentNode == items)
|
||||
items.removeChild(row);
|
||||
}
|
||||
nodes.up.style.display = (start == 0) ? "none" : "block";
|
||||
nodes.down.style.display = (end == context.items.length) ? "none" : "block";
|
||||
if (context.items.length == 0)
|
||||
return;
|
||||
nodes.up.style.opacity = (start == 0) ? "0" : "1";
|
||||
if (end != context.items.length)
|
||||
nodes.down.style.display = "block"
|
||||
else
|
||||
nodes.up.style.display = "block"
|
||||
});
|
||||
|
||||
divNodes.noCompletions.style.display = haveCompletions ? "none" : "block";
|
||||
|
||||
Reference in New Issue
Block a user