Info Box Optik angepasst

citation_parser_ui.py

@@ -29,10 +29,19 @@ f.close()
 
 app.layout = html.Div([
     # Layer 0: For the Header and Help Function(s)
-    html.Div([
-        dbc.Button(id='show-info',children='Show Info',n_clicks=0, color="primary", className="me-1"),
-        html.Div(id='info-box')
-    ]),
+    dbc.Button(
+            'show Info',
+            id='collapse-button',
+            className="me-1",
+            color="primary",
+            n_clicks=0,
+        ),
+        dbc.Collapse(
+            dbc.Card(dbc.CardBody(html.Div(boxcontent, style={'whiteSpace': 'pre-line'}))),
+            id='collapse',
+            is_open=False,
+        ),
+
     # Layer 1: For all mandatory Inputs
     html.Div([
         "Input: ",
@@ -60,7 +69,7 @@ app.layout = html.Div([
             id="upload-data",
             children=html.Div(
             #Drag and drop or click to select a file to upload
-                ["Drag and drop to upload"]),
+                ["Drag and drop"]),
             style={
                 "width": "30%",
                 "height": "60px",
@@ -82,13 +91,10 @@ app.layout = html.Div([
         # Displays error message if 'Smart Input' is active.
         html.Div(id='input-err',style={'color':'red'}),
         # Clears the entire list.
-        #html.Button(id='clear-all-button',children='Clear All'),
         dbc.Button(id='clear-all-button',children='Clear All', color="primary", className="me-1"),
         # Clear all selected elements.
-        #html.Button(id='clear-selected-button',children='Clear Selected'),
         dbc.Button(id='clear-selected-button',children='Clear Selected', color="primary", className="me-1"),
         # Starts the process that generates a graph.
-        #html.Button(id='start-button',children='Generate Graph')
         dbc.Button(id='start-button',children='Generate Graph', color="primary", className="me-1")
     ]),
     # Layer 3: For additional Options (e.g. Topological Sort)
@@ -219,21 +225,23 @@ def update_input_checklist(input_value,btn1,btn2,filecontents,all_inputs,
     if input_value == '':
         return list(),list(),'',''
 
+
 @app.callback(
-    Output('info-box','children'),
-    Input('show-info','n_clicks')
+    Output('collapse', 'is_open'),
+    [Input('collapse-button', 'n_clicks')],
+    [State('collapse', 'is_open')],
 )
-def show_hide_info_box(n_clicks):
+def toggle_collapse(n, is_open):
     '''
-    This callback shows and hides the (first) info-box by, checking how often 
+    This callback shows and hides the (first) info-box by, checking how# often
     the button has been pressed. The text was loaded at the top.
     :param n_clicks: number of times show-info has been clicked.
     'type n_clicks: int
     '''
-    if n_clicks % 2 == 0:
-        return ''
-    else:
-        return html.Div(boxcontent, style={'whiteSpace': 'pre-line'})
+    if n:
+        return not is_open
+    return is_open
+
 
 @app.callback(
     Output('test-output','children'),