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

Commit 80c1fad

Browse files
luixxiulluixxiul
authored
RTL layout compatibility: bridges list on room settings page (#8243)
1 parent f70186e commit 80c1fad

File tree

2 files changed

+95
-80
lines changed

2 files changed

+95
-80
lines changed

‎res/css/views/dialogs/_RoomSettingsDialogBridges.scss‎

Lines changed: 86 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -22,84 +22,99 @@ limitations under the License.
2222
margin: 0;
2323
padding: 0;
2424
}
25-
}
2625

27-
.mx_RoomSettingsDialog_BridgeList li {
28-
list-style-type: none;
29-
padding: 5px;
30-
margin-bottom: 8px;
31-
border-width: 1px 1px;
32-
border-color: $primary-hairline-color;
33-
border-style: solid;
34-
border-radius: 5px;
26+
li {
27+
list-style-type: none;
3528

36-
.column-icon {
37-
float: left;
38-
padding-right: 10px;
29+
&.mx_RoomSettingsDialog_BridgeList_listItem {
30+
display: flex;
31+
flex-wrap: wrap;
32+
gap: $spacing-8;
33+
padding: 5px;
34+
margin-bottom: $spacing-8;
3935

40-
* {
36+
// border-style around each bridge list item
37+
border-width: 1px 1px;
38+
border-color: $primary-hairline-color;
39+
border-style: solid;
4140
border-radius: 5px;
42-
border: 1px solid $input-darker-bg-color;
43-
}
44-
45-
.noProtocolIcon {
46-
width: 48px;
47-
height: 48px;
48-
background: $input-darker-bg-color;
49-
border-radius: 5px;
50-
}
5141

52-
.protocol-icon {
53-
float: left;
54-
margin-right: 5px;
55-
img {
56-
border-radius: 5px;
57-
border-width: 1px 1px;
58-
border-color: $primary-hairline-color;
42+
.mx_RoomSettingsDialog_column_icon {
43+
.mx_RoomSettingsDialog_protocolIcon,
44+
.mx_RoomSettingsDialog_protocolIcon span,
45+
.mx_RoomSettingsDialog_noProtocolIcon {
46+
box-sizing: border-box;
47+
border-radius: 5px;
48+
border: 1px solid $input-darker-bg-color;
49+
}
50+
51+
.mx_RoomSettingsDialog_noProtocolIcon,
52+
.mx_RoomSettingsDialog_protocolIcon img {
53+
border-radius: 5px;
54+
}
55+
56+
.mx_RoomSettingsDialog_noProtocolIcon {
57+
width: 48px;
58+
height: 48px;
59+
background: $input-darker-bg-color;
60+
}
61+
62+
.mx_RoomSettingsDialog_protocolIcon {
63+
img {
64+
border-width: 1px 1px;
65+
border-color: $primary-hairline-color;
66+
}
67+
68+
span {
69+
/* Correct letter placement */
70+
left: auto;
71+
}
72+
}
5973
}
60-
span {
61-
/* Correct letter placement */
62-
left: auto;
63-
}
64-
}
65-
}
66-
67-
.column-data {
68-
display: inline-block;
69-
width: 85%;
70-
71-
> h3 {
72-
margin-top: 0px;
73-
margin-bottom: 0px;
74-
font-size: 16pt;
75-
color: $primary-content;
76-
}
77-
78-
> * {
79-
margin-top: 4px;
80-
margin-bottom: 0;
81-
}
82-
83-
.workspace-channel-details {
84-
color: $primary-content;
85-
font-weight: 600;
86-
87-
.channel {
88-
margin-left: 5px;
89-
}
90-
}
9174

92-
.metadata {
93-
color: $muted-fg-color;
94-
margin-bottom: 0;
95-
overflow-y: visible;
96-
text-overflow: ellipsis;
97-
white-space: normal;
98-
padding: 0;
99-
100-
> li {
101-
padding: 0;
102-
border: 0;
75+
.mx_RoomSettingsDialog_column_data {
76+
display: inline-block;
77+
width: 85%;
78+
79+
.mx_RoomSettingsDialog_column_data_details,
80+
.mx_RoomSettingsDialog_column_data_metadata,
81+
.mx_RoomSettingsDialog_column_data_metadata li,
82+
.mx_RoomSettingsDialog_column_data_protocolName {
83+
margin-bottom: 0;
84+
}
85+
86+
.mx_RoomSettingsDialog_column_data_details,
87+
.mx_RoomSettingsDialog_column_data_metadata {
88+
margin-top: $spacing-4;
89+
}
90+
91+
.mx_RoomSettingsDialog_column_data_metadata li {
92+
margin-top: $spacing-8;
93+
}
94+
95+
.mx_RoomSettingsDialog_column_data_protocolName {
96+
margin-top: 0;
97+
font-size: 16pt;
98+
color: $primary-content;
99+
}
100+
101+
.mx_RoomSettingsDialog_workspace_channel_details {
102+
color: $primary-content;
103+
font-weight: $font-semi-bold;
104+
105+
.mx_RoomSettingsDialog_channel {
106+
margin-inline-start: 5px;
107+
}
108+
}
109+
110+
.mx_RoomSettingsDialog_metadata {
111+
color: $muted-fg-color;
112+
margin-bottom: 0;
113+
overflow-y: visible;
114+
text-overflow: ellipsis;
115+
white-space: normal;
116+
padding: 0;
117+
}
103118
}
104119
}
105120
}

‎src/components/views/settings/BridgeTile.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
115115
if (protocol.avatar_url) {
116116
const avatarUrl = mediaFromMxc(protocol.avatar_url).getSquareThumbnailHttp(64);
117117

118-
networkIcon = <BaseAvatar className="protocol-icon"
118+
networkIcon = <BaseAvatar className="mx_RoomSettingsDialog_protocolIcon"
119119
width={48}
120120
height={48}
121121
resizeMethod='crop'
@@ -124,7 +124,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
124124
url={avatarUrl}
125125
/>;
126126
} else {
127-
networkIcon = <div className="noProtocolIcon" />;
127+
networkIcon = <div className="mx_RoomSettingsDialog_noProtocolIcon" />;
128128
}
129129
let networkItem = null;
130130
if (network) {
@@ -146,19 +146,19 @@ export default class BridgeTile extends React.PureComponent<IProps> {
146146
}
147147

148148
const id = this.props.ev.getId();
149-
return (<li key={id}>
150-
<div className="column-icon">
149+
return (<li key={id} className="mx_RoomSettingsDialog_BridgeList_listItem">
150+
<div className="mx_RoomSettingsDialog_column_icon">
151151
{ networkIcon }
152152
</div>
153-
<div className="column-data">
154-
<h3>{ protocolName }</h3>
155-
<p className="workspace-channel-details">
153+
<div className="mx_RoomSettingsDialog_column_data">
154+
<h3 className="mx_RoomSettingsDialog_column_data_protocolName">{ protocolName }</h3>
155+
<p className="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details">
156156
{ networkItem }
157-
<span className="channel">{ _t("Channel: <channelLink/>", {}, {
157+
<span className="mx_RoomSettingsDialog_channel">{ _t("Channel: <channelLink/>", {}, {
158158
channelLink: () => channelLink,
159159
}) }</span>
160160
</p>
161-
<ul className="metadata">
161+
<ul className="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata">
162162
{ creator } { bot }
163163
</ul>
164164
</div>

0 commit comments

Comments
 (0)