mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

RTL layout compatibility: bridges list on room settings page (#8243)

Browse source
This commit is contained in:
Suguru Hirahara 2022-04-19 11:39:45 +00:00 committed by GitHub
parent f70186ea9b
commit 80c1fad088
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 88 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
res/css/views/dialogs/_RoomSettingsDialogBridges.scss
View file

@ -22,84 +22,99 @@ limitations under the License.
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
}
.mx_RoomSettingsDialog_BridgeList li { li {
list-style-type: none; list-style-type: none;
padding: 5px;
margin-bottom: 8px;
border-width: 1px 1px;
border-color: $primary-hairline-color;
border-style: solid;
border-radius: 5px;
.column-icon { &.mx_RoomSettingsDialog_BridgeList_listItem {
float: left; display: flex;
padding-right: 10px; flex-wrap: wrap;
gap: $spacing-8;
padding: 5px;
margin-bottom: $spacing-8;
* { // border-style around each bridge list item
border-width: 1px 1px;
border-color: $primary-hairline-color;
border-style: solid;
border-radius: 5px; border-radius: 5px;
border: 1px solid $input-darker-bg-color;
}
.noProtocolIcon { .mx_RoomSettingsDialog_column_icon {
width: 48px; .mx_RoomSettingsDialog_protocolIcon,
height: 48px; .mx_RoomSettingsDialog_protocolIcon span,
background: $input-darker-bg-color; .mx_RoomSettingsDialog_noProtocolIcon {
border-radius: 5px; box-sizing: border-box;
} border-radius: 5px;
border: 1px solid $input-darker-bg-color;
}
.protocol-icon { .mx_RoomSettingsDialog_noProtocolIcon,
float: left; .mx_RoomSettingsDialog_protocolIcon img {
margin-right: 5px; border-radius: 5px;
img { }
border-radius: 5px;
border-width: 1px 1px; .mx_RoomSettingsDialog_noProtocolIcon {
border-color: $primary-hairline-color; width: 48px;
height: 48px;
background: $input-darker-bg-color;
}
.mx_RoomSettingsDialog_protocolIcon {
img {
border-width: 1px 1px;
border-color: $primary-hairline-color;
}
span {
/* Correct letter placement */
left: auto;
}
}
} }
span {
/* Correct letter placement */
left: auto;
}
}
}
.column-data { .mx_RoomSettingsDialog_column_data {
display: inline-block; display: inline-block;
width: 85%; width: 85%;
> h3 { .mx_RoomSettingsDialog_column_data_details,
margin-top: 0px; .mx_RoomSettingsDialog_column_data_metadata,
margin-bottom: 0px; .mx_RoomSettingsDialog_column_data_metadata li,
font-size: 16pt; .mx_RoomSettingsDialog_column_data_protocolName {
color: $primary-content; margin-bottom: 0;
} }
> * { .mx_RoomSettingsDialog_column_data_details,
margin-top: 4px; .mx_RoomSettingsDialog_column_data_metadata {
margin-bottom: 0; margin-top: $spacing-4;
} }
.workspace-channel-details { .mx_RoomSettingsDialog_column_data_metadata li {
color: $primary-content; margin-top: $spacing-8;
font-weight: 600; }
.channel { .mx_RoomSettingsDialog_column_data_protocolName {
margin-left: 5px; margin-top: 0;
} font-size: 16pt;
} color: $primary-content;
}
.metadata { .mx_RoomSettingsDialog_workspace_channel_details {
color: $muted-fg-color; color: $primary-content;
margin-bottom: 0; font-weight: $font-semi-bold;
overflow-y: visible;
text-overflow: ellipsis;
white-space: normal;
padding: 0;
> li { .mx_RoomSettingsDialog_channel {
padding: 0; margin-inline-start: 5px;
border: 0; }
}
.mx_RoomSettingsDialog_metadata {
color: $muted-fg-color;
margin-bottom: 0;
overflow-y: visible;
text-overflow: ellipsis;
white-space: normal;
padding: 0;
}
} }
} }
} }

18
src/components/views/settings/BridgeTile.tsx
View file

@ -115,7 +115,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
if (protocol.avatar_url) { if (protocol.avatar_url) {
const avatarUrl = mediaFromMxc(protocol.avatar_url).getSquareThumbnailHttp(64); const avatarUrl = mediaFromMxc(protocol.avatar_url).getSquareThumbnailHttp(64);
networkIcon = <BaseAvatar className="protocol-icon" networkIcon = <BaseAvatar className="mx_RoomSettingsDialog_protocolIcon"
width={48} width={48}
height={48} height={48}
resizeMethod='crop' resizeMethod='crop'
@ -124,7 +124,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
url={avatarUrl} url={avatarUrl}
/>; />;
} else { } else {
networkIcon = <div className="noProtocolIcon" />; networkIcon = <div className="mx_RoomSettingsDialog_noProtocolIcon" />;
} }
let networkItem = null; let networkItem = null;
if (network) { if (network) {
@ -146,19 +146,19 @@ export default class BridgeTile extends React.PureComponent<IProps> {
} }
const id = this.props.ev.getId(); const id = this.props.ev.getId();
return (<li key={id}> return (<li key={id} className="mx_RoomSettingsDialog_BridgeList_listItem">
<div className="column-icon"> <div className="mx_RoomSettingsDialog_column_icon">
{ networkIcon } { networkIcon }
</div> </div>
<div className="column-data"> <div className="mx_RoomSettingsDialog_column_data">
<h3>{ protocolName }</h3> <h3 className="mx_RoomSettingsDialog_column_data_protocolName">{ protocolName }</h3>
<p className="workspace-channel-details"> <p className="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details">
{ networkItem } { networkItem }
<span className="channel">{ _t("Channel: <channelLink/>", {}, { <span className="mx_RoomSettingsDialog_channel">{ _t("Channel: <channelLink/>", {}, {
channelLink: () => channelLink, channelLink: () => channelLink,
}) }</span> }) }</span>
</p> </p>
<ul className="metadata"> <ul className="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata">
{ creator } { bot } { creator } { bot }
</ul> </ul>
</div> </div>