mirror of https://github.com/vector-im/riot-web
				
				
				
			Merge pull request #5056 from matrix-org/joriks/style-fighting
Quick win session 24/07/2020pull/21833/head
						commit
						0060acbb33
					
				|  | @ -605,3 +605,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { | |||
|         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; | ||||
|     } | ||||
| } | ||||
|  |  | |||
|  | @ -41,13 +41,19 @@ limitations under the License. | |||
| 
 | ||||
| .mx_FilePanel .mx_EventTile { | ||||
|     word-break: break-word; | ||||
|     margin-top: 32px; | ||||
| } | ||||
| 
 | ||||
| .mx_FilePanel .mx_EventTile .mx_MImageBody { | ||||
|     margin-right: 0px; | ||||
| } | ||||
| 
 | ||||
| .mx_FilePanel .mx_EventTile .mx_MFileBody { | ||||
|     line-height: 2.4rem; | ||||
| } | ||||
| 
 | ||||
| .mx_FilePanel .mx_EventTile .mx_MFileBody_download { | ||||
|     padding-top: 8px; | ||||
|     display: flex; | ||||
|     font-size: $font-14px; | ||||
|     color: $event-timestamp-color; | ||||
|  | @ -60,7 +66,7 @@ limitations under the License. | |||
| 
 | ||||
| .mx_FilePanel .mx_EventTile .mx_MImageBody_size { | ||||
|     flex: 1 0 0; | ||||
|     font-size: $font-11px; | ||||
|     font-size: $font-14px; | ||||
|     text-align: right; | ||||
|     white-space: nowrap; | ||||
| } | ||||
|  | @ -80,7 +86,7 @@ limitations under the License. | |||
|     flex: 1 1 auto; | ||||
|     line-height: initial; | ||||
|     padding: 0px; | ||||
|     font-size: $font-11px; | ||||
|     font-size: $font-14px; | ||||
|     opacity: 1.0; | ||||
|     color: $event-timestamp-color; | ||||
| } | ||||
|  | @ -90,7 +96,7 @@ limitations under the License. | |||
|     text-align: right; | ||||
|     visibility: visible; | ||||
|     position: initial; | ||||
|     font-size: $font-11px; | ||||
|     font-size: $font-14px; | ||||
|     opacity: 1.0; | ||||
|     color: $event-timestamp-color; | ||||
| } | ||||
|  |  | |||
|  | @ -64,7 +64,7 @@ limitations under the License. | |||
|         left: 4px; // center with parent of 32px | ||||
|         height: 24px; | ||||
|         width: 24px; | ||||
|         background-color: $rightpanel-button-color; | ||||
|         background-color: $icon-button-color; | ||||
|         mask-repeat: no-repeat; | ||||
|         mask-size: contain; | ||||
|     } | ||||
|  | @ -99,7 +99,7 @@ limitations under the License. | |||
|     background: rgba($accent-color, 0.25); | ||||
|     // make the icon the accent color too | ||||
|     &::before { | ||||
|         background-color: $accent-color; | ||||
|         background-color: $accent-color !important; | ||||
|     } | ||||
| } | ||||
| 
 | ||||
|  |  | |||
|  | @ -51,7 +51,8 @@ limitations under the License. | |||
|     display: inherit; | ||||
| } | ||||
| .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; | ||||
|     width: 20px; | ||||
|     height: 20px; | ||||
|  |  | |||
|  | @ -80,5 +80,11 @@ limitations under the License. | |||
|             background-color: $accent-color; | ||||
|             border-color: $accent-color; | ||||
|         } | ||||
| 
 | ||||
|         &.focus-visible { | ||||
|             & + label .mx_Checkbox_background { | ||||
|                 @mixin unreal-focus; | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| } | ||||
|  |  | |||
|  | @ -63,6 +63,7 @@ limitations under the License. | |||
|             box-sizing: border-box; | ||||
|             height: $font-16px; | ||||
|             width: $font-16px; | ||||
|             margin-left: 2px; // For the highlight on focus | ||||
| 
 | ||||
|             border: $font-1-5px solid $radio-circle-color; | ||||
|             border-radius: $font-16px; | ||||
|  | @ -77,6 +78,12 @@ limitations under the License. | |||
|             } | ||||
|         } | ||||
| 
 | ||||
|         &.focus-visible { | ||||
|             & + div { | ||||
|                 @mixin unreal-focus; | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         &:checked { | ||||
|             & + div { | ||||
|                 border-color: $active-radio-circle-color; | ||||
|  |  | |||
|  | @ -34,6 +34,8 @@ limitations under the License. | |||
| 
 | ||||
|     // Make sure the _thumbnail is positioned relative to the _container | ||||
|     position: relative; | ||||
| 
 | ||||
|     border-radius: 4px; | ||||
| } | ||||
| 
 | ||||
| .mx_MImageBody_thumbnail_spinner { | ||||
|  |  | |||
|  | @ -24,7 +24,7 @@ limitations under the License. | |||
|     line-height: $font-24px; | ||||
|     border-radius: 4px; | ||||
|     background: $message-action-bar-bg-color; | ||||
|     top: -18px; | ||||
|     top: -26px; | ||||
|     right: 8px; | ||||
|     user-select: none; | ||||
|     // Ensure the action bar appears above over things, like the read marker. | ||||
|  |  | |||
|  | @ -536,11 +536,12 @@ $left-gutter: 64px; | |||
|     display: inline-block; | ||||
|     visibility: hidden; | ||||
|     cursor: pointer; | ||||
|     top: 8px; | ||||
|     top: 6px; | ||||
|     right: 6px; | ||||
|     width: 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, | ||||
|  |  | |||
|  | @ -54,7 +54,7 @@ $irc-line-height: $font-18px; | |||
|             flex-shrink: 0; | ||||
|             width: var(--name-width); | ||||
|             text-overflow: ellipsis; | ||||
|             text-align: right; | ||||
|             text-align: left; | ||||
|             display: flex; | ||||
|             align-items: center; | ||||
|             overflow: visible; | ||||
|  |  | |||
|  | @ -21,6 +21,7 @@ limitations under the License. | |||
|     border-top: 1px solid $primary-hairline-color; | ||||
|     position: relative; | ||||
|     padding-left: 82px; | ||||
|     padding-right: 6px; | ||||
| } | ||||
| 
 | ||||
| .mx_MessageComposer_replaced_wrapper { | ||||
|  | @ -178,25 +179,44 @@ 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: 12px; | ||||
|     margin-right: 6px; | ||||
|     cursor: pointer; | ||||
|     height: 20px; | ||||
|     width: 20px; | ||||
|     height: 26px; | ||||
|     width: 26px; | ||||
|     border-radius: 100%; | ||||
| 
 | ||||
|     &::before { | ||||
|         content: ''; | ||||
|         position: absolute; | ||||
| 
 | ||||
|         top: 3px; | ||||
|         left: 3px; | ||||
|         height: 20px; | ||||
|         width: 20px; | ||||
|         background-color: $composer-button-color; | ||||
|         background-color: $icon-button-color; | ||||
|         mask-repeat: no-repeat; | ||||
|         mask-size: contain; | ||||
|         mask-position: center; | ||||
|     } | ||||
| 
 | ||||
|     &:hover { | ||||
|         background: rgba($accent-color, 0.1); | ||||
| 
 | ||||
|         &::before { | ||||
|             background-color: $accent-color; | ||||
|         } | ||||
|     } | ||||
| 
 | ||||
|     &.mx_MessageComposer_hangup::before { | ||||
|         background-color: $warning-color; | ||||
|     } | ||||
|  | @ -288,7 +308,7 @@ limitations under the License. | |||
|     mask-size: contain; | ||||
|     mask-position: center; | ||||
|     mask-repeat: no-repeat; | ||||
|     background-color: $composer-button-color; | ||||
|     background-color: $icon-button-color; | ||||
| 
 | ||||
|     &.mx_MessageComposer_markdownDisabled { | ||||
|         opacity: 0.2; | ||||
|  |  | |||
|  | @ -222,7 +222,7 @@ limitations under the License. | |||
|         left: 4px; // center with parent of 32px | ||||
|         height: 24px; | ||||
|         width: 24px; | ||||
|         background-color: $roomheader-button-color; | ||||
|         background-color: $icon-button-color; | ||||
|         mask-repeat: no-repeat; | ||||
|         mask-size: contain; | ||||
|     } | ||||
|  |  | |||
|  | @ -14,10 +14,6 @@ See the License for the specific language governing permissions and | |||
| limitations under the License. | ||||
| */ | ||||
| 
 | ||||
| .mx_SecurityRoomSettingsTab label { | ||||
|     display: block; | ||||
| } | ||||
| 
 | ||||
| .mx_SecurityRoomSettingsTab_warning { | ||||
|     display: block; | ||||
| 
 | ||||
|  |  | |||
|  | @ -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> | ||||
| After Width: | Height: | Size: 341 B | 
|  | @ -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> | ||||
| Before Width: | Height: | Size: 2.7 KiB | 
|  | @ -46,7 +46,7 @@ $inverted-bg-color: $base-color; | |||
| $selected-color: $room-highlight-color; | ||||
| 
 | ||||
| // selected for hoverover & selected event tiles | ||||
| $event-selected-color: $header-panel-bg-color; | ||||
| $event-selected-color: #21262c; | ||||
| 
 | ||||
| // used for the hairline dividers in RoomView | ||||
| $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-fg-color: $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; | ||||
| $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; | ||||
| $eventtile-meta-color: $roomtopic-color; | ||||
| 
 | ||||
|  |  | |||
|  | @ -95,10 +95,9 @@ $roomheader-color: $text-primary-color; | |||
| $roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity | ||||
| $roomheader-addroom-fg-color: $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; | ||||
| $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; | ||||
| $eventtile-meta-color: $roomtopic-color; | ||||
| 
 | ||||
|  |  | |||
|  | @ -162,10 +162,9 @@ $roomheader-bg-color: $primary-bg-color; | |||
| $roomheader-addroom-bg-color: #91a1c0; | ||||
| $roomheader-addroom-fg-color: $accent-fg-color; | ||||
| $tagpanel-button-color: #91a1c0; | ||||
| $roomheader-button-color: #91a1c0; | ||||
| $groupheader-button-color: #91a1c0; | ||||
| $rightpanel-button-color: #91a1c0; | ||||
| $composer-button-color: #91a1c0; | ||||
| $icon-button-color: #91a1c0; | ||||
| $roomtopic-color: #9e9e9e; | ||||
| $eventtile-meta-color: $roomtopic-color; | ||||
| 
 | ||||
|  | @ -228,7 +227,8 @@ $event-redacted-border-color: #cccccc; | |||
| // event timestamp | ||||
| $event-timestamp-color: #acacac; | ||||
| 
 | ||||
| $copy-button-url: "$(res)/img/icon_copy_message.svg"; | ||||
| $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; | ||||
| 
 | ||||
| 
 | ||||
| // e2e | ||||
| $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color | ||||
|  |  | |||
|  | @ -74,7 +74,7 @@ $droptarget-bg-color: rgba(255,255,255,0.5); | |||
| $selected-color: $secondary-accent-color; | ||||
| 
 | ||||
| // selected for hoverover & selected event tiles | ||||
| $event-selected-color: $header-panel-bg-color; | ||||
| $event-selected-color: #f6f7f8; | ||||
| 
 | ||||
| // used for the hairline dividers in RoomView | ||||
| $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-fg-color: #5c6470; | ||||
| $tagpanel-button-color: #91A1C0; | ||||
| $roomheader-button-color: #91A1C0; | ||||
| $groupheader-button-color: #91A1C0; | ||||
| $rightpanel-button-color: #91A1C0; | ||||
| $composer-button-color: #91A1C0; | ||||
| $icon-button-color: #C1C6CD; | ||||
| $roomtopic-color: #9e9e9e; | ||||
| $eventtile-meta-color: $roomtopic-color; | ||||
| 
 | ||||
|  | @ -230,7 +229,7 @@ $event-redacted-border-color: #cccccc; | |||
| // event timestamp | ||||
| $event-timestamp-color: #acacac; | ||||
| 
 | ||||
| $copy-button-url: "$(res)/img/icon_copy_message.svg"; | ||||
| $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; | ||||
| 
 | ||||
| // e2e | ||||
| $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color | ||||
|  |  | |||
|  | @ -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> | ||||
|         ); | ||||
|     } | ||||
|  |  | |||
|  | @ -1787,7 +1787,7 @@ | |||
|     "Share Community": "Share Community", | ||||
|     "Share Room Message": "Share Room Message", | ||||
|     "Link to selected message": "Link to selected message", | ||||
|     "COPY": "COPY", | ||||
|     "Copy": "Copy", | ||||
|     "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>.", | ||||
|     "Missing session data": "Missing session data", | ||||
|  | @ -2228,7 +2228,6 @@ | |||
|     "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.", | ||||
|     "Download": "Download", | ||||
|     "Copy": "Copy", | ||||
|     "Unable to query secret storage status": "Unable to query secret storage status", | ||||
|     "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.", | ||||
|  |  | |||
|  | @ -162,7 +162,7 @@ async function changeRoomSettings(session, settings) { | |||
| 
 | ||||
|     if (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); | ||||
|         const inviteOnly = radios[0]; | ||||
|         const publicNoGuests = radios[1]; | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 Jorik Schellekens
						Jorik Schellekens