Spaces:
Sleeping
Sleeping
File size: 5,591 Bytes
0efb4de |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
from typing import Literal
import streamlit as st
from streamlit.components.v1 import html
"""
st_fixed_container consist of two parts - fixed container and opaque container.
Fixed container is a container that is fixed to the top or bottom of the screen.
When transparent is set to True, the container is typical `st.container`, which is transparent by default.
When transparent is set to False, the container is custom opaque_container, that updates its background color to match the background color of the app.
Opaque container is a helper class, but can be used to create more custom views. See main for examples.
"""
OPAQUE_CONTAINER_CSS = """
:root {{
--background-color: #ffffff; /* Default background color */
}}
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.opaque-container-{id}):not(:has(div.not-opaque-container)) div[data-testid="stVerticalBlock"]:has(div.opaque-container-{id}):not(:has(div.not-opaque-container)) > div[data-testid="stVerticalBlockBorderWrapper"] {{
background-color: var(--background-color);
width: 100%;
}}
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.opaque-container-{id}):not(:has(div.not-opaque-container)) div[data-testid="stVerticalBlock"]:has(div.opaque-container-{id}):not(:has(div.not-opaque-container)) > div[data-testid="element-container"] {{
display: none;
}}
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.not-opaque-container):not(:has(div[class^='opaque-container-'])) {{
display: none;
}}
""".strip()
OPAQUE_CONTAINER_JS = """
const root = parent.document.querySelector('.stApp');
let lastBackgroundColor = null;
function updateContainerBackground(currentBackground) {
parent.document.documentElement.style.setProperty('--background-color', currentBackground);
;
}
function checkForBackgroundColorChange() {
const style = window.getComputedStyle(root);
const currentBackgroundColor = style.backgroundColor;
if (currentBackgroundColor !== lastBackgroundColor) {
lastBackgroundColor = currentBackgroundColor; // Update the last known value
updateContainerBackground(lastBackgroundColor);
}
}
const observerCallback = (mutationsList, observer) => {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes' && (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
checkForBackgroundColorChange();
}
}
};
const main = () => {
checkForBackgroundColorChange();
const observer = new MutationObserver(observerCallback);
observer.observe(root, { attributes: true, childList: false, subtree: false });
}
// main();
document.addEventListener("DOMContentLoaded", main);
""".strip()
def st_opaque_container(
*,
height: int | None = None,
border: bool | None = None,
key: str | None = None,
):
global opaque_counter
opaque_container = st.container()
non_opaque_container = st.container()
css = OPAQUE_CONTAINER_CSS.format(id=key)
with opaque_container:
html(f"<script>{OPAQUE_CONTAINER_JS}</script>", scrolling=False, height=0)
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
st.markdown(
f"<div class='opaque-container-{key}'></div>",
unsafe_allow_html=True,
)
with non_opaque_container:
st.markdown(
f"<div class='not-opaque-container'></div>",
unsafe_allow_html=True,
)
return opaque_container.container(height=height, border=border)
FIXED_CONTAINER_CSS = """
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)){{
background-color: transparent;
position: {mode};
width: inherit;
background-color: inherit;
{position}: {margin};
z-index: 999;
}}
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) div[data-testid="stVerticalBlock"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) > div[data-testid="element-container"] {{
display: none;
}}
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.not-fixed-container):not(:has(div[class^='fixed-container-'])) {{
display: none;
}}
""".strip()
MARGINS = {
"top": "0",
"bottom": "0",
}
def st_fixed_container(
*,
height: int | None = None,
border: bool | None = None,
mode: Literal["fixed", "sticky"] = "fixed",
position: Literal["top", "bottom"] = "top",
margin: str | None = None,
transparent: bool = False,
key: str | None = None,
):
if margin is None:
margin = MARGINS[position]
global fixed_counter
fixed_container = st.container()
non_fixed_container = st.container()
css = FIXED_CONTAINER_CSS.format(
mode=mode,
position=position,
margin=margin,
id=key,
)
with fixed_container:
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
st.markdown(
f"<div class='fixed-container-{key}'></div>",
unsafe_allow_html=True,
)
with non_fixed_container:
st.markdown(
f"<div class='not-fixed-container'></div>",
unsafe_allow_html=True,
)
with fixed_container:
if transparent:
return st.container(height=height, border=border)
return st_opaque_container(height=height, border=border, key=f"opaque_{key}")
|