Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 4a41ee4

Browse files
author
Kerry Archibald
committed
extract poll option display components from pollbody
1 parent aadb338 commit 4a41ee4

File tree

13 files changed

+631
-494
lines changed

13 files changed

+631
-494
lines changed

‎cypress/e2e/polls/polls.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,12 @@ describe("Polls", () => {
5454
};
5555

5656
const getPollOption = (pollId: string, optionText: string): Chainable<JQuery> => {
57-
return getPollTile(pollId).contains(".mx_MPollBody_option .mx_StyledRadioButton", optionText);
57+
return getPollTile(pollId).contains(".mx_PollOption .mx_StyledRadioButton", optionText);
5858
};
5959

6060
const expectPollOptionVoteCount = (pollId: string, optionText: string, votes: number): void => {
6161
getPollOption(pollId, optionText).within(() => {
62-
cy.get(".mx_MPollBody_optionVoteCount").should("contain", `${votes} vote`);
62+
cy.get(".mx_PollOption_optionVoteCount").should("contain", `${votes} vote`);
6363
});
6464
};
6565

‎res/css/_components.pcss

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
@import "./components/views/messages/_MBeaconBody.pcss";
3434
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
3535
@import "./components/views/pips/_WidgetPip.pcss";
36+
@import "./components/views/polls/_PollOption.pcss";
3637
@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
3738
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
3839
@import "./components/views/settings/devices/_DeviceDetails.pcss";

‎res/css/components/views/polls/_PollOption.pcss

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_PollOption {
18+
border: 1px solid $quinary-content;
19+
border-radius: 8px;
20+
padding: 6px 12px;
21+
max-width: 550px;
22+
background-color: $background;
23+
24+
.mx_StyledRadioButton_content,
25+
.mx_PollOption_endedOption {
26+
padding-top: 2px;
27+
margin-right: 0px;
28+
}
29+
30+
.mx_StyledRadioButton_spacer {
31+
display: none;
32+
}
33+
}
34+
35+
.mx_PollOption,
36+
/* label has cursor: default in user-agent stylesheet */
37+
/* override */
38+
.mx_PollOption_live-option {
39+
cursor: pointer;
40+
}
41+
42+
.mx_PollOption_content {
43+
display: flex;
44+
justify-content: space-between;
45+
}
46+
47+
.mx_PollOption_optionVoteCount {
48+
color: $secondary-content;
49+
font-size: $font-12px;
50+
white-space: nowrap;
51+
}
52+
53+
.mx_PollOption_winnerIcon {
54+
height: 12px;
55+
width: 12px;
56+
color: $accent;
57+
margin-right: $spacing-4;
58+
vertical-align: middle;
59+
}
60+
61+
.mx_PollOption_checked {
62+
border-color: $accent;
63+
64+
.mx_PollOption_popularityBackground {
65+
.mx_PollOption_popularityAmount {
66+
background-color: $accent;
67+
}
68+
}
69+
70+
// override checked radio button styling
71+
// to show checkmark instead
72+
.mx_StyledRadioButton_checked {
73+
input[type="radio"] + div {
74+
border-width: 2px;
75+
border-color: $accent;
76+
background-color: $accent;
77+
background-image: url("$(res)/img/element-icons/check-white.svg");
78+
background-size: 12px;
79+
background-repeat: no-repeat;
80+
background-position: center;
81+
82+
div {
83+
visibility: hidden;
84+
}
85+
}
86+
}
87+
}
88+
89+
/* options not actionable in these states */
90+
.mx_PollOption_checked,
91+
.mx_PollOption_ended {
92+
pointer-events: none;
93+
}
94+
95+
.mx_PollOption_popularityBackground {
96+
width: 100%;
97+
height: 8px;
98+
margin-right: 12px;
99+
border-radius: 8px;
100+
background-color: $system;
101+
margin-top: $spacing-8;
102+
103+
.mx_PollOption_popularityAmount {
104+
width: 0%;
105+
height: 8px;
106+
border-radius: 8px;
107+
background-color: $quaternary-content;
108+
}
109+
}

‎res/css/views/messages/_MPollBody.pcss

+4-107
Original file line numberDiff line numberDiff line change
@@ -47,108 +47,6 @@ limitations under the License.
4747
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
4848
}
4949

50-
.mx_MPollBody_option {
51-
border: 1px solid $quinary-content;
52-
border-radius: 8px;
53-
margin-bottom: 16px;
54-
padding: 6px 12px;
55-
max-width: 550px;
56-
background-color: $background;
57-
58-
.mx_StyledRadioButton,
59-
.mx_MPollBody_endedOption {
60-
margin-bottom: 8px;
61-
}
62-
63-
.mx_StyledRadioButton_content,
64-
.mx_MPollBody_endedOption {
65-
padding-top: 2px;
66-
margin-right: 0px;
67-
}
68-
69-
.mx_StyledRadioButton_spacer {
70-
display: none;
71-
}
72-
73-
.mx_MPollBody_optionDescription {
74-
display: flex;
75-
justify-content: space-between;
76-
77-
.mx_MPollBody_optionVoteCount {
78-
color: $secondary-content;
79-
font-size: $font-12px;
80-
white-space: nowrap;
81-
}
82-
}
83-
84-
.mx_MPollBody_popularityBackground {
85-
width: 100%;
86-
height: 8px;
87-
margin-right: 12px;
88-
border-radius: 8px;
89-
background-color: $system;
90-
91-
.mx_MPollBody_popularityAmount {
92-
width: 0%;
93-
height: 8px;
94-
border-radius: 8px;
95-
background-color: $quaternary-content;
96-
}
97-
}
98-
}
99-
100-
.mx_MPollBody_option:last-child {
101-
margin-bottom: 8px;
102-
}
103-
104-
.mx_MPollBody_option_checked {
105-
border-color: $accent;
106-
107-
.mx_MPollBody_popularityBackground {
108-
.mx_MPollBody_popularityAmount {
109-
background-color: $accent;
110-
}
111-
}
112-
}
113-
114-
/* options not actionable in these states */
115-
.mx_MPollBody_option_checked,
116-
.mx_MPollBody_option_ended {
117-
pointer-events: none;
118-
}
119-
120-
.mx_StyledRadioButton_checked,
121-
.mx_MPollBody_endedOptionWinner {
122-
input[type="radio"] + div {
123-
border-width: 2px;
124-
border-color: $accent;
125-
background-color: $accent;
126-
background-image: url("$(res)/img/element-icons/check-white.svg");
127-
background-size: 12px;
128-
background-repeat: no-repeat;
129-
background-position: center;
130-
131-
div {
132-
visibility: hidden;
133-
}
134-
}
135-
}
136-
137-
.mx_MPollBody_endedOptionWinner .mx_MPollBody_optionDescription .mx_MPollBody_optionVoteCount::before {
138-
content: "";
139-
position: relative;
140-
display: inline-block;
141-
margin-right: 4px;
142-
top: 2px;
143-
height: 12px;
144-
width: 12px;
145-
background-color: $accent;
146-
mask-repeat: no-repeat;
147-
mask-size: contain;
148-
mask-position: center;
149-
mask-image: url("$(res)/img/element-icons/trophy.svg");
150-
}
151-
15250
.mx_MPollBody_totalVotes {
15351
display: flex;
15452
flex-direction: inline;
@@ -168,9 +66,8 @@ limitations under the License.
16866
pointer-events: none;
16967
}
17068

171-
.mx_MPollBody_option,
172-
/* label has cursor: default in user-agent stylesheet */
173-
/* override */
174-
.mx_MPollBody_live-option {
175-
cursor: pointer;
69+
.mx_MPollBody_allOptions {
70+
display: grid;
71+
grid-gap: $spacing-16;
72+
margin-bottom: $spacing-8;
17673
}

‎res/img/element-icons/trophy.svg

+1-1
Loading

‎src/components/views/dialogs/polls/PollListItemEnded.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React from "react";
18+
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
19+
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
20+
21+
import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
22+
import { formatLocalDateShort } from "../../../../DateUtils";
23+
24+
interface Props {
25+
event: MatrixEvent;
26+
}
27+
28+
export const PollListItemEnded: React.FC<Props> = ({ event }) => {
29+
const pollEvent = event.unstableExtensibleEvent as unknown as PollStartEvent;
30+
if (!pollEvent) {
31+
return null;
32+
}
33+
const formattedDate = formatLocalDateShort(event.getTs());
34+
return (
35+
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem">
36+
<PollIcon className="mx_PollListItem_icon" />
37+
<span className="mx_PollListItem_question">{pollEvent.question.text}</span>
38+
<span>{formattedDate}</span>
39+
</li>
40+
);
41+
};

0 commit comments

Comments
 (0)