@fortawesome/free-solid-svg-icons#faArrowUp JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faArrowUp.
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: _scrolltop.js From easya-website with GNU General Public License v3.0 | 5 votes |
|
function Scrolltop() {
const showbelow = 500;
const [show,setShow] = useState(showbelow? false:true)
const scrolltoTop=()=>{
window[`scrollTo`]({top:0,behavior:'smooth'})
}
const handleScroll=()=>{
if(window.pageYOffset>showbelow){
if(!show){
setShow(true);
}
}else{
if(show){
setShow(false);
}
}
};
useEffect(()=>{
if(showbelow){
window.addEventListener(`scroll`,handleScroll);
return () =>window.removeEventListener(`scroll`,handleScroll);
}
});
return (
<div>
{show &&(
<button className="arrow-up-button btnScrollToTop"
onClick={scrolltoTop}
style={{
visibility:"visible",
background:"rgba(106,0,187)",
color:"#fff"
}} >
<FontAwesomeIcon className="faArrowUp" icon={faArrowUp} />
</button>)}
</div>
);
}
Example #2
| Source File: Tables.js From volt-react-dashboard with MIT License | 5 votes |
|
PageVisitsTable = () => {
const TableRow = (props) => {
const { pageName, views, returnValue, bounceRate } = props;
const bounceIcon = bounceRate < 0 ? faArrowDown : faArrowUp;
const bounceTxtColor = bounceRate < 0 ? "text-danger" : "text-success";
return (
<tr>
<th scope="row">{pageName}</th>
<td>{views}</td>
<td>${returnValue}</td>
<td>
<FontAwesomeIcon icon={bounceIcon} className={`${bounceTxtColor} me-3`} />
{Math.abs(bounceRate)}%
</td>
</tr>
);
};
return (
<Card border="light" className="shadow-sm">
<Card.Header>
<Row className="align-items-center">
<Col>
<h5>Page visits</h5>
</Col>
<Col className="text-end">
<Button variant="secondary" size="sm">See all</Button>
</Col>
</Row>
</Card.Header>
<Table responsive className="align-items-center table-flush">
<thead className="thead-light">
<tr>
<th scope="col">Page name</th>
<th scope="col">Page Views</th>
<th scope="col">Page Value</th>
<th scope="col">Bounce rate</th>
</tr>
</thead>
<tbody>
{pageVisits.map(pv => <TableRow key={`page-visit-${pv.id}`} {...pv} />)}
</tbody>
</Table>
</Card>
);
}
Example #3
| Source File: Navigation.jsx From jitsi-party with MIT License | 4 votes |
|
render() {
const onClick = this.props.onClick;
const { north, south, east, west } = this.props.directions || {};
const mapButtonClass = this.props.showMapTooltip
? "map-button animated"
: "map-button";
const pokeButtonClass = this.state.showPokeOptions
? "poke-button focused"
: "poke-button";
const room = this.props.currentRoom.room;
const audio = this.props.rooms[room].audio;
const roomType = this.props.rooms[room].type;
const events = this.props.events;
const users = _.flatten(Object.values(this.props.users));
const handleClickMap = () => this.props.handleOpenModal("map");
const handleClickEvents = () => this.props.handleOpenModal("events");
const handleClickEmail = () => this.props.handleOpenModal("email");
return (
<div className="navigation-container">
<div className="column settings-container">
<div className="map-button-container">
{this.props.showMapButton && !this.props.hideSettings && (
<button
className={mapButtonClass}
title={Config.tooltips.map}
disabled={false}
onClick={handleClickMap}
>
<FontAwesomeIcon icon={faMap} />
</button>
)}
{/* {this.props.showMapTooltip &&
<div className="map-tooltip">you have unlocked the party map!</div>
} */}
</div>
<div className="events-button-container">
{events && events.length > 0 && !this.props.hideSettings && (
<button
className="events-button"
title={Config.tooltips.events}
onClick={handleClickEvents}
>
<FontAwesomeIcon icon={faCalendar} />
</button>
)}
</div>
<div className="email-button-container">
{Config.moderation &&
!_.isEmpty(Config.moderation.moderatorEmails) && (
<button
className="email-button"
title={Config.tooltips.moderator}
onClick={handleClickEmail}
>
<FontAwesomeIcon icon={faEnvelope} />
</button>
)}
</div>
{roomType.toUpperCase() === "CHATSTREAM" &&
this.props.currentRoom.entered &&
!this.props.hideSettings ? (
<div className="chat-button-container">
<button
className={mapButtonClass}
title={Config.tooltips.chat}
disabled={false}
onClick={() =>
this.setState({ hideChat: !this.state.hideChat })
}
>
<FontAwesomeIcon icon={faCommentAlt} />
</button>
</div>
) : null}
<div className="poke-button-container">
{Config.poke &&
this.props.isPokingUnlocked &&
!this.props.hideSettings && (
<button
className={pokeButtonClass}
title={Config.tooltips.poke}
onClick={this.handleClickPokeButton.bind(this)}
>
<FontAwesomeIcon icon={Config.poke.fontAwesomeIcon} />
</button>
)}
{this.state.showPokeOptions && (
<PokeOptions
users={users}
handlePoke={this.handlePoke.bind(this)}
/>
)}
</div>
<div className="audio-button-container">
{audio && (
<AudioPlayer
src={audio.path}
autoPlay={audio.autoPlay}
hide={audio.hideControls}
onChange={this.handleAudioChanged.bind(this)}
></AudioPlayer>
)}
</div>
</div>
<div className="column">
<button
className="west"
disabled={!west}
onClick={() => onClick(west)}
>
<FontAwesomeIcon icon={faArrowLeft} />
<span className="navigation-room-name">
{_.get(this.props.rooms[west], "name")}
</span>
</button>
</div>
<div className="column">
<button
className="north"
disabled={!north}
onClick={() => onClick(north)}
>
<FontAwesomeIcon icon={faArrowUp} />
<span className="navigation-room-name">
{_.get(this.props.rooms[north], "name")}
</span>
</button>
<button
className="south"
disabled={!south}
onClick={() => onClick(south)}
>
<FontAwesomeIcon icon={faArrowDown} />
<span className="navigation-room-name">
{_.get(this.props.rooms[south], "name")}
</span>
</button>
</div>
<div className="column">
<button
className="east"
disabled={!east}
onClick={() => onClick(east)}
>
<FontAwesomeIcon icon={faArrowRight} />
<span className="navigation-room-name">
{_.get(this.props.rooms[east], "name")}
</span>
</button>
</div>
<div className="column column-avatar">
<div className="puck-wrapper">
<img
src={
Config.avatars[this.props.user.avatar.type].images[
this.props.user.avatar.color
]
}
/>
</div>
</div>
</div>
);
}
Example #4
| Source File: DemoDashboard.jsx From react-lte with MIT License | 4 votes |
|
export default function DemoDashboard() {
return (
<>
<LteContentHeader title='Dashboard' />
<LteContent>
<Row>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faCog} text='CPU Traffic' number='10%' iconColor='info' />
</Col>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faThumbsUp} text='Likes' number='41,410' iconColor='danger' />
</Col>
<div className='clearfix hidden-md-up' />
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faShoppingCart} text='Sales' number='760' iconColor='success' />
</Col>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faUsers} text='New Members' number='2,000' iconColor='warning' />
</Col>
</Row>
<Row>
<Col lg='3' xs='6'>
<LteSmallBox title='150' message='New Orders' href='/info' icon={faShoppingBasket} color='info' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='53%' message='Bounce Rate' href='/info' icon={faChartBar} color='success' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='44' message='User Registrations' href='/info' icon={faUserPlus} color='warning' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='65' message='Unique Visitors' href='/info' icon={faChartPie} color='danger' />
</Col>
</Row>
<Row>
<Col lg='8'>
<Card>
<CardHeader className='border-transparent'>
<CardTitle>Latest Orders</CardTitle>
<LteCardTools>
<Button color='' className='btn-tool' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody className='p-0'>
<Table responsive>
<thead>
<tr>
<th>Order ID</th>
<th>Item</th>
<th>Status</th>
<th>Popularity</th>
</tr>
</thead>
<tbody>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td>
<Badge tag='span' color='success'>
Shipped
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00a65a' data-height='20'>
90,80,90,-70,61,-83,63
</div>
</td>
</tr>
<tr>
<td>OR1848</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='warning'>
Pending
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f39c12' data-height='20'>
90,80,-90,70,61,-83,68
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>iPhone 6 Plus</td>
<td>
<Badge tag='span' color='danger'>
Delivered
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f56954' data-height='20'>
90,-80,90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='info'>
Processing
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00c0ef' data-height='20'>
90,80,-90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR1848</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='warning'>
Pending
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f39c12' data-height='20'>
90,80,-90,70,61,-83,68
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>iPhone 6 Plus</td>
<td>
<Badge tag='span' color='danger'>
Delivered
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f56954' data-height='20'>
90,-80,90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td>
<Badge tag='span' color='success'>
Shipped
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00a65a' data-height='20'>
90,80,90,-70,61,-83,63
</div>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
<Row>
<Col lg='6'>
<LteDirectChat color='warning'>
<CardHeader>
<CardTitle>Direct Chat</CardTitle>
<LteCardTools>
<Badge color='warning' data-toggle='tooltip' title='3 New Messages'>
3
</Badge>
<Button className='btn-tool' color='' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button
color=''
className='btn-tool'
data-toggle='tooltip'
title='Contacts'
data-widget='chat-pane-toggle'
>
<FontAwesomeIcon icon={faComments} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody>
<LteDirectChatMessages>
<LteDirectChatMsg
name='Alexander Pierce'
date='23 Jan 2:00 pm'
image={user1}
message="Is this template really for free? That's unbelievable!"
/>
<LteDirectChatMsg
right
name='Sarah Bullock'
date='23 Jan 2:05 pm'
image={user3}
message='You better believe it!'
/>
<LteDirectChatMsg
name='Alexander Pierce'
date='23 Jan 5:37 pm'
image={user1}
message='Working with AdminLTE on a great new app! Wanna join?'
/>
<LteDirectChatMsg
right
name='Sarah Bullock'
date='23 Jan 6:10 pm'
image={user3}
message='I would love to.'
/>
</LteDirectChatMessages>
<LteDirectChatContacts>
<LteContactsList>
<LteContactsListItem
href='/contacts'
image={user1}
name='Count Dracula'
date='2/28/2015'
message='How have you been? I was...'
/>
<LteContactsListItem
href='/contacts'
image={user7}
name='Sarah Doe'
date='2/23/2015'
message='I will be waiting for...'
/>
<LteContactsListItem
href='/contacts'
image={user3}
name='Nadia Jolie'
date='2/20/2015'
message="I'll call you back at..."
/>
<LteContactsListItem
href='/contacts'
image={user5}
name='Nora S. Vans'
date='2/10/2015'
message='Where is your new...'
/>
<LteContactsListItem
href='/contacts'
image={user6}
name='John K.'
date='1/27/2015'
message='Can I take a look at...'
/>
<LteContactsListItem
href='/contacts'
image={user8}
name='Kenneth M.'
date='1/4/2015'
message='Never mind I found...'
/>
</LteContactsList>
</LteDirectChatContacts>
</CardBody>
<CardFooter>
<Form>
<InputGroup>
<Input placeholder='Type Message ...' />
<InputGroupAddon addonType='append'>
<Button color='warning'>Send</Button>
</InputGroupAddon>
</InputGroup>
</Form>
</CardFooter>
</LteDirectChat>
</Col>
<Col lg='6'>
<Card>
<CardHeader>
<CardTitle>Latest Members</CardTitle>
<LteCardTools>
<Badge color='danger'>8 New Members</Badge>
<Button className='btn-tool' color='' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody className='p-0'>
<LteUsersList>
<LteUsersListItem image={user1} href='/users' name='Alexander Pierce' date='Today' />
<LteUsersListItem image={user8} href='/users' name='Norman' date='Yesterday' />
<LteUsersListItem image={user7} href='/users' name='Jane' date='12 Jan' />
<LteUsersListItem image={user6} href='/users' name='John' date='12 Jan' />
<LteUsersListItem image={user2} href='/users' name='Alexander' date='13 Jan' />
<LteUsersListItem image={user5} href='/users' name='Sarah' date='14 Jan' />
<LteUsersListItem image={user4} href='/users' name='Nora' date='15 Jan' />
<LteUsersListItem image={user3} href='/users' name='Nadia' date='15 Jan' />
</LteUsersList>
</CardBody>
</Card>
</Col>
</Row>
</Col>
<Col lg='4'>
<LteInfoBox icon={faTag} text='Inventory' number='5,200' bgColor='warning' />
<LteInfoBox icon={faHeart} text='Mentions' number='92,050' bgColor='success' />
<LteInfoBox icon={faCloudDownloadAlt} text='Downloads' number='114,381' bgColor='danger' />
<LteInfoBox icon={faComment} text='Direct Messages' number='163,921' bgColor='info' />
<Card>
<CardHeader className='border-0'>
<CardTitle>Online Store Overview</CardTitle>
<LteCardTools>
<Button className='btn-tool' color=''>
<FontAwesomeIcon icon={faDownload} />
</Button>
<Button color='' className='btn-tool'>
<FontAwesomeIcon icon={faBars} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody>
<div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
<p className='text-success text-xl'>
<FontAwesomeIcon icon={faRedo} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-success' />
12%
</span>
<span className='text-muted'>CONVERSION RATE</span>
</p>
</div>
<div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
<p className='text-warning text-xl'>
<FontAwesomeIcon icon={faShoppingCart} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-warning' /> 0.8%
</span>
<span className='text-muted'>SALES RATE</span>
</p>
</div>
<div className='d-flex justify-content-between align-items-center mb-0'>
<p className='text-danger text-xl'>
<FontAwesomeIcon icon={faUsers} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-danger' /> 1%
</span>
<span className='text-muted'>REGISTRATION RATE</span>
</p>
</div>
</CardBody>
</Card>
</Col>
</Row>
</LteContent>
</>
);
}
Example #5
| Source File: RenderNode.js From saltcorn with MIT License | 4 votes |
|
RenderNode = ({ render }) => {
const { id } = useNode();
const { actions, query, isActive } = useEditor((state) => ({
isActive: state.nodes[id].events.selected,
}));
const {
isHover,
dom,
name,
moveable,
deletable,
connectors: { drag },
parent,
} = useNode((node) => ({
isHover: node.events.hovered,
dom: node.dom,
name: node.data.custom.displayName || node.data.displayName,
moveable: query.node(node.id).isDraggable(),
deletable: query.node(node.id).isDeletable(),
parent: node.data.parent,
props: node.data.props,
}));
const currentRef = useRef();
const getPos = useCallback((dom) => {
const { top, left, bottom, height, width, right } = dom
? dom.getBoundingClientRect()
: { top: 0, left: 0, bottom: 0, right: 0, height: 0, width: 0 };
return {
top: `${top > 0 ? top : bottom}px`,
left: `${left}px`,
topn: top,
leftn: left,
height,
width,
right,
bottom,
};
}, []);
const scroll = useCallback(() => {
const { current: currentDOM } = currentRef;
if (!currentDOM) return;
const { top, left } = getPos(dom);
currentDOM.style.top = top;
currentDOM.style.left = left;
}, [dom, getPos]);
useEffect(() => {
document
.getElementById("builder-main-canvas")
.addEventListener("scroll", scroll);
document.addEventListener("scroll", scroll);
return () => {
document
.getElementById("builder-main-canvas")
.removeEventListener("scroll", scroll);
document.removeEventListener("scroll", scroll);
};
}, [scroll]);
/**
* @returns {void}
*/
const duplicate = () => {
const {
data: { parent },
} = query.node(id).get();
const siblings = query.node(parent).childNodes();
const sibIx = siblings.findIndex((sib) => sib === id);
const elem = recursivelyCloneToElems(query)(id);
actions.addNodeTree(
query.parseReactElement(elem).toNodeTree(),
parent || "ROOT",
sibIx + 1
);
};
return (
<>
{(isActive || isHover) &&
id !== "ROOT" &&
!(name === "Column" && !isActive)
? ReactDOM.createPortal(
<div
ref={currentRef}
className={`selected-indicator ${
isActive ? "activeind" : "hoverind"
} px-1 text-white`}
style={{
left: getPos(dom).left,
top: getPos(dom).top,
zIndex: 9999,
}}
>
<div className="dispname me-3">{name}</div>{" "}
{moveable && isActive && (
<button
className="btn btn-link btn-builder-move p-0"
ref={drag}
>
<FontAwesomeIcon icon={faArrowsAlt} className="me-2" />
</button>
)}
{isActive && parent && parent !== "ROOT" ? (
<FontAwesomeIcon
icon={faArrowUp}
className="me-2"
onClick={() => {
actions.selectNode(parent);
}}
/>
) : null}
{deletable && isActive
? [
<FontAwesomeIcon
key={1}
icon={faCopy}
onClick={duplicate}
className="me-2"
/>,
<FontAwesomeIcon
key={2}
icon={faTrashAlt}
className="me-2"
onMouseDown={(e) => {
e.stopPropagation();
actions.delete(id);
setTimeout(() => actions.selectNode(parent), 0);
}}
/>,
]
: null}
</div>,
document.querySelector("#builder-main-canvas")
)
: null}
{render}
</>
);
}
Example #6
| Source File: footer.js From yezz.me with MIT License | 4 votes |
|
render() {
return (
<StaticQuery
query={graphql`
query footerTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<footer>
<div className="container py-4">
<div className="row justify-content-center mt-2">
<ul className="list-style-none">
<li className="list-inline-item ml-2">
<Link
to="header"
className="link"
smooth={true}
role="button"
aria-label="To the top"
>
<FontAwesomeIcon icon={faArrowUp} />
</Link>
</li>
<li className="list-inline-item mr-4" alt="site title">
© {new Date().getFullYear()}{" "}
<a href="/">{data.site.siteMetadata.title}.</a>
</li>
<li className="list-inline-item mr-3">
<a
href="mailto:[email protected]"
target="_blank"
rel="noreferrer"
alt="email"
>
<FontAwesomeIcon icon={faEnvelope} />
</a>
</li>
<li className="list-inline-item mr-3">
<a
href="https://github.com/yezz123"
target="_blank"
rel="noreferrer"
alt="github"
>
<FontAwesomeIcon icon={faGithub} />
</a>
</li>
<li className="list-inline-item mr-3">
<a
href="https://www.linkedin.com/in/yezz123/"
target="_blank"
rel="noreferrer"
alt="linkedin link"
>
<FontAwesomeIcon icon={faLinkedin} />
</a>
</li>
<li className="list-inline-item mr-1">
<a
href="https://twitter.com/THyasser1"
target="_blank"
rel="noreferrer"
alt="twitter link"
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
</ul>
</div>
</div>
</footer>
</>
)}
></StaticQuery>
)
}
