From 92d6ad3b97f919f6673b90d0e9922bca2a181349 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 20 Jan 2018 12:59:47 +0530 Subject: [PATCH] add loader in open n save btn --- src/db.js | 2 +- src/index.html | 52 +++++++++++++++++++++++++++++++++++++++++++++++--- src/script.js | 6 +++++- src/style.css | 13 +++++++++++++ 4 files changed, 68 insertions(+), 5 deletions(-) diff --git a/src/db.js b/src/db.js index 3f431d2..f9fe850 100644 --- a/src/db.js +++ b/src/db.js @@ -120,7 +120,7 @@ // Fetch user settings. // This isn't hitting the remote db because remote settings - // get fetch asynchronously (in user/ call) and update the envioronment. + // get fetch asynchronously (in user/) and update the envioronment. function getSettings(defaultSettings) { const d = deferred(); // Will be chrome.storage.sync in extension environment, diff --git a/src/index.html b/src/index.html index c0af87d..23e4afd 100644 --- a/src/index.html +++ b/src/index.html @@ -82,11 +82,20 @@ - Save - + + + + + Save + + - Open + + + + + Open Login/Signup @@ -589,6 +598,43 @@ + + + + + + + + + + + + + diff --git a/src/script.js b/src/script.js index d6b37d5..dc8238b 100644 --- a/src/script.js +++ b/src/script.js @@ -8,7 +8,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate, customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea, globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg, -loginModal, profileModal, profileAvatarImg, profileUserName +loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn */ /* eslint-disable no-extra-semi */ (function(alertsService, itemService) { @@ -336,7 +336,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName function saveItem() { var isNewItem = !currentItem.id; currentItem.id = currentItem.id || 'item-' + utils.generateRandomId(); + saveBtn.classList.add('is-loading'); saveCode().then(() => { + saveBtn.classList.remove('is-loading'); // If this is the first save, and auto-saving settings is enabled, // then start auto-saving from now on. // This is done in `saveCode()` completion so that the @@ -537,7 +539,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName } function openSavedItemsPane() { + openItemsBtn.classList.add('is-loading'); fetchItems(true).then(function(items) { + openItemsBtn.classList.remove('is-loading'); populateItemsInSavedPane(items); }); } diff --git a/src/style.css b/src/style.css index c6c83de..1a73a13 100644 --- a/src/style.css +++ b/src/style.css @@ -160,6 +160,15 @@ textarea { height: 25px; margin-right: 12px; } +.btn-loader { + display: none; +} +.is-loading > svg { + display:none; +} +.is-loading .btn-loader { + display: block; +} .star:after { content: '★'; color: #eee333; @@ -423,6 +432,10 @@ body > #demo-frame { .main-header__btn-wrap > a:hover { border-color: rgba(146, 151, 179, 0.5); } +.main-header__btn-wrap > a.is-loading { + pointer-events: none; + opacity: 0.4; +} .main-header__avatar-img, .profile-modal__avatar-img { border-radius: 50%;