From 6a23d81ce7edd261c2c864fd370f719f0ee610ae Mon Sep 17 00:00:00 2001 From: Jean Ribeiro Date: Wed, 1 Feb 2023 11:23:45 -0300 Subject: [PATCH] feat: governance polishing #2 (#5723) * fix: NodeInput selector not overflowing popup * fix: removes OrderFilterItem mb-4 * fix: ProposalCard height with falsy status * fix: question not collapsing * feat: add a decimal place to the proposal answers percentages where is needed * fix: consistent tooltip styling --- .../governance/views/DetailsView.svelte | 18 ++++++++++-------- .../atoms/pills/ProposalStatusPill.svelte | 18 ++++++++---------- .../filters/items/OrderFilterItem.svelte | 2 +- .../modals/ProposalsDetailsMenu.svelte | 1 + .../components/organisms/ProposalCard.svelte | 19 +++++++++---------- .../utils/getPercentagesFromAnswerStatuses.ts | 3 ++- .../getPercentagesFromAnswerStatuses.test.ts | 2 +- packages/shared/lib/core/utils/number.ts | 5 +++++ 8 files changed, 37 insertions(+), 31 deletions(-) diff --git a/packages/desktop/views/dashboard/governance/views/DetailsView.svelte b/packages/desktop/views/dashboard/governance/views/DetailsView.svelte index 89dfd1bcb0..470bcdb86c 100644 --- a/packages/desktop/views/dashboard/governance/views/DetailsView.svelte +++ b/packages/desktop/views/dashboard/governance/views/DetailsView.svelte @@ -132,14 +132,7 @@ function handleQuestionClick(event: CustomEvent): void { const { questionIndex } = event.detail - openedQuestionIndex = questionIndex - - const selectedQuestionElement: HTMLElement = proposalQuestions?.querySelector( - 'proposal-question:nth-child(' + openedQuestionIndex + ')' - ) - setTimeout(() => { - proposalQuestions.scrollTo({ top: selectedQuestionElement?.offsetTop, behavior: 'smooth' }) - }, 250) + openedQuestionIndex = questionIndex === openedQuestionIndex ? null : questionIndex } function handleCancelClick(): void { @@ -159,6 +152,15 @@ function handleAnswerClick(event: CustomEvent): void { const { answerValue, questionIndex } = event.detail selectedAnswerValues[questionIndex] = answerValue + + openedQuestionIndex = questionIndex + 1 + + const selectedQuestionElement: HTMLElement = proposalQuestions?.querySelector( + `proposal-question:nth-child(${openedQuestionIndex})` + ) + setTimeout(() => { + proposalQuestions.scrollTo({ top: selectedQuestionElement?.offsetTop, behavior: 'smooth' }) + }, 250) } function getTextHintString(): string { diff --git a/packages/shared/components/atoms/pills/ProposalStatusPill.svelte b/packages/shared/components/atoms/pills/ProposalStatusPill.svelte index 496b957257..72c6be40ed 100644 --- a/packages/shared/components/atoms/pills/ProposalStatusPill.svelte +++ b/packages/shared/components/atoms/pills/ProposalStatusPill.svelte @@ -13,13 +13,11 @@ } -{#if status} - -{/if} + diff --git a/packages/shared/components/filters/items/OrderFilterItem.svelte b/packages/shared/components/filters/items/OrderFilterItem.svelte index 133f402d4f..56560c412d 100644 --- a/packages/shared/components/filters/items/OrderFilterItem.svelte +++ b/packages/shared/components/filters/items/OrderFilterItem.svelte @@ -30,6 +30,6 @@
- +
diff --git a/packages/shared/components/modals/ProposalsDetailsMenu.svelte b/packages/shared/components/modals/ProposalsDetailsMenu.svelte index f68b49e725..70266d8f54 100644 --- a/packages/shared/components/modals/ProposalsDetailsMenu.svelte +++ b/packages/shared/components/modals/ProposalsDetailsMenu.svelte @@ -9,6 +9,7 @@ function handleAddProposal(): void { openPopup({ type: 'addProposal', + overflow: true, }) } diff --git a/packages/shared/components/organisms/ProposalCard.svelte b/packages/shared/components/organisms/ProposalCard.svelte index 171b26fac8..e11ef6dd81 100644 --- a/packages/shared/components/organisms/ProposalCard.svelte +++ b/packages/shared/components/organisms/ProposalCard.svelte @@ -41,25 +41,24 @@ {#if proposal.organization} - {proposal.organization.name} - + /> {/if} {proposal.title}
{#if hasVoted} - - - {localize('views.governance.proposals.voted')} - - + {/if}
diff --git a/packages/shared/lib/contexts/governance/utils/getPercentagesFromAnswerStatuses.ts b/packages/shared/lib/contexts/governance/utils/getPercentagesFromAnswerStatuses.ts index 96bc174939..5d75c651ca 100644 --- a/packages/shared/lib/contexts/governance/utils/getPercentagesFromAnswerStatuses.ts +++ b/packages/shared/lib/contexts/governance/utils/getPercentagesFromAnswerStatuses.ts @@ -1,3 +1,4 @@ +import { round } from '@core/utils/number' import type { AnswerStatus } from '@iota/wallet/out/types' import { IProposalAnswerPercentages } from '../interfaces' @@ -13,7 +14,7 @@ export function getPercentagesFromAnswerStatuses(answerStatuses: AnswerStatus[]) const divisionResult = (answerStatus.accumulated ?? 0) / totalVotes percentages = { ...percentages, - [answerStatus.value]: Number.isNaN(divisionResult) ? '0%' : `${Math.round(divisionResult * 100)}%`, + [answerStatus.value]: Number.isNaN(divisionResult) ? '0%' : `${round(divisionResult * 100, 1)}%`, } } }) diff --git a/packages/shared/lib/contexts/governance/utils/tests/getPercentagesFromAnswerStatuses.test.ts b/packages/shared/lib/contexts/governance/utils/tests/getPercentagesFromAnswerStatuses.test.ts index fb781abdfd..d9c7e221fa 100644 --- a/packages/shared/lib/contexts/governance/utils/tests/getPercentagesFromAnswerStatuses.test.ts +++ b/packages/shared/lib/contexts/governance/utils/tests/getPercentagesFromAnswerStatuses.test.ts @@ -24,7 +24,7 @@ describe('File: getPercentagesFromAnswerStatuses.ts', () => { ] it('should return percentages from valid arguments', () => { - expect(getPercentagesFromAnswerStatuses(ANSWER_STATUSES)).toEqual({ 0: '17%', 1: '33%', 2: '50%' }) + expect(getPercentagesFromAnswerStatuses(ANSWER_STATUSES)).toEqual({ 0: '16.7%', 1: '33.3%', 2: '50%' }) }) it('should return empty object from invalid arguments', () => { expect(getPercentagesFromAnswerStatuses([{} as AnswerStatus])).toEqual({}) diff --git a/packages/shared/lib/core/utils/number.ts b/packages/shared/lib/core/utils/number.ts index 22a9d7f05a..7a505880b7 100644 --- a/packages/shared/lib/core/utils/number.ts +++ b/packages/shared/lib/core/utils/number.ts @@ -18,3 +18,8 @@ export function isNumberLetterOrPunctuation(key: string): boolean { const code = key.charCodeAt(0) return (code >= 48 && code <= 57) || (code >= 65 && code <= 122) } + +export function round(value: number, precision: number): number { + const multiplier = Math.pow(10, precision || 0) + return Math.round(value * multiplier) / multiplier +}