mirror of
https://github.com/chinchang/web-maker.git
synced 2025-08-02 11:30:22 +02:00
add l10n in missing areas
This commit is contained in:
Kushagra Gour
728
package-lock.json
generated
728
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -36,9 +36,9 @@
|
|||||||
"@11ty/eleventy": "^0.7.1",
|
"@11ty/eleventy": "^0.7.1",
|
||||||
"@lingui/cli": "^2.8.3",
|
"@lingui/cli": "^2.8.3",
|
||||||
"@lingui/macro": "^2.8.3",
|
"@lingui/macro": "^2.8.3",
|
||||||
"babel-core": "^6.26.3",
|
|
||||||
"babel-eslint": "^7.2.3",
|
"babel-eslint": "^7.2.3",
|
||||||
"babel-minify": "^0.2.0",
|
"babel-minify": "^0.2.0",
|
||||||
|
"babel-plugin-macros": "^2.6.1",
|
||||||
"eslint": "^4.9.0",
|
"eslint": "^4.9.0",
|
||||||
"eslint-config-prettier": "^2.3.0",
|
"eslint-config-prettier": "^2.3.0",
|
||||||
"eslint-config-synacor": "^2.0.2",
|
"eslint-config-synacor": "^2.0.2",
|
||||||
@@ -60,17 +60,17 @@
|
|||||||
"preact-cli": "^3.0.0-rc.3",
|
"preact-cli": "^3.0.0-rc.3",
|
||||||
"preact-render-spy": "^1.2.1",
|
"preact-render-spy": "^1.2.1",
|
||||||
"run-sequence": "^2.2.1",
|
"run-sequence": "^2.2.1",
|
||||||
"sw-precache": "^5.2.0"
|
"sw-precache": "^5.2.0",
|
||||||
|
"gulp-connect": "^5.7.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emmetio/codemirror-plugin": "^0.5.4",
|
"@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",
|
"code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
|
||||||
"codemirror": "^5.37.0",
|
"codemirror": "^5.37.0",
|
||||||
"copy-webpack-plugin": "^4.5.1",
|
"copy-webpack-plugin": "^4.5.1",
|
||||||
"esprima": "^4.0.0",
|
"esprima": "^4.0.0",
|
||||||
"firebase": "^5.5.8",
|
"firebase": "^5.5.8",
|
||||||
"gulp-connect": "^5.7.0",
|
|
||||||
"jszip": "^3.1.5",
|
"jszip": "^3.1.5",
|
||||||
"preact": "^10.0.0-rc.0",
|
"preact": "^10.0.0-rc.0",
|
||||||
"preact-portal": "^1.1.3",
|
"preact-portal": "^1.1.3",
|
||||||
|
|||||||
@@ -2,6 +2,8 @@ import { h, Component } from 'preact';
|
|||||||
import { jsLibs, cssLibs } from '../libraryList';
|
import { jsLibs, cssLibs } from '../libraryList';
|
||||||
import { trackEvent } from '../analytics';
|
import { trackEvent } from '../analytics';
|
||||||
import { LibraryAutoSuggest } from './LibraryAutoSuggest';
|
import { LibraryAutoSuggest } from './LibraryAutoSuggest';
|
||||||
|
import { Trans, t } from '@lingui/macro';
|
||||||
|
import { I18n } from '@lingui/react';
|
||||||
|
|
||||||
export default class AddLibrary extends Component {
|
export default class AddLibrary extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@@ -58,86 +60,104 @@ export default class AddLibrary extends Component {
|
|||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<I18n>
|
||||||
<h1>Add Library</h1>
|
{({ i18n }) => (
|
||||||
|
<div>
|
||||||
|
<h1>
|
||||||
|
<Trans>Add Library</Trans>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<div class="flex flex-v-center">
|
<div class="flex flex-v-center">
|
||||||
<svg style="width: 30px; height: 30px;fill:rgb(255,255,255,0.5)">
|
<svg style="width: 30px; height: 30px;fill:rgb(255,255,255,0.5)">
|
||||||
<use xlinkHref="#search" />
|
<use xlinkHref="#search" />
|
||||||
</svg>
|
</svg>
|
||||||
<LibraryAutoSuggest
|
<LibraryAutoSuggest
|
||||||
fullWidth
|
fullWidth
|
||||||
onSelect={this.suggestionSelectHandler.bind(this)}
|
onSelect={this.suggestionSelectHandler.bind(this)}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="externalLibrarySearchInput"
|
id="externalLibrarySearchInput"
|
||||||
|
class="full-width"
|
||||||
|
placeholder={i18n._(t`Type here to search libraries`)}
|
||||||
|
/>
|
||||||
|
</LibraryAutoSuggest>
|
||||||
|
</div>
|
||||||
|
<div class="tar opacity--70">
|
||||||
|
<small>
|
||||||
|
<Trans>Powered by cdnjs</Trans>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<div style="margin:20px 0;">
|
||||||
|
<Trans>Choose from popular libraries</Trans>:{' '}
|
||||||
|
<select
|
||||||
|
name=""
|
||||||
|
id="js-add-library-select"
|
||||||
|
onChange={this.onSelectChange.bind(this)}
|
||||||
|
>
|
||||||
|
<option value="">-------</option>
|
||||||
|
<optgroup label="JavaScript Libraries">
|
||||||
|
{jsLibs.map(lib => (
|
||||||
|
<option data-type={lib.type} value={lib.url}>
|
||||||
|
{lib.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="CSS Libraries">
|
||||||
|
{cssLibs.map(lib => (
|
||||||
|
<option data-type={lib.type} value={lib.url}>
|
||||||
|
{lib.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="mb-0">JS</h3>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
onBlur={this.textareaBlurHandler.bind(this)}
|
||||||
|
data-lang="js"
|
||||||
class="full-width"
|
class="full-width"
|
||||||
placeholder="Type here to search libraries"
|
id="externalJsTextarea"
|
||||||
|
cols="30"
|
||||||
|
rows="5"
|
||||||
|
value={this.state.js}
|
||||||
/>
|
/>
|
||||||
</LibraryAutoSuggest>
|
|
||||||
</div>
|
|
||||||
<div class="tar opacity--70">
|
|
||||||
<small>Powered by cdnjs</small>
|
|
||||||
</div>
|
|
||||||
<div style="margin:20px 0;">
|
|
||||||
Choose from popular libraries:{' '}
|
|
||||||
<select
|
|
||||||
name=""
|
|
||||||
id="js-add-library-select"
|
|
||||||
onChange={this.onSelectChange.bind(this)}
|
|
||||||
>
|
|
||||||
<option value="">-------</option>
|
|
||||||
<optgroup label="JavaScript Libraries">
|
|
||||||
{jsLibs.map(lib => (
|
|
||||||
<option data-type={lib.type} value={lib.url}>
|
|
||||||
{lib.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</optgroup>
|
|
||||||
<optgroup label="CSS Libraries">
|
|
||||||
{cssLibs.map(lib => (
|
|
||||||
<option data-type={lib.type} value={lib.url}>
|
|
||||||
{lib.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</optgroup>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 class="mb-0">JS</h3>
|
<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 style="font-size: 0.8em;" class="show-when-extension opacity--70">
|
</p>
|
||||||
Note: You can load external scripts only from following domains:
|
<textarea
|
||||||
localhost, https://ajax.googleapis.com, https://code.jquery.com,
|
onBlur={this.textareaBlurHandler.bind(this)}
|
||||||
https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com,
|
data-lang="css"
|
||||||
https://cdn77.com, https://maxcdn.bootstrapcdn.com,
|
class="full-width"
|
||||||
https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in
|
id="externalCssTextarea"
|
||||||
</p>
|
cols="30"
|
||||||
|
rows="5"
|
||||||
<textarea
|
value={this.state.css}
|
||||||
onBlur={this.textareaBlurHandler.bind(this)}
|
/>
|
||||||
data-lang="js"
|
</div>
|
||||||
class="full-width"
|
)}
|
||||||
id="externalJsTextarea"
|
</I18n>
|
||||||
cols="30"
|
|
||||||
rows="5"
|
|
||||||
value={this.state.js}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<h3 class="mb-0">CSS</h3>
|
|
||||||
<p class="mt-0 help-text">Put each library in new line</p>
|
|
||||||
<textarea
|
|
||||||
onBlur={this.textareaBlurHandler.bind(this)}
|
|
||||||
data-lang="css"
|
|
||||||
class="full-width"
|
|
||||||
id="externalCssTextarea"
|
|
||||||
cols="30"
|
|
||||||
rows="5"
|
|
||||||
value={this.state.css}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { h, Component } from 'preact';
|
import { h, Component } from 'preact';
|
||||||
import { Inspector, chromeDark } from 'react-inspector';
|
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';
|
import { PureComponent } from 'preact/compat';
|
||||||
|
|
||||||
class LogRow extends Component {
|
class LogRow extends Component {
|
||||||
@@ -44,62 +45,68 @@ export class Console extends PureComponent {
|
|||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<I18n>
|
||||||
id="consoleEl"
|
{({ i18n }) => (
|
||||||
class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
|
|
||||||
>
|
|
||||||
<div id="consoleLogEl" class="console__log">
|
|
||||||
<div
|
<div
|
||||||
class="js-console__header code-wrap__header"
|
id="consoleEl"
|
||||||
title="Double click to toggle console"
|
class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
|
||||||
onDblClick={onConsoleHeaderDblClick}
|
|
||||||
>
|
>
|
||||||
<span class="code-wrap__header-label">
|
<div id="consoleLogEl" class="console__log">
|
||||||
<Trans>Console</Trans>
|
<div
|
||||||
<span class="count-label">{logs.length}</span>
|
class="js-console__header code-wrap__header"
|
||||||
</span>
|
title={i18n._(t`Double click to toggle console`)}
|
||||||
<div class="code-wrap__header-right-options">
|
onDblClick={onConsoleHeaderDblClick}
|
||||||
<a
|
|
||||||
class="code-wrap__header-btn"
|
|
||||||
title="Clear console (CTRL + L)"
|
|
||||||
onClick={onClearConsoleBtnClick}
|
|
||||||
>
|
>
|
||||||
<svg>
|
<span class="code-wrap__header-label">
|
||||||
<use xlinkHref="#cancel-icon" />
|
<Trans>Console</Trans>
|
||||||
</svg>
|
<span class="count-label">
|
||||||
</a>
|
<NumberFormat value={logs.length} />
|
||||||
<a
|
</span>
|
||||||
class="code-wrap__header-btn code-wrap__collapse-btn"
|
</span>
|
||||||
title="Toggle console"
|
<div class="code-wrap__header-right-options">
|
||||||
onClick={toggleConsole}
|
<a
|
||||||
|
class="code-wrap__header-btn"
|
||||||
|
title={i18n._(t`Clear console (CTRL + L)`)}
|
||||||
|
onClick={onClearConsoleBtnClick}
|
||||||
|
>
|
||||||
|
<svg>
|
||||||
|
<use xlinkHref="#cancel-icon" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="code-wrap__header-btn code-wrap__collapse-btn"
|
||||||
|
title={i18n._(t`Toggle console`)}
|
||||||
|
onClick={toggleConsole}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="console__items"
|
||||||
|
ref={el => {
|
||||||
|
this.logContainerEl = el;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{logs.map(log => (
|
||||||
|
<LogRow data={log} />
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="consolePromptEl"
|
||||||
|
class="console__prompt flex flex-v-center flex-shrink-0"
|
||||||
|
>
|
||||||
|
<svg width="18" height="18" fill="#346fd2">
|
||||||
|
<use xlinkHref="#chevron-icon" />
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
tabIndex={isConsoleOpen ? 0 : -1}
|
||||||
|
onKeyUp={onEvalInputKeyup}
|
||||||
|
class="console-exec-input"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul
|
)}
|
||||||
class="console__items"
|
</I18n>
|
||||||
ref={el => {
|
|
||||||
this.logContainerEl = el;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{logs.map(log => (
|
|
||||||
<LogRow data={log} />
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="consolePromptEl"
|
|
||||||
class="console__prompt flex flex-v-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<svg width="18" height="18" fill="#346fd2">
|
|
||||||
<use xlinkHref="#chevron-icon" />
|
|
||||||
</svg>
|
|
||||||
<input
|
|
||||||
tabIndex={isConsoleOpen ? 0 : -1}
|
|
||||||
onKeyUp={onEvalInputKeyup}
|
|
||||||
class="console-exec-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import { h, Component } from 'preact';
|
import { h, Component } from 'preact';
|
||||||
import { Button } from './common';
|
import { Button } from './common';
|
||||||
|
import { Trans, t } from '@lingui/macro';
|
||||||
|
import { I18n } from '@lingui/react';
|
||||||
|
|
||||||
class JS13K extends Component {
|
class JS13K extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@@ -71,259 +73,265 @@ export default class Footer extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div id="footer" class="footer">
|
<I18n>
|
||||||
<div>
|
{({ i18n }) => (
|
||||||
<a href="/" target="_blank" rel="noopener noreferrer">
|
<div id="footer" class="footer">
|
||||||
<div class="logo" />
|
<div>
|
||||||
</a>
|
<a href="/" target="_blank" rel="noopener noreferrer">
|
||||||
©
|
<div class="logo" />
|
||||||
<span class="web-maker-with-tag">Web Maker</span>
|
</a>
|
||||||
<Button
|
©
|
||||||
onClick={this.props.helpBtnClickHandler}
|
<span class="web-maker-with-tag">Web Maker</span>
|
||||||
data-event-category="ui"
|
<Button
|
||||||
data-event-action="helpButtonClick"
|
onClick={this.props.helpBtnClickHandler}
|
||||||
class="footer__link hint--rounded hint--top-right"
|
data-event-category="ui"
|
||||||
aria-label="Help"
|
data-event-action="helpButtonClick"
|
||||||
>
|
class="footer__link hint--rounded hint--top-right"
|
||||||
<svg
|
aria-label={i18n._(t`Help`)}
|
||||||
style="width:20px; height:20px; vertical-align:text-bottom"
|
>
|
||||||
viewBox="0 0 24 24"
|
<svg
|
||||||
>
|
style="width:20px; height:20px; vertical-align:text-bottom"
|
||||||
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
|
viewBox="0 0 24 24"
|
||||||
</svg>
|
>
|
||||||
</Button>
|
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
|
||||||
<Button
|
</svg>
|
||||||
onClick={this.props.keyboardShortcutsBtnClickHandler}
|
</Button>
|
||||||
data-event-category="ui"
|
<Button
|
||||||
data-event-action="keyboardShortcutButtonClick"
|
onClick={this.props.keyboardShortcutsBtnClickHandler}
|
||||||
class="footer__link hint--rounded hint--top-right hide-on-mobile"
|
data-event-category="ui"
|
||||||
aria-label="Keyboard shortcuts"
|
data-event-action="keyboardShortcutButtonClick"
|
||||||
>
|
class="footer__link hint--rounded hint--top-right hide-on-mobile"
|
||||||
<svg
|
aria-label={i18n._(t`Keyboard shortcuts`)}
|
||||||
style={{
|
>
|
||||||
width: '20px',
|
<svg
|
||||||
height: '20px',
|
style={{
|
||||||
verticalAlign: 'text-bottom'
|
width: '20px',
|
||||||
}}
|
height: '20px',
|
||||||
>
|
verticalAlign: 'text-bottom'
|
||||||
<use xlinkHref="#keyboard-icon" />
|
}}
|
||||||
</svg>
|
>
|
||||||
</Button>
|
<use xlinkHref="#keyboard-icon" />
|
||||||
<a
|
</svg>
|
||||||
class="footer__link hint--rounded hint--top-right"
|
</Button>
|
||||||
aria-label="Tweet about 'Web Maker'"
|
<a
|
||||||
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"
|
class="footer__link hint--rounded hint--top-right"
|
||||||
target="_blank"
|
aria-label={i18n._(t`Tweet about 'Web Maker'`)}
|
||||||
rel="noopener noreferrer"
|
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"
|
||||||
<svg
|
rel="noopener noreferrer"
|
||||||
style={{
|
>
|
||||||
width: '20px',
|
<svg
|
||||||
height: '20px',
|
style={{
|
||||||
verticalAlign: 'text-bottom'
|
width: '20px',
|
||||||
}}
|
height: '20px',
|
||||||
>
|
verticalAlign: 'text-bottom'
|
||||||
<use xlinkHref="#twitter-icon" />
|
}}
|
||||||
</svg>
|
>
|
||||||
</a>
|
<use xlinkHref="#twitter-icon" />
|
||||||
<Button
|
</svg>
|
||||||
onClick={this.props.supportDeveloperBtnClickHandler}
|
</a>
|
||||||
data-event-category="ui"
|
<Button
|
||||||
data-event-action="supportDeveloperFooterBtnClick"
|
onClick={this.props.supportDeveloperBtnClickHandler}
|
||||||
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
|
data-event-category="ui"
|
||||||
aria-label="Support the developer by pledging some amount"
|
data-event-action="supportDeveloperFooterBtnClick"
|
||||||
>
|
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
|
||||||
Donate
|
aria-label={i18n._(
|
||||||
</Button>
|
t`Support the developer by pledging some amount`
|
||||||
</div>
|
)}
|
||||||
|
>
|
||||||
|
<Trans>Donate</Trans>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{this.props.prefs.isJs13kModeOn ? (
|
{this.props.prefs.isJs13kModeOn ? (
|
||||||
<div class="flex flex-v-center">
|
<div class="flex flex-v-center">
|
||||||
<JS13K
|
<JS13K
|
||||||
isOpen={this.state.isJs13kDropdownOpen}
|
isOpen={this.state.isJs13kDropdownOpen}
|
||||||
codeSize={this.props.codeSize}
|
codeSize={this.props.codeSize}
|
||||||
onClick={this.js13kClickHandler.bind(this)}
|
onClick={this.js13kClickHandler.bind(this)}
|
||||||
onBlur={() =>
|
onBlur={() =>
|
||||||
setTimeout(
|
setTimeout(
|
||||||
() => this.setState({ isJs13kDropdownOpen: false }),
|
() => this.setState({ isJs13kDropdownOpen: false }),
|
||||||
300
|
300
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{this.state.isJs13kDropdownOpen && (
|
{this.state.isJs13kDropdownOpen && (
|
||||||
<div className="js13k__dropdown">
|
<div className="js13k__dropdown">
|
||||||
<button
|
<button
|
||||||
class="btn"
|
class="btn"
|
||||||
style={{
|
style={{
|
||||||
width: '200px',
|
width: '200px',
|
||||||
display: 'block',
|
display: 'block',
|
||||||
marginBottom: '16px'
|
marginBottom: '16px'
|
||||||
}}
|
}}
|
||||||
onClick={this.props.onJs13KDownloadBtnClick}
|
onClick={this.props.onJs13KDownloadBtnClick}
|
||||||
>
|
>
|
||||||
Download game as zip
|
<Trans>Download game as zip</Trans>
|
||||||
</button>
|
</button>
|
||||||
<a
|
<a
|
||||||
class="btn"
|
class="btn"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
style={{
|
style={{
|
||||||
width: '200px',
|
width: '200px',
|
||||||
display: 'block',
|
display: 'block',
|
||||||
marginBottom: '16px'
|
marginBottom: '16px'
|
||||||
}}
|
}}
|
||||||
href="https://pasteboard.co/"
|
href="https://pasteboard.co/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
Upload Image
|
<Trans>Upload Image</Trans>
|
||||||
</a>
|
</a>
|
||||||
<button
|
<button
|
||||||
class="btn"
|
class="btn"
|
||||||
style={{ width: '200px', display: 'block' }}
|
style={{ width: '200px', display: 'block' }}
|
||||||
onClick={this.props.onJs13KHelpBtnClick}
|
onClick={this.props.onJs13KHelpBtnClick}
|
||||||
>
|
>
|
||||||
Help
|
<Trans>Help</Trans>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
) : null}
|
||||||
|
|
||||||
|
<div class="footer__right">
|
||||||
|
<button
|
||||||
|
onClick={this.props.saveHtmlBtnClickHandler}
|
||||||
|
id="saveHtmlBtn"
|
||||||
|
class="mode-btn hint--rounded hint--top-left hide-on-mobile hide-in-file-mode"
|
||||||
|
aria-label={i18n._(t`Save as HTML file`)}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="codepen-logo" viewBox="0 0 120 120">
|
||||||
|
<path
|
||||||
|
class="outer-ring"
|
||||||
|
d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
class="inner-box"
|
||||||
|
d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"
|
||||||
|
/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={this.props.codepenBtnClickHandler}
|
||||||
|
id="codepenBtn"
|
||||||
|
class="mode-btn hint--rounded hint--top-left hide-on-mobile hide-in-file-mode"
|
||||||
|
aria-label={i18n._(t`Edit on CodePen`)}
|
||||||
|
>
|
||||||
|
<svg>
|
||||||
|
<use xlinkHref="#codepen-logo" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
id="screenshotBtn"
|
||||||
|
class="mode-btn hint--rounded hint--top-left show-when-extension"
|
||||||
|
onClick={this.props.screenshotBtnClickHandler}
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="footer__separator hide-on-mobile" />
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={this.layoutBtnClickhandler.bind(this, 1)}
|
||||||
|
id="layoutBtn1"
|
||||||
|
class="mode-btn hide-on-mobile hide-in-file-mode"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={this.layoutBtnClickhandler.bind(this, 2)}
|
||||||
|
id="layoutBtn2"
|
||||||
|
class="mode-btn hide-on-mobile hide-in-file-mode"
|
||||||
|
aria-label={i18n._(t`Switch to layout with preview on bottom`)}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 100 100">
|
||||||
|
<use xlinkHref="#mode-icon" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={this.layoutBtnClickhandler.bind(this, 3)}
|
||||||
|
id="layoutBtn3"
|
||||||
|
class="mode-btn hide-on-mobile hide-in-file-mode"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={this.layoutBtnClickhandler.bind(this, 5)}
|
||||||
|
id="layoutBtn5"
|
||||||
|
class="mode-btn hide-on-mobile hide-in-file-mode"
|
||||||
|
aria-label={i18n._(t`Switch to layout with all vertical panes`)}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 100 100">
|
||||||
|
<use xlinkHref="#vertical-mode-icon" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
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={i18n._(t`Switch to full screen preview`)}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 100 100">
|
||||||
|
<rect x="0" y="0" width="100" height="100" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
|
||||||
|
aria-label={i18n._(t`Detach preview`)}
|
||||||
|
onClick={this.props.detachedPreviewBtnHandler}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="footer__separator" />
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={this.props.notificationsBtnClickHandler}
|
||||||
|
id="notificationsBtn"
|
||||||
|
class={`notifications-btn mode-btn hint--top-left hint--rounded ${
|
||||||
|
this.props.hasUnseenChangelog ? 'has-new' : ''
|
||||||
|
}`}
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="notifications-btn__dot" />
|
||||||
|
</button>
|
||||||
|
<Button
|
||||||
|
onClick={this.props.settingsBtnClickHandler}
|
||||||
|
data-event-category="ui"
|
||||||
|
data-event-action="settingsBtnClick"
|
||||||
|
class="mode-btn hint--top-left hint--rounded"
|
||||||
|
aria-label={i18n._(t`Settings`)}
|
||||||
|
>
|
||||||
|
<svg>
|
||||||
|
<use xlinkHref="#settings-icon" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
)}
|
||||||
|
</I18n>
|
||||||
<div class="footer__right">
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<symbol id="codepen-logo" viewBox="0 0 120 120">
|
|
||||||
<path
|
|
||||||
class="outer-ring"
|
|
||||||
d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
class="inner-box"
|
|
||||||
d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"
|
|
||||||
/>
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<svg>
|
|
||||||
<use xlinkHref="#codepen-logo" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="screenshotBtn"
|
|
||||||
class="mode-btn hint--rounded hint--top-left show-when-extension"
|
|
||||||
onClick={this.props.screenshotBtnClickHandler}
|
|
||||||
aria-label="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" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="footer__separator hide-on-mobile" />
|
|
||||||
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
|
|
||||||
<use xlinkHref="#mode-icon" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<svg viewBox="0 0 100 100">
|
|
||||||
<use xlinkHref="#mode-icon" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
|
|
||||||
<use xlinkHref="#mode-icon" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<svg viewBox="0 0 100 100">
|
|
||||||
<use xlinkHref="#vertical-mode-icon" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<svg viewBox="0 0 100 100">
|
|
||||||
<rect x="0" y="0" width="100" height="100" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
|
|
||||||
aria-label="Detach Preview"
|
|
||||||
onClick={this.props.detachedPreviewBtnHandler}
|
|
||||||
>
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="footer__separator" />
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={this.props.notificationsBtnClickHandler}
|
|
||||||
id="notificationsBtn"
|
|
||||||
class={`notifications-btn mode-btn hint--top-left hint--rounded ${
|
|
||||||
this.props.hasUnseenChangelog ? 'has-new' : ''
|
|
||||||
}`}
|
|
||||||
aria-label="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" />
|
|
||||||
</svg>
|
|
||||||
<span class="notifications-btn__dot" />
|
|
||||||
</button>
|
|
||||||
<Button
|
|
||||||
onClick={this.props.settingsBtnClickHandler}
|
|
||||||
data-event-category="ui"
|
|
||||||
data-event-action="settingsBtnClick"
|
|
||||||
class="mode-btn hint--top-left hint--rounded"
|
|
||||||
aria-label="Settings"
|
|
||||||
>
|
|
||||||
<svg>
|
|
||||||
<use xlinkHref="#settings-icon" />
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import { h, Component } from 'preact';
|
import { h, Component } from 'preact';
|
||||||
import { log } from '../utils';
|
import { log } from '../utils';
|
||||||
import { trackEvent } from '../analytics';
|
import { trackEvent } from '../analytics';
|
||||||
import { itemService } from '../itemService';
|
|
||||||
import { alertsService } from '../notifications';
|
|
||||||
import { deferred } from '../deferred';
|
|
||||||
import { ItemTile } from './ItemTile';
|
import { ItemTile } from './ItemTile';
|
||||||
|
import { Trans, NumberFormat, t } from '@lingui/macro';
|
||||||
|
import { I18n } from '@lingui/react';
|
||||||
|
|
||||||
export default class SavedItemPane extends Component {
|
export default class SavedItemPane extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@@ -113,7 +112,9 @@ export default class SavedItemPane extends Component {
|
|||||||
} catch (exception) {
|
} catch (exception) {
|
||||||
log(exception);
|
log(exception);
|
||||||
alert(
|
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,69 +155,92 @@ export default class SavedItemPane extends Component {
|
|||||||
{ filteredItems = this.state.items, items = [] }
|
{ filteredItems = this.state.items, items = [] }
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<div
|
<I18n>
|
||||||
id="js-saved-items-pane"
|
{({ i18n }) => (
|
||||||
class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
|
<div
|
||||||
onKeyDown={this.keyDownHandler.bind(this)}
|
id="js-saved-items-pane"
|
||||||
aria-hidden={isOpen}
|
class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
|
||||||
>
|
onKeyDown={this.keyDownHandler.bind(this)}
|
||||||
<button
|
aria-hidden={isOpen}
|
||||||
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"
|
|
||||||
>
|
|
||||||
X
|
|
||||||
</button>
|
|
||||||
<div class="flex flex-v-center" style="justify-content: space-between;">
|
|
||||||
<h3>My Library ({filteredItems.length})</h3>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button
|
<button
|
||||||
onClick={exportBtnClickHandler}
|
onClick={this.onCloseIntent.bind(this)}
|
||||||
class="btn--dark hint--bottom-left hint--rounded hint--medium"
|
class="btn saved-items-pane__close-btn"
|
||||||
aria-label="Export all your creations into a single importable file."
|
id="js-saved-items-pane-close-btn"
|
||||||
|
aria-label={i18n._(t`Close saved creations pane`)}
|
||||||
>
|
>
|
||||||
Export
|
X
|
||||||
</button>
|
</button>
|
||||||
<button
|
<div
|
||||||
onClick={this.importBtnClickHandler.bind(this)}
|
class="flex flex-v-center"
|
||||||
class="btn--dark hint--bottom-left hint--rounded hint--medium"
|
style="justify-content: space-between;"
|
||||||
aria-label="Import your creations. Only the file that you export through the 'Export' button can be imported."
|
|
||||||
>
|
>
|
||||||
Import
|
<h3>
|
||||||
</button>
|
<Trans>My Library ({filteredItems.length})</Trans>
|
||||||
</div>
|
</h3>
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
autocomplete="off"
|
|
||||||
type="search"
|
|
||||||
id="searchInput"
|
|
||||||
class="search-input"
|
|
||||||
onInput={this.searchInputHandler.bind(this)}
|
|
||||||
placeholder="Search your creations here..."
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div id="js-saved-items-wrap" class="saved-items-pane__container">
|
<div>
|
||||||
{!filteredItems.length && items.length ? (
|
<button
|
||||||
<div class="mt-1">No match found.</div>
|
onClick={exportBtnClickHandler}
|
||||||
) : null}
|
class="btn--dark hint--bottom-left hint--rounded hint--medium"
|
||||||
{filteredItems.map(item => (
|
aria-label={i18n._(
|
||||||
<ItemTile
|
t`Export all your creations into a single importable file.`
|
||||||
item={item}
|
)}
|
||||||
onClick={this.itemClickHandler.bind(this, item)}
|
>
|
||||||
onForkBtnClick={this.itemForkBtnClickHandler.bind(this, item)}
|
<Trans>Export</Trans>
|
||||||
onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(this, item)}
|
</button>
|
||||||
/>
|
<button
|
||||||
))}
|
onClick={this.importBtnClickHandler.bind(this)}
|
||||||
{!items.length ? (
|
class="btn--dark hint--bottom-left hint--rounded hint--medium"
|
||||||
<div class="tac">
|
aria-label={i18n._(
|
||||||
<h2 class="opacity--30">Nothing saved here.</h2>
|
t`Import your creations. Only the file that you export through the 'Export' button can be imported.`
|
||||||
<img style="max-width: 80%; opacity:0.4" src="assets/empty.svg" />
|
)}
|
||||||
|
>
|
||||||
|
<Trans>Import</Trans>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
<input
|
||||||
</div>
|
autocomplete="off"
|
||||||
</div>
|
type="search"
|
||||||
|
id="searchInput"
|
||||||
|
class="search-input"
|
||||||
|
onInput={this.searchInputHandler.bind(this)}
|
||||||
|
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">
|
||||||
|
<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
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{!items.length ? (
|
||||||
|
<div class="tac">
|
||||||
|
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -378,24 +378,24 @@ export default class Settings extends Component {
|
|||||||
stopped.
|
stopped.
|
||||||
</HelpText>
|
</HelpText>
|
||||||
</div>
|
</div>
|
||||||
{/*
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<div>
|
<Divider />
|
||||||
|
|
||||||
|
<div>
|
||||||
<label class="line">
|
<label class="line">
|
||||||
Language
|
Language
|
||||||
<select
|
<select
|
||||||
value={prefs.lang}
|
value={prefs.lang}
|
||||||
onChange={e => this.updateSetting(e, 'lang')}
|
onChange={e => this.updateSetting(e, 'lang')}
|
||||||
>
|
>
|
||||||
<option value="en">English</option>
|
<option value="en">English</option>
|
||||||
<option value="hi">Hindi</option>
|
<option value="hi">हिंदी</option>
|
||||||
<option value="sa">Sanskrit</option>
|
<option value="sa">Sanskrit</option>
|
||||||
<option value="es">Spanish</option>
|
<option value="es">Español (España)</option>
|
||||||
</select>
|
<option value="zh-Hans">中文(简体)</option>
|
||||||
|
</select>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
*/}
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user