Hugging Face's logo

Spaces:
awacke1
/
UISpecification2CodewStreamlit
Sleeping

App Files Community
awacke1 commited on
Commit
175cf47
·
verified ·
1 Parent(s): 4a7e0e8

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +140 -0
app.py ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import streamlit as st
2
+ import streamlit.components.v1 as components
3
+
4
+ def main():
5
+ # Set the page configuration
6
+ st.set_page_config(page_title="Decks Sidebar UI from Spec", layout="wide")
7
+
8
+ # Sidebar: Deck selector and Tips & Settings links
9
+ st.sidebar.title("Decks Sidebar")
10
+
11
+ # Deck selector: simulate multiple decks
12
+ decks = ["Deck 1", "Deck 2"]
13
+ selected_deck = st.sidebar.selectbox("Select a Deck", decks)
14
+ st.sidebar.markdown(f"**Current Deck:** {selected_deck}")
15
+
16
+ # Tips and settings section in sidebar
17
+ st.sidebar.markdown("### Tips and Settings")
18
+ st.sidebar.markdown("- [Manage Decks](#)")
19
+ st.sidebar.markdown("- [Change Display Settings](#)")
20
+ st.sidebar.markdown("- [Discover Keyboard Shortcuts](#)")
21
+ st.sidebar.markdown("- [Take the Tour Again](#)")
22
+
23
+ # Main area: Header and embedded drag-and-drop columns list
24
+ st.header(f"Columns in {selected_deck}")
25
+
26
+ # HTML + JavaScript for a draggable list using SortableJS
27
+ html_code = """
28
+ <!DOCTYPE html>
29
+ <html>
30
+ <head>
31
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
32
+ <style>
33
+ body {
34
+ font-family: Arial, sans-serif;
35
+ margin: 0;
36
+ padding: 10px;
37
+ background-color: #fff;
38
+ }
39
+ .column-list {
40
+ list-style: none;
41
+ padding: 0;
42
+ }
43
+ .column-item {
44
+ padding: 10px;
45
+ margin: 5px 0;
46
+ background-color: #f0f0f0;
47
+ border: 1px solid #ccc;
48
+ cursor: grab;
49
+ position: relative;
50
+ }
51
+ .drag-handle {
52
+ position: absolute;
53
+ right: 10px;
54
+ top: 10px;
55
+ font-size: 16px;
56
+ cursor: grab;
57
+ }
58
+ .context-menu {
59
+ display: none;
60
+ position: absolute;
61
+ left: 10px;
62
+ top: 40px;
63
+ background: white;
64
+ border: 1px solid #ccc;
65
+ padding: 5px;
66
+ z-index: 100;
67
+ }
68
+ .column-item:hover .context-menu {
69
+ display: block;
70
+ }
71
+ .context-menu button {
72
+ display: block;
73
+ width: 100%;
74
+ margin: 2px 0;
75
+ padding: 4px 8px;
76
+ font-size: 12px;
77
+ cursor: pointer;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body>
82
+ <ul id="columnList" class="column-list">
83
+ <li class="column-item" data-id="1">
84
+ Column 1
85
+ <span class="drag-handle">&#9776;</span>
86
+ <div class="context-menu">
87
+ <button onclick="alert('Change Column Size')">Change Column Size</button>
88
+ <button onclick="alert('Delete Column')">Delete</button>
89
+ <button onclick="alert('Order by Top')">Order: Top</button>
90
+ <button onclick="alert('Order by Latest')">Order: Latest</button>
91
+ <button onclick="alert('Advanced Search Tools')">Advanced Search</button>
92
+ </div>
93
+ </li>
94
+ <li class="column-item" data-id="2">
95
+ Column 2
96
+ <span class="drag-handle">&#9776;</span>
97
+ <div class="context-menu">
98
+ <button onclick="alert('Change Column Size')">Change Column Size</button>
99
+ <button onclick="alert('Delete Column')">Delete</button>
100
+ <button onclick="alert('Order by Top')">Order: Top</button>
101
+ <button onclick="alert('Order by Latest')">Order: Latest</button>
102
+ <button onclick="alert('Advanced Search Tools')">Advanced Search</button>
103
+ </div>
104
+ </li>
105
+ <li class="column-item" data-id="3">
106
+ Column 3
107
+ <span class="drag-handle">&#9776;</span>
108
+ <div class="context-menu">
109
+ <button onclick="alert('Change Column Size')">Change Column Size</button>
110
+ <button onclick="alert('Delete Column')">Delete</button>
111
+ <button onclick="alert('Order by Top')">Order: Top</button>
112
+ <button onclick="alert('Order by Latest')">Order: Latest</button>
113
+ <button onclick="alert('Advanced Search Tools')">Advanced Search</button>
114
+ </div>
115
+ </li>
116
+ </ul>
117
+ <script>
118
+ var el = document.getElementById('columnList');
119
+ var sortable = Sortable.create(el, {
120
+ animation: 150,
121
+ onEnd: function (evt) {
122
+ // Capture the new order of column IDs
123
+ var order = Array.from(el.children).map(function(li) {
124
+ return li.getAttribute('data-id');
125
+ });
126
+ // For demonstration, alert the new order.
127
+ alert('New order: ' + order.join(', '));
128
+ // In a full implementation, you might send this order to your Streamlit backend via a custom message.
129
+ }
130
+ });
131
+ </script>
132
+ </body>
133
+ </html>
134
+ """
135
+
136
+ # Embed the HTML in the main area (adjust height as needed)
137
+ components.html(html_code, height=400, scrolling=True)
138
+
139
+ if __name__ == '__main__':
140
+ main()