mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-02-24 23:22:47 +01:00
Code Issues Releases Wiki Activity

add loader in open n save btn

Browse Source
This commit is contained in:
Kushagra Gour 2018-01-20 12:59:47 +05:30
parent ca69ae77d2
commit 92d6ad3b97
4 changed files with 68 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/db.js
View File

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

52
src/index.html
View File

@ -82,11 +82,20 @@
<a id="saveBtn" class="flex flex-v-center hint--rounded hint--bottom-left" aria-label="Save current creation (Ctrl/⌘ + S)" d-click="onSaveBtnClick">
<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>Save</a>
<a class="flex flex-v-center hint--rounded hint--bottom-left" aria-label="Open a saved creation (Ctrl/⌘ + O)" d-click="onOpenBtnClick">
</svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff">
<use xlink:href="#loader-icon"></use>
</svg>
Save
</a>
<a id="openItemsBtn" class="flex flex-v-center hint--rounded hint--bottom-left" aria-label="Open a saved creation (Ctrl/⌘ + O)" d-click="onOpenBtnClick">
<svg style="width:14px;height:14px;vertical-align:middle;" viewBox="0 0 24 24">
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
</svg>Open
</svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff">
<use xlink:href="#loader-icon"></use>
</svg>
Open
</a>
<a d-open-modal="loginModal" data-event-category="ui" data-event-action="loginButtonClick" class="show-when-app hide-on-login flex flex-v-center hint--rounded hint--bottom-left" aria-label="Login/Signup">
Login/Signup
@ -589,6 +598,43 @@
<symbol id="keyboard-icon" viewBox="0 0 24 24">
<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
</symbol>
<symbol id="loader-icon" viewBox="0 0 44 44">
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<g fill="none" fill-rule="evenodd" stroke-width="10">
<circle cx="22" cy="22" r="1">
<animate attributeName="r"
begin="0s" dur="1.8s"
values="1; 20"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.165, 0.84, 0.44, 1"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="0s" dur="1.8s"
values="1; 0"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.3, 0.61, 0.355, 1"
repeatCount="indefinite" />
</circle>
<circle cx="22" cy="22" r="1">
<animate attributeName="r"
begin="-0.9s" dur="1.8s"
values="1; 20"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.165, 0.84, 0.44, 1"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="-0.9s" dur="1.8s"
values="1; 0"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.3, 0.61, 0.355, 1"
repeatCount="indefinite" />
</circle>
</g>
</symbol>
</svg>
<!-- build:js vendor.js -->

6
src/script.js
View File

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

13
src/style.css
View File

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