mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-27 00:30:09 +02:00
port font, default image, modalclose focus etc
This commit is contained in:
BIN
webmaker/src/FiraCode.ttf
Normal file
BIN
webmaker/src/FiraCode.ttf
Normal file
Binary file not shown.
BIN
webmaker/src/FixedSys.ttf
Normal file
BIN
webmaker/src/FixedSys.ttf
Normal file
Binary file not shown.
BIN
webmaker/src/Inconsolata.ttf
Executable file
BIN
webmaker/src/Inconsolata.ttf
Executable file
Binary file not shown.
BIN
webmaker/src/Monoid.ttf
Normal file
BIN
webmaker/src/Monoid.ttf
Normal file
Binary file not shown.
@@ -1,4 +1,6 @@
|
||||
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 {
|
||||
render() {
|
||||
|
@@ -21,6 +21,10 @@ export default class Modal extends Component {
|
||||
document.body.classList[this.props.show ? 'add' : 'remove'](
|
||||
'overlay-visible'
|
||||
);
|
||||
|
||||
if (this.props.show) {
|
||||
this.overlayEl.querySelector('.js-modal__close-btn').focus();
|
||||
}
|
||||
}
|
||||
render() {
|
||||
if (!this.props.show) return null;
|
||||
|
@@ -1,5 +1,8 @@
|
||||
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 {
|
||||
render() {
|
||||
return (
|
||||
|
@@ -159,14 +159,16 @@ export default class Settings extends Component {
|
||||
<option disabled="disabled">----</option>
|
||||
<option value="other">Other font from system</option>
|
||||
</select>
|
||||
<input
|
||||
id="customEditorFontInput"
|
||||
type="text"
|
||||
value={this.props.prefs.editorCustomFont}
|
||||
placeholder="Custom font name here"
|
||||
data-setting="editorCustomFont"
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
{this.props.prefs.editorFont === 'other' && (
|
||||
<input
|
||||
id="customEditorFontInput"
|
||||
type="text"
|
||||
value={this.props.prefs.editorCustomFont}
|
||||
placeholder="Custom font name here"
|
||||
data-setting="editorCustomFont"
|
||||
onChange={this.updateSetting.bind(this)}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
<label class="line">
|
||||
Font Size{' '}
|
||||
|
@@ -417,6 +417,8 @@ export default class App extends Component {
|
||||
});
|
||||
}
|
||||
componentDidMount() {
|
||||
document.body.style.height = `${window.innerHeight}px`;
|
||||
|
||||
// Editor keyboard shortucuts
|
||||
window.addEventListener('keydown', event => {
|
||||
// TODO: refactor common listener code
|
||||
@@ -958,9 +960,9 @@ export default class App extends Component {
|
||||
settingsBtnClickHandler={() =>
|
||||
this.setState({ isSettingsModalOpen: true })
|
||||
}
|
||||
notificationsBtnClickHandler={() =>
|
||||
this.setState({ notificationsBtnClickHandler: true })
|
||||
}
|
||||
notificationsBtnClickHandler={this.notificationsBtnClickHandler.bind(
|
||||
this
|
||||
)}
|
||||
supportDeveloperBtnClickHandler={this.supportDeveloperBtnClickHandler.bind(
|
||||
this
|
||||
)}
|
||||
|
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Web Maker</title>
|
||||
@@ -9,72 +10,72 @@
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
|
||||
<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
|
||||
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
|
||||
<% } %>
|
||||
<% for (var chunk of webpack.chunks) { %>
|
||||
<% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
|
||||
<% for (var file of chunk.files) { %>
|
||||
<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
|
||||
<% } else if (file.match(/manifest\.json$/)) { %>
|
||||
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
|
||||
<% } %>
|
||||
<% for (var chunk of webpack.chunks) { %>
|
||||
<% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
|
||||
<% for (var file of chunk.files) { %>
|
||||
<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
|
||||
<% } else if (file.match(/manifest\.json$/)) { %>
|
||||
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% } %>
|
||||
|
||||
|
||||
<style>
|
||||
/* Critically acclaimed CSS */
|
||||
<style>
|
||||
/* Critically acclaimed CSS */
|
||||
|
||||
.saved-items-pane {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 450px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.saved-items-pane {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 450px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.modal {
|
||||
visibility: hidden;
|
||||
}
|
||||
.modal {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<!-- build:css vendor.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/fold/foldgutter.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
|
||||
<link rel="stylesheet" href="lib/hint.min.css">
|
||||
<link rel="stylesheet" href="lib/inlet.css">
|
||||
<!-- endbuild -->
|
||||
<!-- build:css vendor.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/fold/foldgutter.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
|
||||
<link rel="stylesheet" href="lib/hint.min.css">
|
||||
<link rel="stylesheet" href="lib/inlet.css">
|
||||
<!-- 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 -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- endbuild -->
|
||||
<!-- build:css style.css -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- endbuild -->
|
||||
|
||||
<style id="fontStyleTemplate" type="template">
|
||||
@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+F000; } .Codemirror pre { font-family: 'fontname', monospace; }
|
||||
</style>
|
||||
<style type="text/css" id="fontStyleTag">
|
||||
@font-face {
|
||||
font-family: 'FiraCode';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
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;
|
||||
}
|
||||
<style id="fontStyleTemplate" type="template">
|
||||
@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+F000; } .CodeMirror pre { font-family: 'fontname', monospace; }
|
||||
</style>
|
||||
<style type="text/css" id="fontStyleTag">
|
||||
@font-face {
|
||||
font-family: 'FiraCode';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
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;
|
||||
}
|
||||
|
||||
.Codemirror pre {
|
||||
font-family: 'FiraCode', monospace;
|
||||
}
|
||||
.CodeMirror pre {
|
||||
font-family: 'FiraCode', monospace;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -87,10 +88,12 @@
|
||||
<%= htmlWebpackPlugin.options.ssr({
|
||||
url: '/'
|
||||
}) %>
|
||||
<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
|
||||
<script>
|
||||
window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')
|
||||
</script>
|
||||
<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
|
||||
<script>
|
||||
window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user