|
|
import streamlit as st |
|
|
import streamlit.components.v1 as components |
|
|
|
|
|
def main(): |
|
|
|
|
|
st.set_page_config(page_title="Decks Sidebar UI from Spec", layout="wide") |
|
|
|
|
|
|
|
|
st.sidebar.title("Decks Sidebar") |
|
|
|
|
|
|
|
|
decks = ["Deck 1", "Deck 2"] |
|
|
selected_deck = st.sidebar.selectbox("Select a Deck", decks) |
|
|
st.sidebar.markdown(f"**Current Deck:** {selected_deck}") |
|
|
|
|
|
|
|
|
st.sidebar.markdown("### Tips and Settings") |
|
|
st.sidebar.markdown("- [Manage Decks](#)") |
|
|
st.sidebar.markdown("- [Change Display Settings](#)") |
|
|
st.sidebar.markdown("- [Discover Keyboard Shortcuts](#)") |
|
|
st.sidebar.markdown("- [Take the Tour Again](#)") |
|
|
|
|
|
|
|
|
st.header(f"Columns in {selected_deck}") |
|
|
|
|
|
|
|
|
html_code = """ |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 10px; |
|
|
background-color: #fff; |
|
|
} |
|
|
.column-list { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
} |
|
|
.column-item { |
|
|
padding: 10px; |
|
|
margin: 5px 0; |
|
|
background-color: #f0f0f0; |
|
|
border: 1px solid #ccc; |
|
|
cursor: grab; |
|
|
position: relative; |
|
|
} |
|
|
.drag-handle { |
|
|
position: absolute; |
|
|
right: 10px; |
|
|
top: 10px; |
|
|
font-size: 16px; |
|
|
cursor: grab; |
|
|
} |
|
|
.context-menu { |
|
|
display: none; |
|
|
position: absolute; |
|
|
left: 10px; |
|
|
top: 40px; |
|
|
background: white; |
|
|
border: 1px solid #ccc; |
|
|
padding: 5px; |
|
|
z-index: 100; |
|
|
} |
|
|
.column-item:hover .context-menu { |
|
|
display: block; |
|
|
} |
|
|
.context-menu button { |
|
|
display: block; |
|
|
width: 100%; |
|
|
margin: 2px 0; |
|
|
padding: 4px 8px; |
|
|
font-size: 12px; |
|
|
cursor: pointer; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<ul id="columnList" class="column-list"> |
|
|
<li class="column-item" data-id="1"> |
|
|
Column 1 |
|
|
<span class="drag-handle">☰</span> |
|
|
<div class="context-menu"> |
|
|
<button onclick="alert('Change Column Size')">Change Column Size</button> |
|
|
<button onclick="alert('Delete Column')">Delete</button> |
|
|
<button onclick="alert('Order by Top')">Order: Top</button> |
|
|
<button onclick="alert('Order by Latest')">Order: Latest</button> |
|
|
<button onclick="alert('Advanced Search Tools')">Advanced Search</button> |
|
|
</div> |
|
|
</li> |
|
|
<li class="column-item" data-id="2"> |
|
|
Column 2 |
|
|
<span class="drag-handle">☰</span> |
|
|
<div class="context-menu"> |
|
|
<button onclick="alert('Change Column Size')">Change Column Size</button> |
|
|
<button onclick="alert('Delete Column')">Delete</button> |
|
|
<button onclick="alert('Order by Top')">Order: Top</button> |
|
|
<button onclick="alert('Order by Latest')">Order: Latest</button> |
|
|
<button onclick="alert('Advanced Search Tools')">Advanced Search</button> |
|
|
</div> |
|
|
</li> |
|
|
<li class="column-item" data-id="3"> |
|
|
Column 3 |
|
|
<span class="drag-handle">☰</span> |
|
|
<div class="context-menu"> |
|
|
<button onclick="alert('Change Column Size')">Change Column Size</button> |
|
|
<button onclick="alert('Delete Column')">Delete</button> |
|
|
<button onclick="alert('Order by Top')">Order: Top</button> |
|
|
<button onclick="alert('Order by Latest')">Order: Latest</button> |
|
|
<button onclick="alert('Advanced Search Tools')">Advanced Search</button> |
|
|
</div> |
|
|
</li> |
|
|
</ul> |
|
|
<script> |
|
|
var el = document.getElementById('columnList'); |
|
|
var sortable = Sortable.create(el, { |
|
|
animation: 150, |
|
|
onEnd: function (evt) { |
|
|
// Capture the new order of column IDs |
|
|
var order = Array.from(el.children).map(function(li) { |
|
|
return li.getAttribute('data-id'); |
|
|
}); |
|
|
// For demonstration, alert the new order. |
|
|
alert('New order: ' + order.join(', ')); |
|
|
// In a full implementation, you might send this order to your Streamlit backend via a custom message. |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
|
|
|
components.html(html_code, height=400, scrolling=True) |
|
|
|
|
|
if __name__ == '__main__': |
|
|
main() |
|
|
|
