From 4b12f2f2f6aab4b4782281a9883502e4aac2664a Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 12 Aug 2020 14:50:31 -0400 Subject: [PATCH 01/11] Add minor styling fixes for MobileDashboardView --- client/modules/Mobile/MobileDashboardView.jsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index 7bae38f4..ba51ad02 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -62,7 +62,6 @@ const ContentWrapper = styled(Content)` tbody { height: ${remSize(48)}; } .sketches-table-container { - padding-bottom: ${remSize(160)}; background: ${prop('SketchList.background')}; } .sketches-table__row { @@ -91,6 +90,19 @@ const ContentWrapper = styled(Content)` .loader-container { position: fixed ; padding-bottom: 32% } + .sketches-table thead th { + background-color: transparent; + } + + .asset-table thead th { + height: initial; + align-self: center; + } + + .asset-table thead tr { + height: ${remSize(32)} + } + `; const Subheader = styled.div` From 9f3e083c1726bc990e15b23534629cc4a4310ccd Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 17:13:03 -0300 Subject: [PATCH 02/11] :construction: move drop arrow to top of card, unhide CollectionList createdAt --- .../components/CollectionList/CollectionList.jsx | 2 +- .../components/CollectionList/CollectionListRow.jsx | 2 +- client/modules/Mobile/MobileDashboardView.jsx | 13 +++++++++---- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx index c161d2bb..4a933f41 100644 --- a/client/modules/IDE/components/CollectionList/CollectionList.jsx +++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx @@ -143,7 +143,7 @@ class CollectionList extends React.Component { {this._renderFieldHeader('name', 'Name')} - {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')} + {this._renderFieldHeader('createdAt', 'Date Created')} {this._renderFieldHeader('updatedAt', 'Date Updated')} {this._renderFieldHeader('numItems', '# sketches')} diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx index f3119632..de20cea9 100644 --- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx +++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx @@ -213,7 +213,7 @@ class CollectionListRowBase extends React.Component { {this.renderCollectionName()} - {(!mobile) && {format(new Date(collection.createdAt), 'MMM D, YYYY')}} + {mobile && 'Created: '}{format(new Date(collection.createdAt), 'MMM D, YYYY')} {mobile && 'Updated: '}{formatDateCell(collection.updatedAt)} {mobile && '# sketches: '}{(collection.items || []).length} diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index ba51ad02..b33bca42 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -55,7 +55,12 @@ const ContentWrapper = styled(Content)` tbody td { justify-self: start; text-align: start; padding: 0 } tbody td:nth-child(2) { justify-self: start; text-align: start; padding-left: ${remSize(12)}}; - tbody td:last-child { justify-self: end; text-align: end; }; + tbody td:last-child { + justify-self: end; + text-align: end; + grid-row-start: 1; + grid-column-start: 3; + }; .sketch-list__dropdown-column { width: auto; }; @@ -78,13 +83,13 @@ const ContentWrapper = styled(Content)` }; thead tr { - grid-template-columns: 1fr 1fr 1fr 0fr; + grid-template-columns: repeat(${props => props.fieldcount}, 1fr) 0fr; } tbody tr { padding: ${remSize(8)}; border-radius: ${remSize(4)}; - grid-template-columns: 5fr 5fr 1fr; + grid-template-columns: repeat(${props => props.fieldcount - 1}) 1fr; grid-template-areas: "name name name" "content content content"; } @@ -180,7 +185,7 @@ const MobileDashboard = ({ params, location }) => { - + {panel === Tabs[0] && } {panel === Tabs[1] && } From 69acd3af6720c089239340e58fefe74d8719ebcb Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 17:42:14 -0300 Subject: [PATCH 03/11] :construction: add gap to dashboard cards --- client/modules/Mobile/MobileDashboardView.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index b33bca42..bce0f454 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -27,6 +27,7 @@ const EXAMPLE_USERNAME = 'p5'; const ContentWrapper = styled(Content)` table { table-layout: fixed; + margin-bottom: ${remSize(120)} } td ,thead button { @@ -91,6 +92,7 @@ const ContentWrapper = styled(Content)` border-radius: ${remSize(4)}; grid-template-columns: repeat(${props => props.fieldcount - 1}) 1fr; grid-template-areas: "name name name" "content content content"; + grid-row-gap: ${remSize(12)} } .loader-container { position: fixed ; padding-bottom: 32% } From ff40de36ca6711127182959fcfbf06ab0c0a7d5f Mon Sep 17 00:00:00 2001 From: ov Date: Thu, 13 Aug 2020 11:12:02 +0100 Subject: [PATCH 04/11] Spanish Translation: Reset password Form and View (#1545) * Reset Password Form using login view translation keys * reduxFormUtils.js with i18 functionality to translate validations --- .../User/components/ResetPasswordForm.jsx | 15 ++++--- .../modules/User/pages/ResetPasswordView.jsx | 19 ++++---- client/utils/reduxFormUtils.js | 31 ++++++------- translations/locales/en-US/translations.json | 32 ++++++++++++-- translations/locales/es-419/translations.json | 44 ++++++++++++++----- 5 files changed, 96 insertions(+), 45 deletions(-) diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx index df96bd79..87155f43 100644 --- a/client/modules/User/components/ResetPasswordForm.jsx +++ b/client/modules/User/components/ResetPasswordForm.jsx @@ -1,20 +1,20 @@ import PropTypes from 'prop-types'; import React from 'react'; - +import { withTranslation } from 'react-i18next'; import { domOnlyProps } from '../../../utils/reduxFormUtils'; import Button from '../../../common/Button'; function ResetPasswordForm(props) { const { - fields: { email }, handleSubmit, submitting, invalid, pristine + fields: { email }, handleSubmit, submitting, invalid, pristine, t } = props; return (

- + Send Password Reset Email + >{t('ResetPasswordForm.Submit')}

); @@ -41,7 +41,8 @@ ResetPasswordForm.propTypes = { pristine: PropTypes.bool, user: PropTypes.shape({ resetPasswordInitiate: PropTypes.bool - }).isRequired + }).isRequired, + t: PropTypes.func.isRequired }; ResetPasswordForm.defaultProps = { @@ -50,4 +51,4 @@ ResetPasswordForm.defaultProps = { invalid: false }; -export default ResetPasswordForm; +export default withTranslation()(ResetPasswordForm); diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx index 8ff7dac1..46d0b517 100644 --- a/client/modules/User/pages/ResetPasswordView.jsx +++ b/client/modules/User/pages/ResetPasswordView.jsx @@ -6,6 +6,7 @@ import classNames from 'classnames'; import { bindActionCreators } from 'redux'; import { reduxForm } from 'redux-form'; import { Helmet } from 'react-helmet'; +import { withTranslation } from 'react-i18next'; import * as UserActions from '../actions'; import ResetPasswordForm from '../components/ResetPasswordForm'; import { validateResetPassword } from '../../../utils/reduxFormUtils'; @@ -23,19 +24,18 @@ function ResetPasswordView(props) {