Update _AuxPanel.pcss (#10888)

* Fix class names - from m_ to mx_

* Move mx_RoomView_auxPanel from _RoomView.pcss to _AuxPanel.pcss

The class name 'mx_RoomView_auxPanel' belongs to AuxPanel, not RoomView

* Correct naming

* Strictify: mx_RoomView_auxPanel *

* Nest mx_AuxPanel_stateViews_span

* Sort

* Run prettier

* Use custom properties

* Revert "Use custom properties"

This reverts commit fe720d05f4572e74e71887203d43c491f0723a92.
This commit is contained in:
Suguru Hirahara 2023-05-18 08:54:31 +00:00 committed by GitHub
parent d0b77cc3aa
commit fabfae172b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 43 deletions

View file

@ -46,14 +46,6 @@ limitations under the License.
}
}
.mx_RoomView_auxPanel {
min-width: 0px;
width: 100%;
margin: 0px auto;
overflow: auto;
}
.mx_RoomView_auxPanel_hiddenHighlights {
border-bottom: 1px solid $primary-hairline-color;
padding: 10px 26px;

View file

@ -14,37 +14,47 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.m_RoomView_auxPanel_stateViews {
padding: 5px;
padding-left: 19px;
border-bottom: 1px solid $primary-hairline-color;
}
.mx_AuxPanel {
min-width: 0px;
width: 100%;
margin: 0px auto;
.m_RoomView_auxPanel_stateViews_span a {
text-decoration: none;
color: inherit;
}
overflow: auto;
.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
font-weight: bold;
color: orange;
}
.mx_AuxPanel_stateViews {
padding: 5px;
padding-left: 19px;
border-bottom: 1px solid $primary-hairline-color;
}
.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
font-weight: bold;
color: red;
}
.mx_AuxPanel_stateViews_span {
&[data-severity="warning"] {
font-weight: bold;
color: orange;
}
.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
font-weight: normal;
}
&[data-severity="alert"] {
font-weight: bold;
color: red;
}
.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
font-weight: normal;
color: $settings-grey-fg-color;
}
&[data-severity="normal"] {
font-weight: normal;
}
.m_RoomView_auxPanel_stateViews_delim {
padding: 0 5px;
color: $settings-grey-fg-color;
&[data-severity="notice"] {
font-weight: normal;
color: $settings-grey-fg-color;
}
a {
text-decoration: none;
color: inherit;
}
}
.mx_AuxPanel_stateViews_delim {
padding: 0 5px;
color: $settings-grey-fg-color;
}
}

View file

@ -173,18 +173,14 @@ export default class AuxPanel extends React.Component<IProps, IState> {
}
span = (
<span
className="m_RoomView_auxPanel_stateViews_span"
data-severity={severity}
key={"x-" + stateKey}
>
<span className="mx_AuxPanel_stateViews_span" data-severity={severity} key={"x-" + stateKey}>
{span}
</span>
);
counters.push(span);
counters.push(
<span className="m_RoomView_auxPanel_stateViews_delim" key={"delim" + idx}>
<span className="mx_AuxPanel_stateViews_delim" key={"delim" + idx}>
{" "}
{" "}
</span>,
@ -193,12 +189,12 @@ export default class AuxPanel extends React.Component<IProps, IState> {
if (counters.length > 0) {
counters.pop(); // remove last deliminator
stateViews = <div className="m_RoomView_auxPanel_stateViews">{counters}</div>;
stateViews = <div className="mx_AuxPanel_stateViews">{counters}</div>;
}
}
return (
<AutoHideScrollbar className="mx_RoomView_auxPanel">
<AutoHideScrollbar className="mx_AuxPanel">
{stateViews}
{this.props.children}
{appsDrawer}