Skip to content

Commit 7c1e6f3

Browse files
ghalestriloghalestrilo
committed
Merge branch 'feature/mobile-examples' of https://github.com/ghalestrilo/p5.js-web-editor into feature/mobile-files-tab
2 parents 352783a + cbae85f commit 7c1e6f3

File tree

15 files changed

+344
-181
lines changed

15 files changed

+344
-181
lines changed

‎client/modules/IDE/components/CollectionList/CollectionList.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,9 @@ class CollectionList extends React.Component {
143143
<thead>
144144
<tr>
145145
{this._renderFieldHeader('name', 'Name')}
146-
{(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
147-
{this._renderFieldHeader('updatedAt', 'Date Updated')}
148-
{this._renderFieldHeader('numItems', '# sketches')}
146+
{this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
147+
{this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
148+
{this._renderFieldHeader('numItems', mobile ? 'Sketches' : '# sketches')}
149149
<th scope="col"></th>
150150
</tr>
151151
</thead>

‎client/modules/IDE/components/CollectionList/CollectionListRow.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ class CollectionListRowBase extends React.Component {
213213
{this.renderCollectionName()}
214214
</span>
215215
</th>
216-
{(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
216+
<td>{mobile && 'Created: '}{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
217217
<td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
218218
<td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
219219
<td className="sketch-list__dropdown-column">

‎client/modules/IDE/components/SketchList.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -437,8 +437,8 @@ class SketchList extends React.Component {
437437
<thead>
438438
<tr>
439439
{this._renderFieldHeader('name', 'Sketch')}
440-
{this._renderFieldHeader('createdAt', 'Date Created')}
441-
{this._renderFieldHeader('updatedAt', 'Date Updated')}
440+
{this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
441+
{this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
442442
<th scope="col"></th>
443443
</tr>
444444
</thead>

‎client/modules/Mobile/MobileDashboardView.jsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,11 @@ import Loader from '../App/components/loader';
2424

2525
const EXAMPLE_USERNAME = 'p5';
2626

27+
// @ghalestrilo 08/13/2020: I'm sorry
2728
const ContentWrapper = styled(Content)`
2829
table {
2930
table-layout: fixed;
31+
margin-bottom: ${remSize(120)}
3032
}
3133
3234
td ,thead button {
@@ -55,14 +57,18 @@ const ContentWrapper = styled(Content)`
5557
5658
tbody td { justify-self: start; text-align: start; padding: 0 }
5759
tbody td:nth-child(2) { justify-self: start; text-align: start; padding-left: ${remSize(12)}};
58-
tbody td:last-child { justify-self: end; text-align: end; };
60+
tbody td:last-child {
61+
justify-self: end;
62+
text-align: end;
63+
grid-row-start: 1;
64+
grid-column-start: 3;
65+
};
5966
6067
.sketch-list__dropdown-column { width: auto; };
6168
6269
tbody { height: ${remSize(48)}; }
6370
6471
.sketches-table-container {
65-
padding-bottom: ${remSize(160)};
6672
background: ${prop('SketchList.background')};
6773
}
6874
.sketches-table__row {
@@ -79,18 +85,33 @@ const ContentWrapper = styled(Content)`
7985
};
8086
8187
thead tr {
82-
grid-template-columns: 1fr 1fr 1fr 0fr;
88+
grid-template-columns: repeat(${props => props.fieldcount}, 1fr) 0fr;
89+
${props => props.noheader && 'display: none;'}
8390
}
8491
8592
tbody tr {
8693
padding: ${remSize(8)};
8794
border-radius: ${remSize(4)};
88-
grid-template-columns: 5fr 5fr 1fr;
95+
grid-template-columns: repeat(${props => props.fieldcount - 1}) 1fr;
8996
grid-template-areas: "name name name" "content content content";
97+
grid-row-gap: ${remSize(12)}
9098
}
9199
92100
.loader-container { position: fixed ; padding-bottom: 32% }
93101
102+
.sketches-table thead th {
103+
background-color: transparent;
104+
}
105+
106+
.asset-table thead th {
107+
height: initial;
108+
align-self: center;
109+
}
110+
111+
.asset-table thead tr {
112+
height: ${remSize(32)}
113+
}
114+
94115
`;
95116

96117
const Subheader = styled.div`
@@ -168,7 +189,7 @@ const MobileDashboard = ({ params, location }) => {
168189
</Header>
169190

170191

171-
<ContentWrapper slimheader>
192+
<ContentWrapper slimheader fieldcount={panel === Tabs[1] ? 4 : 3} noheader={panel === Tabs[2]}>
172193
<Subheader>
173194
{panel === Tabs[0] && <SketchSearchbar />}
174195
{panel === Tabs[1] && <CollectionSearchbar />}

‎client/modules/User/components/APIKeyForm.jsx‎

Lines changed: 23 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
43
import Button from '../../../common/Button';
54
import { PlusIcon } from '../../../common/icons';
65
import CopyableInput from '../../IDE/components/CopyableInput';
@@ -12,7 +11,7 @@ export const APIKeyPropType = PropTypes.shape({
1211
token: PropTypes.object, // eslint-disable-line
1312
label: PropTypes.string.isRequired,
1413
createdAt: PropTypes.string.isRequired,
15-
lastUsedAt: PropTypes.string,
14+
lastUsedAt: PropTypes.string
1615
});
1716

1817
class APIKeyForm extends React.Component {
@@ -39,7 +38,7 @@ class APIKeyForm extends React.Component {
3938
}
4039

4140
removeKey(key) {
42-
const message = `Are you sure you want to delete "${key.label}"?`;
41+
const message = this.props.t('APIKeyForm.ConfirmDelete', { key_label: key.label });
4342

4443
if (window.confirm(message)) {
4544
this.props.removeApiKey(key.id);
@@ -51,10 +50,10 @@ class APIKeyForm extends React.Component {
5150

5251
if (hasApiKeys) {
5352
return (
54-
<APIKeyList apiKeys={this.props.apiKeys} onRemove={this.removeKey} />
53+
<APIKeyList apiKeys={this.props.apiKeys} onRemove={this.removeKey} t={this.props.t} />
5554
);
5655
}
57-
return <p>You have no exsiting tokens.</p>;
56+
return <p>{this.props.t('APIKeyForm.NoTokens')}</p>;
5857
}
5958

6059
render() {
@@ -63,27 +62,18 @@ class APIKeyForm extends React.Component {
6362
return (
6463
<div className="api-key-form">
6564
<p className="api-key-form__summary">
66-
Personal Access Tokens act like your password to allow automated
67-
scripts to access the Editor API. Create a token for each script that
68-
needs access.
65+
{this.props.t('APIKeyForm.Summary')}
6966
</p>
7067

7168
<div className="api-key-form__section">
72-
<h3 className="api-key-form__title">Create new token</h3>
69+
<h3 className="api-key-form__title">{this.props.t('APIKeyForm.CreateToken')}</h3>
7370
<form className="form form--inline" onSubmit={this.addKey}>
74-
<label
75-
htmlFor="keyLabel"
76-
className="form__label form__label--hidden "
77-
>
78-
What is this token for?
79-
</label>
71+
<label htmlFor="keyLabel" className="form__label form__label--hidden ">{this.props.t('APIKeyForm.TokenLabel')}</label>
8072
<input
8173
className="form__input"
8274
id="keyLabel"
83-
onChange={(event) => {
84-
this.setState({ keyLabel: event.target.value });
85-
}}
86-
placeholder="What is this token for? e.g. Example import script"
75+
onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
76+
placeholder={this.props.t('APIKeyForm.TokenPlaceholder')}
8777
type="text"
8878
value={this.state.keyLabel}
8979
/>
@@ -93,29 +83,25 @@ class APIKeyForm extends React.Component {
9383
label="Create new key"
9484
type="submit"
9585
>
96-
Create
86+
{this.props.t('APIKeyForm.CreateTokenSubmit')}
9787
</Button>
9888
</form>
9989

100-
{keyWithToken && (
101-
<div className="api-key-form__new-token">
102-
<h4 className="api-key-form__new-token__title">
103-
Your new access token
104-
</h4>
105-
<p className="api-key-form__new-token__info">
106-
Make sure to copy your new personal access token now. You won’t
107-
be able to see it again!
108-
</p>
109-
<CopyableInput
110-
label={keyWithToken.label}
111-
value={keyWithToken.token}
112-
/>
113-
</div>
114-
)}
90+
{
91+
keyWithToken && (
92+
<div className="api-key-form__new-token">
93+
<h4 className="api-key-form__new-token__title">{this.props.t('APIKeyForm.NewTokenTitle')}</h4>
94+
<p className="api-key-form__new-token__info">
95+
{this.props.t('APIKeyForm.NewTokenInfo')}
96+
</p>
97+
<CopyableInput label={keyWithToken.label} value={keyWithToken.token} />
98+
</div>
99+
)
100+
}
115101
</div>
116102

117103
<div className="api-key-form__section">
118-
<h3 className="api-key-form__title">Existing tokens</h3>
104+
<h3 className="api-key-form__title">{this.props.t('APIKeyForm.ExistingTokensTitle')}</h3>
119105
{this.renderApiKeys()}
120106
</div>
121107
</div>
@@ -127,6 +113,7 @@ APIKeyForm.propTypes = {
127113
apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
128114
createApiKey: PropTypes.func.isRequired,
129115
removeApiKey: PropTypes.func.isRequired,
116+
t: PropTypes.func.isRequired
130117
};
131118

132119
export default APIKeyForm;

‎client/modules/User/components/APIKeyList.jsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ import { APIKeyPropType } from './APIKeyForm';
88

99
import TrashCanIcon from '../../../images/trash-can.svg';
1010

11-
function APIKeyList({ apiKeys, onRemove }) {
11+
function APIKeyList({ apiKeys, onRemove, t }) {
1212
return (
1313
<table className="api-key-list">
1414
<thead>
1515
<tr>
16-
<th>Name</th>
17-
<th>Created on</th>
18-
<th>Last used</th>
19-
<th>Actions</th>
16+
<th>{t('APIKeyList.Name')}</th>
17+
<th>{t('APIKeyList.Created')}</th>
18+
<th>{t('APIKeyList.LastUsed')}</th>
19+
<th>{t('APIKeyList.Actions')}</th>
2020
</tr>
2121
</thead>
2222
<tbody>
2323
{orderBy(apiKeys, ['createdAt'], ['desc']).map((key) => {
2424
const lastUsed = key.lastUsedAt ?
2525
distanceInWordsToNow(new Date(key.lastUsedAt), { addSuffix: true }) :
26-
'Never';
26+
t('APIKeyList.Never');
2727

2828
return (
2929
<tr key={key.id}>
@@ -34,7 +34,7 @@ function APIKeyList({ apiKeys, onRemove }) {
3434
<button
3535
className="api-key-list__delete-button"
3636
onClick={() => onRemove(key)}
37-
aria-label="Delete API Key"
37+
aria-label={t('APIKeyList.DeleteARIA')}
3838
>
3939
<TrashCanIcon focusable="false" aria-hidden="true" />
4040
</button>
@@ -50,6 +50,7 @@ function APIKeyList({ apiKeys, onRemove }) {
5050
APIKeyList.propTypes = {
5151
apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
5252
onRemove: PropTypes.func.isRequired,
53+
t: PropTypes.func.isRequired
5354
};
5455

5556
export default APIKeyList;

0 commit comments

Comments
 (0)