Merge pull request #5056 from matrix-org/joriks/style-fighting
Quick win session 24/07/2020
This commit is contained in:
Jorik Schellekens
GitHub
commit
0060acbb33
27 changed files with 176 additions and 184 deletions
|
|
@ -30,6 +30,7 @@ import * as ContextMenu from "../../structures/ContextMenu";
|
|||
import {toRightOf} from "../../structures/ContextMenu";
|
||||
import {copyPlaintext, selectText} from "../../../utils/strings";
|
||||
import StyledCheckbox from '../elements/StyledCheckbox';
|
||||
import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
|
||||
|
||||
const socials = [
|
||||
{
|
||||
|
|
@ -210,10 +211,11 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
|
|||
>
|
||||
{ matrixToUrl }
|
||||
</a>
|
||||
<a href={matrixToUrl} className="mx_ShareDialog_matrixto_copy" onClick={this.onCopyClick}>
|
||||
{ _t('COPY') }
|
||||
<div> </div>
|
||||
</a>
|
||||
<AccessibleTooltipButton
|
||||
title={_t("Copy")}
|
||||
onClick={this.onCopyClick}
|
||||
className="mx_ShareDialog_matrixto_copy"
|
||||
/>
|
||||
</div>
|
||||
{ checkbox }
|
||||
<hr />
|
||||
|
|
|
|||
|
|
@ -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> {
|
||||
|
|
@ -33,7 +34,7 @@ interface IProps<T extends string> {
|
|||
definitions: IDefinition<T>[];
|
||||
value?: T; // if not provided no options will be selected
|
||||
outlined?: boolean;
|
||||
onChange(newValue: T);
|
||||
onChange(newValue: T): void;
|
||||
}
|
||||
|
||||
function StyledRadioGroup<T extends string>({name, definitions, value, className, outlined, onChange}: IProps<T>) {
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ interface IProps {
|
|||
title: string;
|
||||
}
|
||||
|
||||
// TODO: replace this, the composer buttons and the right panel buttons with a unified
|
||||
// representation
|
||||
export default class HeaderButton extends React.Component<IProps> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
import React, {createRef} from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import CallHandler from '../../../CallHandler';
|
||||
|
|
@ -29,7 +30,6 @@ import E2EIcon from './E2EIcon';
|
|||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
|
||||
function ComposerAvatar(props) {
|
||||
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
|
||||
return <div className="mx_MessageComposer_avatar">
|
||||
|
|
@ -117,9 +117,19 @@ const EmojiButton = ({addEmoji}) => {
|
|||
</ContextMenu>;
|
||||
}
|
||||
|
||||
const className = classNames(
|
||||
"mx_MessageComposer_button",
|
||||
"mx_MessageComposer_emoji",
|
||||
{
|
||||
"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="mx_MessageComposer_button mx_MessageComposer_emoji"
|
||||
className={className}
|
||||
onClick={openMenu}
|
||||
isExpanded={menuDisplayed}
|
||||
title={_t('Emoji picker')}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import {_t, _td} from '../../../languageHandler';
|
||||
import AppTile from '../elements/AppTile';
|
||||
import {MatrixClientPeg} from '../../../MatrixClientPeg';
|
||||
|
|
@ -380,14 +381,21 @@ export default class Stickerpicker extends React.Component {
|
|||
render() {
|
||||
let stickerPicker;
|
||||
let stickersButton;
|
||||
const className = classNames(
|
||||
"mx_MessageComposer_button",
|
||||
"mx_MessageComposer_stickers",
|
||||
"mx_Stickers_hideStickers",
|
||||
"mx_MessageComposer_button_highlight",
|
||||
);
|
||||
if (this.state.showStickers) {
|
||||
// Show hide-stickers button
|
||||
stickersButton =
|
||||
<AccessibleButton
|
||||
id='stickersButton'
|
||||
key="controls_hide_stickers"
|
||||
className="mx_MessageComposer_button mx_MessageComposer_stickers mx_Stickers_hideStickers"
|
||||
className={className}
|
||||
onClick={this._onHideStickersClick}
|
||||
active={this.state.showStickers}
|
||||
title={_t("Hide Stickers")}
|
||||
>
|
||||
</AccessibleButton>;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import * as sdk from "../../../../..";
|
|||
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
|
||||
import Modal from "../../../../../Modal";
|
||||
import QuestionDialog from "../../../dialogs/QuestionDialog";
|
||||
import StyledRadioGroup from '../../../elements/StyledRadioGroup';
|
||||
import {SettingLevel} from "../../../../../settings/SettingLevel";
|
||||
|
||||
export default class SecurityRoomSettingsTab extends React.Component {
|
||||
|
|
@ -144,7 +145,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
_onRoomAccessRadioToggle = (ev) => {
|
||||
_onRoomAccessRadioToggle = (roomAccess) => {
|
||||
// join_rule
|
||||
// INVITE | PUBLIC
|
||||
// ----------------------+----------------
|
||||
|
|
@ -161,7 +162,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
|
|||
let joinRule = "invite";
|
||||
let guestAccess = "can_join";
|
||||
|
||||
switch (ev.target.value) {
|
||||
switch (roomAccess) {
|
||||
case "invite_only":
|
||||
// no change - use defaults above
|
||||
break;
|
||||
|
|
@ -190,11 +191,11 @@ export default class SecurityRoomSettingsTab extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
_onHistoryRadioToggle = (ev) => {
|
||||
_onHistoryRadioToggle = (history) => {
|
||||
const beforeHistory = this.state.history;
|
||||
this.setState({history: ev.target.value});
|
||||
this.setState({history: history});
|
||||
MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
|
||||
history_visibility: ev.target.value,
|
||||
history_visibility: history,
|
||||
}, "").catch((e) => {
|
||||
console.error(e);
|
||||
this.setState({history: beforeHistory});
|
||||
|
|
@ -257,27 +258,31 @@ export default class SecurityRoomSettingsTab extends React.Component {
|
|||
<div>
|
||||
{guestWarning}
|
||||
{aliasWarning}
|
||||
<label>
|
||||
<input type="radio" name="roomVis" value="invite_only"
|
||||
disabled={!canChangeAccess}
|
||||
onChange={this._onRoomAccessRadioToggle}
|
||||
checked={joinRule !== "public"} />
|
||||
{_t('Only people who have been invited')}
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" 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')}
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" 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")}
|
||||
</label>
|
||||
<StyledRadioGroup
|
||||
name="roomVis"
|
||||
value={joinRule}
|
||||
onChange={this._onRoomAccessRadioToggle}
|
||||
definitions={[
|
||||
{
|
||||
value: "invite_only",
|
||||
disabled: !canChangeAccess,
|
||||
label: _t('Only people who have been invited'),
|
||||
checked: joinRule !== "public",
|
||||
},
|
||||
{
|
||||
value: "public_no_guests",
|
||||
disabled: !canChangeAccess,
|
||||
label: _t('Anyone who knows the room\'s link, apart from guests'),
|
||||
checked: joinRule === "public" && guestAccess !== "can_join",
|
||||
},
|
||||
{
|
||||
value: "public_with_guests",
|
||||
disabled: !canChangeAccess,
|
||||
label: _t("Anyone who knows the room's link, including guests"),
|
||||
checked: joinRule === "public" && guestAccess === "can_join",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -294,34 +299,33 @@ 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>
|
||||
<label>
|
||||
<input type="radio" name="historyVis" value="world_readable"
|
||||
disabled={!canChangeHistory}
|
||||
checked={history === "world_readable"}
|
||||
onChange={this._onHistoryRadioToggle} />
|
||||
{_t("Anyone")}
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="historyVis" value="shared"
|
||||
disabled={!canChangeHistory}
|
||||
checked={history === "shared"}
|
||||
onChange={this._onHistoryRadioToggle} />
|
||||
{_t('Members only (since the point in time of selecting this option)')}
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="historyVis" value="invited"
|
||||
disabled={!canChangeHistory}
|
||||
checked={history === "invited"}
|
||||
onChange={this._onHistoryRadioToggle} />
|
||||
{_t('Members only (since they were invited)')}
|
||||
</label>
|
||||
<label >
|
||||
<input type="radio" name="historyVis" value="joined"
|
||||
disabled={!canChangeHistory}
|
||||
checked={history === "joined"}
|
||||
onChange={this._onHistoryRadioToggle} />
|
||||
{_t('Members only (since they joined)')}
|
||||
</label>
|
||||
<StyledRadioGroup
|
||||
name="historyVis"
|
||||
value={history}
|
||||
onChange={this._onHistoryRadioToggle}
|
||||
definitions={[
|
||||
{
|
||||
value: "world_readable",
|
||||
disabled: !canChangeHistory,
|
||||
label: _t("Anyone"),
|
||||
},
|
||||
{
|
||||
value: "shared",
|
||||
disabled: !canChangeHistory,
|
||||
label: _t('Members only (since the point in time of selecting this option)'),
|
||||
},
|
||||
{
|
||||
value: "invited",
|
||||
disabled: !canChangeHistory,
|
||||
label: _t('Members only (since they were invited)'),
|
||||
},
|
||||
{
|
||||
value: "joined",
|
||||
disabled: !canChangeHistory,
|
||||
label: _t('Members only (since they joined)'),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue