Skip to content

Commit 73c295d

Browse files
author
yyyxam
committed
extracted buttons to their respective components
1 parent 8cd60d9 commit 73c295d

File tree

6 files changed

+162
-164
lines changed

6 files changed

+162
-164
lines changed

‎src/app.py

Lines changed: 10 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -101,90 +101,19 @@
101101

102102

103103

104-
105-
106-
107-
108-
# -----------------
109-
# Left SIDEBAR content
110-
menu = upload.sidebar
111-
112-
# Right SIDEBAR (default) content
113-
r_content = settings.sidebar
114-
115-
116-
117-
# --------------------------
118-
# Filling offcanvasses with respective content
119-
120-
# TODO: put canvases in components too
121-
122-
# Left SIDEBAR
123-
side_l = html.Div([
124-
dbc.Offcanvas(menu, id="offcanvas-l", is_open=True, scrollable=True, backdrop=False,
125-
style={'width': '12rem', 'margin-top': '3rem', 'left': '0', 'border-top-right-radius': '5px',
126-
'border-bottom-right-radius': '5px',
127-
'height': 'min-content',
128-
'box-shadow': 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px',
129-
}
130-
)
131-
])
132-
133-
# Right SIDEBAR
134-
side_r = html.Div([
135-
dbc.Offcanvas(r_content, id="offcanvas-r-sc", is_open=False,
136-
style={'width': '9rem', 'height': 'min-content',
137-
'margin-top': '3em',
138-
'margin-right': '0', 'border-top-left-radius': '5px', 'border-bottom-left-radius': '5px',
139-
'box-shadow': 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px', },
140-
scrollable=True, backdrop=False, placement='end'),
141-
])
142-
143-
# Bottom BAR
144-
bot = html.Div([dbc.Offcanvas(footer.bar, id="offcanvas-bot", is_open=False,
145-
style={'height': 'min-content', 'width': 'max-content', 'border-radius': '5px',
146-
'background-color': 'rgba(248, 249, 250, 1)',
147-
'left': '0',
148-
'right': '0',
149-
'margin': 'auto',
150-
'bottom': '0.5em',
151-
'box-shadow': 'rgba(0, 0, 0, 0.3) 0px 0px 16px -8px',
152-
'padding': -30
153-
},
154-
scrollable=True, backdrop=False, placement='bottom')])
155-
156-
# button to open bottom bar
157-
bot_button = html.Div(dbc.Offcanvas([
158-
159-
dbc.Row(
160-
dbc.Col(dbc.Button(html.P("Energy / Density of State",
161-
style={"line-height": "0.65em", "font-size": "0.65em"}),
162-
id="open-bot", style={
163-
"width": "10em",
164-
"height": "1.2em",
165-
"position": "absolute",
166-
"left": "50%",
167-
"-webkit-transform": "translateX(-50%)",
168-
"transform": "translateX(-50%)",
169-
'bottom': '0.5em'
170-
}, n_clicks=0), width=1)
171-
, )
172-
173-
], id="open-bot-canv", style={'height': 'min-content',
174-
'background-color': 'rgba(0, 0, 0, 0)', 'border': '0'},
175-
is_open=False, scrollable=True, backdrop=False, close_button=False, placement='bottom')
176-
)
177-
178104
# ---------------------------------
179105
# Plots for the created Figures
180106

181107
skel_layout = [dbc.Row([
182108
dbc.Col(
183109
[
184-
side_l,
185-
dbc.Button(">", id="open-offcanvas-l", n_clicks=0,
186-
style={'margin-top': '40vh', 'position': 'absolute', 'left': '0'}),
187-
bot_button, bot
110+
# Upload Sidebar Off-Canvas
111+
upload.oc_sidebar,
112+
upload.button,
113+
114+
# Bottom-Bar Off-Canvas
115+
footer.oc_bar,
116+
footer.button
188117
# it doesn't matter where offcanvasses are placed here - only their "placement"-prop matters
189118
],
190119
id="l0", width='auto'),
@@ -193,9 +122,8 @@
193122

194123
dbc.Col(
195124
[
196-
side_r,
197-
dbc.Button("<", id="open-settings", n_clicks=0,
198-
style={'visibility': 'hidden', 'margin-top': '40vh', 'position': 'absolute', 'right': '0'}),
125+
settings.oc_sidebar,
126+
settings.button
199127
],
200128
id="r0", width='auto')
201129

@@ -1342,7 +1270,7 @@ def toggle_settings_button(state):
13421270
# toggle canvas
13431271
@app.callback( # sidebar_l canvas
13441272
Output("offcanvas-l", "is_open"),
1345-
Input("open-offcanvas-l", "n_clicks"),
1273+
Input("open-upload-oc", "n_clicks"),
13461274
[State("offcanvas-l", "is_open")],
13471275
prevent_initial_call=True
13481276
)

‎src/components/footer.py

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,32 @@
44
'''
55
Everything to do with the bottom-side off-canvas, displaying a table of Energies and DoS-Plot
66
'''
7+
'''
8+
Button for opening Footer / Bottom bar
9+
'''
10+
button = html.Div(dbc.Offcanvas([
11+
12+
dbc.Row(
13+
dbc.Col(dbc.Button(html.P("Energy / Density of State",
14+
style={"line-height": "0.65em", "font-size": "0.65em"}),
15+
id="open-bot", style={
16+
"width": "10em",
17+
"height": "1.2em",
18+
"position": "absolute",
19+
"left": "50%",
20+
"-webkit-transform": "translateX(-50%)",
21+
"transform": "translateX(-50%)",
22+
'bottom': '0.5em'
23+
}, n_clicks=0), width=1))
24+
25+
], id="open-bot-canv", style={'height': 'min-content',
26+
'background-color': 'rgba(0, 0, 0, 0)', 'border': '0'},
27+
is_open=False, scrollable=True, backdrop=False, close_button=False, placement='bottom')
28+
)
729

8-
# TABLES
9-
# Energy table
30+
'''
31+
Energy Table
32+
'''
1033
row1 = html.Tr([html.Td("Band energy", style={'text-align': 'center', 'padding': 3, 'font-size': '0.85em'})],
1134
style={"font-weight": "bold"})
1235
row2 = html.Tr([html.Td(0, id="bandEn", style={'text-align': 'right', 'padding': 5, 'font-size': '0.85em'})])
@@ -21,7 +44,9 @@
2144

2245
table = dbc.Table(table_body, bordered=True, striped=True, style={'padding': 0, 'margin': 0})
2346

24-
47+
'''
48+
Structuring bottom bar content
49+
'''
2550
bar = dbc.Container([
2651
dbc.Row([
2752
dbc.Col(dbc.Card(dbc.CardBody(table)), width='auto'),
@@ -31,4 +56,20 @@
3156
])), width='auto', align='center'),
3257
], style={'height': 'min-content', 'padding': 0}, justify='center')
3358

34-
])
59+
])
60+
61+
62+
'''
63+
Inserting bottom bar content into Off-Canvas
64+
'''
65+
oc_bar = html.Div([dbc.Offcanvas(bar, id="offcanvas-bot", is_open=False,
66+
style={'height': 'min-content', 'width': 'max-content', 'border-radius': '5px',
67+
'background-color': 'rgba(248, 249, 250, 1)',
68+
'left': '0',
69+
'right': '0',
70+
'margin': 'auto',
71+
'bottom': '0.5em',
72+
'box-shadow': 'rgba(0, 0, 0, 0.3) 0px 0px 16px -8px',
73+
'padding': -30
74+
},
75+
scrollable=True, backdrop=False, placement='bottom')])

‎src/components/main.py

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,20 +75,11 @@
7575
hoverinfo='skip'))
7676

7777

78-
# Orientational Plots
79-
'''
80-
Default Plot for orientation
81-
(could be integrated into the "main-card" at some point)
82-
'''
83-
orient_plot = dcc.Graph(id="orientation", responsive=True, figure=orient_fig, style=orientation_style,
84-
config={'displayModeBar': False, 'displaylogo': False})
85-
8678
# The actual Plot
8779
'''
8880
STORE Variable & Card for the main plot
8981
'''
9082
plot = [
91-
9283
dcc.Store(id="cam_store"),
9384

9485
dbc.Card(dbc.CardBody(
@@ -208,7 +199,9 @@
208199
]
209200

210201

211-
# Landing-cell
202+
'''
203+
Content for landing-page
204+
'''
212205
landing = html.Div([
213206
html.Div([html.H1([' '.join('Welcome')], className='greetings'),
214207
html.H1([' '.join('To')], className='greetings'),

‎src/components/misc.py

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/components/settings.py

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@
22
import dash_bootstrap_components as dbc
33

44
'''
5-
Structure/Layout of the Settings sidebar
5+
Button for opening settings sidebar
66
'''
7+
button = dbc.Button("<", id="open-settings", style={'visibility': 'hidden', 'margin-top': '40vh',
8+
'position': 'absolute', 'right': '0'})
79

10+
'''
11+
Structure/Layout of the Settings sidebar
12+
'''
813
sidebar = html.Div(
914
[
1015
html.H5("Settings"),
@@ -40,4 +45,17 @@
4045
style={"width": "7em", 'margin-left': '1.5rem'}, size="sm"),
4146

4247
]
43-
))], style={'text-align': 'center'})
48+
))], style={'text-align': 'center'})
49+
50+
51+
'''
52+
Inserting sidebar into Off-Canvas
53+
'''
54+
oc_sidebar = html.Div([
55+
dbc.Offcanvas(sidebar, id="offcanvas-r-sc", is_open=False,
56+
style={'width': '9rem', 'height': 'min-content',
57+
'margin-top': '3em',
58+
'margin-right': '0', 'border-top-left-radius': '5px', 'border-bottom-left-radius': '5px',
59+
'box-shadow': 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px', },
60+
scrollable=True, backdrop=False, placement='end'),
61+
])

0 commit comments

Comments
 (0)