Re-add margin to tiles based on EventTileBubble (#9015)

* Re-add margin to HistoryTile, which is based on EventTileBubble Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Readd margin to the other tiles based on EventTileBubble Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Default margin is not required for mx_MJitsiWidgetEvent as it appears inside EventTile Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Cancel left value for cryptoEvent on IRC layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jul 8, 2022 · b1f8d36 · b1f8d36
1 parent 39816f6
commit b1f8d36
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 7 deletions.
diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_CreateEvent {
+.mx_EventTileBubble.mx_CreateEvent {
+    margin: var(--EventTileBubble_margin-block) auto;
+
     &::before {
         background-color: $header-panel-text-primary-color;
         mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');

diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_EventTileBubble {
+    --EventTileBubble_margin-block: 10px; // TODO: Use a spacing variable
+
     background-color: $dark-panel-bg-color;
     padding: 10px; // TODO: Use a spacing variable
     border-radius: 8px;

diff --git a/res/css/views/messages/_MJitsiWidgetEvent.scss b/res/css/views/messages/_MJitsiWidgetEvent.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MJitsiWidgetEvent {
+.mx_EventTileBubble.mx_MJitsiWidgetEvent {
     &::before {
         background-color: $header-panel-text-primary-color; // XXX: Variable abuse
         mask-image: url('$(res)/img/element-icons/call/video-call.svg');

diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_cryptoEvent {
+.mx_EventTileBubble.mx_cryptoEvent {
+    margin: var(--EventTileBubble_margin-block) auto;
+
     // white infill for the transparency
     &.mx_cryptoEvent_icon::before {
         background-color: #ffffff;

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -74,7 +74,7 @@ $left-gutter: 64px;
     }
 
     .mx_EventTileBubble {
-        margin-block: 10px; // TODO: Use a spacing variable
+        margin-block: var(--EventTileBubble_margin-block);
     }
 
     .mx_MImageBody {
@@ -238,6 +238,10 @@ $left-gutter: 64px;
         .mx_EventTileBubble {
             position: relative;
             left: var(--EventTile_irc_line_info-inset-inline-start);
+
+            &.mx_cryptoEvent {
+                left: unset;
+            }
         }
 
         .mx_ReplyTile .mx_EventTileBubble {

diff --git a/res/css/views/rooms/_HistoryTile.scss b/res/css/views/rooms/_HistoryTile.scss
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_HistoryTile::before {
-    background-color: $header-panel-text-primary-color;
-    mask-image: url('$(res)/img/element-icons/hide.svg');
+.mx_EventTileBubble.mx_HistoryTile {
+    margin: var(--EventTileBubble_margin-block) auto;
+
+    &::before {
+        background-color: $header-panel-text-primary-color;
+        mask-image: url('$(res)/img/element-icons/hide.svg');
+    }
 }