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

New staged attachments UI, multiple image attachments per message

Browse source
This commit is contained in:
Scott Nonnenberg 2018-12-01 17:48:53 -08:00
parent e4babdaef0
commit 985b1d6aa6
22 changed files with 1550 additions and 648 deletions
Download patch file Download diff file Expand all files Collapse all files

234
stylesheets/_modules.scss
View file

@ -2033,6 +2033,7 @@
position: relative;
display: inline-block;
margin: 1px;
vertical-align: middle;
}
.module-image__caption-icon {
@ -2041,6 +2042,14 @@
left: 6px;
}
.module-image__with-click-handler {
cursor: pointer;
}
.module-image--soft-corners {
border-radius: 4px;
}
.module-image--curved-top-left {
border-top-left-radius: 16px;
}
@ -2143,6 +2152,17 @@
text-align: center;
}
.module-image__close-button {
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
z-index: 2;
background-image: url('../images/x-shadow-16.svg');
}
// Module: Image Grid
.module-image-grid {
@ -2256,6 +2276,220 @@
flex-grow: 1;
}
// Module: Attachments
.module-attachments {
border-top: 1px solid $color-black-015;
}
.module-attachments__header {
height: 24px;
position: relative;
}
.module-attachments__close-button {
cursor: pointer;
position: absolute;
top: 8px;
right: 16px;
width: 20px;
height: 20px;
z-index: 2;
@include color-svg('../images/x-16.svg', $color-black);
}
.module-attachments__rail {
margin-top: 12px;
margin-left: 16px;
padding-right: 16px;
overflow-x: scroll;
max-height: 142px;
white-space: nowrap;
overflow-y: hidden;
margin-bottom: 6px;
}
// Module: Staged Generic Attachment
.module-staged-generic-attachment {
height: 120px;
width: 120px;
margin: 1px;
display: inline-block;
position: relative;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px $color-black-015;
background-color: $color-gray-05;
vertical-align: middle;
}
.module-staged-generic-attachment__close-button {
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
z-index: 2;
@include color-svg('../images/x-16.svg', $color-black);
}
.module-staged-generic-attachment__icon {
margin-top: 30px;
background: url('../images/file-gradient.svg') no-repeat center;
height: 44px;
width: 56px;
margin-left: 32px;
margin-right: 32px;
margin-bottom: -4px;
// So we can center the extension text inside this icon
display: flex;
flex-direction: row;
align-items: center;
}
.module-staged-generic-attachment__icon__extension {
font-size: 10px;
line-height: 13px;
letter-spacing: 0.1px;
text-transform: uppercase;
// Along with flow layout in parent item, centers text
text-align: center;
width: 25px;
margin-left: auto;
margin-right: auto;
// We don't have much room for text here, cut it off without ellipse
overflow-x: hidden;
white-space: nowrap;
text-overflow: clip;
color: $color-gray-90;
}
.module-staged-generic-attachment__filename {
margin: 7px;
margin-top: 5px;
text-align: center;
font-family: Roboto;
font-size: 14px;
overflow: hidden;
height: 2.4em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
// Module: Caption Editor
.module-caption-editor {
background-color: $color-black;
z-index: 20;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
}
.module-caption-editor__close-button {
z-index: 21;
cursor: pointer;
position: absolute;
top: 12px;
right: 16px;
width: 24px;
height: 24px;
z-index: 2;
@include color-svg('../images/x-16.svg', $color-white);
}
.module-caption-editor__media-container {
flex-grow: 1;
flex-shrink: 1;
background-color: $color-black;
text-align: center;
margin: 50px;
overflow: hidden;
height: 100%;
}
.module-caption-editor__image {
width: 100%;
height: 100%;
object-fit: contain;
flex-grow: 1;
flex-shrink: 1;
}
.module-caption-editor__video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
flex-grow: 1;
flex-shrink: 1;
}
.module-caption-editor__placeholder {
width: 100%;
height: 100%;
object-fit: contain;
flex-grow: 1;
flex-shrink: 1;
}
.module-caption-editor__bottom-bar {
flex-grow: 0;
flex-shrink: 0;
height: 3em;
padding: 0.5em;
display: inline-flex;
flex-direction: row;
align-items: middle;
margin-left: auto;
margin-right: auto;
}
.module-caption-editor__add-caption-button {
display: inline-block;
margin-left: 6px;
height: 24px;
width: 24px;
margin-right: 6px;
@include color-svg('../images/add-caption-24.svg', $color-white);
}
.module-caption-editor__caption-input {
height: 2em;
width: 40em;
border: 1px solid $color-white;
border-radius: 1em;
color: $color-white;
background-color: $color-black;
padding: 0.5em;
&::placeholder {
color: $color-white-07;
}
}
// Third-party module: react-contextmenu
.react-contextmenu {