Commit Graph

33 Commits (23da0b9f8d03d5d4bbb0e57dbf4b284b69461315)

Author SHA1 Message Date
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