sigonasr2
/
ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New tooltip implementation.

Browse Source
master
sigonasr2, Sig, Sigo 3 years ago
parent 0074cec943
commit 0aabe7febf
6 changed files with 82 additions and 21 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 69
      package-lock.json
  2. 1
      package.json
  3. 8
      src/TestPanel.js
  4. 15
      src/components/ExpandTooltip.js
  5. 7
      src/style.css
  6. 1
      touhous

69
package-lock.json generated
Unescape View File

@ -1267,6 +1267,15 @@
"@hapi/hoek": "^8.3.0"
}
},
"@hypnosphi/create-react-context": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
"integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
"requires": {
"gud": "^1.0.0",
"warning": "^4.0.3"
}
},
"@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@ -5323,6 +5332,14 @@
"utila": "~0.4"
}
},
"dom-helpers": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
"requires": {
"@babel/runtime": "^7.1.2"
}
},
"dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@ -7339,6 +7356,11 @@
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
"optional": true
},
"gud": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
},
"gzip-size": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@ -11598,6 +11620,11 @@
"ts-pnp": "^1.1.6"
}
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -13138,6 +13165,20 @@
"utils": "^0.3.1"
}
},
"react-popper": {
"version": "1.3.11",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
"integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
"requires": {
"@babel/runtime": "^7.1.2",
"@hypnosphi/create-react-context": "^0.3.1",
"deep-equal": "^1.1.1",
"popper.js": "^1.14.4",
"prop-types": "^15.6.1",
"typed-styles": "^0.0.7",
"warning": "^4.0.2"
}
},
"react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@ -13324,6 +13365,29 @@
}
}
},
"react-transition-group": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
"integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
"requires": {
"dom-helpers": "^3.4.0",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2",
"react-lifecycles-compat": "^3.0.4"
}
},
"reactstrap": {
"version": "8.10.0",
"resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.10.0.tgz",
"integrity": "sha512-MsFUB/fRZj6Orf8Mxc93iYuAs+9ngnFmy2cfYlzkmc4vi5oM4u6ziY/DsO71lDG3cotxHRyS3Flr51cuYv+IEQ==",
"requires": {
"@babel/runtime": "^7.12.5",
"classnames": "^2.2.3",
"prop-types": "^15.5.8",
"react-popper": "^1.3.6",
"react-transition-group": "^2.3.1"
}
},
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@ -15582,6 +15646,11 @@
"mime-types": "~2.1.24"
}
},
"typed-styles": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
"integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
},
"typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",

1
package.json
Unescape View File

@ -29,6 +29,7 @@
"react-scripts": "4.0.3",
"react-toggle": "^4.1.2",
"react-tooltip": "^4.2.21",
"reactstrap": "^8.10.0",
"request": "^2.79.0",
"save": "^2.4.0",
"typescript": "^4.4.3",

8
src/TestPanel.js
Unescape View File

@ -8,6 +8,7 @@ import axios from 'axios';
import Helmet from 'react-helmet'
import ReactPlaceholder from 'react-placeholder';
import "react-placeholder/lib/reactPlaceholder.css";
import { UncontrolledTooltip } from 'reactstrap';
import { useLocation,useHistory,useParams,matchPath } from 'react-router'
@ -968,10 +969,9 @@ function deepCopySkills(skillData) {
}}
displayFunction={(item)=>{
return<div className={"itemWrapper r"+item[WEAPON_WEAPON].rarity} onClick={()=>{setSelectedWeapon(item);setWeaponSelectWindowOpen(false)}}><div className="itemImgWrapper"><img alt="" src={DisplayIcon(item[WEAPON_EXISTENCE_DATA]?.icon)} /></div><div className="itemNameWrapper rifle">{GetSpecialWeaponName(item)}</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">{item[WEAPON_WEAPON].atk}</span>
<ExpandTooltip id={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id} tooltip={<>{item[WEAPON_POTENTIAL_TOOLTIP].map((pot,i)=><React.Fragment key={i}>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it,ii)=><React.Fragment key={ii}>{it}<br/> </React.Fragment>):<React.Fragment key={i}/>}</React.Fragment>)}</>}>
<span className="pot">{item[WEAPON_POTENTIAL].name}</span>
<span className="pot" id={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id}>{item[WEAPON_POTENTIAL].name}</span>
<ExpandTooltip target={"mouseover-tooltip"+item[WEAPON_WEAPONTYPE].id+"_"+item[WEAPON_WEAPON].id+"_"+item[WEAPON_POTENTIAL].id+"_"+item[WEAPON_POTENTIAL_TOOLTIP].id}>
<>{item[WEAPON_POTENTIAL_TOOLTIP].map((pot,i)=><React.Fragment key={i}>{(i!==0)&&<br/>}{pot.name}: {pot.description?pot.description.split("\\n").map((it,ii)=><React.Fragment key={ii}>{it}<br/> </React.Fragment>):<React.Fragment key={i}/>}</React.Fragment>)}</>
</ExpandTooltip></div></div>}}
/>

15
src/components/ExpandTooltip.js
Unescape View File

@ -1,17 +1,10 @@
import ReactTooltip from 'react-tooltip' //https://wwayne.github.io/react-tooltip/
import { UncontrolledTooltip } from "reactstrap"
function ExpandTooltip(p) {
return <><span data-tip data-tip-disable={p.tooltip?.length===0} data-for={p.id}>{p.children}</span><ReactTooltip id={p.id} className="xTooltip" overridePosition={ (
{ left, top },
currentEvent, currentTarget, node) => {
const d = document.documentElement;
left = Math.min(d.clientWidth - node.clientWidth, left);
top = Math.min(d.clientHeight - node.clientHeight, top);
left = Math.max(0, left);
top = Math.max(0, top);
return { top, left }
} }>{p.tooltip}</ReactTooltip></>
return <UncontrolledTooltip className="xTooltip" fade={true} placement="bottom" {...p}>
{p.children}
</UncontrolledTooltip>
}
export {ExpandTooltip}

7
src/style.css
Unescape View File

@ -508,20 +508,16 @@ overflow-y: initial;
}
.tooltip {
cursor: help;
}
.tooltip span {
color: white;
font-size:10pt;
visibility: hidden;
width: 200px;
background-color: rgba(38,53,63,0.9);
text-align: left;
/*border-radius: 6px;*/
padding: 5px;
/* Position the tooltip */
position: absolute;
white-space: normal;
left: 1em;
animation: fadeIn 0.15s;
}
.xTooltip {
margin: 0 10px 0 0;
@ -530,6 +526,7 @@ overflow-y: initial;
color: white;
font-size:10pt;
text-align: left;
animation: fadeIn 0.15s;
}
[class*="BaseToolTop"] {

1
touhous
Unescape View File

@ -1,2 +1,3 @@
【東方 Touhou Vocal】Sentence - EURO mix【Sliver Forest】
[Touhou Vocal] [GET IN THE RING] Last Remote～Blaze mix (spanish & english subtitles)
「Touhou Vocal」[FELT] Innocent Eyes (Eris's double helix mix)
Write Preview
Loading…
Cancel
Save