mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-13 13:11:16 +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",
|
||||
"@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",
|
||||
|
||||
@ -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,86 +60,104 @@ export default class AddLibrary extends Component {
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Add Library</h1>
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<div>
|
||||
<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)">
|
||||
<use xlinkHref="#search" />
|
||||
</svg>
|
||||
<LibraryAutoSuggest
|
||||
fullWidth
|
||||
onSelect={this.suggestionSelectHandler.bind(this)}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="externalLibrarySearchInput"
|
||||
<div class="flex flex-v-center">
|
||||
<svg style="width: 30px; height: 30px;fill:rgb(255,255,255,0.5)">
|
||||
<use xlinkHref="#search" />
|
||||
</svg>
|
||||
<LibraryAutoSuggest
|
||||
fullWidth
|
||||
onSelect={this.suggestionSelectHandler.bind(this)}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
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>
|
||||
<p class="mt-0 help-text">Put each library in new line</p>
|
||||
|
||||
<p style="font-size: 0.8em;" class="show-when-extension opacity--70">
|
||||
Note: You can load external scripts only from following domains:
|
||||
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"
|
||||
id="externalJsTextarea"
|
||||
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>
|
||||
<h3 class="mb-0">CSS</h3>
|
||||
<p class="mt-0 help-text">
|
||||
<Trans>Put each library in new line</Trans>
|
||||
</p>
|
||||
<textarea
|
||||
onBlur={this.textareaBlurHandler.bind(this)}
|
||||
data-lang="css"
|
||||
class="full-width"
|
||||
id="externalCssTextarea"
|
||||
cols="30"
|
||||
rows="5"
|
||||
value={this.state.css}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</I18n>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,62 +45,68 @@ export class Console extends PureComponent {
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
id="consoleEl"
|
||||
class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
|
||||
>
|
||||
<div id="consoleLogEl" class="console__log">
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<div
|
||||
class="js-console__header code-wrap__header"
|
||||
title="Double click to toggle console"
|
||||
onDblClick={onConsoleHeaderDblClick}
|
||||
id="consoleEl"
|
||||
class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
|
||||
>
|
||||
<span class="code-wrap__header-label">
|
||||
<Trans>Console</Trans>
|
||||
<span class="count-label">{logs.length}</span>
|
||||
</span>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a
|
||||
class="code-wrap__header-btn"
|
||||
title="Clear console (CTRL + L)"
|
||||
onClick={onClearConsoleBtnClick}
|
||||
<div id="consoleLogEl" class="console__log">
|
||||
<div
|
||||
class="js-console__header code-wrap__header"
|
||||
title={i18n._(t`Double click to toggle console`)}
|
||||
onDblClick={onConsoleHeaderDblClick}
|
||||
>
|
||||
<svg>
|
||||
<use xlinkHref="#cancel-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="code-wrap__header-btn code-wrap__collapse-btn"
|
||||
title="Toggle console"
|
||||
onClick={toggleConsole}
|
||||
<span class="code-wrap__header-label">
|
||||
<Trans>Console</Trans>
|
||||
<span class="count-label">
|
||||
<NumberFormat value={logs.length} />
|
||||
</span>
|
||||
</span>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
</I18n>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,259 +73,265 @@ export default class Footer extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="footer" class="footer">
|
||||
<div>
|
||||
<a href="/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="logo" />
|
||||
</a>
|
||||
©
|
||||
<span class="web-maker-with-tag">Web Maker</span>
|
||||
<Button
|
||||
onClick={this.props.helpBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="helpButtonClick"
|
||||
class="footer__link hint--rounded hint--top-right"
|
||||
aria-label="Help"
|
||||
>
|
||||
<svg
|
||||
style="width:20px; height:20px; vertical-align:text-bottom"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<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" />
|
||||
</svg>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={this.props.keyboardShortcutsBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="keyboardShortcutButtonClick"
|
||||
class="footer__link hint--rounded hint--top-right hide-on-mobile"
|
||||
aria-label="Keyboard shortcuts"
|
||||
>
|
||||
<svg
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
verticalAlign: 'text-bottom'
|
||||
}}
|
||||
>
|
||||
<use xlinkHref="#keyboard-icon" />
|
||||
</svg>
|
||||
</Button>
|
||||
<a
|
||||
class="footer__link hint--rounded hint--top-right"
|
||||
aria-label="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"
|
||||
>
|
||||
<svg
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
verticalAlign: 'text-bottom'
|
||||
}}
|
||||
>
|
||||
<use xlinkHref="#twitter-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<Button
|
||||
onClick={this.props.supportDeveloperBtnClickHandler}
|
||||
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"
|
||||
>
|
||||
Donate
|
||||
</Button>
|
||||
</div>
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<div id="footer" class="footer">
|
||||
<div>
|
||||
<a href="/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="logo" />
|
||||
</a>
|
||||
©
|
||||
<span class="web-maker-with-tag">Web Maker</span>
|
||||
<Button
|
||||
onClick={this.props.helpBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="helpButtonClick"
|
||||
class="footer__link hint--rounded hint--top-right"
|
||||
aria-label={i18n._(t`Help`)}
|
||||
>
|
||||
<svg
|
||||
style="width:20px; height:20px; vertical-align:text-bottom"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<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" />
|
||||
</svg>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={this.props.keyboardShortcutsBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="keyboardShortcutButtonClick"
|
||||
class="footer__link hint--rounded hint--top-right hide-on-mobile"
|
||||
aria-label={i18n._(t`Keyboard shortcuts`)}
|
||||
>
|
||||
<svg
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
verticalAlign: 'text-bottom'
|
||||
}}
|
||||
>
|
||||
<use xlinkHref="#keyboard-icon" />
|
||||
</svg>
|
||||
</Button>
|
||||
<a
|
||||
class="footer__link hint--rounded hint--top-right"
|
||||
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"
|
||||
>
|
||||
<svg
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
verticalAlign: 'text-bottom'
|
||||
}}
|
||||
>
|
||||
<use xlinkHref="#twitter-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<Button
|
||||
onClick={this.props.supportDeveloperBtnClickHandler}
|
||||
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={i18n._(
|
||||
t`Support the developer by pledging some amount`
|
||||
)}
|
||||
>
|
||||
<Trans>Donate</Trans>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{this.props.prefs.isJs13kModeOn ? (
|
||||
<div class="flex flex-v-center">
|
||||
<JS13K
|
||||
isOpen={this.state.isJs13kDropdownOpen}
|
||||
codeSize={this.props.codeSize}
|
||||
onClick={this.js13kClickHandler.bind(this)}
|
||||
onBlur={() =>
|
||||
setTimeout(
|
||||
() => this.setState({ isJs13kDropdownOpen: false }),
|
||||
300
|
||||
)
|
||||
}
|
||||
/>
|
||||
{this.state.isJs13kDropdownOpen && (
|
||||
<div className="js13k__dropdown">
|
||||
<button
|
||||
class="btn"
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'block',
|
||||
marginBottom: '16px'
|
||||
}}
|
||||
onClick={this.props.onJs13KDownloadBtnClick}
|
||||
>
|
||||
Download game as zip
|
||||
</button>
|
||||
<a
|
||||
class="btn"
|
||||
rel="noopener"
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'block',
|
||||
marginBottom: '16px'
|
||||
}}
|
||||
href="https://pasteboard.co/"
|
||||
target="_blank"
|
||||
>
|
||||
Upload Image
|
||||
</a>
|
||||
<button
|
||||
class="btn"
|
||||
style={{ width: '200px', display: 'block' }}
|
||||
onClick={this.props.onJs13KHelpBtnClick}
|
||||
>
|
||||
Help
|
||||
</button>
|
||||
{this.props.prefs.isJs13kModeOn ? (
|
||||
<div class="flex flex-v-center">
|
||||
<JS13K
|
||||
isOpen={this.state.isJs13kDropdownOpen}
|
||||
codeSize={this.props.codeSize}
|
||||
onClick={this.js13kClickHandler.bind(this)}
|
||||
onBlur={() =>
|
||||
setTimeout(
|
||||
() => this.setState({ isJs13kDropdownOpen: false }),
|
||||
300
|
||||
)
|
||||
}
|
||||
/>
|
||||
{this.state.isJs13kDropdownOpen && (
|
||||
<div className="js13k__dropdown">
|
||||
<button
|
||||
class="btn"
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'block',
|
||||
marginBottom: '16px'
|
||||
}}
|
||||
onClick={this.props.onJs13KDownloadBtnClick}
|
||||
>
|
||||
<Trans>Download game as zip</Trans>
|
||||
</button>
|
||||
<a
|
||||
class="btn"
|
||||
rel="noopener"
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'block',
|
||||
marginBottom: '16px'
|
||||
}}
|
||||
href="https://pasteboard.co/"
|
||||
target="_blank"
|
||||
>
|
||||
<Trans>Upload Image</Trans>
|
||||
</a>
|
||||
<button
|
||||
class="btn"
|
||||
style={{ width: '200px', display: 'block' }}
|
||||
onClick={this.props.onJs13KHelpBtnClick}
|
||||
>
|
||||
<Trans>Help</Trans>
|
||||
</button>
|
||||
</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>
|
||||
) : 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="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>
|
||||
)}
|
||||
</I18n>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,69 +155,92 @@ export default class SavedItemPane extends Component {
|
||||
{ filteredItems = this.state.items, items = [] }
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
id="js-saved-items-pane"
|
||||
class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
|
||||
onKeyDown={this.keyDownHandler.bind(this)}
|
||||
aria-hidden={isOpen}
|
||||
>
|
||||
<button
|
||||
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>
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<div
|
||||
id="js-saved-items-pane"
|
||||
class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
|
||||
onKeyDown={this.keyDownHandler.bind(this)}
|
||||
aria-hidden={isOpen}
|
||||
>
|
||||
<button
|
||||
onClick={exportBtnClickHandler}
|
||||
class="btn--dark hint--bottom-left hint--rounded hint--medium"
|
||||
aria-label="Export all your creations into a single importable file."
|
||||
onClick={this.onCloseIntent.bind(this)}
|
||||
class="btn saved-items-pane__close-btn"
|
||||
id="js-saved-items-pane-close-btn"
|
||||
aria-label={i18n._(t`Close saved creations pane`)}
|
||||
>
|
||||
Export
|
||||
X
|
||||
</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."
|
||||
<div
|
||||
class="flex flex-v-center"
|
||||
style="justify-content: space-between;"
|
||||
>
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
autocomplete="off"
|
||||
type="search"
|
||||
id="searchInput"
|
||||
class="search-input"
|
||||
onInput={this.searchInputHandler.bind(this)}
|
||||
placeholder="Search your creations here..."
|
||||
/>
|
||||
<h3>
|
||||
<Trans>My Library ({filteredItems.length})</Trans>
|
||||
</h3>
|
||||
|
||||
<div id="js-saved-items-wrap" class="saved-items-pane__container">
|
||||
{!filteredItems.length && items.length ? (
|
||||
<div class="mt-1">No match found.</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">Nothing saved here.</h2>
|
||||
<img style="max-width: 80%; opacity:0.4" src="assets/empty.svg" />
|
||||
<div>
|
||||
<button
|
||||
onClick={exportBtnClickHandler}
|
||||
class="btn--dark hint--bottom-left hint--rounded hint--medium"
|
||||
aria-label={i18n._(
|
||||
t`Export all your creations into a single importable file.`
|
||||
)}
|
||||
>
|
||||
<Trans>Export</Trans>
|
||||
</button>
|
||||
<button
|
||||
onClick={this.importBtnClickHandler.bind(this)}
|
||||
class="btn--dark hint--bottom-left hint--rounded hint--medium"
|
||||
aria-label={i18n._(
|
||||
t`Import your creations. Only the file that you export through the 'Export' button can be imported.`
|
||||
)}
|
||||
>
|
||||
<Trans>Import</Trans>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
autocomplete="off"
|
||||
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.
|
||||
</HelpText>
|
||||
</div>
|
||||
{/*
|
||||
<Divider />
|
||||
|
||||
<div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div>
|
||||
<label class="line">
|
||||
Language
|
||||
<select
|
||||
value={prefs.lang}
|
||||
onChange={e => this.updateSetting(e, 'lang')}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="hi">Hindi</option>
|
||||
<option value="sa">Sanskrit</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
Language
|
||||
<select
|
||||
value={prefs.lang}
|
||||
onChange={e => this.updateSetting(e, 'lang')}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="hi">हिंदी</option>
|
||||
<option value="sa">Sanskrit</option>
|
||||
<option value="es">Español (España)</option>
|
||||
<option value="zh-Hans">中文(简体)</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user