mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-10 03:35:16 +02:00
Kushagra Gour
GitHub
commit
9b09685aff
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/inlet.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>
|
||||
|
||||
<body>
|
||||
@ -282,9 +306,23 @@
|
||||
|
||||
<h2 style="text-decoration: underline;">Choose one:</h2>
|
||||
<div class="onboard-selection-wrap flex">
|
||||
<div class="onboard-selection selected" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150" viewBox="180 200 340 320" xml:space="preserve">
|
||||
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
|
||||
C494.264,234.442,503.916,244.094,503.916,256z"></path>
|
||||
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
|
||||
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
|
||||
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
|
||||
<rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
|
||||
</svg>
|
||||
<div class="onboard-selection-text">Don't show in new tab</div>
|
||||
</div>
|
||||
|
||||
<div style="opacity:0.7;">OR</div>
|
||||
|
||||
<div class="onboard-selection" id="onboardShowInTabOptionBtn" d-click="onShowInTabClicked">
|
||||
<!-- Awesome free vector from freepik.com -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150" viewBox="180 200 340 320" xml:space="preserve">
|
||||
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
|
||||
C494.264,234.442,503.916,244.094,503.916,256z"></path>
|
||||
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
|
||||
@ -295,26 +333,16 @@
|
||||
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="430px" style="fill:rgba(0,0,0,0.25);"></rect>
|
||||
<rect width="140px" height="165px" rx="5" ry="5" x="345" y="315px" style="fill:#f3f3f3;"></rect>
|
||||
</svg>
|
||||
<div class="onboard-selection-text">Show in new tab</div>
|
||||
</div>
|
||||
<div style="opacity:0.7;">OR</div>
|
||||
|
||||
<div class="onboard-selection selected" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
|
||||
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
|
||||
C494.264,234.442,503.916,244.094,503.916,256z"></path>
|
||||
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
|
||||
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
|
||||
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
|
||||
<rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
|
||||
</svg>
|
||||
<div class="onboard-selection-text">Don't show in new tab</div>
|
||||
<div class="onboard-selection-text">Show in every new tab</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
You can change this later from Settings (<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888" viewBox="0 0 24 24"><use xlink:href="#settings-icon"></use></svg>) in bottom right of the app.
|
||||
</p>
|
||||
<p>
|
||||
Also, follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming features!
|
||||
</p>
|
||||
|
||||
<p class="tac">
|
||||
<button class="btn" d-click="closeAllOverlays">Lets start!</button>
|
||||
@ -323,7 +351,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="settingsModal">
|
||||
<div class="modal modal--settings" id="settingsModal">
|
||||
<div class="modal__content">
|
||||
<h1>Settings</h1>
|
||||
|
||||
@ -370,6 +398,7 @@
|
||||
<option value="sass">SASS</option>
|
||||
<option value="less">LESS</option>
|
||||
<option value="stylus">Stylus</option>
|
||||
<option value="acss">Atomic CSS</option>
|
||||
</select>
|
||||
<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
|
||||
<option value="js">JS</option>
|
||||
@ -382,6 +411,15 @@
|
||||
Theme
|
||||
<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
|
||||
</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">
|
||||
Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
|
||||
|
||||
@ -422,15 +460,27 @@
|
||||
<div class="modal" id="notificationsModal">
|
||||
<div class="modal__content">
|
||||
<h1>Whats new?</h1>
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.7.0</span>
|
||||
<ul>
|
||||
<li><strong>Fork any creation!</strong>: Now you can fork any existing creation of yours to start a new work based on it. One big use case of this feature is "Templates"! <a href="https://kushagragour.in/blog/2017/05/web-maker-fork-templates/?utm_source=webmakerapp&utm_medium=referral">Read more about it</a>.</li>
|
||||
<li><strong>Fonts 😍 </strong>: Super-awesome 4 fonts (mostly with ligature support) now available to choose from. Fira Code is the default font now.</li>
|
||||
<li>Updated most used external libraries to latest versions.</li>
|
||||
<li><strong>Bugfix</strong>: Add missing Bootstrap JS file to most used external libraries list.</li>
|
||||
<li>Several other minor bugfixes and improvements to make Web Maker awesome!</li>
|
||||
|
||||
<li>Great news to share with you - Web Maker has been featured on the Chrome Webstore homepage! Thanks for all the love :)</li>
|
||||
<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
|
||||
<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a> & <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">share it</a>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.6.1</span>
|
||||
<ul>
|
||||
<li><strong>Bugfix</strong>: Emojis vanishing while exporting to Codepen has been fixed.</li>
|
||||
<li><strong>Bugfix</strong>: <code>console.clear()</code> now doesn't error and clears the inbuilt console.</li>
|
||||
<li><strong>Bugfix</strong>: External libraries added to the creation are exported as well to Codepen.</li>
|
||||
|
||||
<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
|
||||
<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a> & <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">share it</a>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
window.jsLibs = [
|
||||
{ url: 'https://code.jquery.com/jquery-3.1.1.min.js', label: 'jQuery', type: 'js' },
|
||||
{ url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js', label: 'Angular', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js', label: 'React', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js', label: 'React DOM', type: 'js' },
|
||||
{ url: 'https://unpkg.com/vue@2.1.3/dist/vue.min.js', label: 'Vue.js', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js', label: 'Three.js', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js', label: 'D3', type: 'js' },
|
||||
{ url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js', label: 'Angular', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js', label: 'React', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js', label: 'React DOM', type: 'js' },
|
||||
{ url: 'https://unpkg.com/vue@2.3.3/dist/vue.min.js', label: 'Vue.js', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js', label: 'Three.js', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js', label: 'D3', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js', label: 'Underscore', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js', label: 'Greensock TweenMax', type: 'js' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/uikit.min.js', label: 'UIkit', type: 'js' },
|
||||
]
|
||||
window.cssLibs = [
|
||||
{ url: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', label: 'Bootstrap', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css', label: 'Foundation', type: 'css' },
|
||||
{ url: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', label: 'Bootstrap', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/foundation.min.css', label: 'Foundation', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.min.css', label: 'Hint.css', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/uikit.min.css', label: 'UIkit', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', label: 'Animate.css', type: 'css' },
|
||||
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.4.1/hint.min.css', label: 'Hint.css', type: 'css' }
|
||||
]
|
||||
{ url: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', label: 'FontAwesome', type: 'css' },
|
||||
]
|
||||
|
||||
@ -5,7 +5,7 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
|
||||
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
|
||||
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
|
||||
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
|
||||
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate
|
||||
*/
|
||||
/* eslint-disable no-extra-semi */
|
||||
;(function (alertsService) {
|
||||
@ -315,7 +315,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
});
|
||||
items.forEach(function (item) {
|
||||
html += '<div class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">'
|
||||
+ '<a class="js-saved-item-tile__close-btn saved-item-tile__close-btn hint--left" aria-label="Remove">X</a>'
|
||||
+ '<div class="saved-item-tile__btns"><a class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium" aria-label="Creates a duplicate of this creation (Ctrl/⌘ + F)">Fork<span class="show-when-selected">(Ctrl/⌘ + F)</span></a><a class="js-saved-item-tile__remove-btn saved-item-tile__btn hint--left" aria-label="Remove">X</a></div>'
|
||||
+ '<h3 class="saved-item-tile__title">' + item.title + '</h3><span class="saved-item-tile__meta">Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>';
|
||||
});
|
||||
savedItemCountEl.textContent = '(' + items.length + ')';
|
||||
@ -396,6 +396,21 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
unsavedEditCount = 0;
|
||||
saveBtn.classList.remove('is-marked');
|
||||
}
|
||||
// Creates a new item with passed item's contents
|
||||
function forkItem(sourceItem) {
|
||||
if (unsavedEditCount) {
|
||||
var shouldDiscard = confirm('You have unsaved changes in your current work. Do you want to discard unsaved changes and continue?');
|
||||
if (!shouldDiscard) { return; }
|
||||
}
|
||||
const fork = JSON.parse(JSON.stringify(sourceItem));
|
||||
delete fork.id;
|
||||
fork.title = '(Forked) ' + sourceItem.title;
|
||||
fork.updatedOn = Date.now();
|
||||
setCurrentItem(fork);
|
||||
refreshEditor();
|
||||
alertsService.add(`"${sourceItem.title}" was forked`);
|
||||
trackEvent('fn', 'itemForked');
|
||||
}
|
||||
function createNewItem() {
|
||||
var d = new Date();
|
||||
setCurrentItem({
|
||||
@ -757,6 +772,14 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
function errorHandler() {
|
||||
utils.log(arguments);
|
||||
trackEvent('fn', 'error', 'writeFile');
|
||||
// When there are too many write errors, show a message.
|
||||
writeFile.errorCount = (writeFile.errorCount || 0) + 1;
|
||||
if (writeFile.errorCount === 10) {
|
||||
setTimeout(function () {
|
||||
alert('Oops! Seems like your preview isn\'t updating. Please try the following steps until it fixes:\n - Refresh Web Maker\n - Restart Chrome browser\n - Reinstall Web Maker (don\'t forget to export all your creations from saved items pane (click the OPEN button) before reinstalling)\n\nIf nothing works, please tweet out to @webmakerApp.');
|
||||
trackEvent('ui', 'writeFileMessageSeen');
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
// utils.log('writing file ', name);
|
||||
@ -1224,6 +1247,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
$('[data-setting=fontSize]').value = prefs.fontSize || 16;
|
||||
$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
|
||||
$('[data-setting=autoPreview]').checked = prefs.autoPreview;
|
||||
$('[data-setting=editorFont]').value = prefs.editorFont;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1255,18 +1279,19 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
// Update indentation count when slider is updated
|
||||
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) => {
|
||||
scope.cm[type].setOption(
|
||||
'indentWithTabs',
|
||||
$('[data-setting=indentWith]:checked').value !== 'spaces'
|
||||
);
|
||||
|
||||
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('tabSize', +$('[data-setting=indentSize]').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].refresh();
|
||||
@ -1458,14 +1483,20 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
|
||||
utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane);
|
||||
utils.onButtonClick(savedItemsPane, function (e) {
|
||||
// TODO: warn about unsaved changes in current item
|
||||
if (e.target.classList.contains('js-saved-item-tile')) {
|
||||
setTimeout(function () {
|
||||
openItem(e.target.dataset.itemId);
|
||||
}, 350);
|
||||
toggleSavedItemsPane();
|
||||
}
|
||||
if (e.target.classList.contains('js-saved-item-tile__close-btn')) {
|
||||
removeItem(e.target.parentElement.dataset.itemId);
|
||||
if (e.target.classList.contains('js-saved-item-tile__remove-btn')) {
|
||||
removeItem(e.target.parentElement.parentElement.dataset.itemId);
|
||||
} else if (e.target.classList.contains('js-saved-item-tile__fork-btn')) {
|
||||
toggleSavedItemsPane();
|
||||
setTimeout(function () {
|
||||
forkItem(savedItems[e.target.parentElement.parentElement.dataset.itemId]);
|
||||
}, 350);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1518,6 +1549,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
// Editor keyboard shortucuts
|
||||
window.addEventListener('keydown', function (event) {
|
||||
var selectedItemElement;
|
||||
// TODO: refactor common listener code
|
||||
// Ctrl/⌘ + S
|
||||
if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)) {
|
||||
event.preventDefault();
|
||||
@ -1527,7 +1559,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
// Ctrl/⌘ + Shift + 5
|
||||
if (!prefs.autoPreview && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.keyCode === 53)) {
|
||||
event.preventDefault();
|
||||
scope.setPreviewContent();
|
||||
scope.setPreviewContent(true);
|
||||
trackEvent('ui', 'previewKeyboardShortcut');
|
||||
}
|
||||
// Ctrl/⌘ + O
|
||||
@ -1572,6 +1604,17 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
}, 350);
|
||||
toggleSavedItemsPane();
|
||||
}
|
||||
|
||||
// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
|
||||
if (isSavedItemsPaneOpen && (event.ctrlKey || event.metaKey) && (event.keyCode === 70)) {
|
||||
event.preventDefault();
|
||||
selectedItemElement = $('.js-saved-item-tile.selected');
|
||||
setTimeout(function () {
|
||||
forkItem(savedItems[selectedItemElement.dataset.itemId]);
|
||||
}, 350);
|
||||
toggleSavedItemsPane();
|
||||
trackEvent('ui', 'forkKeyboardShortcut');
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('click', function(e) {
|
||||
@ -1660,7 +1703,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
keymap: 'sublime',
|
||||
fontSize: 16,
|
||||
refreshOnResize: false,
|
||||
autoPreview: true
|
||||
autoPreview: true,
|
||||
editorFont: 'FiraCode'
|
||||
}, function syncGetCallback(result) {
|
||||
if (result.preserveLastCode && lastCode) {
|
||||
unsavedEditCount = 0;
|
||||
@ -1691,6 +1735,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
|
||||
prefs.fontSize = result.fontSize;
|
||||
prefs.refreshOnResize = result.refreshOnResize;
|
||||
prefs.autoPreview = result.autoPreview;
|
||||
prefs.editorFont = result.editorFont;
|
||||
|
||||
updateSettingsInUi();
|
||||
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 {
|
||||
--color-bg: #252637;
|
||||
--color-sidebar: #3A2B63;
|
||||
@ -17,7 +10,7 @@ body {
|
||||
background: var(--color-bg);
|
||||
color: rgba(255,255,255,0.9);
|
||||
min-height: 100vh;
|
||||
font-family: Helvetica, arial;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
@ -101,6 +94,10 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
content: '★';
|
||||
color: #eee333;
|
||||
}
|
||||
/* used to show keyboard specific content when something is keyboard focused */
|
||||
.show-when-selected { display: none; }
|
||||
.selected .show-when-selected { display: inline-block; }
|
||||
|
||||
.main-container {
|
||||
position: absolute;
|
||||
left: 0; right: 0;
|
||||
@ -236,7 +233,7 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
height: calc(100%);
|
||||
}
|
||||
.Codemirror pre {
|
||||
font-family: 'Inconsolata', monospace;
|
||||
font-variant-ligatures: contextual;
|
||||
}
|
||||
.cm-s-monokai .CodeMirror-linenumber {
|
||||
color:rgba(255,255,255,0.2);
|
||||
@ -451,12 +448,19 @@ li.CodeMirror-hint-active {
|
||||
background: rgba(0,0,0,0.6);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
/* Make settings modal smaller */
|
||||
@media screen and (min-width: 600px) {
|
||||
.modal--settings {
|
||||
width: 600px;
|
||||
margin-left: -300px;
|
||||
}
|
||||
}
|
||||
.saved-items-pane {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
width: 450px;
|
||||
padding: 20px 30px;
|
||||
z-index: 6;
|
||||
background-color: var(--color-sidebar);
|
||||
@ -535,17 +539,29 @@ li.CodeMirror-hint-active {
|
||||
.saved-item-tile.selected {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
.saved-item-tile__close-btn {
|
||||
padding: 7px 10px;
|
||||
.saved-item-tile__btns {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 6px;
|
||||
z-index: 1;
|
||||
color: rgba(255,255,255,0.3);
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
right: 8px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.saved-item-tile__close-btn:hover {
|
||||
.saved-item-tile.selected .saved-item-tile__btns,
|
||||
.saved-item-tile:hover .saved-item-tile__btns {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.saved-item-tile__btn {
|
||||
padding: 7px 10px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
border-radius: 20px;
|
||||
margin-left: 2px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.saved-item-tile__btn:hover {
|
||||
background: rgba(255,255,255,0.8);
|
||||
color: #555;
|
||||
}
|
||||
@ -693,16 +709,21 @@ li.CodeMirror-hint-active {
|
||||
position: fixed;
|
||||
will-change: transform;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
top: -5px;
|
||||
padding: 10px;
|
||||
background: var(--color-sidebar);
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
|
||||
/*color: #333;*/
|
||||
font-size: 1rem;
|
||||
border-radius: 3px;
|
||||
z-index: 6;
|
||||
transform: translateY(-100%);
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.alerts-container.is-active {
|
||||
transform: translateY(0);
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.error-gutter {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user