diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 3a94ee02b0..a403a8dc4c 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -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;
diff --git a/res/img/icon_copy_message.svg b/res/img/icon_copy_message.svg
deleted file mode 100644
index 8d8887bb22..0000000000
--- a/res/img/icon_copy_message.svg
+++ /dev/null
@@ -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>
diff --git a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
index 5dc40714ed..abc5412100 100644
--- a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
+++ b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
@@ -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,
diff --git a/src/components/views/elements/StyledRadioGroup.tsx b/src/components/views/elements/StyledRadioGroup.tsx
index ea8f65d12b..4db627e83e 100644
--- a/src/components/views/elements/StyledRadioGroup.tsx
+++ b/src/components/views/elements/StyledRadioGroup.tsx
@@ -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}
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 68198d07cd..c4f400c872 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -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}
diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index f6182838a1..81a8cae892 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -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
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
index 8b8b82c568..a2170b3cc0 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
@@ -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>
);
}