From 58712a98cfa4a3ab0d69a973cfe25874e4e86af4 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Tue, 1 Jun 2021 21:25:59 +0200
Subject: [PATCH] Add empty access button group
---
uhepp-js/src/components/AccessButtonGroup.jsx | 43 +++++++++++++++++++
uhepp-js/src/components/Dashboard.jsx | 6 ++-
2 files changed, 47 insertions(+), 2 deletions(-)
create mode 100644 uhepp-js/src/components/AccessButtonGroup.jsx
diff --git a/uhepp-js/src/components/AccessButtonGroup.jsx b/uhepp-js/src/components/AccessButtonGroup.jsx
new file mode 100644
index 0000000..1a80f2f
--- /dev/null
+++ b/uhepp-js/src/components/AccessButtonGroup.jsx
@@ -0,0 +1,43 @@
+
+import React from "react"
+
+/**
+ * The AccessButtonGroup component provides quick access to the plot
+ *
+ * The AccessButtonGroup renders as a Bootstrap button group with different
+ * access methods, e.g., direct download as an image or as json, API access
+ * snippets or command-line tool shippets. The component is reactive and
+ * reduces to a burger menu on small screens.
+ */
+const AccessButtonGroup = ({uuid, collection_id}) => (
+<div className="ml-auto btn-group btn-group-sm access-menu">
+ <div className="btn-group btn-group-sm dropdown">
+ <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
+ Direct download
+ </button>
+ <div className="dropdown-menu dropdown-menu-right p-4 shadow">
+
+ </div>
+ </div>
+
+ <div className="btn-group btn-group-sm dropdown">
+ <button className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
+ API Access
+ </button>
+ <div className="dropdown-menu dropdown-menu-right p-4 shadow">
+
+ </div>
+ </div>
+
+ <div className="btn-group btn-group-sm dropdown">
+ <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
+ CLI tool
+ </button>
+ <div className="dropdown-menu dropdown-menu-right p-4 shadow">
+
+ </div>
+ </div>
+</div>
+)
+
+export default AccessButtonGroup
diff --git a/uhepp-js/src/components/Dashboard.jsx b/uhepp-js/src/components/Dashboard.jsx
index 196773e..067abed 100644
--- a/uhepp-js/src/components/Dashboard.jsx
+++ b/uhepp-js/src/components/Dashboard.jsx
@@ -1,6 +1,7 @@
import React from "react"
import VisibilityIcon from "./VisibilityIcon.jsx"
+import AccessButtonGroup from "./AccessButtonGroup.jsx"
import Breadcrumbs from "./Breadcrumbs.jsx"
import ViewDate from "./ViewDate.jsx"
import Uhepp from "./Uhepp.jsx"
@@ -23,8 +24,9 @@ const Dashboard = ({title, visibility, breadcrumbs, viewdate, uuid}) => (
<div className="col-md-6 col-lg-7">
<Breadcrumbs content={breadcrumbs} />
- <h1 className="mb-0">
- { title } <VisibilityIcon level={visibility} />
+ <h1 className="mb-0 controls-head">
+ <span>{ title } <VisibilityIcon level={visibility} /></span>
+ <span><AccessButtonGroup /></span>
</h1>
<ViewDate data={viewdate} />
--
GitLab