From d48d9349a84283cc83267b1a3cdf85b30adff586 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 30 Oct 2017 14:38:41 -0400 Subject: [PATCH] start to restyle share modal --- .../modules/IDE/components/CopyableInput.jsx | 47 ++++++++++++++++ client/modules/IDE/components/ShareModal.jsx | 55 ++++++++----------- client/modules/IDE/pages/IDEView.jsx | 3 +- client/styles/components/_copyable-input.scss | 11 ++++ client/styles/components/_overlay.scss | 8 ++- client/styles/components/_share.scss | 18 +++++- client/styles/main.scss | 2 + package.json | 4 +- 8 files changed, 110 insertions(+), 38 deletions(-) create mode 100644 client/modules/IDE/components/CopyableInput.jsx create mode 100644 client/styles/components/_copyable-input.scss 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 ( -
-
- - +

+ {projectName} +

+ `} /> -
-
- - -
-
- -
-
- ); + ); + } } 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",