mirror of
https://github.com/discourse/discourse.git
synced 2024-12-24 00:56:17 +08:00
21f23cc032
Here is a breakdown of the changes that will be implemented in this PR.
# Widgets -> Glimmer
Obviously, the intention of the todo here is to convert the header from widgets to glimmer. This PR splits the respective widgets as so:
### widgets/site-header.js
```mermaid height=200
flowchart TB
A[widgets/site-header.js]
A-->B[components/glimmer-site-header.gjs]
```
### widgets/header.js and children
```mermaid height=200
flowchart TB
A[widgets/header.js]
A-->B[components/glimmer-header.gjs]
B-->C[glimmer-header/contents.gjs]
C-->D[./auth-buttons.gjs]
C-->E[./icons.gjs]
C-->F[./user-menu-wrapper.gjs]
C-->G[./hamburger-dropdown-wrapper.gjs]
C-->H[./user-menu-wrapper.gjs]
C-->I[./sidebar-toggle.gjs]
C-->J[./topic/info.gjs]
```
There are additional components rendered within the `glimmer-header/*` components, but I will leave those out for now. From this view you can see that we split apart the logic of `widgets/header.js` into 10+ components. Breaking apart these mega files has many benefits (readability, etc).
# Services
I have introduced a [header](cdb42caa04/app/assets/javascripts/discourse/app/services/header.js) service. This simplifies how we pass around data in the header, as well as fixes a bug we have with "swiping" menu panels.
# Modifiers
Added a [close-on-click-outside](cdb42caa04/app/assets/javascripts/discourse/app/modifiers/close-on-click-outside.js) modifier that is built upon the [close-on-click-outside modifier](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/float-kit/addon/modifiers/close-on-click-outside.js) that @jjaffeux built for float-kit. I think we could replace float-kit's implementation with mine and have it in a centralized location as they are extremely similar.
# Tests
Rewrote the existing header tests ([1](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/widgets/header-test.js), [2](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js)) as system tests.
# Other
- Converted `widgets/user-status-bubble.js` to a gjs component
- Converted `widgets/sidebar-toggle.js` to a gjs component
- Converted `topicFeaturedLinkNode()` to a gjs component
- Deprecated the [docking mixin](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/mixins/docking.js)
78 lines
1.8 KiB
SCSS
78 lines
1.8 KiB
SCSS
// --------------------------------------------------
|
|
// Discourse header
|
|
// --------------------------------------------------
|
|
|
|
.d-header {
|
|
height: 3.66em;
|
|
|
|
.title {
|
|
--d-logo-height: 2.4em;
|
|
}
|
|
|
|
#site-text-logo {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
.extra-info-wrapper {
|
|
.extra-info {
|
|
// header title should not be centered if there's no tags / categories
|
|
&:not(.two-rows) {
|
|
min-height: 2.25em;
|
|
}
|
|
.header-title {
|
|
font-size: var(--font-0);
|
|
// the margin-bottom here is fragile, changing it can cause tag alignment issues
|
|
margin: 0 0 0.35em 0;
|
|
.archetype-private_message & {
|
|
// PMs might have participant avatars in the header
|
|
margin: 0 0 0.15em 0;
|
|
}
|
|
}
|
|
.private-message-glyph-wrapper {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
button.sign-up-button {
|
|
display: none;
|
|
}
|
|
|
|
// Hide header avatar + icons while topic title is visible in mobile header
|
|
.extra-info-wrapper ~ .panel {
|
|
.before-header-panel-outlet,
|
|
.header-buttons,
|
|
.d-header-icons {
|
|
display: none;
|
|
}
|
|
}
|
|
// Fade in header avatar + icons if topic title is not visible in mobile header
|
|
.panel .icons {
|
|
animation: fadein 0.5s;
|
|
@media (prefers-reduced-motion) {
|
|
animation-duration: 0s;
|
|
}
|
|
}
|
|
// A rendering bug in safari causes header SVGs to jitter after animations.
|
|
// translateZ() forces gpu rendering which fixes the issue.
|
|
.d-header-icons {
|
|
transform: translateZ(0);
|
|
}
|
|
}
|
|
|
|
.d-header-icons {
|
|
.d-icon {
|
|
line-height: var(--line-height-medium);
|
|
}
|
|
.active .icon {
|
|
&:after {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#main-outlet {
|
|
@media only screen and (orientation: landscape) {
|
|
padding-right: env(safe-area-inset-right);
|
|
padding-left: env(safe-area-inset-left);
|
|
}
|
|
}
|