mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Conversations now better take advantage of wide screens

Browse source
This commit is contained in:
Scott Nonnenberg 2018-08-10 17:15:00 -07:00
parent fedfbed304
commit b3d56276a8
4 changed files with 158 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

97
stylesheets/_modules.scss
View file

@ -9,6 +9,7 @@
// Module: Message
.module-message {
position: relative;
display: inline-flex;
flex-direction: row;
align-items: stretch;
@ -36,11 +37,21 @@
}
}
// Spec: container < 438px
.module-message--incoming {
margin-left: 0;
margin-right: 32px;
}
.module-message--outgoing {
float: right;
margin-right: 0;
margin-left: 32px;
}
.module-message__buttons {
position: absolute;
top: 0;
bottom: 0;
display: inline-flex;
flex-direction: row;
align-items: center;
@ -51,6 +62,13 @@
opacity: 1;
}
.module-message__buttons--incoming {
left: 100%;
}
.module-message__buttons--outgoing {
right: 100%;
}
.module-message__buttons__download {
height: 24px;
width: 24px;
@ -136,7 +154,6 @@
padding-left: 12px;
padding-top: 10px;
padding-bottom: 10px;
max-width: 386px;
}
.module-message__container--outgoing {
@ -230,8 +247,6 @@
}
.module-message__img-attachment {
max-width: 386px;
object-fit: cover;
width: 100%;
min-width: 200px;
@ -2250,3 +2265,79 @@
> .react-contextmenu-item.react-contextmenu-item--selected:after {
color: $color-white;
}
// All media query widths have 300px added to account for the left pane
// And have been tweaked for smoother transitions
// To hide in small breakpoints
.module-message__buttons__download {
display: none;
}
.module-message__buttons__reply {
display: none;
}
/* Spec: container > 438px and container < 593px*/
@media (min-width: 800px) and (max-width: 925px) {
.module-message {
max-width: 374px;
}
// Spec: container < 438px
.module-message--incoming {
margin-left: 0;
margin-right: auto;
}
.module-message--outgoing {
margin-right: 0;
margin-left: auto;
}
// To hide in small breakpoints
.module-message__buttons__download {
display: inline-block;
}
.module-message__buttons__reply {
display: inline-block;
}
// To hide in larger breakpoints
.module-message__context__download {
display: none;
}
.module-message__context__reply {
display: none;
}
}
// Spec: container > 593px
@media (min-width: 926px) {
.module-message {
max-width: 66%;
}
.module-message--incoming {
margin-left: 0;
margin-right: auto;
}
.module-message--outgoing {
margin-right: 0;
margin-left: auto;
}
// To hide in small breakpoints
.module-message__buttons__download {
display: inline-block;
}
.module-message__buttons__reply {
display: inline-block;
}
// To hide in larger breakpoints
.module-message__context__download {
display: none;
}
.module-message__context__reply {
display: none;
}
}