imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement IRC draggable display name width

Browse source
This commit is contained in:
Jorik Schellekens 2020-05-13 02:16:43 +01:00
parent fef4d882c4
commit 5029c3f143
7 changed files with 207 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
res/css/views/rooms/_IRCLayout.scss
View file

@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$name-width: 70px;
$icon-width: 14px;
$timestamp-width: 45px;
$right-padding: 5px;
$irc-line-height: $font-18px;
.mx_IRCLayout {
--name-width: 70px;
line-height: $irc-line-height !important;
@ -48,7 +48,7 @@ $irc-line-height: $font-18px;
> .mx_SenderProfile {
order: 2;
flex-shrink: 0;
width: $name-width;
width: var(--name-width);
text-overflow: ellipsis;
text-align: right;
display: flex;
@ -122,7 +122,7 @@ $irc-line-height: $font-18px;
.mx_EventTile_emote {
> .mx_EventTile_avatar {
margin-left: calc($name-width + $icon-width + $right-padding);
margin-left: calc(var(--name-width) + $icon-width + $right-padding);
}
}
@ -132,7 +132,7 @@ $irc-line-height: $font-18px;
.mx_EventListSummary {
> .mx_EventTile_line {
padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
}
.mx_EventListSummary_avatars {
@ -143,12 +143,12 @@ $irc-line-height: $font-18px;
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
left: calc($name-width + 10px + $icon-width);
left: calc(var(--name-width) + 10px + $icon-width);
top: 0;
}
.mx_EventTile_line {
left: calc($name-width + 10px + $icon-width);
left: calc(var(--name-width) + 10px + $icon-width);
}
.mx_TextualEvent {
@ -198,7 +198,16 @@ $irc-line-height: $font-18px;
margin: 0;
.mx_SenderProfile {
width: unset;
max-width: $name-width;
max-width: var(--name-width);
}
}
.mx_ProfileResizer {
position: absolute;
height: 100%;
width: 15px;
left: calc(80px + var(--name-width));
cursor: col-resize;
z-index: 100;
}
}