You've already forked matrix-react-sdk
mirror of
https://github.com/matrix-org/matrix-react-sdk.git
synced 2025-11-03 00:33:22 +03:00
Use StyledRadioGroup
This commit is contained in:
Jorik Schellekens
@@ -179,6 +179,14 @@ limitations under the License.
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button_highlight {
|
||||
background: rgba($accent-color, 0.25);
|
||||
// make the icon the accent color too
|
||||
&::before {
|
||||
background-color: $accent-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button {
|
||||
position: relative;
|
||||
margin-right: 6px;
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="19px"
|
||||
height="19px"
|
||||
viewBox="0 0 19 19"
|
||||
version="1.1"
|
||||
id="svg3734"
|
||||
sodipodi:docname="icon_copy_message.svg"
|
||||
inkscape:version="0.92.1 r">
|
||||
<metadata
|
||||
id="metadata3738">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1596"
|
||||
inkscape:window-height="846"
|
||||
id="namedview3736"
|
||||
showgrid="false"
|
||||
inkscape:zoom="12.421053"
|
||||
inkscape:cx="3.4935767"
|
||||
inkscape:cy="2.469644"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Symbols" />
|
||||
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title
|
||||
id="title3722">ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
|
||||
<desc
|
||||
id="desc3724">Created with sketchtool.</desc>
|
||||
<defs
|
||||
id="defs3726" />
|
||||
<g
|
||||
id="Symbols"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd">
|
||||
<path
|
||||
d="M 9.5,19 C 14.746705,19 19,14.746705 19,9.5 19,4.2532949 14.746705,0 9.5,0 4.2532949,0 0,4.2532949 0,9.5 0,14.746705 4.2532949,19 9.5,19 Z"
|
||||
id="Oval-69"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ececec" />
|
||||
<g
|
||||
id="g4632"
|
||||
transform="translate(-2.3841858e-7,-1)">
|
||||
<rect
|
||||
style="stroke:#9b9b9b;stroke-width:0.91585475;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
y="4.3017478"
|
||||
x="4.6289611"
|
||||
height="10.396504"
|
||||
width="7.7420783"
|
||||
id="rect3745-3" />
|
||||
<rect
|
||||
style="fill:#ececec;fill-opacity:1;stroke:#9b9b9b;stroke-width:0.91585475;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
y="6.3017478"
|
||||
x="6.6289611"
|
||||
height="10.396504"
|
||||
width="7.7420783"
|
||||
id="rect3745" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
@@ -25,7 +25,6 @@ interface IProps extends React.ComponentProps<typeof AccessibleTooltipButton> {
|
||||
isExpanded: boolean;
|
||||
}
|
||||
|
||||
// TODO: replace this the header buttons and the right panel buttons with a single representation
|
||||
// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
|
||||
export const ContextMenuTooltipButton: React.FC<IProps> = ({
|
||||
isExpanded,
|
||||
|
||||
@@ -25,6 +25,7 @@ interface IDefinition<T extends string> {
|
||||
disabled?: boolean;
|
||||
label: React.ReactChild;
|
||||
description?: React.ReactChild;
|
||||
checked?: boolean; // If provided it will override the value comparison done in the group
|
||||
}
|
||||
|
||||
interface IProps<T extends string> {
|
||||
@@ -46,7 +47,7 @@ function StyledRadioGroup<T extends string>({name, definitions, value, className
|
||||
<StyledRadioButton
|
||||
className={classNames(className, d.className)}
|
||||
onChange={_onChange}
|
||||
checked={d.value === value}
|
||||
checked={d.checked !== undefined ? d.checked : d.value === value}
|
||||
name={name}
|
||||
value={d.value}
|
||||
disabled={d.disabled}
|
||||
|
||||
@@ -121,10 +121,12 @@ const EmojiButton = ({addEmoji}) => {
|
||||
"mx_MessageComposer_button",
|
||||
"mx_MessageComposer_emoji",
|
||||
{
|
||||
"mx_RightPanel_headerButton_highlight": menuDisplayed,
|
||||
"mx_MessageComposer_button_highlight": menuDisplayed,
|
||||
},
|
||||
);
|
||||
|
||||
// TODO: replace ContextMenuTooltipButton with a unified representation of
|
||||
// the header buttons and the right panel buttons
|
||||
return <React.Fragment>
|
||||
<ContextMenuTooltipButton
|
||||
className={className}
|
||||
|
||||
@@ -384,7 +384,7 @@ export default class Stickerpicker extends React.Component {
|
||||
"mx_MessageComposer_button",
|
||||
"mx_MessageComposer_stickers",
|
||||
"mx_Stickers_hideStickers",
|
||||
"mx_RightPanel_headerButton_highlight",
|
||||
"mx_MessageComposer_button_highlight",
|
||||
);
|
||||
if (this.state.showStickers) {
|
||||
// Show hide-stickers button
|
||||
|
||||
@@ -23,7 +23,7 @@ import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
|
||||
import {SettingLevel} from "../../../../../settings/SettingsStore";
|
||||
import Modal from "../../../../../Modal";
|
||||
import QuestionDialog from "../../../dialogs/QuestionDialog";
|
||||
import StyledRadioButton from '../../../elements/StyledRadioButton';
|
||||
import StyledRadioGroup from '../../../elements/StyledRadioGroup';
|
||||
|
||||
export default class SecurityRoomSettingsTab extends React.Component {
|
||||
static propTypes = {
|
||||
@@ -258,30 +258,33 @@ export default class SecurityRoomSettingsTab extends React.Component {
|
||||
<div>
|
||||
{guestWarning}
|
||||
{aliasWarning}
|
||||
<StyledRadioButton
|
||||
name="roomVis" value="invite_only"
|
||||
disabled={!canChangeAccess}
|
||||
onChange={this._onRoomAccessRadioToggle}
|
||||
checked={joinRule !== "public"}
|
||||
>
|
||||
{_t('Only people who have been invited')}
|
||||
</StyledRadioButton>
|
||||
<StyledRadioButton
|
||||
name="roomVis" value="public_no_guests"
|
||||
disabled={!canChangeAccess}
|
||||
onChange={this._onRoomAccessRadioToggle}
|
||||
checked={joinRule === "public" && guestAccess !== "can_join"}
|
||||
>
|
||||
{_t('Anyone who knows the room\'s link, apart from guests')}
|
||||
</StyledRadioButton>
|
||||
<StyledRadioButton
|
||||
name="roomVis" value="public_with_guests"
|
||||
disabled={!canChangeAccess}
|
||||
onChange={this._onRoomAccessRadioToggle}
|
||||
checked={joinRule === "public" && guestAccess === "can_join"}
|
||||
>
|
||||
{_t("Anyone who knows the room's link, including guests")}
|
||||
</StyledRadioButton>
|
||||
<StyledRadioGroup
|
||||
name="roomVis"
|
||||
value={joinRule}
|
||||
definitions={[
|
||||
{
|
||||
value: "invite_only",
|
||||
disabled: !canChangeAccess,
|
||||
onChange: this._onRoomAccessRadioToggle,
|
||||
label: _t('Only people who have been invited'),
|
||||
checked: joinRule !== "public",
|
||||
},
|
||||
{
|
||||
value: "public_no_guests",
|
||||
disabled: !canChangeAccess,
|
||||
onChange: this._onRoomAccessRadioToggle,
|
||||
label: _t('Anyone who knows the room\'s link, apart from guests'),
|
||||
checked: joinRule === "public" && guestAccess !== "can_join",
|
||||
},
|
||||
{
|
||||
value: "public_with_guests",
|
||||
disabled: !canChangeAccess,
|
||||
onChange: this._onRoomAccessRadioToggle,
|
||||
label: _t("Anyone who knows the room's link, including guests"),
|
||||
checked: joinRule === "public" && guestAccess === "can_join",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -298,38 +301,36 @@ export default class SecurityRoomSettingsTab extends React.Component {
|
||||
{_t('Changes to who can read history will only apply to future messages in this room. ' +
|
||||
'The visibility of existing history will be unchanged.')}
|
||||
</div>
|
||||
<StyledRadioButton
|
||||
name="historyVis" value="world_readable"
|
||||
disabled={!canChangeHistory}
|
||||
checked={history === "world_readable"}
|
||||
onChange={this._onHistoryRadioToggle}
|
||||
>
|
||||
{_t("Anyone")}
|
||||
</StyledRadioButton>
|
||||
<StyledRadioButton
|
||||
name="historyVis" value="shared"
|
||||
disabled={!canChangeHistory}
|
||||
checked={history === "shared"}
|
||||
onChange={this._onHistoryRadioToggle}
|
||||
>
|
||||
{_t('Members only (since the point in time of selecting this option)')}
|
||||
</StyledRadioButton>
|
||||
<StyledRadioButton
|
||||
name="historyVis" value="invited"
|
||||
disabled={!canChangeHistory}
|
||||
checked={history === "invited"}
|
||||
onChange={this._onHistoryRadioToggle}
|
||||
>
|
||||
{_t('Members only (since they were invited)')}
|
||||
</StyledRadioButton>
|
||||
<StyledRadioButton
|
||||
name="historyVis" value="joined"
|
||||
disabled={!canChangeHistory}
|
||||
checked={history === "joined"}
|
||||
onChange={this._onHistoryRadioToggle}
|
||||
>
|
||||
{_t('Members only (since they joined)')}
|
||||
</StyledRadioButton>
|
||||
<StyledRadioGroup
|
||||
name="historyVis"
|
||||
value={history}
|
||||
definitions={[
|
||||
{
|
||||
value: "world_readable",
|
||||
disabled: !canChangeHistory,
|
||||
onChange: this._onHistoryRadioToggle,
|
||||
label: _t("Anyone"),
|
||||
},
|
||||
{
|
||||
value: "shared",
|
||||
disabled: !canChangeHistory,
|
||||
onChange: this._onHistoryRadioToggle,
|
||||
label: _t('Members only (since the point in time of selecting this option)'),
|
||||
},
|
||||
{
|
||||
value: "invited",
|
||||
disabled: !canChangeHistory,
|
||||
onChange: this._onHistoryRadioToggle,
|
||||
label: _t('Members only (since they were invited)'),
|
||||
},
|
||||
{
|
||||
value: "joined",
|
||||
disabled: !canChangeHistory,
|
||||
onChange: this._onHistoryRadioToggle,
|
||||
label: _t('Members only (since they joined)'),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user