From f64ef65f976829093bbad975dbf4764af728e45d Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Tue, 28 Jul 2020 17:13:58 +0100
Subject: [PATCH] Use StyledRadioGroup

---
 res/css/views/rooms/_MessageComposer.scss     |   8 ++
 res/img/icon_copy_message.svg                 |  86 -------------
 .../context_menu/ContextMenuTooltipButton.tsx |   1 -
 .../views/elements/StyledRadioGroup.tsx       |   3 +-
 src/components/views/rooms/MessageComposer.js |   4 +-
 src/components/views/rooms/Stickerpicker.js   |   2 +-
 .../tabs/room/SecurityRoomSettingsTab.js      | 115 +++++++++---------
 7 files changed, 72 insertions(+), 147 deletions(-)
 delete mode 100644 res/img/icon_copy_message.svg

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>
         );
     }