Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

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

Merged
merged 22 commits into from
Apr 19, 2022
Merged

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

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
d437e3c
RTL layout compatibility
luixxiul Apr 6, 2022
a9ea021
Replace wildcard as it is costly
luixxiul Apr 6, 2022
8857459
Replace "> h3" with ".column-data-protocolName"
luixxiul Apr 6, 2022
0ecc381
Remove unnecessary float and margin settings from .protocolIcon
luixxiul Apr 6, 2022
4856d86
Override the margin setting for a list
luixxiul Apr 6, 2022
f2060e9
Proper nesting to remove redundant rules
luixxiul Apr 6, 2022
57a9389
Fix margin setting of protocolName
luixxiul Apr 6, 2022
4ed70cb
Replace hyphens with underscore characters
luixxiul Apr 6, 2022
4399238
Add correct margin to li inside li
luixxiul Apr 6, 2022
bd43823
Sort column_data_*
luixxiul Apr 6, 2022
df2638d
box-sizing: border-box
luixxiul Apr 6, 2022
b406fce
Merge branch 'develop' into RoomSettingsDialogBridges
luixxiul Apr 8, 2022
0ea0875
Dedupe the common properties
luixxiul Apr 9, 2022
9c9ee61
Use spacing variables
luixxiul Apr 9, 2022
ef3d081
Wrap the icon column and data column
luixxiul Apr 9, 2022
924eb1d
Merge branch 'develop' into RoomSettingsDialogBridges
luixxiul Apr 9, 2022
a9bcf5c
Rename
luixxiul Apr 13, 2022
b396471
Replace "600" with $font-semi-bold
luixxiul Apr 13, 2022
9fa5f74
Revert the unintentional change
luixxiul Apr 13, 2022
ff1f388
Merge branch 'develop' into RoomSettingsDialogBridges
luixxiul Apr 14, 2022
7a7e402
Merge branch 'develop' into RoomSettingsDialogBridges
luixxiul Apr 18, 2022
1ae79ee
Merge branch 'develop' into RoomSettingsDialogBridges
luixxiul Apr 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 86 additions & 71 deletions res/css/views/dialogs/_RoomSettingsDialogBridges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,84 +22,99 @@ limitations under the License.
margin: 0;
padding: 0;
}
}

.mx_RoomSettingsDialog_BridgeList li {
list-style-type: none;
padding: 5px;
margin-bottom: 8px;
border-width: 1px 1px;
border-color: $primary-hairline-color;
border-style: solid;
border-radius: 5px;
li {
list-style-type: none;

.column-icon {
float: left;
padding-right: 10px;
&.mx_RoomSettingsDialog_BridgeList_listItem {
display: flex;
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: 1px solid $input-darker-bg-color;
}

.noProtocolIcon {
width: 48px;
height: 48px;
background: $input-darker-bg-color;
border-radius: 5px;
}

.protocol-icon {
float: left;
margin-right: 5px;
img {
border-radius: 5px;
border-width: 1px 1px;
border-color: $primary-hairline-color;
.mx_RoomSettingsDialog_column_icon {
.mx_RoomSettingsDialog_protocolIcon,
.mx_RoomSettingsDialog_protocolIcon span,
.mx_RoomSettingsDialog_noProtocolIcon {
box-sizing: border-box;
border-radius: 5px;
border: 1px solid $input-darker-bg-color;
}

.mx_RoomSettingsDialog_noProtocolIcon,
.mx_RoomSettingsDialog_protocolIcon img {
border-radius: 5px;
}

.mx_RoomSettingsDialog_noProtocolIcon {
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;
Copy link
Contributor Author

@luixxiul luixxiul Apr 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be no longer necessary thanks to box-sizing above, but I'll keep this for now.

}
}
}
span {
/* Correct letter placement */
left: auto;
}
}
}

.column-data {
display: inline-block;
width: 85%;

> h3 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 16pt;
color: $primary-content;
}

> * {
margin-top: 4px;
margin-bottom: 0;
}

.workspace-channel-details {
color: $primary-content;
font-weight: 600;

.channel {
margin-left: 5px;
}
}

.metadata {
color: $muted-fg-color;
margin-bottom: 0;
overflow-y: visible;
text-overflow: ellipsis;
white-space: normal;
padding: 0;

> li {
padding: 0;
border: 0;
.mx_RoomSettingsDialog_column_data {
display: inline-block;
width: 85%;

.mx_RoomSettingsDialog_column_data_details,
.mx_RoomSettingsDialog_column_data_metadata,
.mx_RoomSettingsDialog_column_data_metadata li,
.mx_RoomSettingsDialog_column_data_protocolName {
margin-bottom: 0;
}

.mx_RoomSettingsDialog_column_data_details,
.mx_RoomSettingsDialog_column_data_metadata {
margin-top: $spacing-4;
}

.mx_RoomSettingsDialog_column_data_metadata li {
margin-top: $spacing-8;
}

.mx_RoomSettingsDialog_column_data_protocolName {
margin-top: 0;
font-size: 16pt;
color: $primary-content;
}

.mx_RoomSettingsDialog_workspace_channel_details {
color: $primary-content;
font-weight: $font-semi-bold;

.mx_RoomSettingsDialog_channel {
margin-inline-start: 5px;
}
}

.mx_RoomSettingsDialog_metadata {
color: $muted-fg-color;
margin-bottom: 0;
overflow-y: visible;
text-overflow: ellipsis;
white-space: normal;
padding: 0;
}
}
}
}
Expand Down
18 changes: 9 additions & 9 deletions src/components/views/settings/BridgeTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
if (protocol.avatar_url) {
const avatarUrl = mediaFromMxc(protocol.avatar_url).getSquareThumbnailHttp(64);

networkIcon = <BaseAvatar className="protocol-icon"
networkIcon = <BaseAvatar className="mx_RoomSettingsDialog_protocolIcon"
width={48}
height={48}
resizeMethod='crop'
Expand All @@ -124,7 +124,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
url={avatarUrl}
/>;
} else {
networkIcon = <div className="noProtocolIcon" />;
networkIcon = <div className="mx_RoomSettingsDialog_noProtocolIcon" />;
}
let networkItem = null;
if (network) {
Expand All @@ -146,19 +146,19 @@ export default class BridgeTile extends React.PureComponent<IProps> {
}

const id = this.props.ev.getId();
return (<li key={id}>
<div className="column-icon">
return (<li key={id} className="mx_RoomSettingsDialog_BridgeList_listItem">
<div className="mx_RoomSettingsDialog_column_icon">
{ networkIcon }
</div>
<div className="column-data">
<h3>{ protocolName }</h3>
<p className="workspace-channel-details">
<div className="mx_RoomSettingsDialog_column_data">
<h3 className="mx_RoomSettingsDialog_column_data_protocolName">{ protocolName }</h3>
<p className="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details">
{ networkItem }
<span className="channel">{ _t("Channel: <channelLink/>", {}, {
<span className="mx_RoomSettingsDialog_channel">{ _t("Channel: <channelLink/>", {}, {
channelLink: () => channelLink,
}) }</span>
</p>
<ul className="metadata">
<ul className="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata">
{ creator } { bot }
</ul>
</div>
Expand Down