diff --git a/src/index.html b/src/index.html index b5d4bc2..6f50e29 100644 --- a/src/index.html +++ b/src/index.html @@ -91,10 +91,11 @@ display: flex; flex-direction: column; will-change: -webkit-filter; - transition: 0.15s ease 0.4s; + transition: 0.15s ease 0.2s; } .overlay-visible .main-container { - transition-duration: 0.3s; + transition-duration: 0.5s; + transition-delay: 0.4s; -webkit-filter: blur(3px); } .code-side, @@ -170,8 +171,12 @@ writing-mode: vertical-lr; padding: 10px 5px; } + .code-wrap__header .caret { + transition: 0.2s ease; + } .is-minimized .code-wrap__header .caret { - display: none; + opacity: 0; + transform: translateY(10px); } .code-wrap__header-btn { width: 18px; @@ -758,7 +763,7 @@

CSS

- +
Choose from popular libraries: diff --git a/src/script.js b/src/script.js index 0d59004..37f23da 100644 --- a/src/script.js +++ b/src/script.js @@ -324,8 +324,8 @@ function refreshEditor() { titleInput.value = currentItem.title || 'Untitled'; - externalJsTextarea.value = currentItem.externalLibs && (currentItem.externalLibs.js || ''); - externalCssTextarea.value = currentItem.externalLibs && (currentItem.externalLibs.css || ''); + externalJsTextarea.value = (currentItem.externalLibs && currentItem.externalLibs.js) || ''; + externalCssTextarea.value = (currentItem.externalLibs && currentItem.externalLibs.css) || ''; externalJsTextarea.dispatchEvent(new Event('change')); editur.cm.html.setValue(currentItem.html); @@ -646,15 +646,18 @@ utils.onButtonClick(helpBtn, function () { helpModal.classList.toggle('is-modal-visible'); + document.body.classList[helpModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible'); trackEvent('ui', 'helpButtonClick'); }); utils.onButtonClick(addLibraryBtn, function () { addLibraryModal.classList.toggle('is-modal-visible'); + document.body.classList[addLibraryModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible'); trackEvent('ui', 'addLibraryButtonClick'); }); notificationsBtn.addEventListener('click', function () { notificationsModal.classList.toggle('is-modal-visible'); + document.body.classList[notificationsModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible'); if (notificationsModal.classList.contains('is-modal-visible') && !hasSeenNotifications) { hasSeenNotifications = true; notificationsBtn.classList.remove('has-new'); @@ -781,7 +784,7 @@ }); utils.onButtonClick(settingsBtn, function() { - if (!chrome.runtime.openOptionsPage) { + if (chrome.runtime.openOptionsPage) { // New way to open options pages, if supported (Chrome 42+). // Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=601997 // Until this bug fixes, use the