File size: 5,268 Bytes
175cf47 |
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 |
import streamlit as st
import streamlit.components.v1 as components
def main():
# Set the page configuration
st.set_page_config(page_title="Decks Sidebar UI from Spec", layout="wide")
# Sidebar: Deck selector and Tips & Settings links
st.sidebar.title("Decks Sidebar")
# Deck selector: simulate multiple decks
decks = ["Deck 1", "Deck 2"]
selected_deck = st.sidebar.selectbox("Select a Deck", decks)
st.sidebar.markdown(f"**Current Deck:** {selected_deck}")
# Tips and settings section in sidebar
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](#)")
# Main area: Header and embedded drag-and-drop columns list
st.header(f"Columns in {selected_deck}")
# HTML + JavaScript for a draggable list using SortableJS
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>
"""
# Embed the HTML in the main area (adjust height as needed)
components.html(html_code, height=400, scrolling=True)
if __name__ == '__main__':
main()
|