diff --git a/client/modules/IDE/components/CopyableInput.jsx b/client/modules/IDE/components/CopyableInput.jsx
new file mode 100644
index 00000000..bcce2739
--- /dev/null
+++ b/client/modules/IDE/components/CopyableInput.jsx
@@ -0,0 +1,47 @@
+import React, { PropTypes } from 'react';
+import Clipboard from 'clipboard';
+
+class CopyableInput extends React.Component {
+ componentDidMount() {
+ this.clipboard = new Clipboard(this.input, {
+ target: () => this.input
+ });
+ }
+
+ componentWillUnmount() {
+ this.clipboard.destroy();
+ }
+
+ render() {
+ const {
+ label,
+ value
+ } = this.props;
+ return (
+
+
+
+ { this.input = element; }}
+ />
+
+
+
+
+ );
+ }
+}
+
+CopyableInput.propTypes = {
+ label: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired
+};
+
+export default CopyableInput;
diff --git a/client/modules/IDE/components/ShareModal.jsx b/client/modules/IDE/components/ShareModal.jsx
index 3b398e1b..740fb3ca 100644
--- a/client/modules/IDE/components/ShareModal.jsx
+++ b/client/modules/IDE/components/ShareModal.jsx
@@ -1,47 +1,40 @@
import React, { PropTypes } from 'react';
+import CopyableInput from './CopyableInput';
-function ShareModal(props) {
- const {
- projectId,
- ownerUsername
- } = props;
- const hostname = window.location.origin;
- return (
-
- );
+ );
+ }
}
ShareModal.propTypes = {
projectId: PropTypes.string.isRequired,
- ownerUsername: PropTypes.string.isRequired
+ ownerUsername: PropTypes.string.isRequired,
+ projectName: PropTypes.string.isRequired
};
export default ShareModal;
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 5df93c2e..3d5baa71 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -477,12 +477,13 @@ class IDEView extends React.Component {
if (this.props.ide.shareModalVisible) {
return (
diff --git a/client/styles/components/_copyable-input.scss b/client/styles/components/_copyable-input.scss
new file mode 100644
index 00000000..572c3d36
--- /dev/null
+++ b/client/styles/components/_copyable-input.scss
@@ -0,0 +1,11 @@
+.copyable-input__value-container {
+ position: relative;
+}
+
+.copyable-input__tooltip {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
\ No newline at end of file
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index 690d1c7e..de02a35f 100644
--- a/client/styles/components/_overlay.scss
+++ b/client/styles/components/_overlay.scss
@@ -29,11 +29,15 @@
.overlay__header {
display: flex;
justify-content: space-between;
- padding: #{40 / $base-font-size}rem #{20 / $base-font-size}rem #{30 / $base-font-size}rem #{20 / $base-font-size}rem;
+ padding: #{30 / $base-font-size}rem #{20 / $base-font-size}rem #{30 / $base-font-size}rem #{20 / $base-font-size}rem;
flex: 1 0 auto;
}
+.overlay__title {
+ font-size: #{21 / $base-font-size}rem;
+}
+
.overlay__close-button {
@include icon();
- padding: #{12 / $base-font-size}rem #{16 / $base-font-size}rem;
+ padding: #{3 / $base-font-size}rem 0;
}
\ No newline at end of file
diff --git a/client/styles/components/_share.scss b/client/styles/components/_share.scss
index a9b72c7e..2ad7b5f1 100644
--- a/client/styles/components/_share.scss
+++ b/client/styles/components/_share.scss
@@ -1,8 +1,14 @@
.share-modal {
padding: #{20 / $base-font-size}rem;
+ padding-top: 0;
width: #{500 / $base-font-size}rem;
}
+.share-modal__project-name {
+ padding-bottom: #{20 / $base-font-size}rem;
+ font-size: #{16 / $base-font-size}rem;
+}
+
.share-modal__header {
display: flex;
justify-content: space-between;
@@ -11,14 +17,20 @@
.share-modal__section {
width: 100%;
display: flex;
- align-items: center;
+ flex-wrap: wrap;
padding: #{10 / $base-font-size}rem 0;
}
.share-modal__label {
- width: #{86 / $base-font-size}rem;
+ width: 100%;
+ font-size: #{12 / $base-font-size}rem;
+ padding-bottom: #{3 / $base-font-size}rem;
+ @include themify() {
+ color: getThemifyVariable('inactive-text-color');
+ }
}
.share-modal__input {
- flex: 1;
+ width: 100%;
+ font-size: #{16 / $base-font-size}rem;
}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index abe5a93b..c3bf7498 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -9,6 +9,7 @@
@import 'vendors/codemirror';
@import 'vendors/lint';
@import 'vendors/dropzone';
+@import 'node_modules/primer-tooltips/build/build';
@import 'components/p5-light-codemirror-theme';
@import 'components/p5-dark-codemirror-theme';
@@ -37,6 +38,7 @@
@import 'components/share';
@import 'components/asset-list';
@import 'components/keyboard-shortcuts';
+@import 'components/copyable-input';
@import 'layout/ide';
@import 'layout/fullscreen';
diff --git a/package.json b/package.json
index d924efce..51465805 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
"body-parser": "^1.15.1",
"bson-objectid": "^1.1.4",
"classnames": "^2.2.5",
+ "clipboard": "^1.7.1",
"codemirror": "^5.21.0",
"connect-mongo": "^1.2.0",
"cookie-parser": "^1.4.1",
@@ -82,8 +83,8 @@
"file-type": "^3.8.0",
"fs-promise": "^1.0.0",
"htmlhint": "^0.9.13",
- "is_js": "^0.9.0",
"is-url": "^1.2.2",
+ "is_js": "^0.9.0",
"js-beautify": "^1.6.4",
"jsdom": "^9.8.3",
"jshint": "^2.9.4",
@@ -99,6 +100,7 @@
"passport-github": "^1.1.0",
"passport-local": "^1.0.0",
"pretty-bytes": "^3.0.1",
+ "primer-tooltips": "^1.4.1",
"project-name-generator": "^2.1.3",
"pug": "^2.0.0-beta6",
"q": "^1.4.1",