1436f23e2f
Fix image preview sizing for edge cases ( #8322 )
2022-04-14 20:07:34 +02:00
af6bd63ac7
Fix some image/video scroll jumps ( #8182 )
...
* Fix some image/video scroll jumps
* Fix aspect ratio formatting
* Fix videos not being responsive to timeline width
2022-03-28 19:07:02 +00:00
e0927f3fc8
s/boarder/border/g ( #7174 )
2021-11-21 18:56:25 +01:00
3c06e7f7a0
Add option to change the size of images/videos in the timeline ( #7017 )
...
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
Co-authored-by: Timo K <toger5@hotmail.de>
2021-11-17 15:19:30 +00:00
9abb2f5ff4
Color cleanup 8 ( #7108 )
...
* $accent-color -> $accent
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove $accent-bg-color
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* $notice-primary-color -> $alert
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove $notice-primary-bg-color
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove $accent-50pct
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* $warning-color -> $alert
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove $accent-darker
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove $orange-warning-color
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove $warning-bg-color
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove $info-bg-color
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-11-11 13:37:29 +00:00
2920da8b8b
Fix a merge regression
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-24 09:33:16 +02:00
b6ea75b681
Merge remote-tracking branch 'upstream/develop' into task/colors-2
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-24 08:57:12 +02:00
7adfbf6f98
Show blurhash only after 150ms
...
Blurhash on every single room entrance was extremely annoying, to the
point where it wasn't really helpful, but distracting, even after
the animations was added.
This commit makes it so the blurhash is only shown after 150ms, and the
image will be animated as a quick fade-in if there's no blurhash.
Fixes https://github.com/vector-im/element-web/issues/18617
Fixes https://github.com/vector-im/element-web/issues/17879
2021-08-19 07:52:23 +02:00
2afee596a9
$primary-bg-color -> $background
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 17:17:34 +02:00
c872609ed3
Modify encrypted images loading for better UX
...
Adds proper react css transition to encrypted images placeholders, so
that we can animate it's entrance and exit properly.
In addition, adds simple css animations file to properly handle all of
the animations in one place, so that it's much easier to properly handle
prefers-reduced-motion media query.
2021-08-10 19:24:17 +02:00
4fe0e216d6
Use div instead of span for mx_MImageBody to not violate spec
2021-07-23 16:22:35 +01:00
5f2582395f
Fix blurhash rounded corners missing regression
2021-07-23 16:21:59 +01:00
a7cd5fc49b
Shift thumbnail dislay to use object-fit to preserve aspect-ratio
2021-07-21 10:03:10 +02:00
53ae7817bc
Merge pull request #6291 from matrix-org/gsouquet/message-bubbles-4635
2021-07-20 10:22:41 +01:00
5db20d9431
Fix placeholder centering
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-07-20 08:54:32 +02:00
10bdb3cefa
Merge branch 'develop' into gsouquet/message-bubbles-4635
2021-07-07 13:07:43 +02:00
1f337b28ac
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into travis/blurhash
...
Conflicts:
src/ContentMessages.tsx
src/components/structures/UploadBar.tsx
src/components/views/messages/MImageBody.js
src/components/views/messages/MStickerBody.js
src/components/views/messages/MVideoBody.tsx
2021-07-01 20:48:34 +01:00
fdced3da1b
Remove reminescent references to the tinter
2021-06-30 08:09:55 +01:00
6271c5c3d8
first iteration for message bubble layout
2021-06-18 18:59:22 +01:00
3f9b6caacd
fix missing rounded corners on blurhash placeholder
2021-05-21 21:46:18 +01:00
6e2a26443d
Fix corner rounding on images not always affecting right side
2020-08-17 10:55:54 +01:00
1d6c2b786e
File panel spacing and corner rounding
2020-07-27 16:21:41 +01:00
0491b742c2
Use a mask instead of an img for "Show image" eye
...
See https://github.com/matrix-org/matrix-react-sdk/pull/3492#pullrequestreview-296223646
2019-10-02 12:52:07 -06:00
4b0596b6b7
Apply lipstick to hidden image design
2019-10-01 17:00:01 -06:00
59b29e4a7f
Add an option to hide image previews
...
Applies to images, stickers, and URL previews.
Fixes https://github.com/vector-im/riot-web/issues/10735
2019-09-27 21:08:31 -06:00
54898a6c35
Fix black-on-black GIF icon for stickers
...
Text colour ended up being the link colour on images because the
whole image is in an `a`, but stickers are not so it got the default
font colour, which might be black. Define an explicit colour.
Also set pointer-events: none so you can hover over the gif icon
too (I managed to make the message panel small which made the icon
cover most the image, so this prevented the gif from animating
at all).
Fixes https://github.com/vector-im/riot-web/issues/8004
2019-01-07 13:49:01 +00:00
5d35ce9449
Changed letter case.
2018-10-24 19:06:48 +01:00
54f9231582
Added badge to GIFs ( https://github.com/vector-im/riot-web/issues/7344 )
2018-10-22 20:57:58 +01:00
836dc8b0ef
Factor out all shared logic between MStickerBody and MImageBody
...
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.
2018-05-21 16:59:13 +01:00
015093b371
Move inline style to stylesheet
2018-05-18 11:34:41 +01:00
6699c4faed
Spelling/grammar
2018-05-18 11:29:30 +01:00
7e7e2a7473
Add more comments to explain thumbnail sizing
2018-05-18 10:27:22 +01:00
b28ed6075b
Implement slightly hacky CSS soln. to thumbnail sizing
...
As the slightly nicer alternative to fixupHeight being applied once
we actually have a timelineWidth.
The niceness comes from not needing timelineWidth, which means we can
implement at render time with CSS. (Despite still calculating aspect
ratios when we render.)
2018-05-17 18:15:34 +01:00
45c0c0eddd
add CSS destroyed by stickerpacks
...
fixing mangling from 9fc7435ea2 (diff-be2f1d72c9704840ceddf019c825e825)38efebb8d3 (diff-be2f1d72c9704840ceddf019c825e825)https://github.com/vector-im/riot-web/issues/6492
2018-04-29 04:50:44 +01:00
79d3cca6e9
move components' CSS to be in the same repo as their JS
2018-04-12 00:23:58 +01:00
Janne Mareike Koschinski