mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +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

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