rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Tooltip Change

Browse Source
This commit is contained in:
ebolam
2022-10-11 13:51:05 -04:00
parent 8b044e19f5
commit a14609a768
2 changed files with 66 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
static/koboldai.css
View File

@@ -1887,13 +1887,22 @@ body {
outline: 1px solid gray; outline: 1px solid gray;
} }
.context-token:hover::after { [tooltip]:after {
content: attr(token-id); opacity: 0;
position: absolute; content: "";
}
top: -120%; [tooltip]:hover::after {
left: 50%; content: attr(tooltip);
transform: translateX(-50%); position: fixed;
top: calc(var(--mouse-y) * 100vh - 30px);
left: calc(var(--mouse-x) * 100vw);
transition: opacity 0s linear 0.5s;
transform: translate(var(--tooltip_x), var(--tooltip_y));
/*transform: translate(-100%, -100%);*/
opacity: 1;
padding: 0px 2px; padding: 0px 2px;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
@@ -1902,6 +1911,33 @@ body {
z-index: 9999999; z-index: 9999999;
} }
/* Mobile tooltips */
@media (pointer: coarse), (hover: none) {
[tooltip]:after {
opacity: 0;
content: "";
}
[tooltip]:hover::after {
content: attr(tooltip);
position: fixed;
top: calc(var(--mouse-y) * 100vh);
left: calc(var(--mouse-x) * 100vw);
transform: translate(var(--tooltip_x), var(--tooltip-y));
transition: opacity 0s linear 0.5s;
opacity: 1;
padding: 0px 2px;
background-color: rgba(0, 0, 0, 0.6);
pointer-events: none;
z-index: 9999999;
}
}
.context-sp {background-color: var(--context_colors_soft_prompt);} .context-sp {background-color: var(--context_colors_soft_prompt);}
.context-prompt {background-color: var(--context_colors_prompt);} .context-prompt {background-color: var(--context_colors_prompt);}
.context-wi {background-color: var(--context_colors_world_info);} .context-wi {background-color: var(--context_colors_world_info);}
@@ -2600,25 +2636,6 @@ h2 .material-icons-outlined {
} }
@media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
.horde_trigger[model_model="ReadOnly"], .horde_trigger[model_model="ReadOnly"],
.horde_trigger[model_model="CLUSTER"] { .horde_trigger[model_model="CLUSTER"] {
display: none; display: none;
@@ -2649,7 +2666,7 @@ input[type='range'] {
width: var(--flyout_menu_width); width: var(--flyout_menu_width);
} }
/*Tooltip based on attribute*/ /*Tooltip based on attribute
[tooltip] { [tooltip] {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@@ -2697,4 +2714,4 @@ input[type='range'] {
[tooltip]:hover::after, [tooltip][class*=tooltip]:hover::before { [tooltip]:hover::after, [tooltip][class*=tooltip]:hover::before {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }*/

24
static/koboldai.js
View File

@@ -2902,7 +2902,7 @@ function update_context(data) {
let tokenEl = $e("span", el, { let tokenEl = $e("span", el, {
classes: ["context-token"], classes: ["context-token"],
"token-id": tokenId === -1 ? "Soft" : tokenId, "tooltip": tokenId === -1 ? "Soft" : tokenId,
innerText: token, innerText: token,
"style.backgroundColor": tokenColor, "style.backgroundColor": tokenColor,
}); });
@@ -5040,4 +5040,24 @@ function run_infinite_scroll_update(action_type, actions, first_action) {
} }
} }
} }
document.addEventListener('mousemove', evt => {
let x = evt.clientX / innerWidth;
let y = evt.clientY / innerHeight;
var r = document.querySelector(':root');
if (x > 0.5) {
r.style.setProperty("--tooltip_x", "-100%");
} else {
r.style.setProperty("--tooltip_x", "0%");
}
if (y > 0.5) {
r.style.setProperty("--tooltip_y", "200%");
} else {
r.style.setProperty("--tooltip_y", "0%");
}
r.style.setProperty("--mouse-x", evt.clientX / innerWidth);
r.style.setProperty("--mouse-y", evt.clientY / innerHeight);
});