Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix gradients spacings on the space panel #12262

Merged
merged 4 commits into from
Feb 20, 2024
Merged

Fix gradients spacings on the space panel #12262

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
250c27c
Fix gradients spacings on the space panel
dbkr Feb 19, 2024
4081fed
Update snapshots
dbkr Feb 19, 2024
42895c0
More screenshots
dbkr Feb 19, 2024
f17b993
Merge remote-tracking branch 'origin/develop' into dbkr/spacepanel_gr…
dbkr Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 31 additions & 4 deletions res/css/structures/_SpacePanel.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are also increasing the space between the user menu and the spaces ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it is supposed to be 12px according to the figma but it wasn't, and the hairline separator wasn't in the middle.

padding-bottom: 12px;
border-bottom: 1px solid $separator;
margin: 12px 14px 4px 18px;
max-width: 226px;
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_ThreadsActivityCentre.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
Loading