ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP tip walkthrough

Browse Source
This commit is contained in:
keyan 2021-12-06 09:32:33 -06:00
parent e43994e36f
commit ffd3628505
2 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/upvote.js
View File

@ -11,6 +11,7 @@ import { useMe } from './me'
import { useState } from 'react' import { useState } from 'react'
import LongPressable from 'react-longpressable' import LongPressable from 'react-longpressable'
import Rainbow from '../lib/rainbow' import Rainbow from '../lib/rainbow'
import { OverlayTrigger, Popover } from 'react-bootstrap'
export default function UpVote ({ item, className }) { export default function UpVote ({ item, className }) {
const { setError } = useFundError() const { setError } = useFundError()
@ -95,6 +96,15 @@ export default function UpVote ({ item, className }) {
return Rainbow[idx] return Rainbow[idx]
} }
const popover = (
<Popover id='popover-basic'>
<Popover.Title as='h3'>Tipping</Popover.Title>
<Popover.Content>
Press bolt again to tip
</Popover.Content>
</Popover>
)
const noSelfTips = item?.meVote && item?.mine const noSelfTips = item?.meVote && item?.mine
// 12 px default height // 12 px default height
const cover = (item?.meSats < 10 ? ((10 - item.meSats) / 10.0) : 0) * 12 const cover = (item?.meSats < 10 ? ((10 - item.meSats) / 10.0) : 0) * 12
@ -165,25 +175,27 @@ export default function UpVote ({ item, className }) {
<div className={`${noSelfTips ? styles.noSelfTips : ''} <div className={`${noSelfTips ? styles.noSelfTips : ''}
${styles.upvoteWrapper}`} ${styles.upvoteWrapper}`}
> >
<UpBolt <OverlayTrigger placement='right' overlay={popover} show>
width={24} <UpBolt
height={24} width={24}
className={ height={24}
className={
`${styles.upvote} `${styles.upvote}
${className || ''} ${className || ''}
${noSelfTips ? styles.noSelfTips : ''} ${noSelfTips ? styles.noSelfTips : ''}
${item?.meVote ? styles.voted : ''}` ${item?.meVote ? styles.voted : ''}`
} }
style={item?.meVote style={item?.meVote
? { ? {
fill: color, fill: color,
filter: `drop-shadow(0 0 6px ${color}90)` filter: `drop-shadow(0 0 6px ${color}90)`
} }
: undefined} : undefined}
onClick={e => { onClick={e => {
e.stopPropagation() e.stopPropagation()
}} }}
/> />
</OverlayTrigger>
<div className={styles.cover} style={{ top: item?.parentId ? '9px' : '4px', height: `${cover}px` }} /> <div className={styles.cover} style={{ top: item?.parentId ? '9px' : '4px', height: `${cover}px` }} />
</div> </div>
</ActionTooltip> </ActionTooltip>

6
styles/globals.scss
View File

@ -388,4 +388,10 @@ textarea.form-control {
.tooltip-inner { .tooltip-inner {
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;
}
.popover {
.popover-header {
color: #212529;
}
} }