@fortawesome/free-solid-svg-icons#faSyncAlt JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faSyncAlt.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Header.jsx From UniDrive with GNU General Public License v2.0 | 5 votes |
|
export default function Header({
addedAccount, onSubmit, refreshAllFunc, syncMessage,
}) {
let currentTheme = localStorage.getItem('theme');
if (currentTheme === null) currentTheme = 'light';
const [theme, setTheme] = useState(currentTheme);
const body = document.getElementsByTagName('body')[0];
if (theme === 'dark') {
body.classList.add('dark-theme');
}
const toggleTheme = () => {
if (theme === 'dark') {
body.classList.remove('dark-theme');
setTheme('light');
localStorage.setItem('theme', 'light');
} else {
body.classList.add('dark-theme');
setTheme('dark');
localStorage.setItem('theme', 'dark');
}
};
return (
<div className="header-container">
<img className="logo" src={theme === 'light' ? icon : iconWhite} alt="UniDrive icon" />
{addedAccount && (
<span className="search-container">
<SearchBar
onSubmit={onSubmit}
/>
</span>
)}
{addedAccount && (
<div className="header-button-container">
<button type="button" className="header-button toggle-theme" onClick={() => toggleTheme()}>
<FontAwesomeIcon icon={theme === 'light' ? faMoon : faSun} size="lg" title="Toggle theme" />
</button>
<button type="button" className="header-button refresh" id="signin-btn" onClick={() => refreshAllFunc()}>
<FontAwesomeIcon icon={faSyncAlt} size="lg" title="Sync all accounts" />
</button>
<button type="button" disabled className="sync-message">
Last synced:
{' '}
{syncMessage}
</button>
</div>
)}
</div>
);
}
Example #2
| Source File: Header.js From Postman-Clone with MIT License | 5 votes |
|
Header = () => {
return (
<div className="header">
<div className="header__row">
{/* Left Side Buttons */}
<div className="header__column">
<button className="header__newButton">
<FontAwesomeIcon icon={faPlusSquare} className="icon" />
New
</button>
<button className="header__button">Import</button>
<button className="header__button">Runner</button>
<button className="header__button">
<FontAwesomeIcon icon={faFileImport} className="icon" />
</button>
</div>
{/* Center Content */}
<div className="header__column">
<div className="header__titleWrapper">
<FontAwesomeIcon icon={faThLarge} id="header__titleIcon" />
<span className="header__titleText">My workspace</span>
<FontAwesomeIcon
icon={faChevronDown}
className="header_titleDropDownIcon"
/>
<button className="header__button" id="header__inviteButton">
<FontAwesomeIcon icon={faUserPlus} className="icon" />
Invite
</button>
</div>
</div>
{/* Right Side Content */}
<div className="header__column">
<div className="header__iconWrapper">
<FontAwesomeIcon
icon={faSyncAlt}
className="header__iconButton active"
/>
<FontAwesomeIcon
icon={faSatelliteDish}
className="header__iconButton"
/>
<FontAwesomeIcon icon={faWrench} className="header__iconButton" />
<FontAwesomeIcon icon={faBell} className="header__iconButton" />
<FontAwesomeIcon icon={faHeart} className="header__iconButton" />
<FontAwesomeIcon
icon={faMicrochip}
className="header__iconButton"
/>
<button className="header__button" id="header__upgradeButton">
Upgrade
<FontAwesomeIcon icon={faChevronDown} style={{ marginLeft: 5 }} />
</button>
</div>
</div>
</div>
</div>
);
}
Example #3
| Source File: fontawesome.js From xmrig-workers with GNU General Public License v3.0 | 5 votes |
|
export default function () {
library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}
Example #4
| Source File: CovidApp.js From covid-19-tracker with MIT License | 4 votes |
|
render() {
const { classes, setDarkMode, isDarkMode } = this.props;
const { mapData, isLoading, data, districtLevel, expanded, updates } =
this.state;
if (isLoading) {
return (
<div className={classes.loadingIcon}>
<Lottie options={defaultOptions} height={500} width={500} />
</div>
);
}
let displayUpdates;
try {
displayUpdates = updates
.slice(-5)
.reverse()
.map(({ update, timestamp }, i) => {
update = update.replace('\n', '<br/>');
return (
<div className={classes.updateBox} key={i}>
<h5 className={classes.updateHeading}>
{`${formatDistance(
new Date(timestamp * 1000),
new Date()
)} ago`}
</h5>
<h4
className={classes.updateText}
dangerouslySetInnerHTML={{
__html: update,
}}
></h4>
</div>
);
});
} catch (err) {}
return (
<>
<div className={classes.header}>
<h1 className={classes.heading}>
<span>Covid-19</span> India Trend
</h1>
<div className={classes.btnBox}>
<FontAwesomeIcon
icon={faSyncAlt}
className={classes.button}
onClick={this.fetchData}
/>
</div>
<div className={classes.lastUpdatedTime}>
Last Updated:{' '}
{this.formatDate(this.state.todayData.lastupdatedtime)}
</div>
<div className={classes.updates}>
<div className={classes.notification}>
{expanded ? (
<FontAwesomeIcon
icon={faBellSlash}
onClick={this.handleNotification}
/>
) : (
<div className={classes.notificationBell}>
<FontAwesomeIcon
icon={faBell}
onClick={this.handleNotification}
/>
</div>
)}
</div>
{expanded && <div className={classes.update}>{displayUpdates}</div>}
</div>
<div className="darkModeButton">
<label className="switch">
<input
type="checkbox"
onChange={setDarkMode}
checked={isDarkMode}
/>
<span className="slider round"></span>
</label>
</div>
</div>
<div>
<Overview
isDarkMode={isDarkMode}
data={this.state.todayData}
loadingStatus={this.loadingStatus}
/>
</div>
<div className={classes.content}>
<div className={classes.contentArea}>
<div className={classes.mapArea}>
<MapSection
data={data}
mapData={mapData}
isDarkMode={isDarkMode}
/>
</div>
</div>
<div className={classes.chartArea}>
<div className={classes.chartRes}>
<Charts
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
/>
</div>
<div className={classes.tinyChartArea}>
<div className={classes.tinyChart}>
<div
className={classes.tinych}
style={{ background: 'rgba(249, 52, 94,.1)' }}
>
<h3 style={{ color: colors.red }}>confirmed</h3>
<Barchart
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
dataKey="totalconfirmed"
stroke={colors.red}
/>
</div>
</div>
<div className={classes.tinyChart}>
<div
className={classes.tinych}
style={{ background: 'rgba(250, 100, 0,.1)' }}
>
<h3 style={{ color: colors.orange }}>active</h3>
<Barchart
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
dataKey="totalactive"
stroke={colors.orange}
/>
</div>
</div>
<div className={classes.tinyChart}>
<div
className={classes.tinych}
style={{ background: 'rgba(28, 177, 66,.1)' }}
>
<h3 style={{ color: colors.green }}>Recovered</h3>
<Barchart
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
dataKey="totalrecovered"
stroke={colors.green}
/>
</div>
</div>
<div className={classes.tinyChart}>
<div
className={classes.tinych}
style={{ background: 'rgba(98, 54, 255,.1)' }}
>
<h3 style={{ color: colors.purple }}>Deceased</h3>
<Barchart
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
dataKey="totaldeceased"
stroke={colors.purple}
/>
</div>
</div>
</div>
</div>
<div className={classes.tableContainer}>
<h2 className={classes.tableHeading}>
State/UT Wise Data (Sortable){' '}
</h2>
<DisplayTable
tableData={data}
districtLevel={districtLevel}
isDarkMode={isDarkMode}
/>
</div>
</div>
<Footer />
</>
);
}
Example #5
| Source File: User.jsx From UniDrive with GNU General Public License v2.0 | 4 votes |
|
render() {
const { looseFilesIsDisplayed } = this.state;
const {
closePath, filterFunc, idToken, looseFileList, moveExternal,
moveWithin, openFolder, openFolderList, refreshFunc, removeFunc, sortFunc,
topLevelFolderList, updatePath, userId,
} = this.props;
const { name, email, picture } = parseIDToken(idToken);
const createFunc = loadAuthParam(email, this.create);
return (
<ContextMenuTrigger className="user" id={userId.toString()}>
<button
type="button"
className="user-banner"
onClick={() => this.viewToggle()}
onKeyDown={() => this.viewToggle()}
>
<img className="profile-picture" src={picture} alt="Account profile" />
<span className="profile-text">
{' '}
<span className="profile-name">{name}</span>
{' '}
<span className="profile-email">
(
{email}
)
</span>
</span>
<ContextMenuTrigger className="context-menu" id={userId.toString()} holdToDisplay={0}>
<FontAwesomeIcon className="fa-ellipsis menu-icon" icon={faEllipsisV} size="lg" onClick={(event) => this.handleIconClick(event, () => {})} title="Options" />
</ContextMenuTrigger>
</button>
<ContextMenu className="context-menu" id={userId.toString()}>
<MenuItem className="menu-item upload">
<SubMenu
className="context-menu sub-menu-upload"
title={
(
<span>
<FontAwesomeIcon className="fa-plus menu-icon" icon={faPlus} onClick={(event) => this.handleIconClick(event, () => {})} />
Create New...
</span>
)
}
>
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.folder', 'New Folder')}>
<FontAwesomeIcon className="fa-folder menu-icon" icon={faFolderPlus} />
Folder
</MenuItem>
<hr className="divider" />
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.document', 'New Doc')}>
<img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.document" alt="Google Doc icon" />
Google Doc
</MenuItem>
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.spreadsheet', 'New Sheet')}>
<img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.spreadsheet" alt="Google Speardsheet icon" />
Google Sheets
</MenuItem>
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.presentation', 'New Presentation')}>
<img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.presentation" alt="Google Slides icon" />
Google Slides
</MenuItem>
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.form', 'New Form')}>
<img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.form" alt="Google Forms icon" />
Google Forms
</MenuItem>
</SubMenu>
</MenuItem>
<label htmlFor={email}>
<MenuItem className="menu-item">
<FontAwesomeIcon className="fa-upload menu-icon" icon={faUpload} />
<input
type="file"
id={email}
className="file-input"
onChange={(e) => this.uploadController(e, idToken)}
multiple
/>
Upload
</MenuItem>
</label>
<MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => this.toggleLoose())}>
<FontAwesomeIcon className="fa-eye-slash menu-icon" icon={(looseFilesIsDisplayed) ? faEyeSlash : faEye} />
Toggle Folder View
</MenuItem>
<MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => refreshFunc(userId))}>
<FontAwesomeIcon className="fa-sync menu-icon" icon={faSyncAlt} />
Refresh Account
</MenuItem>
<MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => removeFunc(userId))}>
<FontAwesomeIcon className="fa-trash menu-icon" icon={faTrash} />
Remove Account
</MenuItem>
</ContextMenu>
<div style={{ display: 'none' }} className="Files/Folders" ref={this.props.forwardRef}>
<Filters
filterFunc={filterFunc}
sortFunc={sortFunc}
userId={userId}
/>
<TopLevelFolderList
email={email}
userId={userId}
topLevelFolderList={topLevelFolderList}
shareFile={loadAuthParam(email, this.shareFile)}
moveWithin={moveWithin}
moveExternal={moveExternal}
refreshFunc={refreshFunc}
openFolder={openFolder}
/>
<OpenFolderList
email={email}
userId={userId}
openFolderList={openFolderList}
shareFile={loadAuthParam(email, this.shareFile)}
moveWithin={moveWithin}
moveExternal={moveExternal}
refreshFunc={refreshFunc}
openFolder={openFolder}
closePath={closePath}
updatePath={updatePath}
/>
{looseFilesIsDisplayed && (
<LooseFileList
email={email}
userId={userId}
looseFileList={looseFileList}
shareFile={loadAuthParam(email, this.shareFile)}
moveWithin={moveWithin}
moveExternal={moveExternal}
refreshFunc={refreshFunc}
/>
)}
</div>
</ContextMenuTrigger>
);
}
