Poll history - extract poll option display components (#10107)

* wip

* remove dupe

* use poll model relations in all cases

* update mpollbody tests to use poll instance

* update poll fetching login in pinned messages card

* add pinned polls to room polls state

* add spinner while relations are still loading

* handle no poll in end poll dialog

* strict errors

* render a poll body that errors for poll end events

* add fetching logic to pollend tile

* extract poll testing utilities

* test mpollend

* strict fix

* more strict fix

* strict fix for forwardref

* add filter component

* update poll test utils

* add unstyled filter tab group

* filtertabgroup snapshot

* lint

* update test util setupRoomWithPollEvents to allow testing multiple polls in one room

* style filter tabs

* test error message for past polls

* sort polls list by latest

* extract poll option display components

* strict fixes
This commit is contained in:
Kerry 2023-02-13 15:55:39 +13:00 committed by GitHub
parent 18ab325eaf
commit 1c6b06bb58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 597 additions and 494 deletions

View file

@ -47,108 +47,6 @@ limitations under the License.
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
}
.mx_MPollBody_option {
border: 1px solid $quinary-content;
border-radius: 8px;
margin-bottom: 16px;
padding: 6px 12px;
max-width: 550px;
background-color: $background;
.mx_StyledRadioButton,
.mx_MPollBody_endedOption {
margin-bottom: 8px;
}
.mx_StyledRadioButton_content,
.mx_MPollBody_endedOption {
padding-top: 2px;
margin-right: 0px;
}
.mx_StyledRadioButton_spacer {
display: none;
}
.mx_MPollBody_optionDescription {
display: flex;
justify-content: space-between;
.mx_MPollBody_optionVoteCount {
color: $secondary-content;
font-size: $font-12px;
white-space: nowrap;
}
}
.mx_MPollBody_popularityBackground {
width: 100%;
height: 8px;
margin-right: 12px;
border-radius: 8px;
background-color: $system;
.mx_MPollBody_popularityAmount {
width: 0%;
height: 8px;
border-radius: 8px;
background-color: $quaternary-content;
}
}
}
.mx_MPollBody_option:last-child {
margin-bottom: 8px;
}
.mx_MPollBody_option_checked {
border-color: $accent;
.mx_MPollBody_popularityBackground {
.mx_MPollBody_popularityAmount {
background-color: $accent;
}
}
}
/* options not actionable in these states */
.mx_MPollBody_option_checked,
.mx_MPollBody_option_ended {
pointer-events: none;
}
.mx_StyledRadioButton_checked,
.mx_MPollBody_endedOptionWinner {
input[type="radio"] + div {
border-width: 2px;
border-color: $accent;
background-color: $accent;
background-image: url("$(res)/img/element-icons/check-white.svg");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
div {
visibility: hidden;
}
}
}
.mx_MPollBody_endedOptionWinner .mx_MPollBody_optionDescription .mx_MPollBody_optionVoteCount::before {
content: "";
position: relative;
display: inline-block;
margin-right: 4px;
top: 2px;
height: 12px;
width: 12px;
background-color: $accent;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-image: url("$(res)/img/element-icons/trophy.svg");
}
.mx_MPollBody_totalVotes {
display: flex;
flex-direction: inline;
@ -168,9 +66,8 @@ limitations under the License.
pointer-events: none;
}
.mx_MPollBody_option,
/* label has cursor: default in user-agent stylesheet */
/* override */
.mx_MPollBody_live-option {
cursor: pointer;
.mx_MPollBody_allOptions {
display: grid;
grid-gap: $spacing-16;
margin-bottom: $spacing-8;
}