From fd33e29e313d6bcb5f10de50851439fcd4709141 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Fri, 1 Mar 2019 10:19:14 +0000
Subject: [PATCH] move open submission in a new tab link to the status tab
---
.../src/components/SubmissionLink/index.js | 23 +++++++++++++++++
.../src/components/SubmissionLink/styles.scss | 25 +++++++++++++++++++
.../app/src/containers/DisplayPanel/index.js | 8 +++---
3 files changed, 51 insertions(+), 5 deletions(-)
create mode 100644 opentech/static_src/src/app/src/components/SubmissionLink/index.js
create mode 100644 opentech/static_src/src/app/src/components/SubmissionLink/styles.scss
diff --git a/opentech/static_src/src/app/src/components/SubmissionLink/index.js b/opentech/static_src/src/app/src/components/SubmissionLink/index.js
new file mode 100644
index 000000000..ca098fe29
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/SubmissionLink/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './styles.scss';
+
+const SubmissionLink = ({ submissionID }) => {
+ const submissionLink = `/apply/submissions/${submissionID}/`;
+
+ return (
+ <div className="submission-link">
+ <a target="_blank" rel="noopener noreferrer" href={submissionLink}>
+ Open in new tab
+ <svg><use xlinkHref="#open-in-new-tab"></use></svg>
+ </a>
+ </div>
+ )
+}
+
+SubmissionLink.propTypes = {
+ submissionID: PropTypes.number,
+}
+
+export default SubmissionLink;
diff --git a/opentech/static_src/src/app/src/components/SubmissionLink/styles.scss b/opentech/static_src/src/app/src/components/SubmissionLink/styles.scss
new file mode 100644
index 000000000..7fa5ae583
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/SubmissionLink/styles.scss
@@ -0,0 +1,25 @@
+.submission-link {
+ border-top: 1px solid $color--light-mid-grey;
+ margin: 0 20px;
+ padding: 20px 0;
+
+ a {
+ display: inline-flex;
+ align-items: center;
+ font-weight: $weight--semibold;
+ transition: border $transition;
+ border-bottom: 1px solid transparent;
+
+ &:focus,
+ &:hover {
+ border-bottom: 1px solid $color--primary;
+ }
+ }
+
+ svg {
+ width: 18px;
+ height: 18px;
+ margin-left: 5px;
+ fill: $color--primary;
+ }
+}
diff --git a/opentech/static_src/src/app/src/containers/DisplayPanel/index.js b/opentech/static_src/src/app/src/containers/DisplayPanel/index.js
index 40db81bc6..291aaff84 100644
--- a/opentech/static_src/src/app/src/containers/DisplayPanel/index.js
+++ b/opentech/static_src/src/app/src/containers/DisplayPanel/index.js
@@ -15,6 +15,7 @@ import AddNoteForm from '@containers/AddNoteForm';
import NoteListing from '@containers/NoteListing';
import StatusActions from '@containers/StatusActions';
import Tabber, {Tab} from '@components/Tabber'
+import SubmissionLink from '@components/SubmissionLink';
import './style.scss';
class DisplayPanel extends React.Component {
@@ -26,11 +27,8 @@ class DisplayPanel extends React.Component {
};
render() {
- const { windowSize: {windowWidth: width}, submissionID } = this.props;
- const { clearSubmission } = this.props;
-
+ const { windowSize: { windowWidth: width }, submissionID, clearSubmission } = this.props;
const isMobile = width < 1024;
- const submissionLink = "/apply/submissions/" + submissionID + "/";
const submission = <CurrentSubmissionDisplay />
@@ -42,6 +40,7 @@ class DisplayPanel extends React.Component {
<Tab button="Status" key="status">
<StatusActions submissionID={submissionID} />
<ReviewInformation submissionID={submissionID} />
+ <SubmissionLink submissionID={submissionID} />
</Tab>
]
@@ -61,7 +60,6 @@ class DisplayPanel extends React.Component {
<div className="display-panel__column">
<div className="display-panel__header display-panel__header--spacer"></div>
<div className="display-panel__body display-panel__body--center">
- <a target="_blank" rel="noopener noreferrer" href={ submissionLink }>Open in new tab</a>
{ submission }
</div>
</div>
--
GitLab