1
0
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:
Kushagra Gour
2018-06-10 15:46:58 +05:30
parent 6c7b587ede
commit 8b6f39349b
10 changed files with 86 additions and 70 deletions

BIN
webmaker/src/FiraCode.ttf Normal file

Binary file not shown.

BIN
webmaker/src/FixedSys.ttf Normal file

Binary file not shown.

BIN
webmaker/src/Inconsolata.ttf Executable file

Binary file not shown.

BIN
webmaker/src/Monoid.ttf Normal file

Binary file not shown.

View File

@@ -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() {

View File

@@ -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;

View File

@@ -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 (

View File

@@ -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{' '}

View File

@@ -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
)}

View File

@@ -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>