PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix gradients spacings on the space panel (#12262)

Browse source 
* Fix gradients spacings on the space panel

Make the gradients two separate ones so they can be fixed pixel widths
from the top & bottom rather than percentages of the height.

Tweak the spacings between the user menu & threads panel to match
the figma and from Gaelle's design.

* Update snapshots

* More screenshots
This commit is contained in:
David Baker 2024-02-20 15:28:46 +00:00 committed by GitHub
parent a9add4504f
commit d20e9e4f8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

35
res/css/structures/_SpacePanel.pcss
View file

@ -338,20 +338,47 @@ limitations under the License.
}
&.mx_IndicatorScrollbar_topOverflow {
mask-image: linear-gradient(180deg, transparent, black 5%);
mask-image: linear-gradient(to bottom, transparent, black 16px);
}
&.mx_IndicatorScrollbar_bottomOverflow {
mask-image: linear-gradient(180deg, black, black 95%, transparent);
mask-image: linear-gradient(
to top,
transparent,
rgba(255, 255, 255, 30%) 4px,
rgba(255, 255, 255, 55%) 8px,
rgba(255, 255, 255, 75%) 12px,
black 16px
);
}
&.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent);
/* This stacks two gradients on top of one another, which lets us
have a fixed pixel offset from both top and bottom for the colour stops.
Note the top fade is much smaller because the spaces start close to the top,
so otherwise a large gradient suddenly appears when you scroll down.
*/
mask-image: linear-gradient(to bottom, transparent, black 16px),
linear-gradient(
to top,
transparent,
rgba(255, 255, 255, 30%) 4px,
rgba(255, 255, 255, 55%) 8px,
rgba(255, 255, 255, 75%) 12px,
black 16px
);
mask-position:
0% 0%,
0% 100%;
mask-size:
calc(100% - 10px) 50%,
calc(100% - 10px) 50%;
mask-repeat: no-repeat;
}
}
.mx_UserMenu {
padding: 0 2px 8px;
padding-bottom: 12px;
border-bottom: 1px solid $separator;
margin: 12px 14px 4px 18px;
max-width: 226px;

2
res/css/structures/_ThreadsActivityCentre.pcss
View file

@ -24,7 +24,7 @@
align-items: center;
justify-content: center;
border-radius: 8px;
margin: auto;
margin: 18px auto auto auto;
&.expanded {
/* align with settings icon */