Tidy up IRCLayout.pcss (#10189)

* Specify the data-layout=irc against ':not([data-layout=bubble])' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_EventTile_info in mx_EventTile[data-layout=irc] Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move declarations up, removing a default declaration Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Tidy up mx_EventTile:hover Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a spacing variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Sort by order properties Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move and add comments Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations - flex-shrink and height Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Consider cascading order Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move order declaration top Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix an invalid comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Apr 23, 2023 · ba79650 · ba79650
1 parent 92906c2
commit ba79650
Showing 1 changed file with 45 additions and 45 deletions.
diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss
@@ -17,57 +17,54 @@ limitations under the License.
 $irc-line-height: $font-18px;
 
 .mx_IRCLayout {
-    --name-width: 80px; // cf. ircDisplayNameWidth on Settings.tsx
+    --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
     --icon-width: 14px;
-    --right-padding: 5px;
     --line-height: $irc-line-height;
+    --right-padding: 5px; /* TODO: Use a spacing variable */
 
     line-height: var(--line-height) !important;
 
+    blockquote {
+        margin: 0;
+    }
+
     .mx_NewRoomIntro {
         > h2 {
             line-height: initial; /* Cancel $irc-line-height */
         }
     }
 
-    .mx_EventTile {
+    .mx_EventTile[data-layout="irc"] {
         --EventTile_irc_line-padding-block: 1px;
 
-        /* timestamps are links which shouldn't be underlined */
-        > a {
-            text-decoration: none;
-            min-width: $MessageTimestamp_width;
-        }
-
         display: flex;
-        flex-direction: row;
         align-items: flex-start;
         padding-top: 0;
 
+        > a {
+            text-decoration: none; /* timestamps are links which shouldn't be underlined */
+            min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */
+        }
+
         > * {
             margin-right: var(--right-padding);
         }
 
-        .mx_EventTile_msgOption {
-            order: 5;
-            flex-shrink: 0;
+        .mx_EventTile_avatar,
+        .mx_EventTile_e2eIcon {
+            height: $irc-line-height;
         }
 
-        .mx_EventTile_line,
-        .mx_EventTile_reply {
-            display: flex;
-            flex-direction: column;
-            order: 3;
-            flex-grow: 1;
-            flex-shrink: 1;
-            min-width: 0;
+        .mx_EventTile_avatar,
+        .mx_DisambiguatedProfile,
+        .mx_EventTile_e2eIcon,
+        .mx_EventTile_msgOption {
+            flex-shrink: 0;
         }
 
         .mx_EventTile_avatar {
             order: 1;
             position: relative;
-            flex-shrink: 0;
-            height: $irc-line-height;
             display: flex;
             align-items: center;
 
@@ -82,10 +79,9 @@ $irc-line-height: $font-18px;
         }
 
         .mx_DisambiguatedProfile {
+            order: 2;
             width: var(--name-width);
             margin-inline-end: 0; /* override mx_EventTile > * */
-            order: 2;
-            flex-shrink: 0;
 
             > .mx_DisambiguatedProfile_displayName {
                 width: 100%;
@@ -96,9 +92,8 @@ $irc-line-height: $font-18px;
 
             > .mx_DisambiguatedProfile_mxid {
                 visibility: collapse;
-                /* Override the inherited margin. */
-                margin-left: 0;
-                padding: 0 5px;
+                margin-left: 0; /* Override the inherited margin. */
+                padding: 0 5px; /* TODO: Use a spacing variable */
             }
 
             &:hover {
@@ -110,7 +105,7 @@ $irc-line-height: $font-18px;
                     display: inline;
                     background-color: $event-selected-color;
                     border-radius: 8px 0 0 8px;
-                    padding-right: 8px;
+                    padding-right: $spacing-8;
                 }
 
                 > .mx_DisambiguatedProfile_mxid {
@@ -123,12 +118,7 @@ $irc-line-height: $font-18px;
 
         .mx_EventTile_e2eIcon {
             padding: 0;
-
-            flex-shrink: 0;
             flex-grow: 0;
-
-            height: $font-18px;
-
             background-position: center;
         }
 
@@ -155,13 +145,34 @@ $irc-line-height: $font-18px;
             }
         }
 
+        .mx_EventTile_line,
+        .mx_EventTile_reply {
+            order: 3;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-shrink: 1;
+            min-width: 0;
+        }
+
         .mx_EventTile_reply {
             order: 4;
         }
 
+        .mx_EventTile_msgOption {
+            order: 5;
+        }
+
         .mx_EditMessageComposer_buttons {
             position: relative;
         }
+
+        &.mx_EventTile_info {
+            .mx_ViewSourceEvent, /* For hidden events */
+            .mx_TextualEvent {
+                line-height: $irc-line-height;
+            }
+        }
     }
 
     .mx_EventTile_emote {
@@ -171,17 +182,6 @@ $irc-line-height: $font-18px;
         }
     }
 
-    blockquote {
-        margin: 0;
-    }
-
-    .mx_EventTile.mx_EventTile_info {
-        .mx_ViewSourceEvent, /* For hidden events */
-        .mx_TextualEvent {
-            line-height: $irc-line-height;
-        }
-    }
-
     .mx_ReplyChain {
         .mx_DisambiguatedProfile {
             width: unset;