Suguru Hirahara
5082d67dc1
Fix wide image overflowing from the thumbnail container ( #8663 )
2022-05-21 14:42:55 +00:00
Travis Ralston
f51a6b6da4
Show file name and size on images on hover ( #6511 )
...
* Show simple file name and size on images/videos
Fixes https://github.com/vector-im/element-web/issues/18197
* i18n
* Fix bad merge
* Add hover state tracking
* Only show on timeline-like objects
* Match new design requirements
* Remove video support (deemed not needed)
* Colouring and sizing from design
* Include file name in lightbox
* Revert changes to videos since we don't need them
* i18n
* Iterate PR
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2022-05-14 10:31:53 +02:00
Janne Mareike Koschinski
1436f23e2f
Fix image preview sizing for edge cases ( #8322 )
2022-04-14 20:07:34 +02:00
Robin
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
Matthew Hodgson
e0927f3fc8
s/boarder/border/g ( #7174 )
2021-11-21 18:56:25 +01:00
Travis Ralston
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
Šimon Brandner
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
Šimon Brandner
2920da8b8b
Fix a merge regression
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-24 09:33:16 +02:00
Šimon Brandner
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
Dariusz Niemczyk
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
Šimon Brandner
2afee596a9
$primary-bg-color -> $background
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 17:17:34 +02:00
Dariusz Niemczyk
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
Michael Telatynski
4fe0e216d6
Use div instead of span for mx_MImageBody to not violate spec
2021-07-23 16:22:35 +01:00
Michael Telatynski
5f2582395f
Fix blurhash rounded corners missing regression
2021-07-23 16:21:59 +01:00
Germain Souquet
a7cd5fc49b
Shift thumbnail dislay to use object-fit to preserve aspect-ratio
2021-07-21 10:03:10 +02:00
Germain
53ae7817bc
Merge pull request #6291 from matrix-org/gsouquet/message-bubbles-4635
2021-07-20 10:22:41 +01:00
Šimon Brandner
5db20d9431
Fix placeholder centering
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-07-20 08:54:32 +02:00
Germain Souquet
10bdb3cefa
Merge branch 'develop' into gsouquet/message-bubbles-4635
2021-07-07 13:07:43 +02:00
Michael Telatynski
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
Germain Souquet
fdced3da1b
Remove reminescent references to the tinter
2021-06-30 08:09:55 +01:00
Germain Souquet
6271c5c3d8
first iteration for message bubble layout
2021-06-18 18:59:22 +01:00
Michael Telatynski
3f9b6caacd
fix missing rounded corners on blurhash placeholder
2021-05-21 21:46:18 +01:00
Michael Telatynski
6e2a26443d
Fix corner rounding on images not always affecting right side
2020-08-17 10:55:54 +01:00
Jorik Schellekens
1d6c2b786e
File panel spacing and corner rounding
2020-07-27 16:21:41 +01:00
Travis Ralston
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
Travis Ralston
4b0596b6b7
Apply lipstick to hidden image design
2019-10-01 17:00:01 -06:00
Travis Ralston
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
David Baker
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
Maxwell Kepler
5d35ce9449
Changed letter case.
2018-10-24 19:06:48 +01:00
Maxwell Kepler
54f9231582
Added badge to GIFs ( https://github.com/vector-im/riot-web/issues/7344 )
2018-10-22 20:57:58 +01:00
Luke Barnard
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
Luke Barnard
015093b371
Move inline style to stylesheet
2018-05-18 11:34:41 +01:00
Luke Barnard
6699c4faed
Spelling/grammar
2018-05-18 11:29:30 +01:00
Luke Barnard
7e7e2a7473
Add more comments to explain thumbnail sizing
2018-05-18 10:27:22 +01:00
Luke Barnard
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
Matthew Hodgson
45c0c0eddd
add CSS destroyed by stickerpacks
...
fixing mangling from 9fc7435ea2 (diff-be2f1d72c9704840ceddf019c825e825)
and 38efebb8d3 (diff-be2f1d72c9704840ceddf019c825e825)
also fixes https://github.com/vector-im/riot-web/issues/6492
2018-04-29 04:50:44 +01:00
Matthew Hodgson
79d3cca6e9
move components' CSS to be in the same repo as their JS
2018-04-12 00:23:58 +01:00