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

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;
}
// 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,

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

@ -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}

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

@ -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}

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_stickers",
"mx_Stickers_hideStickers",
"mx_RightPanel_headerButton_highlight",
"mx_MessageComposer_button_highlight",
);
if (this.state.showStickers) {
// 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 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>
);
}