1
0
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:
Kushagra Gour
2017-05-30 02:25:19 +05:30
parent b0aed631ee
commit e9696d6342
7 changed files with 43 additions and 14 deletions

BIN
src/FiraCode.ttf Normal file

Binary file not shown.

BIN
src/Fixedsys.ttf Normal file

Binary file not shown.

BIN
src/Monoid.ttf Normal file

Binary file not shown.

View File

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

View File

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

View File

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