From 1b0c81b0d685a30b013559312b8b0bd87f8e6ea0 Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Mon, 18 Feb 2019 21:21:49 +0100
Subject: [PATCH] created button loading animation
---
web-frontend/public/login.html | 9 ++++--
web-frontend/src/scss/abstracts/_mixins.scss | 5 ++++
.../src/scss/abstracts/_variables.scss | 1 -
web-frontend/src/scss/base/_helpers.scss | 10 +++++++
web-frontend/src/scss/components/_button.scss | 29 ++++++++++++++++++-
5 files changed, 50 insertions(+), 4 deletions(-)
diff --git a/web-frontend/public/login.html b/web-frontend/public/login.html
index 703fadff2..8c9734c9a 100644
--- a/web-frontend/public/login.html
+++ b/web-frontend/public/login.html
@@ -9,7 +9,7 @@
<div class="box-page">
<!-- login page -->
- <div class="box login-page login-page-login">
+ <div class="box login-page login-page-login hidden">
<h1 class="box-title">Baserow</h1>
<div class="alert alert-error alert-has-icon">
<div class="alert-icon">
@@ -94,7 +94,7 @@
</div>
<!-- sign up page -->
- <div class="box login-page login-page-signup hidden">
+ <div class="box login-page login-page-signup">
<h1 class="box-title">Sign up</h1>
<form>
<div class="control">
@@ -176,6 +176,11 @@
$(".login-page").addClass("hidden");
$($(this).attr("data-page")).removeClass("hidden");
});
+
+ $("[data-loading]").click(function(e) {
+ e.preventDefault();
+ $(this).toggleClass("button-loading");
+ });
})();
</script>
</body>
diff --git a/web-frontend/src/scss/abstracts/_mixins.scss b/web-frontend/src/scss/abstracts/_mixins.scss
index e6fabe786..6566a9bcf 100644
--- a/web-frontend/src/scss/abstracts/_mixins.scss
+++ b/web-frontend/src/scss/abstracts/_mixins.scss
@@ -10,6 +10,11 @@
&[disabled] {
background-color: $background;
}
+
+ &.button-loading {
+ background-color: $active-background;
+ color: $active-background;
+ }
}
@mixin button-size($font-size, $height, $left-right-space) {
diff --git a/web-frontend/src/scss/abstracts/_variables.scss b/web-frontend/src/scss/abstracts/_variables.scss
index 0396f6a5a..5ff6294b8 100644
--- a/web-frontend/src/scss/abstracts/_variables.scss
+++ b/web-frontend/src/scss/abstracts/_variables.scss
@@ -1,7 +1,6 @@
$text-font-stack: 'Open Sans', sans-serif;
$logo-font-stack: 'Montserrat', sans-serif;
-
// primary colors
$color-primary-100: #ebf7ff !default;
$color-primary-200: #b5dbf5 !default;
diff --git a/web-frontend/src/scss/base/_helpers.scss b/web-frontend/src/scss/base/_helpers.scss
index 2b5154db1..e63071912 100644
--- a/web-frontend/src/scss/base/_helpers.scss
+++ b/web-frontend/src/scss/base/_helpers.scss
@@ -5,3 +5,13 @@
.align-right {
text-align: right;
}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/web-frontend/src/scss/components/_button.scss b/web-frontend/src/scss/components/_button.scss
index ab489a39b..72570c7b2 100644
--- a/web-frontend/src/scss/components/_button.scss
+++ b/web-frontend/src/scss/components/_button.scss
@@ -9,8 +9,9 @@
vertical-align: middle;
text-decoration: none;
border-radius: 3px;
+ transition: padding 0.05s ease-in-out;
- @include button-size(14px, 32px, 12px);
+ @include button-size(14px, 32px, 14px);
@include button-style($color-primary-500, $color-primary-600);
&:hover,
@@ -56,3 +57,29 @@
margin: 0 3px;
}
}
+
+.button-loading {
+ position: relative;
+ cursor: wait;
+ user-select: none;
+
+ &:hover,
+ &:focus {
+ box-shadow: none;
+ }
+
+ &::after {
+ content: " ";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin: -0.7em;
+ display: block;
+ width: 1.4em;
+ height: 1.4em;
+ border-radius: 50%;
+ border: 0.25em solid #fff;
+ border-color: #fff transparent #fff transparent;
+ animation: spin 1.2s linear infinite;
+ }
+}