From 9587de480c37bcc8d9e297c41292fba64360cf0a Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Thu, 18 Apr 2019 11:29:00 -0400 Subject: [PATCH 01/24] first attempt at external share modal --- .../modal/externalshare/container.jsx | 27 +++ src/components/modal/externalshare/modal.scss | 194 ++++++++++++++++++ .../modal/externalshare/presentation.jsx | 113 ++++++++++ src/views/preview/presentation.jsx | 11 + src/views/preview/project-view.jsx | 12 ++ src/views/preview/subactions.jsx | 17 ++ src/views/preview/subactions.scss | 6 + 7 files changed, 380 insertions(+) create mode 100644 src/components/modal/externalshare/container.jsx create mode 100644 src/components/modal/externalshare/modal.scss create mode 100644 src/components/modal/externalshare/presentation.jsx diff --git a/src/components/modal/externalshare/container.jsx b/src/components/modal/externalshare/container.jsx new file mode 100644 index 000000000..c1f2e615f --- /dev/null +++ b/src/components/modal/externalshare/container.jsx @@ -0,0 +1,27 @@ +const bindAll = require('lodash.bindall'); +const PropTypes = require('prop-types'); +const React = require('react'); +const ExternalShareModalPresentation = require('./presentation.jsx'); + +class ExternalShareModal extends React.Component { + constructor (props) { + super(props); + } + + render () { + return ( + + ); + } +} + +ExternalShareModal.propTypes = { + isOpen: PropTypes.bool, + onRequestClose: PropTypes.func +}; + +module.exports = ExternalShareModal; diff --git a/src/components/modal/externalshare/modal.scss b/src/components/modal/externalshare/modal.scss new file mode 100644 index 000000000..ca12a5042 --- /dev/null +++ b/src/components/modal/externalshare/modal.scss @@ -0,0 +1,194 @@ +@import "../../../colors"; +@import "../../../frameless"; + +.mod-externalShare { + min-height: 15rem; + max-height: calc(100% - 8rem); + + /* Some value for height must be set for scrolling to work */ + height: 100%; + + overflow: hidden; + + @media #{$small}, #{$small-height} { + overflow: hidden; + } +} + +.externalShare-modal-header { + box-shadow: inset 0 -1px 0 0 $ui-blue-dark; + background-color: $ui-blue; +} + +.externalShare-modal-content { + margin: 0 auto; + box-shadow: none; + width: 100%; + height: calc(100% - 3rem); +} + +.external-target-outer-scrollbox { + position: relative; + background-color: $ui-blue-10percent; + flex: 1; + height: calc(100% - 5rem); + + @media #{$small-height} { + min-height: 0; + } +} + +.external-target-inner-scrollbox { + margin-right: .5rem; + padding-right: .5rem; + height: 100%; + overflow: scroll; + overflow-x: hidden; + + &::-webkit-scrollbar { + width: 8px; + } + + &::-webkit-scrollbar-thumb { + border-radius: 4px; + background-color: $active-dark-gray; + height: 92px; + } + + &::-webkit-scrollbar-track { + margin-top: 8px; + margin-bottom: 10px; + } +} + +.external-target-container { + display: flex; + padding: .40625rem 0 0 1.46875rem; + justify-content: flex-start; + flex-flow: row wrap; +} +/* NOTE: force scrolling: add to above: + min-height: 30rem; +*/ + +.external-target-bottom-gradient { + position: absolute; + right: 1rem; + bottom: 0; + left: 0; + background: linear-gradient( + $transparent-light-blue, + $ui-light-primary + ); + height: 32px; + pointer-events: none; /* pass clicks through to buttons underneath */ +} + +.studio-selector-button { + display: flex; + position: relative; + transition: all .5s; + margin: .21875rem; + border-radius: .5rem; + background-color: $ui-white; + cursor: pointer; + padding: 0; + width: 48%; + height: 2.5rem; + justify-content: space-between; + align-items: center; + + @media #{$small} { + min-width: 98%; + flex-shrink: 1; + } +} + +.studio-selector-button-text { + margin: auto 2.18375rem auto .6875rem; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: .875rem; + font-weight: regular; + flex-shrink: 1; +} + +.studio-selector-button-selected { + background-color: $ui-mint-green; + color: $ui-white; +} + +.studio-selector-button-waiting { + background-color: $ui-light-mint; + color: $ui-white; +} + +.studio-selector-button-text-selected { + color: $ui-white; +} + +.studio-selector-button-text-unselected { + color: $type-gray; +} + +.studio-selector-button-enabled { + pointer-events: auto; +} + +.studio-selector-button-disabled { + pointer-events: none; +} + +.studio-status-icon { + position: absolute; + right: .625rem; + border-radius: .75rem; + padding: .0625rem .075rem; + width: 1.5rem; + height: 1.5rem; + color: $ui-white; + box-sizing: border-box; +} + +.studio-status-icon-unselected { + background-color: $ui-blue; +} + +.submit-button { + background-color: $ui-blue; +} + +.submit-button-waiting { + background-color: $ui-blue; +} + +.studio-status-icon-plus-img, +.studio-status-icon-checkmark-img { + animation-direction: normal; + width: 1.4rem; + height: 1.4rem; + transform-origin: center; +} + +.studio-status-icon-with-animation { + animation-name: bump; + animation-duration: .25s; + animation-timing-function: cubic-bezier(.3, -3, .6, 3); + animation-iteration-count: 1; +} + +@keyframes bump { + 0% { + transform: scale(0); + opacity: 0; + -webkit-transform: scale(0); + } + 100% { + transform: scale(1); + opacity: 1; + -webkit-transform: scale(1); + } +} diff --git a/src/components/modal/externalshare/presentation.jsx b/src/components/modal/externalshare/presentation.jsx new file mode 100644 index 000000000..21109d126 --- /dev/null +++ b/src/components/modal/externalshare/presentation.jsx @@ -0,0 +1,113 @@ +const PropTypes = require('prop-types'); +const React = require('react'); +const FormattedMessage = require('react-intl').FormattedMessage; +const injectIntl = require('react-intl').injectIntl; +const intlShape = require('react-intl').intlShape; +const Modal = require('../base/modal.jsx'); + +const Form = require('../../forms/form.jsx'); +const Button = require('../../forms/button.jsx'); +const FlexRow = require('../../flex-row/flex-row.jsx'); +const Input = require('../../components/forms/input.jsx'); +const TextArea = require('../../components/forms/textarea.jsx'); + +require('../../forms/button.scss'); +require('./modal.scss'); + +const ExternalShareModalPresentation = ({ + intl, + isOpen, + studios, + waitingToClose, + onToggleStudio, + onRequestClose, + onSubmit +}) => { + const contentLabel = intl.formatMessage({id: 'externalshare.title'}); + + return ( + +
+
+ {contentLabel} +
+
+
+
+
+
+
{ + this.form = form; + }} + onValidSubmit={this.handleValidSubmit} + > +
+
+ + {this.props.intl.formatMessage({id: 'registration.createUsername'})} + + {this.props.usernameHelp ? ( +

{this.props.usernameHelp}

+ ) : ( + null + )} +
+ +