mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-14 10:36:19 +02:00
add font options! fixes #103
This commit is contained in:
BIN
src/FiraCode.ttf
Normal file
BIN
src/FiraCode.ttf
Normal file
Binary file not shown.
BIN
src/Fixedsys.ttf
Normal file
BIN
src/Fixedsys.ttf
Normal file
Binary file not shown.
BIN
src/Monoid.ttf
Normal file
BIN
src/Monoid.ttf
Normal file
Binary file not shown.
@ -11,6 +11,30 @@
|
|||||||
<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">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -382,6 +406,15 @@
|
|||||||
Theme
|
Theme
|
||||||
<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
|
<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
|
||||||
</label>
|
</label>
|
||||||
|
<label class="line">
|
||||||
|
Font
|
||||||
|
<select style="flex:1;margin:0 20px" data-setting="editorFont" d-change="updateSetting">
|
||||||
|
<option value="FiraCode">Fira Code</option>
|
||||||
|
<option value="Inconsolata">Inconsolata</option>
|
||||||
|
<option value="Monoid">Monoid</option>
|
||||||
|
<option value="FixedSys">FixedSys</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
<label class="line">
|
<label class="line">
|
||||||
Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
|
Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
|
||||||
|
|
||||||
|
@ -5,7 +5,7 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
|
|||||||
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
|
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
|
||||||
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
|
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
|
||||||
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
|
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
|
||||||
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate
|
||||||
*/
|
*/
|
||||||
/* eslint-disable no-extra-semi */
|
/* eslint-disable no-extra-semi */
|
||||||
;(function (alertsService) {
|
;(function (alertsService) {
|
||||||
@ -1235,6 +1235,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
|||||||
$('[data-setting=fontSize]').value = prefs.fontSize || 16;
|
$('[data-setting=fontSize]').value = prefs.fontSize || 16;
|
||||||
$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
|
$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
|
||||||
$('[data-setting=autoPreview]').checked = prefs.autoPreview;
|
$('[data-setting=autoPreview]').checked = prefs.autoPreview;
|
||||||
|
$('[data-setting=editorFont]').value = prefs.editorFont;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -1266,18 +1267,19 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
|||||||
// Update indentation count when slider is updated
|
// Update indentation count when slider is updated
|
||||||
indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value;
|
indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value;
|
||||||
|
|
||||||
|
// Replace correct css file in LINK tags's href
|
||||||
|
editorThemeLinkTag.href = '/lib/codemirror/theme/' + prefs.editorTheme + '.css';
|
||||||
|
fontStyleTag.textContent = fontStyleTemplate.textContent.replace(/fontname/g, prefs.editorFont || 'FiraCode');
|
||||||
|
|
||||||
['html', 'js', 'css'].forEach((type) => {
|
['html', 'js', 'css'].forEach((type) => {
|
||||||
scope.cm[type].setOption(
|
scope.cm[type].setOption(
|
||||||
'indentWithTabs',
|
'indentWithTabs',
|
||||||
$('[data-setting=indentWith]:checked').value !== 'spaces'
|
$('[data-setting=indentWith]:checked').value !== 'spaces'
|
||||||
);
|
);
|
||||||
|
|
||||||
scope.cm[type].setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2, shake: false } : false);
|
scope.cm[type].setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2, shake: false } : false);
|
||||||
scope.cm[type].setOption('indentUnit', +$('[data-setting=indentSize]').value);
|
scope.cm[type].setOption('indentUnit', +$('[data-setting=indentSize]').value);
|
||||||
scope.cm[type].setOption('tabSize', +$('[data-setting=indentSize]').value);
|
scope.cm[type].setOption('tabSize', +$('[data-setting=indentSize]').value);
|
||||||
scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
|
scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
|
||||||
// Replace correct css file in LINK tags's href
|
|
||||||
editorThemeLinkTag.href = '/lib/codemirror/theme/' + prefs.editorTheme + '.css';
|
|
||||||
|
|
||||||
scope.cm[type].setOption('keyMap', $('[data-setting=keymap]:checked').value);
|
scope.cm[type].setOption('keyMap', $('[data-setting=keymap]:checked').value);
|
||||||
scope.cm[type].refresh();
|
scope.cm[type].refresh();
|
||||||
@ -1590,7 +1592,6 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
|||||||
}, 350);
|
}, 350);
|
||||||
toggleSavedItemsPane();
|
toggleSavedItemsPane();
|
||||||
}
|
}
|
||||||
console.log(event.keyCode)
|
|
||||||
|
|
||||||
// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
|
// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
|
||||||
if ((event.ctrlKey || event.metaKey) && (event.keyCode === 70)) {
|
if ((event.ctrlKey || event.metaKey) && (event.keyCode === 70)) {
|
||||||
@ -1690,7 +1691,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
|||||||
keymap: 'sublime',
|
keymap: 'sublime',
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
refreshOnResize: false,
|
refreshOnResize: false,
|
||||||
autoPreview: true
|
autoPreview: true,
|
||||||
|
editorFont: 'FiraCode'
|
||||||
}, function syncGetCallback(result) {
|
}, function syncGetCallback(result) {
|
||||||
if (result.preserveLastCode && lastCode) {
|
if (result.preserveLastCode && lastCode) {
|
||||||
unsavedEditCount = 0;
|
unsavedEditCount = 0;
|
||||||
@ -1721,6 +1723,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
|||||||
prefs.fontSize = result.fontSize;
|
prefs.fontSize = result.fontSize;
|
||||||
prefs.refreshOnResize = result.refreshOnResize;
|
prefs.refreshOnResize = result.refreshOnResize;
|
||||||
prefs.autoPreview = result.autoPreview;
|
prefs.autoPreview = result.autoPreview;
|
||||||
|
prefs.editorFont = result.editorFont;
|
||||||
|
|
||||||
updateSettingsInUi();
|
updateSettingsInUi();
|
||||||
scope.updateSetting();
|
scope.updateSetting();
|
||||||
|
@ -1,10 +1,3 @@
|
|||||||
@font-face {
|
|
||||||
font-family: 'Inconsolata';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Inconsolata'), url(../Inconsolata-Regular.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;
|
|
||||||
}
|
|
||||||
:root {
|
:root {
|
||||||
--color-bg: #252637;
|
--color-bg: #252637;
|
||||||
--color-sidebar: #3A2B63;
|
--color-sidebar: #3A2B63;
|
||||||
@ -240,7 +233,7 @@ select, input[type="text"], input[type="number"], textarea {
|
|||||||
height: calc(100%);
|
height: calc(100%);
|
||||||
}
|
}
|
||||||
.Codemirror pre {
|
.Codemirror pre {
|
||||||
font-family: 'Inconsolata', monospace;
|
font-variant-ligatures: contextual;
|
||||||
}
|
}
|
||||||
.cm-s-monokai .CodeMirror-linenumber {
|
.cm-s-monokai .CodeMirror-linenumber {
|
||||||
color:rgba(255,255,255,0.2);
|
color:rgba(255,255,255,0.2);
|
||||||
|
Reference in New Issue
Block a user