Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(particle): rank presence and usability #1223

Merged
merged 6 commits into from
Jul 31, 2024
Merged

fix(particle): rank presence and usability #1223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3498bdb
fix rank
happylolonly Jul 30, 2024
ff32892
updates
happylolonly Jul 30, 2024
723486b
change color
happylolonly Jul 31, 2024
d417fbb
change adviser interaction logic
happylolonly Jul 31, 2024
133aa7a
fix selection
happylolonly Jul 31, 2024
122069f
fix sense header
happylolonly Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/Rank/QuestionBtn/QuestionBtn.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,8 @@
justify-content: center;
width: 16px;
height: 16px;

&:hover {
opacity: 0.8;
}
}
136 changes: 34 additions & 102 deletions src/components/Rank/rank.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,47 @@
import { Pane, Text } from '@cybercongress/gravity';
import { Copy } from '../ui/copy';
import Tooltip from '../tooltip/tooltip';
import { LinkWindow } from '../link/link';
import { trimString, exponentialToDecimal } from '../../utils/utils';
import { getRankGrade } from 'src/utils/search/utils';
import styles from './Rank.module.scss';
import { routes } from 'src/routes';
import { Link } from 'react-router-dom';
import QuestionBtn from './QuestionBtn/QuestionBtn';

function GradeTooltipContent({ grade, hash, color, rank }) {
return (
// <Pane paddingX={15} paddingY={15}>
// <Pane marginBottom={12}>
// <Text color="#ffff">
// Answer rank for{' '}
// {hash && (
// <Pane display="inline-flex" alignItems="center">
// {trimString(hash, 5, 5)} <Copy text={hash} />
// </Pane>
// )}{' '}
// is {rank}
// </Text>
// </Pane>
// <Pane display="flex" marginBottom={12}>
// <Text color="#ffff">
// Answers between &nbsp;
// {exponentialToDecimal(parseFloat(grade.from).toPrecision(3))}
// &nbsp; and &nbsp;
// {exponentialToDecimal(parseFloat(grade.to).toPrecision(3))}
// &nbsp; recieve grade
// <Pane
// className={styles.rank}
// style={{ display: 'inline-flex' }}
// marginLeft="5px"
// backgroundColor={color}
// >
// {grade.value}
// </Pane>
// </Text>
// </Pane>
<Pane>
<Text color="#ffff">
More about{' '}
{/* <LinkWindow to="https://ipfs.io/ipfs/QmceNpj6HfS81PcCaQXrFMQf7LR5FTLkdG9sbSRNy3UXoZ">
</LinkWindow> */}
<Link
to={routes.oracle.ask.getLink(
'QmWQyWPCHE2hfEaJy8sTVQtKgW4EAaCLGMc33sMkodmRZ3'
)}
>
cyber~Rank
</Link>
</Text>
</Pane>
// </Pane>
);
}

const gradeColorRank = (rank) => {
let rankGradeColor = '#546e7a';
// const gradeColorRank = (rank) => {
// let rankGradeColor = '#546e7a';

switch (rank) {
case 1:
rankGradeColor = '#ff3d00';
break;
case 2:
rankGradeColor = '#ff9100';
break;
case 3:
rankGradeColor = '#ffea00';
break;
case 4:
rankGradeColor = '#64dd17';
break;
case 5:
rankGradeColor = '#00b0ff';
break;
case 6:
rankGradeColor = '#304ffe';
break;
case 7:
rankGradeColor = '#d500f9';
break;
default:
rankGradeColor = '#546e7a';
break;
}
// switch (rank) {
// case 1:
// rankGradeColor = '#ff3d00';
// break;
// case 2:
// rankGradeColor = '#ff9100';
// break;
// case 3:
// rankGradeColor = '#ffea00';
// break;
// case 4:
// rankGradeColor = '#64dd17';
// break;
// case 5:
// rankGradeColor = '#00b0ff';
// break;
// case 6:
// rankGradeColor = '#304ffe';
// break;
// case 7:
// rankGradeColor = '#d500f9';
// break;
// default:
// rankGradeColor = '#546e7a';
// break;
// }

return rankGradeColor;
};
// return rankGradeColor;
// };

function Rank({ rank, hash, ...props }) {
const gradeValue = getRankGrade(rank);
const color = gradeColorRank(gradeValue.value);
// const gradeValue = getRankGrade(rank);
// const color = gradeColorRank(gradeValue.value);

return (
<Tooltip
placement="bottom"
strategy="fixed"
tooltip={
<GradeTooltipContent
grade={gradeValue}
hash={hash}
color={color}
rank={rank}
/>
}
>
<Link to="https://docs.cyb.ai/#/page/cyberank" replace target="_blank">
<QuestionBtn {...props} />
</Tooltip>
</Link>
);
}

Expand Down
18 changes: 9 additions & 9 deletions src/containers/ipfs/components/AdviserMeta/AdviserMeta.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
display: grid;
grid-template-columns: repeat(3, 1fr);

@media (max-width: 768px) {
@media (width <= 768px) {
display: block;
text-align: center;

Expand All @@ -22,24 +22,22 @@
.left {
display: flex;
gap: 7px;
align-items: center;
align-items: baseline;

span:first-of-type {
color: rgba(255, 255, 255, 0.5);
color: rgb(255 255 255 / 50%);
font-size: 14px;
}

.rank {
display: flex;
align-items: center;
gap: 5px;

color: rgba(221, 255, 255, 0.38);

color: rgb(221 255 255 / 38%);
font-size: 14px;

.number {
color: #f62bfd;
color: white;
line-height: 23px;
}
}
Expand All @@ -61,8 +59,10 @@
justify-content: flex-end;
gap: 14px;

button {
opacity: 0.35;
a {
&:hover {
opacity: 0.8;
}
}
}
}
7 changes: 4 additions & 3 deletions src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { Rank, Account } from 'src/components';
import { timeSince, formatCurrency } from 'src/utils/utils';
import useRank from 'src/features/cyberlinks/rank/useRank';
import { Link } from 'react-router-dom';
import { routes } from 'src/routes';
import useGetCreator from '../../hooks/useGetCreator';
import { PREFIXES } from '../metaInfo';
import styles from './AdviserMeta.module.scss';
import useRank from 'src/features/cyberlinks/rank/useRank';

type Props = {
cid: string;
Expand All @@ -22,7 +24,6 @@ function AdviserMeta({ cid, type, size }: Props) {

{!!rank && (
<div className={styles.rank}>
<span>with rank</span>
<span className={styles.number}>
{rank.toLocaleString().replaceAll(',', ' ')}
</span>
Expand All @@ -42,7 +43,7 @@ function AdviserMeta({ cid, type, size }: Props) {
<span>
🟥 {size ? formatCurrency(size, 'B', 0, PREFIXES) : 'unknown'}
</span>
<button disabled>🌓</button>
<Link to={routes.robot.routes.soul.path}>🌓</Link>
</div>
</div>
);
Expand Down
2 changes: 0 additions & 2 deletions src/containers/ipfs/hooks/useGetDiscussion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ function useGetLinks(
where.neuron = { _eq: neuron };
}

console.log('search neuron:', neuron);

// always no next page when skip
const [hasNextPage, setHasNextPage] = useState(!skip);
const [isInitialLoading, setIsInitialLoading] = useState(true);
Expand Down
38 changes: 18 additions & 20 deletions src/features/adviser/Adviser/Adviser.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $animation-time: 2.3s;
overflow: hidden;
position: relative;
min-height: 26px;
cursor: pointer;

--color-r: 0;
--color-b: 0;
Expand All @@ -28,6 +29,7 @@ $animation-time: 2.3s;
--color-b: 92;
--color-g: 0;
}

&green {
--color-r: 122;
--color-b: 250;
Expand All @@ -47,7 +49,7 @@ $animation-time: 2.3s;
}
}

&:disabled {
&.disabled {
cursor: unset;

&::before {
Expand All @@ -62,21 +64,18 @@ $animation-time: 2.3s;
// background
&::before {
content: '';

position: absolute;
left: 0;
filter: blur(10px);
z-index: -1;

width: 100%;
height: 100%;

background: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(var(--color-r), var(--color-b), var(--color-g), 0.13) 40%,
rgba(var(--color-r), var(--color-b), var(--color-g), 0.13) 60%,
rgba(0, 0, 0, 0) 100%
rgb(0 0 0 / 0%) 0%,
rgb(var(--color-r) var(--color-b) var(--color-g) / 13%) 40%,
rgb(var(--color-r) var(--color-b) var(--color-g) / 13%) 60%,
rgb(0 0 0 / 0%) 100%
);

@keyframes pulseBg {
Expand All @@ -86,11 +85,12 @@ $animation-time: 2.3s;
filter: blur(7px);
}
}

animation: pulseBg $animation-time infinite alternate;
}

&.open,
&:disabled {
&.disabled {
&::before,
.summary {
animation-name: none;
Expand All @@ -103,7 +103,7 @@ $animation-time: 2.3s;
transition: all 0.7s;
}

@media (max-width: 480px) {
@media (width <= 480px) {
min-width: unset;
}
}
Expand All @@ -119,30 +119,28 @@ $animation-time: 2.3s;

@keyframes pulse {
0% {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
opacity: 0.2;
}

100% {
box-shadow: 0px 0px 10px 2px
rgb(var(--color-r), var(--color-b), var(--color-g));
box-shadow: 0 0 10px 2px rgb(var(--color-r) var(--color-b) var(--color-g));
}
}

// dot
&::before {
content: '';

$size: 4px;
background-color: #fff;

background-color: #fff;
border-radius: 50%;
transition: all 1s;
opacity: 1;

animation: pulse $animation-time infinite alternate;

width: $size;
height: $size;

position: absolute;
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
Expand All @@ -158,19 +156,19 @@ $animation-time: 2.3s;
}
}

.wrapper:disabled & {
.wrapper.disabled & {
&::before {
animation: none;
opacity: 0.35;

// background-color: rgba(#fff, 0.5);
}
}
}

.content {
text-align: center;
text-shadow: 0px 0px 5px
rgba(var(--color-r), var(--color-b), var(--color-g), 0.7);
text-shadow: 0 0 5px rgb(var(--color-r) var(--color-b) var(--color-g) / 70%);
line-height: 26px;
overflow: hidden;
height: 0;
Expand Down
Loading