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
GitHub
parent
18ab325eaf
commit
1c6b06bb58
13 changed files with 597 additions and 494 deletions
|
|
@ -33,6 +33,7 @@
|
|||
@import "./components/views/messages/_MBeaconBody.pcss";
|
||||
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
|
||||
@import "./components/views/pips/_WidgetPip.pcss";
|
||||
@import "./components/views/polls/_PollOption.pcss";
|
||||
@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
|
||||
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
|
||||
@import "./components/views/settings/devices/_DeviceDetails.pcss";
|
||||
|
|
|
|||
109
res/css/components/views/polls/_PollOption.pcss
Normal file
109
res/css/components/views/polls/_PollOption.pcss
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_PollOption {
|
||||
border: 1px solid $quinary-content;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
max-width: 550px;
|
||||
background-color: $background;
|
||||
|
||||
.mx_StyledRadioButton_content,
|
||||
.mx_PollOption_endedOption {
|
||||
padding-top: 2px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton_spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PollOption,
|
||||
/* label has cursor: default in user-agent stylesheet */
|
||||
/* override */
|
||||
.mx_PollOption_live-option {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_PollOption_content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mx_PollOption_optionVoteCount {
|
||||
color: $secondary-content;
|
||||
font-size: $font-12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_PollOption_winnerIcon {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
color: $accent;
|
||||
margin-right: $spacing-4;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_PollOption_checked {
|
||||
border-color: $accent;
|
||||
|
||||
.mx_PollOption_popularityBackground {
|
||||
.mx_PollOption_popularityAmount {
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
// override checked radio button styling
|
||||
// to show checkmark instead
|
||||
.mx_StyledRadioButton_checked {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* options not actionable in these states */
|
||||
.mx_PollOption_checked,
|
||||
.mx_PollOption_ended {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_PollOption_popularityBackground {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
background-color: $system;
|
||||
margin-top: $spacing-8;
|
||||
|
||||
.mx_PollOption_popularityAmount {
|
||||
width: 0%;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $quaternary-content;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.6667 1.33333H9.33333V0.666667C9.33333 0.3 9.03333 0 8.66667 0H3.33333C2.96667 0 2.66667 0.3 2.66667 0.666667V1.33333H1.33333C0.6 1.33333 0 1.93333 0 2.66667V3.33333C0 5.03333 1.28 6.42 2.92667 6.62667C3.34667 7.62667 4.24667 8.38 5.33333 8.6V10.6667H3.33333C2.96667 10.6667 2.66667 10.9667 2.66667 11.3333C2.66667 11.7 2.96667 12 3.33333 12H8.66667C9.03333 12 9.33333 11.7 9.33333 11.3333C9.33333 10.9667 9.03333 10.6667 8.66667 10.6667H6.66667V8.6C7.75333 8.38 8.65333 7.62667 9.07333 6.62667C10.72 6.42 12 5.03333 12 3.33333V2.66667C12 1.93333 11.4 1.33333 10.6667 1.33333ZM1.33333 3.33333V2.66667H2.66667V5.21333C1.89333 4.93333 1.33333 4.2 1.33333 3.33333ZM10.6667 3.33333C10.6667 4.2 10.1067 4.93333 9.33333 5.21333V2.66667H10.6667V3.33333Z" fill="#0DBD8B"/>
|
||||
<path d="M10.6667 1.33333H9.33333V0.666667C9.33333 0.3 9.03333 0 8.66667 0H3.33333C2.96667 0 2.66667 0.3 2.66667 0.666667V1.33333H1.33333C0.6 1.33333 0 1.93333 0 2.66667V3.33333C0 5.03333 1.28 6.42 2.92667 6.62667C3.34667 7.62667 4.24667 8.38 5.33333 8.6V10.6667H3.33333C2.96667 10.6667 2.66667 10.9667 2.66667 11.3333C2.66667 11.7 2.96667 12 3.33333 12H8.66667C9.03333 12 9.33333 11.7 9.33333 11.3333C9.33333 10.9667 9.03333 10.6667 8.66667 10.6667H6.66667V8.6C7.75333 8.38 8.65333 7.62667 9.07333 6.62667C10.72 6.42 12 5.03333 12 3.33333V2.66667C12 1.93333 11.4 1.33333 10.6667 1.33333ZM1.33333 3.33333V2.66667H2.66667V5.21333C1.89333 4.93333 1.33333 4.2 1.33333 3.33333ZM10.6667 3.33333C10.6667 4.2 10.1067 4.93333 9.33333 5.21333V2.66667H10.6667V3.33333Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 880 B After Width: | Height: | Size: 885 B |
Loading…
Add table
Add a link
Reference in a new issue