mirror of
https://github.com/livebook-dev/livebook.git
synced 2024-12-27 09:53:08 +08:00
a104d9d73b
* Display the time in seconds Show the evaluation time next to the cell indicator * Test session data * Send evaluation time to session Start the evaluation time inside the evaluator, display the time in seconds or milliseconds. The output is not a string but a map * Add metadata to evaluation_response * Wrap the evaluation indicator in a tooltip • Add metadata argument to the evaluation_response message • Use a tooltip to display the evaluation time * Display the toolip below the indicator * Remove the evaluation start time * Make the tooltip optional * Rename finish_cell_evaluation * Evaluator tests * Update test to accespt metadata * Pass the evaluated time as a third argument * Make status tooltip more generic Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
140 lines
2.7 KiB
CSS
140 lines
2.7 KiB
CSS
/* Tooltips */
|
|
|
|
/*
|
|
Example usage:
|
|
|
|
<span class="tooltip top" aria-label="Delete">
|
|
...
|
|
</span>
|
|
*/
|
|
|
|
/* Tooltip element wrapping the actual hoverable element */
|
|
.tooltip {
|
|
position: relative;
|
|
display: flex;
|
|
--distance: 4px;
|
|
--arrow-size: 5px;
|
|
--show-delay: 0.5s;
|
|
}
|
|
|
|
.tooltip.distant {
|
|
--distance: 28px;
|
|
}
|
|
|
|
.tooltip.distant-medium {
|
|
--distance: 10px;
|
|
}
|
|
|
|
/* Tooltip text */
|
|
.tooltip:before {
|
|
position: absolute;
|
|
content: attr(aria-label);
|
|
white-space: pre;
|
|
text-align: center;
|
|
display: block;
|
|
background-color: #1c273c;
|
|
color: #f0f5f9;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
padding: 3px 12px;
|
|
z-index: 100;
|
|
visibility: hidden;
|
|
transition-property: visibility;
|
|
transition-duration: 0s;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
/* Tooltip arrow */
|
|
.tooltip:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
/* For the arrow we use the triangle trick: https://css-tricks.com/snippets/css/css-triangle/ */
|
|
border-width: var(--arrow-size);
|
|
border-style: solid;
|
|
border-color: #1c273c;
|
|
visibility: hidden;
|
|
transition-property: visibility;
|
|
transition-duration: 0s;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.tooltip:hover:before {
|
|
visibility: visible;
|
|
transition-delay: var(--show-delay);
|
|
}
|
|
|
|
.tooltip:hover:after {
|
|
visibility: visible;
|
|
transition-delay: var(--show-delay);
|
|
}
|
|
|
|
/*
|
|
Note: we let the arrow and content overlap 1px,
|
|
othrwise there's a tiny space between them.
|
|
*/
|
|
|
|
.tooltip.top:before {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(1px - var(--arrow-size) - var(--distance)));
|
|
}
|
|
|
|
.tooltip.top:after {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(0px - var(--distance)));
|
|
|
|
border-bottom: none;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.tooltip.bottom:before {
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(var(--arrow-size) - 1px + var(--distance)));
|
|
}
|
|
|
|
.tooltip.bottom:after {
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, var(--distance));
|
|
|
|
border-top: none;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.tooltip.right:before {
|
|
top: 50%;
|
|
left: 100%;
|
|
transform: translate(calc(var(--arrow-size) - 1px + var(--distance)), -50%);
|
|
}
|
|
|
|
.tooltip.right:after {
|
|
top: 50%;
|
|
left: 100%;
|
|
transform: translate(var(--distance), -50%);
|
|
|
|
border-left: none;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.tooltip.left:before {
|
|
top: 50%;
|
|
right: 100%;
|
|
transform: translate(calc(1px - var(--arrow-size) - var(--distance)), -50%);
|
|
}
|
|
|
|
.tooltip.left:after {
|
|
top: 50%;
|
|
right: 100%;
|
|
transform: translate(calc(0px - var(--distance)), -50%);
|
|
|
|
border-right: none;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|