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

Factor out all shared logic between MStickerBody and MImageBody

Browse source 
The benefits of this:
 - One code path for determining spinner/placeholder and it's position
   for loading images/stickers. This includes spinner used in e2e
   decryption of images.
 - Very small definition for MStickerBody, only overriding the minimal
   differences is has from MImageBody.

The disadvantages:
 - Slightly more complicated MImageBody, but hopefully not less
   readable.
This commit is contained in:
Luke Barnard 2018-05-21 16:59:13 +01:00
parent 015093b371
commit 836dc8b0ef
4 changed files with 111 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

11
res/css/views/messages/_MImageBody.scss
View file

@ -37,11 +37,12 @@ limitations under the License.
}
.mx_MImageBody_thumbnail_spinner {
display: flex;
align-items: center;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
}
.mx_MImageBody_thumbnail_spinner img {
margin: auto;
// Inner img and TintableSvg should be centered around 0, 0
.mx_MImageBody_thumbnail_spinner > * {
transform: translate(-50%, -50%);
}

32
res/css/views/messages/_MStickerBody.scss
View file

@ -14,33 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MStickerBody {
display: block;
margin-right: 34px;
min-height: 110px;
padding: 20px 0;
.mx_MStickerBody_wrapper {
padding: 20px 0px;
}
.mx_MStickerBody_image_container {
display: inline-block;
position: relative;
}
.mx_MStickerBody_image {
max-width: 100%;
opacity: 0;
}
.mx_MStickerBody_image_visible {
opacity: 1;
}
.mx_MStickerBody_placeholder {
position: absolute;
opacity: 1;
}
.mx_MStickerBody_placeholder_invisible {
transition: 500ms;
opacity: 0;
.mx_MStickerBody_tooltip {
position: absolute;
top: 50%;
}