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

Commit

Permalink
Merge pull request #4531 from JorikSchellekens/joriks/irc-ui
Browse files Browse the repository at this point in the history
IRC ui layout
  • Loading branch information
JorikSchellekens authored May 19, 2020
2 parents 465948e + 323d076 commit 5a1bf03
Show file tree
Hide file tree
Showing 14 changed files with 615 additions and 111 deletions.
2 changes: 2 additions & 0 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,8 @@
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_GroupLayout.scss";
@import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_InviteOnlyIcon.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
Expand Down
91 changes: 0 additions & 91 deletions res/css/views/rooms/_EventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ limitations under the License.
}

.mx_EventTile_avatar {
position: absolute;
top: 14px;
left: 8px;
cursor: pointer;
Expand Down Expand Up @@ -68,11 +67,9 @@ limitations under the License.
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
padding-left: 65px; /* left gutter */
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
line-height: $font-17px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
Expand Down Expand Up @@ -101,12 +98,9 @@ limitations under the License.

.mx_EventTile .mx_MessageTimestamp {
display: block;
visibility: hidden;
white-space: nowrap;
left: 0px;
width: 46px; /* 8 + 30 (avatar) + 8 */
text-align: center;
position: absolute;
user-select: none;
}

Expand All @@ -117,10 +111,7 @@ limitations under the License.
.mx_EventTile_line, .mx_EventTile_reply {
position: relative;
padding-left: 65px; /* left gutter */
padding-top: 3px;
padding-bottom: 3px;
border-radius: 4px;
line-height: $font-22px;
}

.mx_RoomView_timeline_rr_enabled,
Expand Down Expand Up @@ -151,10 +142,6 @@ limitations under the License.
margin-right: 10px;
}

.mx_EventTile_info .mx_EventTile_line {
padding-left: 83px;
}

/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px !important;
Expand Down Expand Up @@ -560,84 +547,6 @@ limitations under the License.

/* end of overrides */

.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
padding-top: 4px;
}

.mx_EventTile.mx_EventTile_info {
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0px;
font-size: $font-13px;
.mx_EventTile_line, .mx_EventTile_reply {
line-height: $font-20px;
}
.mx_EventTile_avatar {
top: 4px;
}
}

.mx_EventTile .mx_SenderProfile {
font-size: $font-13px;
}

.mx_EventTile.mx_EventTile_emote {
// add a bit more space for emotes so that avatars don't collide
padding-top: 8px;
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_line, .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 1px;
}
}

.mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
.mx_EventTile_line, .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}
}

.mx_EventTile_line, .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}

.mx_EventTile_avatar {
top: 2px;
}

.mx_EventTile_e2eIcon {
top: 3px;
}

.mx_EventTile_readAvatars {
top: 27px;
}

.mx_EventTile_continuation .mx_EventTile_readAvatars,
.mx_EventTile_emote .mx_EventTile_readAvatars {
top: 5px;
}

.mx_EventTile_info .mx_EventTile_readAvatars {
top: 4px;
}

.mx_RoomView_MessageList h2 {
margin-top: 6px;
}

.mx_EventTile_content .markdown-body {
p, ul, ol, dl, blockquote, pre, table {
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
}
}
}

.mx_EventTile_tileError {
color: red;
text-align: center;
Expand Down
132 changes: 132 additions & 0 deletions res/css/views/rooms/_GroupLayout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

$left-gutter: 65px;

.mx_GroupLayout {

.mx_EventTile {
> .mx_SenderProfile {
line-height: $font-17px;
padding-left: $left-gutter;
}

> .mx_EventTile_line {
padding-left: $left-gutter;
}

> .mx_EventTile_avatar {
position: absolute;
}

.mx_MessageTimestamp {
visibility: hidden;
position: absolute;
width: 46px; /* 8 + 30 (avatar) + 8 */
}

.mx_EventTile_line, .mx_EventTile_reply {
padding-top: 3px;
padding-bottom: 3px;
line-height: $font-22px;
}
}

.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
}

/* Compact layout overrides */

.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
padding-top: 4px;
}

.mx_EventTile.mx_EventTile_info {
// same as the padding for non-compact .mx_EventTile.mx_EventTile_info
padding-top: 0px;
font-size: $font-13px;
.mx_EventTile_line, .mx_EventTile_reply {
line-height: $font-20px;
}
.mx_EventTile_avatar {
top: 4px;
}
}

.mx_EventTile .mx_SenderProfile {
font-size: $font-13px;
}

.mx_EventTile.mx_EventTile_emote {
// add a bit more space for emotes so that avatars don't collide
padding-top: 8px;
.mx_EventTile_avatar {
top: 2px;
}
.mx_EventTile_line, .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 1px;
}
}

.mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
.mx_EventTile_line, .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}
}

.mx_EventTile_line, .mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}

.mx_EventTile_avatar {
top: 2px;
}

.mx_EventTile_e2eIcon {
top: 3px;
}

.mx_EventTile_readAvatars {
top: 27px;
}

.mx_EventTile_continuation .mx_EventTile_readAvatars,
.mx_EventTile_emote .mx_EventTile_readAvatars {
top: 5px;
}

.mx_EventTile_info .mx_EventTile_readAvatars {
top: 4px;
}

.mx_RoomView_MessageList h2 {
margin-top: 6px;
}

.mx_EventTile_content .markdown-body {
p, ul, ol, dl, blockquote, pre, table {
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
}
}
}
Loading

0 comments on commit 5a1bf03

Please sign in to comment.