1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-10-12 03:54:24 +02:00

add l10n in missing areas

This commit is contained in:
Kushagra Gour
2019-07-16 18:59:37 +05:30
parent 65bed927fd
commit d0f9d19e97
7 changed files with 936 additions and 767 deletions

726
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -36,9 +36,9 @@
"@11ty/eleventy": "^0.7.1",
"@lingui/cli": "^2.8.3",
"@lingui/macro": "^2.8.3",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-minify": "^0.2.0",
"babel-plugin-macros": "^2.6.1",
"eslint": "^4.9.0",
"eslint-config-prettier": "^2.3.0",
"eslint-config-synacor": "^2.0.2",
@@ -60,17 +60,17 @@
"preact-cli": "^3.0.0-rc.3",
"preact-render-spy": "^1.2.1",
"run-sequence": "^2.2.1",
"sw-precache": "^5.2.0"
"sw-precache": "^5.2.0",
"gulp-connect": "^5.7.0"
},
"dependencies": {
"@emmetio/codemirror-plugin": "^0.5.4",
"@lingui/react": "^2.7.4",
"@lingui/react": "^2.8.3",
"code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
"codemirror": "^5.37.0",
"copy-webpack-plugin": "^4.5.1",
"esprima": "^4.0.0",
"firebase": "^5.5.8",
"gulp-connect": "^5.7.0",
"jszip": "^3.1.5",
"preact": "^10.0.0-rc.0",
"preact-portal": "^1.1.3",

View File

@@ -2,6 +2,8 @@ import { h, Component } from 'preact';
import { jsLibs, cssLibs } from '../libraryList';
import { trackEvent } from '../analytics';
import { LibraryAutoSuggest } from './LibraryAutoSuggest';
import { Trans, t } from '@lingui/macro';
import { I18n } from '@lingui/react';
export default class AddLibrary extends Component {
constructor(props) {
@@ -58,8 +60,12 @@ export default class AddLibrary extends Component {
}
render() {
return (
<I18n>
{({ i18n }) => (
<div>
<h1>Add Library</h1>
<h1>
<Trans>Add Library</Trans>
</h1>
<div class="flex flex-v-center">
<svg style="width: 30px; height: 30px;fill:rgb(255,255,255,0.5)">
@@ -73,15 +79,17 @@ export default class AddLibrary extends Component {
type="text"
id="externalLibrarySearchInput"
class="full-width"
placeholder="Type here to search libraries"
placeholder={i18n._(t`Type here to search libraries`)}
/>
</LibraryAutoSuggest>
</div>
<div class="tar opacity--70">
<small>Powered by cdnjs</small>
<small>
<Trans>Powered by cdnjs</Trans>
</small>
</div>
<div style="margin:20px 0;">
Choose from popular libraries:{' '}
<Trans>Choose from popular libraries</Trans>:{' '}
<select
name=""
id="js-add-library-select"
@@ -106,14 +114,22 @@ export default class AddLibrary extends Component {
</div>
<h3 class="mb-0">JS</h3>
<p class="mt-0 help-text">Put each library in new line</p>
<p class="mt-0 help-text">
<Trans>Put each library in new line</Trans>
</p>
<p style="font-size: 0.8em;" class="show-when-extension opacity--70">
<p
style="font-size: 0.8em;"
class="show-when-extension opacity--70"
>
<Trans>
Note: You can load external scripts only from following domains:
</Trans>
localhost, https://ajax.googleapis.com, https://code.jquery.com,
https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com,
https://cdn77.com, https://maxcdn.bootstrapcdn.com,
https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in
https://cdnjs.cloudflare.com, https://unpkg.com,
https://maxcdn.com, https://cdn77.com,
https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/,
https://rawgit.com, https://wzrd.in
</p>
<textarea
@@ -127,7 +143,9 @@ export default class AddLibrary extends Component {
/>
<h3 class="mb-0">CSS</h3>
<p class="mt-0 help-text">Put each library in new line</p>
<p class="mt-0 help-text">
<Trans>Put each library in new line</Trans>
</p>
<textarea
onBlur={this.textareaBlurHandler.bind(this)}
data-lang="css"
@@ -138,6 +156,8 @@ export default class AddLibrary extends Component {
value={this.state.css}
/>
</div>
)}
</I18n>
);
}
}

View File

@@ -1,6 +1,7 @@
import { h, Component } from 'preact';
import { Inspector, chromeDark } from 'react-inspector';
import { Trans } from '@lingui/macro';
import { Trans, t, NumberFormat } from '@lingui/macro';
import { I18n } from '@lingui/react';
import { PureComponent } from 'preact/compat';
class LogRow extends Component {
@@ -44,6 +45,8 @@ export class Console extends PureComponent {
} = this.props;
return (
<I18n>
{({ i18n }) => (
<div
id="consoleEl"
class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
@@ -51,17 +54,19 @@ export class Console extends PureComponent {
<div id="consoleLogEl" class="console__log">
<div
class="js-console__header code-wrap__header"
title="Double click to toggle console"
title={i18n._(t`Double click to toggle console`)}
onDblClick={onConsoleHeaderDblClick}
>
<span class="code-wrap__header-label">
<Trans>Console</Trans>
<span class="count-label">{logs.length}</span>
<span class="count-label">
<NumberFormat value={logs.length} />
</span>
</span>
<div class="code-wrap__header-right-options">
<a
class="code-wrap__header-btn"
title="Clear console (CTRL + L)"
title={i18n._(t`Clear console (CTRL + L)`)}
onClick={onClearConsoleBtnClick}
>
<svg>
@@ -70,7 +75,7 @@ export class Console extends PureComponent {
</a>
<a
class="code-wrap__header-btn code-wrap__collapse-btn"
title="Toggle console"
title={i18n._(t`Toggle console`)}
onClick={toggleConsole}
/>
</div>
@@ -100,6 +105,8 @@ export class Console extends PureComponent {
/>
</div>
</div>
)}
</I18n>
);
}
}

View File

@@ -1,5 +1,7 @@
import { h, Component } from 'preact';
import { Button } from './common';
import { Trans, t } from '@lingui/macro';
import { I18n } from '@lingui/react';
class JS13K extends Component {
constructor(props) {
@@ -71,6 +73,8 @@ export default class Footer extends Component {
render() {
return (
<I18n>
{({ i18n }) => (
<div id="footer" class="footer">
<div>
<a href="/" target="_blank" rel="noopener noreferrer">
@@ -83,7 +87,7 @@ export default class Footer extends Component {
data-event-category="ui"
data-event-action="helpButtonClick"
class="footer__link hint--rounded hint--top-right"
aria-label="Help"
aria-label={i18n._(t`Help`)}
>
<svg
style="width:20px; height:20px; vertical-align:text-bottom"
@@ -97,7 +101,7 @@ export default class Footer extends Component {
data-event-category="ui"
data-event-action="keyboardShortcutButtonClick"
class="footer__link hint--rounded hint--top-right hide-on-mobile"
aria-label="Keyboard shortcuts"
aria-label={i18n._(t`Keyboard shortcuts`)}
>
<svg
style={{
@@ -111,7 +115,7 @@ export default class Footer extends Component {
</Button>
<a
class="footer__link hint--rounded hint--top-right"
aria-label="Tweet about 'Web Maker'"
aria-label={i18n._(t`Tweet about 'Web Maker'`)}
href="http://twitter.com/share?url=https://webmaker.app/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline"
target="_blank"
rel="noopener noreferrer"
@@ -131,9 +135,11 @@ export default class Footer extends Component {
data-event-category="ui"
data-event-action="supportDeveloperFooterBtnClick"
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
aria-label="Support the developer by pledging some amount"
aria-label={i18n._(
t`Support the developer by pledging some amount`
)}
>
Donate
<Trans>Donate</Trans>
</Button>
</div>
@@ -161,7 +167,7 @@ export default class Footer extends Component {
}}
onClick={this.props.onJs13KDownloadBtnClick}
>
Download game as zip
<Trans>Download game as zip</Trans>
</button>
<a
class="btn"
@@ -174,14 +180,14 @@ export default class Footer extends Component {
href="https://pasteboard.co/"
target="_blank"
>
Upload Image
<Trans>Upload Image</Trans>
</a>
<button
class="btn"
style={{ width: '200px', display: 'block' }}
onClick={this.props.onJs13KHelpBtnClick}
>
Help
<Trans>Help</Trans>
</button>
</div>
)}
@@ -193,7 +199,7 @@ export default class Footer extends Component {
onClick={this.props.saveHtmlBtnClickHandler}
id="saveHtmlBtn"
class="mode-btn hint--rounded hint--top-left hide-on-mobile hide-in-file-mode"
aria-label="Save as HTML file"
aria-label={i18n._(t`Save as HTML file`)}
>
<svg viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
@@ -216,7 +222,7 @@ export default class Footer extends Component {
onClick={this.props.codepenBtnClickHandler}
id="codepenBtn"
class="mode-btn hint--rounded hint--top-left hide-on-mobile hide-in-file-mode"
aria-label="Edit on CodePen"
aria-label={i18n._(t`Edit on CodePen`)}
>
<svg>
<use xlinkHref="#codepen-logo" />
@@ -227,7 +233,7 @@ export default class Footer extends Component {
id="screenshotBtn"
class="mode-btn hint--rounded hint--top-left show-when-extension"
onClick={this.props.screenshotBtnClickHandler}
aria-label="Take screenshot of preview"
aria-label={i18n._(t`Take screenshot of preview`)}
>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
@@ -240,7 +246,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 1)}
id="layoutBtn1"
class="mode-btn hide-on-mobile hide-in-file-mode"
aria-label="Switch to layout with preview on right"
aria-label={i18n._(t`Switch to layout with preview on right`)}
>
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
<use xlinkHref="#mode-icon" />
@@ -250,7 +256,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 2)}
id="layoutBtn2"
class="mode-btn hide-on-mobile hide-in-file-mode"
aria-label="Switch to layout with preview on bottom"
aria-label={i18n._(t`Switch to layout with preview on bottom`)}
>
<svg viewBox="0 0 100 100">
<use xlinkHref="#mode-icon" />
@@ -260,7 +266,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 3)}
id="layoutBtn3"
class="mode-btn hide-on-mobile hide-in-file-mode"
aria-label="Switch to layout with preview on left"
aria-label={i18n._(t`Switch to layout with preview on left`)}
>
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
<use xlinkHref="#mode-icon" />
@@ -270,7 +276,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 5)}
id="layoutBtn5"
class="mode-btn hide-on-mobile hide-in-file-mode"
aria-label="Switch to layout with all vertical panes"
aria-label={i18n._(t`Switch to layout with all vertical panes`)}
>
<svg viewBox="0 0 100 100">
<use xlinkHref="#vertical-mode-icon" />
@@ -280,7 +286,7 @@ export default class Footer extends Component {
onClick={this.layoutBtnClickhandler.bind(this, 4)}
id="layoutBtn4"
class="mode-btn hint--top-left hint--rounded hide-in-file-mode hide-on-mobile"
aria-label="Switch to full screen preview"
aria-label={i18n._(t`Switch to full screen preview`)}
>
<svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" />
@@ -288,7 +294,7 @@ export default class Footer extends Component {
</button>
<button
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
aria-label="Detach Preview"
aria-label={i18n._(t`Detach preview`)}
onClick={this.props.detachedPreviewBtnHandler}
>
<svg viewBox="0 0 24 24">
@@ -304,7 +310,7 @@ export default class Footer extends Component {
class={`notifications-btn mode-btn hint--top-left hint--rounded ${
this.props.hasUnseenChangelog ? 'has-new' : ''
}`}
aria-label="See Changelog"
aria-label={i18n._(t`See changelog`)}
>
<svg viewBox="0 0 24 24">
<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
@@ -316,7 +322,7 @@ export default class Footer extends Component {
data-event-category="ui"
data-event-action="settingsBtnClick"
class="mode-btn hint--top-left hint--rounded"
aria-label="Settings"
aria-label={i18n._(t`Settings`)}
>
<svg>
<use xlinkHref="#settings-icon" />
@@ -324,6 +330,8 @@ export default class Footer extends Component {
</Button>
</div>
</div>
)}
</I18n>
);
}
}

View File

@@ -1,10 +1,9 @@
import { h, Component } from 'preact';
import { log } from '../utils';
import { trackEvent } from '../analytics';
import { itemService } from '../itemService';
import { alertsService } from '../notifications';
import { deferred } from '../deferred';
import { ItemTile } from './ItemTile';
import { Trans, NumberFormat, t } from '@lingui/macro';
import { I18n } from '@lingui/react';
export default class SavedItemPane extends Component {
constructor(props) {
@@ -113,7 +112,9 @@ export default class SavedItemPane extends Component {
} catch (exception) {
log(exception);
alert(
'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.'
i18n._(
t`'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.`
)
);
}
});
@@ -154,6 +155,8 @@ export default class SavedItemPane extends Component {
{ filteredItems = this.state.items, items = [] }
) {
return (
<I18n>
{({ i18n }) => (
<div
id="js-saved-items-pane"
class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
@@ -164,27 +167,36 @@ export default class SavedItemPane extends Component {
onClick={this.onCloseIntent.bind(this)}
class="btn saved-items-pane__close-btn"
id="js-saved-items-pane-close-btn"
aria-label="Close saved creations pane"
aria-label={i18n._(t`Close saved creations pane`)}
>
X
</button>
<div class="flex flex-v-center" style="justify-content: space-between;">
<h3>My Library ({filteredItems.length})</h3>
<div
class="flex flex-v-center"
style="justify-content: space-between;"
>
<h3>
<Trans>My Library ({filteredItems.length})</Trans>
</h3>
<div>
<button
onClick={exportBtnClickHandler}
class="btn--dark hint--bottom-left hint--rounded hint--medium"
aria-label="Export all your creations into a single importable file."
aria-label={i18n._(
t`Export all your creations into a single importable file.`
)}
>
Export
<Trans>Export</Trans>
</button>
<button
onClick={this.importBtnClickHandler.bind(this)}
class="btn--dark hint--bottom-left hint--rounded hint--medium"
aria-label="Import your creations. Only the file that you export through the 'Export' button can be imported."
aria-label={i18n._(
t`Import your creations. Only the file that you export through the 'Export' button can be imported.`
)}
>
Import
<Trans>Import</Trans>
</button>
</div>
</div>
@@ -194,29 +206,41 @@ export default class SavedItemPane extends Component {
id="searchInput"
class="search-input"
onInput={this.searchInputHandler.bind(this)}
placeholder="Search your creations here..."
placeholder={i18n._(t`Search your creations here...`)}
/>
<div id="js-saved-items-wrap" class="saved-items-pane__container">
{!filteredItems.length && items.length ? (
<div class="mt-1">No match found.</div>
<div class="mt-1">
<Trans>No match found.</Trans>
</div>
) : null}
{filteredItems.map(item => (
<ItemTile
item={item}
onClick={this.itemClickHandler.bind(this, item)}
onForkBtnClick={this.itemForkBtnClickHandler.bind(this, item)}
onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(this, item)}
onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(
this,
item
)}
/>
))}
{!items.length ? (
<div class="tac">
<h2 class="opacity--30">Nothing saved here.</h2>
<img style="max-width: 80%; opacity:0.4" src="assets/empty.svg" />
<h2 class="opacity--30">
<Trans>Nothing saved here.</Trans>
</h2>
<img
style="max-width: 80%; opacity:0.4"
src="assets/empty.svg"
/>
</div>
) : null}
</div>
</div>
)}
</I18n>
);
}
}

View File

@@ -378,7 +378,7 @@ export default class Settings extends Component {
stopped.
</HelpText>
</div>
{/*
<Divider />
<div>
@@ -389,13 +389,13 @@ export default class Settings extends Component {
onChange={e => this.updateSetting(e, 'lang')}
>
<option value="en">English</option>
<option value="hi">Hindi</option>
<option value="hi">ि</option>
<option value="sa">Sanskrit</option>
<option value="es">Spanish</option>
<option value="es">Español (España)</option>
<option value="zh-Hans">中文(简体)</option>
</select>
</label>
</div>
*/}
</TabPanel>
</Tabs>
</div>