From fe894e979b2b76dab2e62b48c0ef93abb5654591 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Wed, 19 May 2021 22:49:03 +0200
Subject: [PATCH] Add Caption component
---
uhepp-js/src/common.scss | 15 ++++++
uhepp-js/src/components/Caption.jsx | 46 +++++++++++++++++++
.../templates/uhepp_vault/plot_detail.html | 12 +----
3 files changed, 62 insertions(+), 11 deletions(-)
create mode 100644 uhepp-js/src/components/Caption.jsx
diff --git a/uhepp-js/src/common.scss b/uhepp-js/src/common.scss
index 6b80eb2..c44fad1 100644
--- a/uhepp-js/src/common.scss
+++ b/uhepp-js/src/common.scss
@@ -152,3 +152,18 @@ body {
.alert-success {
border-color: theme-color("success");
}
+
+
+.plot-caption {
+ cursor: pointer;
+ justify-content: space-between;
+ display: flex;
+}
+
+.plot-caption .pen{
+ visibility: hidden;
+}
+
+.plot-caption:hover .pen{
+ visibility: visible;
+}
diff --git a/uhepp-js/src/components/Caption.jsx b/uhepp-js/src/components/Caption.jsx
new file mode 100644
index 0000000..73d7d6a
--- /dev/null
+++ b/uhepp-js/src/components/Caption.jsx
@@ -0,0 +1,46 @@
+
+import React, { useState } from "react";
+
+const Caption = ({editable, comment}) => {
+ const [editMode, setEditMode] = useState(false)
+ const [cmt, setCmt] = useState(comment)
+
+ const updateComment = (e) => {
+ if (editable) {
+ const comment = e.target.value;
+ setCmt(comment)
+ }
+ }
+
+ const softLeave = () => {
+ if (comment == cmt) {
+ setEditMode(false)
+ }
+ }
+
+ const handleClick = () => {
+ if (editable) {
+ setEditMode(true)
+ }
+ }
+
+ if (editMode) {
+ return (<form method="post" className="my-2 d-flex">
+ <textarea name="comment" cols="40" autoFocus className="textarea form-control"
+ onBlur={() => softLeave()}
+ id="id_comment" rows="2" value={cmt} onChange={e => updateComment(e)} />
+ <div>
+ <button type="submit" className="btn btn-outline-secondary ml-1">
+ <i className="fas fa-save"></i>
+ </button>
+ </div>
+ </form>)
+ } else {
+ return <div className="plot-caption mx-5" onClick={() => handleClick()}>
+ <p>{comment}</p>
+ <i className="fas fa-pen m-1 pen text-muted"></i>
+ </div>
+ }
+}
+
+export default Caption
diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
index 50d470f..9745177 100644
--- a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
+++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
@@ -41,7 +41,7 @@
</div>
-<div class="d-flex">
+<div class="d-flex align-items-center">
<span class="d-none d-md-inline">UUID: {{ plot.uuid }}</span>
<div class="ml-auto btn-group btn-group-sm access-menu">
<div class="btn-group btn-group-sm dropdown">
@@ -125,16 +125,6 @@ uhepp push {{ plot.collection.pk }} local_file.json</pre>
</div>
</div>
-<form method="POST" class="m-1 d-flex">
- <textarea name="comment" cols="40" class="textarea form-control" id="id_comment" rows="2"></textarea>
- <div>
- <button class="btn btn-outline-secondary">
- <i class="fas fa-save"></i>
- </button>
- </div>
-</form>
-
-
<div id="app-root">
<div class="d-flex justify-content-center my-5">
<div class="spinner-border text-primary" role="status">
--
GitLab