mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-27 16:50:11 +02:00
Code Issues Releases Wiki Activity

port font, default image, modalclose focus etc

Browse Source
This commit is contained in:
Kushagra Gour
2018-06-10 15:46:58 +05:30
parent 6c7b587ede
commit 8b6f39349b
10 changed files with 86 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
webmaker/src/FiraCode.ttf Normal file
View File

Binary file not shown.

BIN
webmaker/src/FixedSys.ttf Normal file
View File

Binary file not shown.

BIN
webmaker/src/Inconsolata.ttf Executable file
View File

Binary file not shown.

BIN
webmaker/src/Monoid.ttf Normal file
View File

Binary file not shown.

2
webmaker/src/components/MainHeader.jsx
View File

@@ -1,4 +1,6 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
const DEFAULT_PROFILE_IMG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,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' /%3E%3C/svg%3E";
export default class Header extends Component { export default class Header extends Component {
render() { render() {

4
webmaker/src/components/Modal.jsx
View File

@@ -21,6 +21,10 @@ export default class Modal extends Component {
document.body.classList[this.props.show ? 'add' : 'remove']( document.body.classList[this.props.show ? 'add' : 'remove'](
'overlay-visible' 'overlay-visible'
); );
if (this.props.show) {
this.overlayEl.querySelector('.js-modal__close-btn').focus();
}
} }
render() { render() {
if (!this.props.show) return null; if (!this.props.show) return null;

3
webmaker/src/components/Profile.jsx
View File

@@ -1,5 +1,8 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
const DEFAULT_PROFILE_IMG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,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' /%3E%3C/svg%3E";
export default class Profile extends Component { export default class Profile extends Component {
render() { render() {
return ( return (

18
webmaker/src/components/Settings.jsx
View File

@@ -159,14 +159,16 @@ export default class Settings extends Component {
<option disabled="disabled">----</option> <option disabled="disabled">----</option>
<option value="other">Other font from system</option> <option value="other">Other font from system</option>
</select> </select>
<input {this.props.prefs.editorFont === 'other' && (
id="customEditorFontInput" <input
type="text" id="customEditorFontInput"
value={this.props.prefs.editorCustomFont} type="text"
placeholder="Custom font name here" value={this.props.prefs.editorCustomFont}
data-setting="editorCustomFont" placeholder="Custom font name here"
onChange={this.updateSetting.bind(this)} data-setting="editorCustomFont"
/> onChange={this.updateSetting.bind(this)}
/>
)}
</label> </label>
<label class="line"> <label class="line">
Font Size{' '} Font Size{' '}

8
webmaker/src/components/app.jsx
View File

@@ -417,6 +417,8 @@ export default class App extends Component {
}); });
} }
componentDidMount() { componentDidMount() {
document.body.style.height = `${window.innerHeight}px`;
// Editor keyboard shortucuts // Editor keyboard shortucuts
window.addEventListener('keydown', event => { window.addEventListener('keydown', event => {
// TODO: refactor common listener code // TODO: refactor common listener code
@@ -958,9 +960,9 @@ export default class App extends Component {
settingsBtnClickHandler={() => settingsBtnClickHandler={() =>
this.setState({ isSettingsModalOpen: true }) this.setState({ isSettingsModalOpen: true })
} }
notificationsBtnClickHandler={() => notificationsBtnClickHandler={this.notificationsBtnClickHandler.bind(
this.setState({ notificationsBtnClickHandler: true }) this
} )}
supportDeveloperBtnClickHandler={this.supportDeveloperBtnClickHandler.bind( supportDeveloperBtnClickHandler={this.supportDeveloperBtnClickHandler.bind(
this this
)} )}

121
webmaker/src/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Web Maker</title> <title>Web Maker</title>
@@ -9,72 +10,72 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json"> <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
<% if (htmlWebpackPlugin.options.manifest.theme_color) { %> <% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>"> <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
<% } %> <% } %>
<% for (var chunk of webpack.chunks) { %> <% for (var chunk of webpack.chunks) { %>
<% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %> <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
<% for (var file of chunk.files) { %> <% for (var file of chunk.files) { %>
<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %> <% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"> <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
<% } else if (file.match(/manifest\.json$/)) { %> <% } else if (file.match(/manifest\.json$/)) { %>
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>"> <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
<% } %> <% } %>
<% } %> <% } %>
<% } %> <% } %>
<style> <style>
/* Critically acclaimed CSS */ /* Critically acclaimed CSS */
.saved-items-pane { .saved-items-pane {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 450px; width: 450px;
transform: translateX(100%); transform: translateX(100%);
} }
.modal { .modal {
visibility: hidden; visibility: hidden;
} }
</style> </style>
<!-- build:css vendor.css --> <!-- build:css vendor.css -->
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css"> <link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css"> <link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css"> <link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css"> <link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
<link rel="stylesheet" href="lib/hint.min.css"> <link rel="stylesheet" href="lib/hint.min.css">
<link rel="stylesheet" href="lib/inlet.css"> <link rel="stylesheet" href="lib/inlet.css">
<!-- endbuild --> <!-- endbuild -->
<link rel="stylesheet" id="editorThemeLinkTag" href="lib/codemirror/theme/monokai.css"></link> <link rel="stylesheet" id="editorThemeLinkTag" href="lib/codemirror/theme/monokai.css"></link>
<!-- build:css style.css --> <!-- build:css style.css -->
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- endbuild --> <!-- endbuild -->
<style id="fontStyleTemplate" type="template"> <style id="fontStyleTemplate" type="template">
@font-face { font-family: 'fontname'; font-style: normal; font-weight: 400; src: url(fontname.ttf) format('truetype'); unicode-range: @font-face { font-family: 'fontname'; font-style: normal; font-weight: 400; src: url(fontname.ttf) format('truetype'); unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF,
U+F000; } .Codemirror pre { font-family: 'fontname', monospace; } U+EFFD, U+F000; } .CodeMirror pre { font-family: 'fontname', monospace; }
</style> </style>
<style type="text/css" id="fontStyleTag"> <style type="text/css" id="fontStyleTag">
@font-face { @font-face {
font-family: 'FiraCode'; font-family: 'FiraCode';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(FiraCode.ttf) format('truetype'); src: url(FiraCode.ttf) format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
} }
.Codemirror pre { .CodeMirror pre {
font-family: 'FiraCode', monospace; font-family: 'FiraCode', monospace;
} }
</style> </style>
</head> </head>
<body> <body>
@@ -87,10 +88,12 @@
<%= htmlWebpackPlugin.options.ssr({ <%= htmlWebpackPlugin.options.ssr({
url: '/' url: '/'
}) %> }) %>
<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script> <script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
<script> <script>
window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>') window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')
</script>
</script>
</body> </body>
</html> </html>