mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-07 22:30:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use Icon component and update loading animation (#6685)

Browse Source
This commit is contained in:
James Gatz 2023-10-12 17:35:17 +02:00 committed by GitHub
parent 677dff4db7
commit 1f514ded16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx
View File

@ -26,6 +26,7 @@ import { WorkspaceLoaderData } from '../../routes/workspace';
import { Dropdown, DropdownButton, DropdownItem, DropdownSection, ItemContent } from '../base/dropdown';
import { Link } from '../base/link';
import { HelpTooltip } from '../help-tooltip';
import { Icon } from '../icon';
import { showModal } from '../modals';
import { showError } from '../modals';
import { AlertModal } from '../modals/alert-modal';
@ -337,7 +338,7 @@ export const SyncDropdown: FC<Props> = ({ vcs, workspace, project }) => {
<Link href={docsVersionControl}>
<span className="no-wrap">
<br />
Documentation <i className="fa fa-external-link" />
Documentation <Icon icon="external-link" />
</span>
</Link>
</HelpTooltip>
@ -348,7 +349,7 @@ export const SyncDropdown: FC<Props> = ({ vcs, workspace, project }) => {
return (
<div>
<button className="btn btn--compact wide">
<i className="fa fa-refresh fa-spin" /> Initializing
<Icon icon="refresh" className="animate-spin" /> Initializing
</button>
</div>
);
@ -430,7 +431,7 @@ export const SyncDropdown: FC<Props> = ({ vcs, workspace, project }) => {
width: '100%',
}}
>
<i className="fa fa-cloud" /> Setup Sync
<Icon icon="cloud" /> Setup Sync
</div>
</DropdownButton>
}
@ -457,7 +458,7 @@ export const SyncDropdown: FC<Props> = ({ vcs, workspace, project }) => {
justifyContent: 'flex-start!important',
}}
>
<i className="fa-brands fa-git-alt" /> Use Git Sync
<Icon icon={['fab', 'git-alt']} /> Use Git Sync
</Button>
</DropdownItem>
</DropdownSection>
@ -504,7 +505,6 @@ export const SyncDropdown: FC<Props> = ({ vcs, workspace, project }) => {
}
const canPush = ahead > 0;
const canPull = behind > 0;
const loadIcon = <i className="fa fa-spin fa-refresh fa--fixed-width" />;
const pullToolTipMsg = canPull
? `There ${behind === 1 ? 'is' : 'are'} ${behind} snapshot${behind === 1 ? '' : 's'} to pull`
: 'No changes to pull';
@ -546,48 +546,25 @@ export const SyncDropdown: FC<Props> = ({ vcs, workspace, project }) => {
width: '100%',
}}
>
<div className="ellipsis">
<i className="fa fa-cloud space-right" />{' '}
<div className="truncate">
<Icon icon="cloud" />{' '}
{initializing ? 'Initializing...' : currentBranch}
</div>
<div className="flex space-left">
<div className="flex items-center gap-2">
<Tooltip message={snapshotToolTipMsg} delay={800} position="bottom">
<i
style={{
color: canCreateSnapshot ? 'var(--color-notice)' : 'var(--color-hl)',
}}
className={classnames('fa fa-cube fa--fixed-width', {
'super-duper-faint': !canCreateSnapshot,
})}
/>
<Icon icon="cube" className={`transition-colors ${canCreateSnapshot ? '' : 'opacity-50'}`} />
</Tooltip>
{/* Only show cloud icons if logged in */}
{session.isLoggedIn() && (
<Fragment>
{loadingPull ? (
loadIcon
) : (
<Tooltip message={pullToolTipMsg} delay={800} position="bottom">
<i
className={classnames('fa fa-cloud-download fa--fixed-width', {
'super-duper-faint': !canPull,
})}
/>
</Tooltip>
)}
<Tooltip message={pullToolTipMsg} delay={800} position="bottom">
<Icon icon="cloud-download" className={`transition-colors ${canPull ? '' : 'opacity-50'} ${loadingPull ? 'animate-pulse' : ''}`} />
</Tooltip>
{loadingPush ? (
loadIcon
) : (
<Tooltip message={pushToolTipMsg} delay={800} position="bottom">
<i
className={classnames('fa fa-cloud-upload fa--fixed-width', {
'super-duper-faint': !canPush,
})}
/>
</Tooltip>
)}
<Tooltip message={pushToolTipMsg} delay={800} position="bottom">
<Icon icon="cloud-upload" className={`transition-colors ${canPush ? '' : 'opacity-50'} ${loadingPush ? 'animate-pulse' : ''}`} />
</Tooltip>
</Fragment>
)}
</div>
@ -618,7 +595,7 @@ export const SyncDropdown: FC<Props> = ({ vcs, workspace, project }) => {
justifyContent: 'flex-start!important',
}}
>
<i className="fa-brands fa-git-alt" /> Use Git Sync
<Icon icon={['fab', 'git-alt']} /> Use Git Sync
</Button>
</DropdownItem>
</DropdownSection>
@ -751,11 +728,6 @@ export const SyncDropdown: FC<Props> = ({ vcs, workspace, project }) => {
onHide={() => setIsSyncStagingModalOpen(false)}
/>
)}
{/* {isSyncMergeModalOpen && (
<SyncMergeModal
onHide={() => setIsSyncMergeModalOpen(false)}
/>
)} */}
{isSyncHistoryModalOpen && (
<SyncHistoryModal
vcs={vcs}