Commit Graph

71 Commits (5e73a212f4ba6739c404ba8170fa703786788132)

Author SHA1 Message Date
Travis Ralston 49453f2d49
Merge pull request #6604 from SimonBrandner/task/colors-2
Color de-duplication #2
2021-08-24 12:37:18 -06:00
Dariusz Niemczyk a62717ed85
Force a new layer for backdrop panel 2021-08-24 19:23:12 +02:00
Dariusz Niemczyk 4cd79e30af
Improve layering for chat
Currently we have a lot of unnecessary layers being created in the app,
which is extremely problematic on Windows when using Chrome, as it
deoptimises fonts rendering due to layers mismatch; chrome's algorithm
can't figure out if the layers won't resize or overlap so it creates a
lot of additional layers, which has a side effect of turning off
sub-pixel antialiasing on Windows.
This is a first step to improve the layering in the entire app.
2021-08-24 19:22:35 +02:00
Dariusz Niemczyk 1e1fc64769
Fix breadcrumbs overflowing left-panel 2021-08-24 16:06:20 +02:00
Dariusz Niemczyk a93d5cde09
Simplify rendering to css-only 2021-08-24 14:38:39 +02:00
Dariusz Niemczyk 0746fab09d
Make stylelint happy 2021-08-24 14:23:30 +02:00
Dariusz Niemczyk a5c005756e
Fix resizer on left panel 2021-08-24 13:05:46 +02:00
Dariusz Niemczyk e2c55c61f3
Fix difficult to grab scrollbar
Fixes https://github.com/vector-im/element-web/issues/18689
2021-08-24 09:37:33 +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 e54191f6b0
Move background-blur to fully css version 2021-08-23 19:26:57 +02:00
Dariusz Niemczyk 01eda5158b
Revert "Make the background-blur always 100%"
This reverts commit e8c974a71e.
2021-08-23 17:39:06 +02:00
Dariusz Niemczyk e8c974a71e
Make the background-blur always 100% 2021-08-23 17:30:02 +02:00
Dariusz Niemczyk 7dfe57833a
Fix GroupFilterPanel not having proper backdrop 2021-08-23 16:57:24 +02:00
Dariusz Niemczyk ca92101c72
Optimize and rewrite backdrop rendering 2021-08-23 16:20:21 +02:00
Dariusz Niemczyk f5a284a1f0
Fix flex values after blur changes 2021-08-19 16:10:09 +02:00
Dariusz Niemczyk eb242041a5
Fix missing background tonality without avatar 2021-08-17 18:56:19 +02:00
Dariusz Niemczyk 582b5c90a4
Properly sepearate left column from timeline 2021-08-16 14:26:21 +02:00
Šimon Brandner 10bc85724a
$secondary-fg-color -> $secondary-content
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 17:19:26 +02:00
Germain Souquet 8f345dc1ba Rework backdrop to draw one image with two different level of blur 2021-07-12 13:51:46 +02:00
Germain Souquet edae9a4844 Merge branch 'develop' into gsouquet/fix-backdrop-filter 2021-07-06 10:19:25 +02:00
Andrew Morgan a8e2c1bc2a
Move the dial pad button next to Explore button from Create Room context menu (#6237)
This commit moves the dial pad from a context menu to sit right by the explore button, in line with the designs in the linked issue. The dial pad button is only shown when PSTN support is detected.
2021-06-25 11:45:15 +01:00
Germain Souquet 652ad3617d Backdrop filter compatibility for Firefox and Safari 2021-06-25 09:20:03 +01:00
Germain Souquet 27ee7c5836 Move backdrop filter to a canvas based solution 2021-06-24 17:51:11 +01:00
Germain Souquet ebd7cd6212 Add CSS containement rules for shorter reflow operations 2021-06-01 11:26:32 +01:00
Michael Telatynski 20ea1436fc Update iconography for spaces 2021-03-24 19:43:33 +00:00
Michael Telatynski 11cd791c76 Tweak left panel min widths for better flexibility 2021-03-16 11:13:39 +00:00
Michael Telatynski baaceccfda Rearrange dom hierarchy to put space panel at same level as LeftPanel
so they don't steal horizontal space from each other
2021-03-16 11:13:39 +00:00
Michael Telatynski f21aedc6cf Add Space Panel with Room List filtering 2021-02-26 10:41:26 +00:00
Šimon Brandner e55ec43595 Fix minimized left panel alignment
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2020-12-15 14:45:10 +01:00
Aaron Raimist c636dc0ed3
Fix custom tag layout which regressed in #5309
Signed-off-by: Aaron Raimist <aaron@raim.ist>
2020-10-29 16:54:55 -05:00
Travis Ralston 43208c01a1 Fix variable naming 2020-10-14 16:30:38 -06:00
RinkiyaKeDad 4f8b0afc41 updated TagPanel 2020-10-10 18:00:06 +05:30
Michael Telatynski 24a088e234 Iterate PR, tweak margins 2020-08-18 12:00:56 +01:00
Michael Telatynski e20b375433 Add filter results count and explore prompt 2020-08-17 18:20:00 +01:00
Michael Telatynski a4d11cc190 Change highlighting around the room list filter 2020-08-17 16:59:29 +01:00
Michael Telatynski 4381bdfdbf fix typo 2020-08-14 18:53:56 +01:00
J. Ryan Stinnett af825b4559 Fix room list scrolling in Safari
This sets `flex-basis` properly in Safari so the room list is scrollable.

Fixes https://github.com/vector-im/element-web/issues/14877
2020-08-05 14:32:02 +01:00
Travis Ralston 80687e358f Obliterate some flexboxes in the room list
We don't need columns of divs to equally size themselves, so use easier layout techniques to make the list fit in the container. We have to take a hit with `height:100%`, but the hit is much more insignificant than confusing the layout engine.

The layout engine has a hard time with dynamically-but-statically-sized stuff like `width: 100%; display: flex;`, particularly when it is nested so badly. Overall this should improve performance for the app by not having to re-paint so often.

Fixes https://github.com/vector-im/riot-web/issues/14639
2020-07-22 16:34:33 -06:00
Travis Ralston a30da8dcdb Rename RoomList2 SCSS variables 2020-07-17 15:59:35 -06:00
Travis Ralston 2441cbc9ac LeftPanel2 -> LeftPanel 2020-07-17 15:22:18 -06:00
Travis Ralston 3c047cecfd Remove core structures for the old room list 2020-07-17 14:17:11 -06:00
Travis Ralston 4c1bc50649 Initial styling for new room list
This is a work in progress, but covers the coarse areas. This uses all-new classes to better describe what everything is, and to reduce the number of selectors we keep track of.

This is primarily layout for the list and not actually the final structure. For example, some buttons are missing and other areas are not styled correctly - the idea in this commit was to get things roughly in the right place and work on it.
2020-06-04 16:41:18 -06:00
Travis Ralston dc01607ad9 Merge branch 'develop' into travis/split-left-panel 2020-06-04 15:09:51 -06:00
Aaron Raimist 92c28f089c
Add max-width to right and left panels
Signed-off-by: Aaron Raimist <aaron@raim.ist>
2020-06-03 14:56:48 -05:00
Travis Ralston 6d96d66c03 Split the left panel into new and old for new room list designs
Though we consider the "room list" to mean the RoomList component specifically, the room list is actually the entire left panel as far as the user is concerned. 

The new proposed designs for the room list modify the whole left panel, so we had might as well break it into new and old now instead of later. This "new" left panel is a bare-bones implementation and meant to only provide the absolute basic feature set to function for those who enable the experimental room list, for whatever reason. This is not intended to be a final implementation, or even remotely close to what it could be. An example of this is the lack of breadcrumbs. Given they are likely to change, they are excluded from this temporary skeleton completely.

This also includes a purple/pink bar between the tag panel and left panel. This is so we can, if needed, differentiate between people who made the mistake of turning on the experimental room list while the overall aesthetic makes it indistinguishable. Once the designs are moderately approved, we can (and definitely should) remove the hideous indicator.
2020-06-02 19:26:07 -06:00
Jorik Schellekens 6cf9166c4a Use variables for the rem values.
It's become obvious that these random floating points everywhere
are unwieldy. Now they're all in one place with some fairly logical
variable names which will help out in design->implementation phase.
2020-03-31 15:26:23 +01:00
Jorik Schellekens da34e6241d Make all 'font-size's and 'line-height's rem
Font size of the whole app would ideally be controlled by a single
value. This value is currently hard coded using the :root CSS selector.
It is the intention to make this value configurable within riot. In the
interim all font-sizes have been converted to rem by the simple process
of regex. Replacing px values with their equivalent rem values assuming
a font size of 15px and then rounded to three decimal places, which was
the base at the time of this transformation.

I'm expecting another commit cleaning up rem values but I thought it
best to leave that to review.

This commit doesn't address any scaling issues. I thought it better to
land this unwieldy, mechanical, invisible change before the others
otherwise the pr would be impossible to review thoroughly.
2020-03-30 18:23:46 +01:00
Michael Telatynski bea6787201 Fix left left panel betterer
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-03-19 11:39:00 +00:00
Michael Telatynski b675523449 Fix custom tags causing left panel to over-expand
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-03-19 10:45:08 +00:00
Bruno Windels 95060d4e95 reduce vertical padding around explore/filter 2019-09-12 11:27:20 +02:00