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

Merge pull request #5056 from matrix-org/joriks/style-fighting 

Quick win session 24/07/2020
pull/21833/head
Jorik Schellekens 2020-08-12 15:21:06 +01:00 committed by GitHub
parent 0c76af19f0 b871d7e849
commit 0060acbb33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 176 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
res/css/_common.scss
View File

@ -605,3 +605,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border-radius: $radius; border-radius: $radius;
} }
} }
@define-mixin unreal-focus {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
/* WebKit gets its native focus styles. */
@media (-webkit-min-device-pixel-ratio: 0) {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
}

12
res/css/structures/_FilePanel.scss
View File

@ -41,13 +41,19 @@ limitations under the License.
.mx_FilePanel .mx_EventTile { .mx_FilePanel .mx_EventTile {
word-break: break-word; word-break: break-word;
margin-top: 32px;
} }
.mx_FilePanel .mx_EventTile .mx_MImageBody { .mx_FilePanel .mx_EventTile .mx_MImageBody {
margin-right: 0px; margin-right: 0px;
} }
.mx_FilePanel .mx_EventTile .mx_MFileBody {
line-height: 2.4rem;
}
.mx_FilePanel .mx_EventTile .mx_MFileBody_download { .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
padding-top: 8px;
display: flex; display: flex;
font-size: $font-14px; font-size: $font-14px;
color: $event-timestamp-color; color: $event-timestamp-color;
@ -60,7 +66,7 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_size { .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0; flex: 1 0 0;
font-size: $font-11px; font-size: $font-14px;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
@ -80,7 +86,7 @@ limitations under the License.
flex: 1 1 auto; flex: 1 1 auto;
line-height: initial; line-height: initial;
padding: 0px; padding: 0px;
font-size: $font-11px; font-size: $font-14px;
opacity: 1.0; opacity: 1.0;
color: $event-timestamp-color; color: $event-timestamp-color;
} }
@ -90,7 +96,7 @@ limitations under the License.
text-align: right; text-align: right;
visibility: visible; visibility: visible;
position: initial; position: initial;
font-size: $font-11px; font-size: $font-14px;
opacity: 1.0; opacity: 1.0;
color: $event-timestamp-color; color: $event-timestamp-color;
} }

4
res/css/structures/_RightPanel.scss
View File

@ -64,7 +64,7 @@ limitations under the License.
left: 4px; // center with parent of 32px left: 4px; // center with parent of 32px
height: 24px; height: 24px;
width: 24px; width: 24px;
background-color: $rightpanel-button-color; background-color: $icon-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }
@ -99,7 +99,7 @@ limitations under the License.
background: rgba($accent-color, 0.25); background: rgba($accent-color, 0.25);
// make the icon the accent color too // make the icon the accent color too
&::before { &::before {
background-color: $accent-color; background-color: $accent-color !important;
} }
} }

3
res/css/views/dialogs/_ShareDialog.scss
View File

@ -51,7 +51,8 @@ limitations under the License.
display: inherit; display: inherit;
} }
.mx_ShareDialog_matrixto_copy > div { .mx_ShareDialog_matrixto_copy > div {
background-image: url($copy-button-url); mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
margin-left: 5px; margin-left: 5px;
width: 20px; width: 20px;
height: 20px; height: 20px;

6
res/css/views/elements/_StyledCheckbox.scss
View File

@ -80,5 +80,11 @@ limitations under the License.
background-color: $accent-color; background-color: $accent-color;
border-color: $accent-color; border-color: $accent-color;
} }
&.focus-visible {
& + label .mx_Checkbox_background {
@mixin unreal-focus;
}
}
} }
} }

7
res/css/views/elements/_StyledRadioButton.scss
View File

@ -63,6 +63,7 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
height: $font-16px; height: $font-16px;
width: $font-16px; width: $font-16px;
margin-left: 2px; // For the highlight on focus
border: $font-1-5px solid $radio-circle-color; border: $font-1-5px solid $radio-circle-color;
border-radius: $font-16px; border-radius: $font-16px;
@ -77,6 +78,12 @@ limitations under the License.
} }
} }
&.focus-visible {
& + div {
@mixin unreal-focus;
}
}
&:checked { &:checked {
& + div { & + div {
border-color: $active-radio-circle-color; border-color: $active-radio-circle-color;

2
res/css/views/messages/_MImageBody.scss
View File

@ -34,6 +34,8 @@ limitations under the License.
// Make sure the _thumbnail is positioned relative to the _container // Make sure the _thumbnail is positioned relative to the _container
position: relative; position: relative;
border-radius: 4px;
} }
.mx_MImageBody_thumbnail_spinner { .mx_MImageBody_thumbnail_spinner {

2
res/css/views/messages/_MessageActionBar.scss
View File

@ -24,7 +24,7 @@ limitations under the License.
line-height: $font-24px; line-height: $font-24px;
border-radius: 4px; border-radius: 4px;
background: $message-action-bar-bg-color; background: $message-action-bar-bg-color;
top: -18px; top: -26px;
right: 8px; right: 8px;
user-select: none; user-select: none;
// Ensure the action bar appears above over things, like the read marker. // Ensure the action bar appears above over things, like the read marker.

5
res/css/views/rooms/_EventTile.scss
View File

@ -536,11 +536,12 @@ $left-gutter: 64px;
display: inline-block; display: inline-block;
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
top: 8px; top: 6px;
right: 6px; right: 6px;
width: 19px; width: 19px;
height: 19px; height: 19px;
background-image: url($copy-button-url); mask-image: url($copy-button-url);
background-color: $message-action-bar-fg-color;
} }
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton, .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,

2
res/css/views/rooms/_IRCLayout.scss
View File

@ -54,7 +54,7 @@ $irc-line-height: $font-18px;
flex-shrink: 0; flex-shrink: 0;
width: var(--name-width); width: var(--name-width);
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: right; text-align: left;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: visible; overflow: visible;

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

@ -21,6 +21,7 @@ limitations under the License.
border-top: 1px solid $primary-hairline-color; border-top: 1px solid $primary-hairline-color;
position: relative; position: relative;
padding-left: 82px; padding-left: 82px;
padding-right: 6px;
} }
.mx_MessageComposer_replaced_wrapper { .mx_MessageComposer_replaced_wrapper {
@ -178,25 +179,44 @@ 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: 12px; margin-right: 6px;
cursor: pointer; cursor: pointer;
height: 20px; height: 26px;
width: 20px; width: 26px;
border-radius: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 3px;
left: 3px;
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: $composer-button-color; background-color: $icon-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
} }
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
&.mx_MessageComposer_hangup::before { &.mx_MessageComposer_hangup::before {
background-color: $warning-color; background-color: $warning-color;
} }
@ -288,7 +308,7 @@ limitations under the License.
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $composer-button-color; background-color: $icon-button-color;
&.mx_MessageComposer_markdownDisabled { &.mx_MessageComposer_markdownDisabled {
opacity: 0.2; opacity: 0.2;

2
res/css/views/rooms/_RoomHeader.scss
View File

@ -222,7 +222,7 @@ limitations under the License.
left: 4px; // center with parent of 32px left: 4px; // center with parent of 32px
height: 24px; height: 24px;
width: 24px; width: 24px;
background-color: $roomheader-button-color; background-color: $icon-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }

4
res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
View File

@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_SecurityRoomSettingsTab label {
display: block;
}
.mx_SecurityRoomSettingsTab_warning { .mx_SecurityRoomSettingsTab_warning {
display: block; display: block;

4
res/img/feather-customised/clipboard.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.75 3.75H3.75V10.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="7" y="7" width="7" height="7" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

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

5
res/themes/dark/css/_dark.scss
View File

@ -46,7 +46,7 @@ $inverted-bg-color: $base-color;
$selected-color: $room-highlight-color; $selected-color: $room-highlight-color;
// selected for hoverover & selected event tiles // selected for hoverover & selected event tiles
$event-selected-color: $header-panel-bg-color; $event-selected-color: #21262c;
// used for the hairline dividers in RoomView // used for the hairline dividers in RoomView
$primary-hairline-color: transparent; $primary-hairline-color: transparent;
@ -100,10 +100,9 @@ $roomheader-bg-color: $bg-color;
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3); $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
$roomheader-addroom-fg-color: $text-primary-color; $roomheader-addroom-fg-color: $text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color; $groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color;
$composer-button-color: $header-panel-text-primary-color; $icon-button-color: #8E99A4;
$roomtopic-color: $text-secondary-color; $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;

3
res/themes/legacy-dark/css/_legacy-dark.scss
View File

@ -95,10 +95,9 @@ $roomheader-color: $text-primary-color;
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity $roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
$roomheader-addroom-fg-color: $text-primary-color; $roomheader-addroom-fg-color: $text-primary-color;
$tagpanel-button-color: $header-panel-text-primary-color; $tagpanel-button-color: $header-panel-text-primary-color;
$roomheader-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color; $groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color;
$composer-button-color: $header-panel-text-primary-color; $icon-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color; $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;

6
res/themes/legacy-light/css/_legacy-light.scss
View File

@ -162,10 +162,9 @@ $roomheader-bg-color: $primary-bg-color;
$roomheader-addroom-bg-color: #91a1c0; $roomheader-addroom-bg-color: #91a1c0;
$roomheader-addroom-fg-color: $accent-fg-color; $roomheader-addroom-fg-color: $accent-fg-color;
$tagpanel-button-color: #91a1c0; $tagpanel-button-color: #91a1c0;
$roomheader-button-color: #91a1c0;
$groupheader-button-color: #91a1c0; $groupheader-button-color: #91a1c0;
$rightpanel-button-color: #91a1c0; $rightpanel-button-color: #91a1c0;
$composer-button-color: #91a1c0; $icon-button-color: #91a1c0;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;
@ -228,7 +227,8 @@ $event-redacted-border-color: #cccccc;
// event timestamp // event timestamp
$event-timestamp-color: #acacac; $event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/icon_copy_message.svg"; $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
// e2e // e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

7
res/themes/light/css/_light.scss
View File

@ -74,7 +74,7 @@ $droptarget-bg-color: rgba(255,255,255,0.5);
$selected-color: $secondary-accent-color; $selected-color: $secondary-accent-color;
// selected for hoverover & selected event tiles // selected for hoverover & selected event tiles
$event-selected-color: $header-panel-bg-color; $event-selected-color: #f6f7f8;
// used for the hairline dividers in RoomView // used for the hairline dividers in RoomView
$primary-hairline-color: transparent; $primary-hairline-color: transparent;
@ -158,10 +158,9 @@ $roomheader-bg-color: $primary-bg-color;
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2); $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
$roomheader-addroom-fg-color: #5c6470; $roomheader-addroom-fg-color: #5c6470;
$tagpanel-button-color: #91A1C0; $tagpanel-button-color: #91A1C0;
$roomheader-button-color: #91A1C0;
$groupheader-button-color: #91A1C0; $groupheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0; $rightpanel-button-color: #91A1C0;
$composer-button-color: #91A1C0; $icon-button-color: #C1C6CD;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color; $eventtile-meta-color: $roomtopic-color;
@ -230,7 +229,7 @@ $event-redacted-border-color: #cccccc;
// event timestamp // event timestamp
$event-timestamp-color: #acacac; $event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/icon_copy_message.svg"; $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
// e2e // e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

10
src/components/views/dialogs/ShareDialog.tsx
View File

@ -30,6 +30,7 @@ import * as ContextMenu from "../../structures/ContextMenu";
import {toRightOf} from "../../structures/ContextMenu"; import {toRightOf} from "../../structures/ContextMenu";
import {copyPlaintext, selectText} from "../../../utils/strings"; import {copyPlaintext, selectText} from "../../../utils/strings";
import StyledCheckbox from '../elements/StyledCheckbox'; import StyledCheckbox from '../elements/StyledCheckbox';
import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
const socials = [ const socials = [
{ {
@ -210,10 +211,11 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
> >
{ matrixToUrl } { matrixToUrl }
</a> </a>
<a href={matrixToUrl} className="mx_ShareDialog_matrixto_copy" onClick={this.onCopyClick}> <AccessibleTooltipButton
{ _t('COPY') } title={_t("Copy")}
<div>&nbsp;</div> onClick={this.onCopyClick}
</a> className="mx_ShareDialog_matrixto_copy"
/>
</div> </div>
{ checkbox } { checkbox }
<hr /> <hr />

5
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> {
@ -33,7 +34,7 @@ interface IProps<T extends string> {
definitions: IDefinition<T>[]; definitions: IDefinition<T>[];
value?: T; // if not provided no options will be selected value?: T; // if not provided no options will be selected
outlined?: boolean; outlined?: boolean;
onChange(newValue: T); onChange(newValue: T): void;
} }
function StyledRadioGroup<T extends string>({name, definitions, value, className, outlined, onChange}: IProps<T>) { 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 <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}

2
src/components/views/right_panel/HeaderButton.tsx
View File

@ -39,6 +39,8 @@ interface IProps {
title: string; 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> { export default class HeaderButton extends React.Component<IProps> {
constructor(props: IProps) { constructor(props: IProps) {
super(props); super(props);

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

@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, {createRef} from 'react'; import React, {createRef} from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import CallHandler from '../../../CallHandler'; import CallHandler from '../../../CallHandler';
@ -29,7 +30,6 @@ import E2EIcon from './E2EIcon';
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu"; import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
function ComposerAvatar(props) { function ComposerAvatar(props) {
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar'); const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
return <div className="mx_MessageComposer_avatar"> return <div className="mx_MessageComposer_avatar">
@ -117,9 +117,19 @@ const EmojiButton = ({addEmoji}) => {
</ContextMenu>; </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> return <React.Fragment>
<ContextMenuTooltipButton <ContextMenuTooltipButton
className="mx_MessageComposer_button mx_MessageComposer_emoji" className={className}
onClick={openMenu} onClick={openMenu}
isExpanded={menuDisplayed} isExpanded={menuDisplayed}
title={_t('Emoji picker')} title={_t('Emoji picker')}

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

@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import {_t, _td} from '../../../languageHandler'; import {_t, _td} from '../../../languageHandler';
import AppTile from '../elements/AppTile'; import AppTile from '../elements/AppTile';
import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {MatrixClientPeg} from '../../../MatrixClientPeg';
@ -380,14 +381,21 @@ export default class Stickerpicker extends React.Component {
render() { render() {
let stickerPicker; let stickerPicker;
let stickersButton; let stickersButton;
const className = classNames(
"mx_MessageComposer_button",
"mx_MessageComposer_stickers",
"mx_Stickers_hideStickers",
"mx_MessageComposer_button_highlight",
);
if (this.state.showStickers) { if (this.state.showStickers) {
// Show hide-stickers button // Show hide-stickers button
stickersButton = stickersButton =
<AccessibleButton <AccessibleButton
id='stickersButton' id='stickersButton'
key="controls_hide_stickers" key="controls_hide_stickers"
className="mx_MessageComposer_button mx_MessageComposer_stickers mx_Stickers_hideStickers" className={className}
onClick={this._onHideStickersClick} onClick={this._onHideStickersClick}
active={this.state.showStickers}
title={_t("Hide Stickers")} title={_t("Hide Stickers")}
> >
</AccessibleButton>; </AccessibleButton>;

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

@ -22,6 +22,7 @@ import * as sdk from "../../../../..";
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
import Modal from "../../../../../Modal"; import Modal from "../../../../../Modal";
import QuestionDialog from "../../../dialogs/QuestionDialog"; import QuestionDialog from "../../../dialogs/QuestionDialog";
import StyledRadioGroup from '../../../elements/StyledRadioGroup';
import {SettingLevel} from "../../../../../settings/SettingLevel"; import {SettingLevel} from "../../../../../settings/SettingLevel";
export default class SecurityRoomSettingsTab extends React.Component { export default class SecurityRoomSettingsTab extends React.Component {
@ -144,7 +145,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
}); });
}; };
_onRoomAccessRadioToggle = (ev) => { _onRoomAccessRadioToggle = (roomAccess) => {
// join_rule // join_rule
// INVITE | PUBLIC // INVITE | PUBLIC
// ----------------------+---------------- // ----------------------+----------------
@ -161,7 +162,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
let joinRule = "invite"; let joinRule = "invite";
let guestAccess = "can_join"; let guestAccess = "can_join";
switch (ev.target.value) { switch (roomAccess) {
case "invite_only": case "invite_only":
// no change - use defaults above // no change - use defaults above
break; break;
@ -190,11 +191,11 @@ export default class SecurityRoomSettingsTab extends React.Component {
}); });
}; };
_onHistoryRadioToggle = (ev) => { _onHistoryRadioToggle = (history) => {
const beforeHistory = this.state.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", { MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
history_visibility: ev.target.value, history_visibility: history,
}, "").catch((e) => { }, "").catch((e) => {
console.error(e); console.error(e);
this.setState({history: beforeHistory}); this.setState({history: beforeHistory});
@ -257,27 +258,31 @@ export default class SecurityRoomSettingsTab extends React.Component {
<div> <div>
{guestWarning} {guestWarning}
{aliasWarning} {aliasWarning}
<label> <StyledRadioGroup
<input type="radio" name="roomVis" value="invite_only" name="roomVis"
disabled={!canChangeAccess} value={joinRule}
onChange={this._onRoomAccessRadioToggle} onChange={this._onRoomAccessRadioToggle}
checked={joinRule !== "public"} /> definitions={[
{_t('Only people who have been invited')} {
</label> value: "invite_only",
<label> disabled: !canChangeAccess,
<input type="radio" name="roomVis" value="public_no_guests" label: _t('Only people who have been invited'),
disabled={!canChangeAccess} checked: joinRule !== "public",
onChange={this._onRoomAccessRadioToggle} },
checked={joinRule === "public" && guestAccess !== "can_join"} /> {
{_t('Anyone who knows the room\'s link, apart from guests')} value: "public_no_guests",
</label> disabled: !canChangeAccess,
<label> label: _t('Anyone who knows the room\'s link, apart from guests'),
<input type="radio" name="roomVis" value="public_with_guests" checked: joinRule === "public" && guestAccess !== "can_join",
disabled={!canChangeAccess} },
onChange={this._onRoomAccessRadioToggle} {
checked={joinRule === "public" && guestAccess === "can_join"} /> value: "public_with_guests",
{_t("Anyone who knows the room's link, including guests")} disabled: !canChangeAccess,
</label> label: _t("Anyone who knows the room's link, including guests"),
checked: joinRule === "public" && guestAccess === "can_join",
},
]}
/>
</div> </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. ' + {_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>
<label> <StyledRadioGroup
<input type="radio" name="historyVis" value="world_readable" name="historyVis"
disabled={!canChangeHistory} value={history}
checked={history === "world_readable"} onChange={this._onHistoryRadioToggle}
onChange={this._onHistoryRadioToggle} /> definitions={[
{_t("Anyone")} {
</label> value: "world_readable",
<label> disabled: !canChangeHistory,
<input type="radio" name="historyVis" value="shared" label: _t("Anyone"),
disabled={!canChangeHistory} },
checked={history === "shared"} {
onChange={this._onHistoryRadioToggle} /> value: "shared",
{_t('Members only (since the point in time of selecting this option)')} disabled: !canChangeHistory,
</label> label: _t('Members only (since the point in time of selecting this option)'),
<label> },
<input type="radio" name="historyVis" value="invited" {
disabled={!canChangeHistory} value: "invited",
checked={history === "invited"} disabled: !canChangeHistory,
onChange={this._onHistoryRadioToggle} /> label: _t('Members only (since they were invited)'),
{_t('Members only (since they were invited)')} },
</label> {
<label > value: "joined",
<input type="radio" name="historyVis" value="joined" disabled: !canChangeHistory,
disabled={!canChangeHistory} label: _t('Members only (since they joined)'),
checked={history === "joined"} },
onChange={this._onHistoryRadioToggle} /> ]}
{_t('Members only (since they joined)')} />
</label>
</div> </div>
); );
} }

3
src/i18n/strings/en_EN.json
View File

@ -1787,7 +1787,7 @@
"Share Community": "Share Community", "Share Community": "Share Community",
"Share Room Message": "Share Room Message", "Share Room Message": "Share Room Message",
"Link to selected message": "Link to selected message", "Link to selected message": "Link to selected message",
"COPY": "COPY", "Copy": "Copy",
"Command Help": "Command Help", "Command Help": "Command Help",
"To help us prevent this in future, please <a>send us logs</a>.": "To help us prevent this in future, please <a>send us logs</a>.", "To help us prevent this in future, please <a>send us logs</a>.": "To help us prevent this in future, please <a>send us logs</a>.",
"Missing session data": "Missing session data", "Missing session data": "Missing session data",
@ -2228,7 +2228,6 @@
"Confirm your recovery passphrase": "Confirm your recovery passphrase", "Confirm your recovery passphrase": "Confirm your recovery passphrase",
"Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.": "Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.", "Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.": "Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.",
"Download": "Download", "Download": "Download",
"Copy": "Copy",
"Unable to query secret storage status": "Unable to query secret storage status", "Unable to query secret storage status": "Unable to query secret storage status",
"Retry": "Retry", "Retry": "Retry",
"If you cancel now, you may lose encrypted messages & data if you lose access to your logins.": "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.", "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.": "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",

2
test/end-to-end-tests/src/usecases/room-settings.js
View File

@ -162,7 +162,7 @@ async function changeRoomSettings(session, settings) {
if (settings.visibility) { if (settings.visibility) {
session.log.step(`sets visibility to ${settings.visibility}`); session.log.step(`sets visibility to ${settings.visibility}`);
const radios = await session.queryAll(".mx_RoomSettingsDialog input[type=radio]"); const radios = await session.queryAll(".mx_RoomSettingsDialog label");
assert.equal(radios.length, 7); assert.equal(radios.length, 7);
const inviteOnly = radios[0]; const inviteOnly = radios[0];
const publicNoGuests = radios[1]; const publicNoGuests = radios[1];