OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use StyledRadioGroup

pull/21833/head
Jorik Schellekens 2020-07-28 17:13:58 +01:00
parent fb953ade8e
commit f64ef65f97
7 changed files with 72 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
res/css/views/rooms/_MessageComposer.scss
View File

@ -179,6 +179,14 @@ limitations under the License.
color: $accent-color; 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 { .mx_MessageComposer_button {
position: relative; position: relative;
margin-right: 6px; margin-right: 6px;

86
res/img/icon_copy_message.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

1
src/accessibility/context_menu/ContextMenuTooltipButton.tsx
View File

@ -25,7 +25,6 @@ interface IProps extends React.ComponentProps<typeof AccessibleTooltipButton> {
isExpanded: boolean; 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 /> // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
export const ContextMenuTooltipButton: React.FC<IProps> = ({ export const ContextMenuTooltipButton: React.FC<IProps> = ({
isExpanded, isExpanded,

3
src/components/views/elements/StyledRadioGroup.tsx
View File

@ -25,6 +25,7 @@ interface IDefinition<T extends string> {
disabled?: boolean; disabled?: boolean;
label: React.ReactChild; label: React.ReactChild;
description?: React.ReactChild; description?: React.ReactChild;
checked?: boolean; // If provided it will override the value comparison done in the group
} }
interface IProps<T extends string> { interface IProps<T extends string> {
@ -46,7 +47,7 @@ function StyledRadioGroup<T extends string>({name, definitions, value, className
<StyledRadioButton <StyledRadioButton
className={classNames(className, d.className)} className={classNames(className, d.className)}
onChange={_onChange} onChange={_onChange}
checked={d.value === value} checked={d.checked !== undefined ? d.checked : d.value === value}
name={name} name={name}
value={d.value} value={d.value}
disabled={d.disabled} disabled={d.disabled}

4
src/components/views/rooms/MessageComposer.js
View File

@ -121,10 +121,12 @@ const EmojiButton = ({addEmoji}) => {
"mx_MessageComposer_button", "mx_MessageComposer_button",
"mx_MessageComposer_emoji", "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> return <React.Fragment>
<ContextMenuTooltipButton <ContextMenuTooltipButton
className={className} className={className}

2
src/components/views/rooms/Stickerpicker.js
View File

@ -384,7 +384,7 @@ export default class Stickerpicker extends React.Component {
"mx_MessageComposer_button", "mx_MessageComposer_button",
"mx_MessageComposer_stickers", "mx_MessageComposer_stickers",
"mx_Stickers_hideStickers", "mx_Stickers_hideStickers",
"mx_RightPanel_headerButton_highlight", "mx_MessageComposer_button_highlight",
); );
if (this.state.showStickers) { if (this.state.showStickers) {
// Show hide-stickers button // Show hide-stickers button

115
src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
View File

@ -23,7 +23,7 @@ import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
import {SettingLevel} from "../../../../../settings/SettingsStore"; import {SettingLevel} from "../../../../../settings/SettingsStore";
import Modal from "../../../../../Modal"; import Modal from "../../../../../Modal";
import QuestionDialog from "../../../dialogs/QuestionDialog"; import QuestionDialog from "../../../dialogs/QuestionDialog";
import StyledRadioButton from '../../../elements/StyledRadioButton'; import StyledRadioGroup from '../../../elements/StyledRadioGroup';
export default class SecurityRoomSettingsTab extends React.Component { export default class SecurityRoomSettingsTab extends React.Component {
static propTypes = { static propTypes = {
@ -258,30 +258,33 @@ export default class SecurityRoomSettingsTab extends React.Component {
<div> <div>
{guestWarning} {guestWarning}
{aliasWarning} {aliasWarning}
<StyledRadioButton <StyledRadioGroup
name="roomVis" value="invite_only" name="roomVis"
disabled={!canChangeAccess} value={joinRule}
onChange={this._onRoomAccessRadioToggle} definitions={[
checked={joinRule !== "public"} {
> value: "invite_only",
{_t('Only people who have been invited')} disabled: !canChangeAccess,
</StyledRadioButton> onChange: this._onRoomAccessRadioToggle,
<StyledRadioButton label: _t('Only people who have been invited'),
name="roomVis" value="public_no_guests" checked: joinRule !== "public",
disabled={!canChangeAccess} },
onChange={this._onRoomAccessRadioToggle} {
checked={joinRule === "public" && guestAccess !== "can_join"} value: "public_no_guests",
> disabled: !canChangeAccess,
{_t('Anyone who knows the room\'s link, apart from guests')} onChange: this._onRoomAccessRadioToggle,
</StyledRadioButton> label: _t('Anyone who knows the room\'s link, apart from guests'),
<StyledRadioButton checked: joinRule === "public" && guestAccess !== "can_join",
name="roomVis" value="public_with_guests" },
disabled={!canChangeAccess} {
onChange={this._onRoomAccessRadioToggle} value: "public_with_guests",
checked={joinRule === "public" && guestAccess === "can_join"} disabled: !canChangeAccess,
> onChange: this._onRoomAccessRadioToggle,
{_t("Anyone who knows the room's link, including guests")} label: _t("Anyone who knows the room's link, including guests"),
</StyledRadioButton> checked: joinRule === "public" && guestAccess === "can_join",
},
]}
/>
</div> </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. ' + {_t('Changes to who can read history will only apply to future messages in this room. ' +
'The visibility of existing history will be unchanged.')} 'The visibility of existing history will be unchanged.')}
</div> </div>
<StyledRadioButton <StyledRadioGroup
name="historyVis" value="world_readable" name="historyVis"
disabled={!canChangeHistory} value={history}
checked={history === "world_readable"} definitions={[
onChange={this._onHistoryRadioToggle} {
> value: "world_readable",
{_t("Anyone")} disabled: !canChangeHistory,
</StyledRadioButton> onChange: this._onHistoryRadioToggle,
<StyledRadioButton label: _t("Anyone"),
name="historyVis" value="shared" },
disabled={!canChangeHistory} {
checked={history === "shared"} value: "shared",
onChange={this._onHistoryRadioToggle} disabled: !canChangeHistory,
> onChange: this._onHistoryRadioToggle,
{_t('Members only (since the point in time of selecting this option)')} label: _t('Members only (since the point in time of selecting this option)'),
</StyledRadioButton> },
<StyledRadioButton {
name="historyVis" value="invited" value: "invited",
disabled={!canChangeHistory} disabled: !canChangeHistory,
checked={history === "invited"} onChange: this._onHistoryRadioToggle,
onChange={this._onHistoryRadioToggle} label: _t('Members only (since they were invited)'),
> },
{_t('Members only (since they were invited)')} {
</StyledRadioButton> value: "joined",
<StyledRadioButton disabled: !canChangeHistory,
name="historyVis" value="joined" onChange: this._onHistoryRadioToggle,
disabled={!canChangeHistory} label: _t('Members only (since they joined)'),
checked={history === "joined"} },
onChange={this._onHistoryRadioToggle} ]}
> />
{_t('Members only (since they joined)')}
</StyledRadioButton>
</div> </div>
); );
} }