Update control bar datadoc (#248)

* Update components ok * Add css * Update input width * Add label and update css
statisticsnorway · Mar 26, 2024 · d15fea3 · d15fea3
1 parent 4aedd16
commit d15fea3
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 42 deletions.
diff --git a/src/datadoc/assets/control_bar_style.css b/src/datadoc/assets/control_bar_style.css
@@ -0,0 +1,16 @@
+.control-bar-section{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 1rem 0;
+    align-items: center;
+}
+
+.ssb-input.file-path-input{
+    max-width: 1000px;
+    width: 100%;
+}
+
+.ssb-btn.secondary-btn.file-open-button,.ssb-btn.secondary-btn.file-save-button{
+    margin-top: 0.5rem;
+}
diff --git a/src/datadoc/frontend/components/control_bars.py b/src/datadoc/frontend/components/control_bars.py
@@ -3,13 +3,13 @@
 from __future__ import annotations
 
 import dash_bootstrap_components as dbc
+import ssb_dash_components as ssb
 from dash import dcc
 from dash import html
 
 from datadoc import state
 from datadoc.enums import SupportedLanguages
 from datadoc.frontend.callbacks.utils import get_dataset_path
-from datadoc.frontend.components.builders import build_ssb_button
 from datadoc.utils import get_app_version
 
 COLORS = {"dark_1": "#F0F8F9", "green_1": "#ECFEED", "green_4": "#00824D"}
@@ -58,54 +58,32 @@ def build_language_dropdown() -> dbc.Row:
     )
 
 
-def build_controls_bar() -> dbc.CardBody:
+def build_controls_bar() -> html.Section:
     """Build the Controls Bar.
 
     This contains:
     - A text input to specify the path to a dataset
     - A button to open a dataset
     - A button to save metadata to disk
     """
-    return dbc.CardBody(
-        children=[
-            dbc.Row(
-                [
-                    dbc.Col(
-                        dbc.Row(
-                            [
-                                dbc.Col(
-                                    dcc.Input(
-                                        value=get_dataset_path(),
-                                        size="50",
-                                        placeholder="Sti til datasettet f.eks 'gs://my-bucket/my-dataset.parquet'",
-                                        id="dataset-path-input",
-                                    ),
-                                    align="center",
-                                    width="auto",
-                                ),
-                                dbc.Col(
-                                    build_ssb_button(
-                                        text="Åpne fil",
-                                        icon_class="bi bi-folder2-open",
-                                        button_id="open-button",
-                                    ),
-                                    width=2,
-                                ),
-                            ],
-                        ),
-                        width=6,
-                    ),
-                    dbc.Col(),
-                    dbc.Col(
-                        build_ssb_button(
-                            text="Lagre metadata",
-                            icon_class="bi bi-save",
-                            button_id="save-button",
-                        ),
-                        width=2,
-                    ),
-                ],
-                justify="between",
+    return html.Section(
+        [
+            ssb.Input(
+                label="Filsti",
+                value=get_dataset_path(),
+                className="file-path-input",
+                id="dataset-path-input",
+            ),
+            ssb.Button(
+                children=["Åpne fil"],
+                id="open-button",
+                className="file-open-button",
+            ),
+            ssb.Button(
+                children=["Lagre metadata"],
+                id="save-button",
+                className="file-save-button",
             ),
         ],
+        className="control-bar-section",
     )