Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Chore: Use tabler spinner instead of custom css (#328)

Browse source
This commit is contained in:
Navaneeth Pk 2021-06-25 23:49:45 +05:30 committed by GitHub
parent 25007e6c1f
commit a770eeaa63
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/Editor/ManageAppUsers.jsx
View file

@ -138,6 +138,7 @@ class ManageAppUsers extends React.Component {
const appId = app.id;
const appLink = `${window.location.origin}/applications/`;
const shareableLink = appLink + (this.props.slug || appId);
const slugButtonClass = isSlugVerificationInProgress? '' : slugError !== null ? 'is-invalid' : 'is-valid';
return (
<div>
@ -183,13 +184,13 @@ class ManageAppUsers extends React.Component {
<span className="input-group-text">{appLink}</span>
<div className="input-with-icon">
<input type="text"
className={`form-control form-control-sm ${ slugError !== null && !isSlugVerificationInProgress ? 'is-invalid' : 'is-valid'}`}
className={`form-control form-control-sm ${slugButtonClass}`}
placeholder={appId}
onChange={(e) => { e.persist(); this.delayedSlugChange(e); }}
defaultValue={this.props.slug} />
{ isSlugVerificationInProgress && (
<div className="icon-container">
<i className="custom-spinner"></i>
<div class="spinner-border text-azure spinner-border-sm" role="status"></div>
</div>
)}
</div>

39
frontend/src/_styles/theme.scss
View file

@ -1634,42 +1634,3 @@ input:focus-visible {
z-index: 3;
}
}
.custom-spinner {
position: relative;
height: 20px;
width: 20px;
display: inline-block;
animation: around 5.4s infinite;
}
@keyframes around {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.custom-spinner::after, .custom-spinner::before {
content: "";
background: white;
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
border-width: 2px;
border-color: #4299e1 #4299e1 transparent transparent;
border-style: solid;
border-radius: 20px;
box-sizing: border-box;
top: 0;
left: 0;
animation: around 0.7s ease-in-out infinite;
}
.custom-spinner::after {
animation: around 0.7s ease-in-out 0.1s infinite;
background: transparent;
}