@fortawesome/free-solid-svg-icons#faEyeSlash JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faEyeSlash.
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: LayerPanel.js From Easy-Annotator with GNU General Public License v3.0 | 5 votes |
|
render() {
const { listrois, selected } = this.props;
return (
<div style={styles.layersWrapper}>
{listrois &&
listrois.map((rois, index) => {
//Fix coloring of layer panel
return (
<div
style={{
...styles.layer,
borderColor: selected == index ? highlightColor : borderColor
}}
key={index}
onClick={() => {}}
>
<div
style={{
...styles.eyeWrapper,
borderColor:
selected == index ? highlightColor : borderColor
}}
onClick={() => {
this.props.onEyeClick(index);
}}
>
{rois.visible ? (
<FontAwesomeIcon
onClick={() => {
this.props.onEyeClick;
}}
icon={faEye}
style={styles.eye}
/>
) : (
<FontAwesomeIcon
onClick={() => {
this.props.onEyeClick;
}}
icon={faEyeSlash}
style={styles.eye}
/>
)}
</div>
<div
style={styles.textWrapper}
onClick={() => {
this.props.setSelected(index);
}}
>
<span>{rois.label.title}</span>
<span>{rois.label.type}</span>
</div>
<div
style={styles.timeWrapper}
onClick={() => {
this.props.setSelected(index);
}}
>
{rois.numSeconds}
<FontAwesomeIcon
onClick={() => {
this.props.onDeleteClick(index);
}}
icon={faTrash}
style={styles.eye}
/>
</div>
</div>
);
})}
</div>
);
}
Example #2
| Source File: icon.js From uptime-kuma with MIT License | 5 votes |
|
library.add(
faArrowAltCircleUp,
faCog,
faEdit,
faEye,
faEyeSlash,
faList,
faPause,
faPlay,
faPlus,
faSearch,
faTachometerAlt,
faTimes,
faTimesCircle,
faTrash,
faCheckCircle,
faStream,
faSave,
faExclamationCircle,
faBullhorn,
faArrowsAltV,
faUnlink,
faQuestionCircle,
faImages,
faUpload,
faCopy,
faCheck,
faFile,
faAward,
faLink,
faChevronDown,
faSignOutAlt,
faPen,
faExternalLinkSquareAlt,
faSpinner,
faUndo,
faPlusCircle,
faAngleDown,
faLink,
);
Example #3
| Source File: index.js From Kurakoo with MIT License | 5 votes |
|
library.add(faEyeSlash, faEye);
Example #4
| Source File: PlayerStats.jsx From ashteki with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
let t = this.props.t;
let userStyle = {};
if (this.props.user?.faveColor) {
userStyle.color = this.props.user.faveColor;
}
let userClass = 'username' + (this.props.user.role ? ` ${this.props.user.role.toLowerCase()}-role` : '');
let playerAvatar = (
<div className='state'>
<Avatar imgPath={this.props.user?.avatar} />
<b className={userClass} style={userStyle}>{this.props.user?.username || t('Noone')}</b>
</div>
);
let statsClass = classNames('panel player-stats', {
'active-player': this.props.activePlayer
});
let firstPlayerToken = this.props.firstPlayer ? (
<div className='state'>
<img src={FirstPlayerImage} title='First Player' />
</div>
) : (
''
);
return (
<div className={statsClass}>
{playerAvatar}
{this.renderLifeRemaining()}
{this.renderActions()}
{firstPlayerToken}
{this.props.activePlayer && (
<div className='state first-player-state'>
<Trans>Active Player</Trans>
</div>
)}
{this.props.showMessages && (
<div className='state chat-status'>
<div className='state'>
<a href='#' className='pr-1 pl-1' title='Show dice/card history'>
<FontAwesomeIcon
icon={faHistory}
onClick={this.props.onDiceHistoryClick}
></FontAwesomeIcon>
</a>
</div>
<div className='state'>
<a href='#' className='pr-1 pl-1' title='Mute spectators'>
<FontAwesomeIcon
icon={this.props.muteSpectators ? faEyeSlash : faEye}
onClick={this.props.onMuteClick}
></FontAwesomeIcon>
</a>
</div>
{this.props.showManualMode && (
<div className='state'>
<a
href='#'
className={this.props.manualModeEnabled ? 'text-danger' : ''}
onClick={this.props.onManualModeClick}
>
<FontAwesomeIcon icon={faWrench}></FontAwesomeIcon>
<span className='ml-1'>
<Trans>Manual Mode</Trans>
</span>
</a>
<a href='#' className='pr-1 pl-1' title='Show manual command list'>
<FontAwesomeIcon
icon={faList}
onClick={this.props.onManualCommandsClick}
/>
</a>
</div>
)}
<div className='state'>
<a
href='#'
onClick={this.onSettingsClick.bind(this)}
className='pr-1 pl-1'
>
<FontAwesomeIcon icon={faCogs}></FontAwesomeIcon>
<span className='ml-1'>
<Trans>Settings</Trans>
</span>
</a>
</div>
<div className='state'>
<a href='#' className='pr-1 pl-1' title='Copy chat to clipboard'>
<FontAwesomeIcon
icon={faCopy}
onClick={this.writeChatToClipboard.bind(this)}
></FontAwesomeIcon>
</a>
</div>
<div>
<a
href='#'
onClick={this.props.onMessagesClick}
className='pl-1'
title='Toggle chat'
>
<FontAwesomeIcon icon={faComment}></FontAwesomeIcon>
{this.props.numMessages > 0 && (
<Badge variant='danger'>{this.props.numMessages}</Badge>
)}
</a>
</div>
</div>
)}
</div>
);
}
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>
);
}
