github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 09:33:39 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity
21f23cc032
discourse/app/assets/stylesheets/common/base
History
Isaac Janzen 21f23cc032
DEV: Convert header to glimmer (#25214) 
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)
2024-02-23 11:08:15 -07:00
..
_index.scss UX: improve json_schema setting styles (#24424) 2023-11-17 11:23:40 -05:00
_topic-list.scss FIX: global selector needed to avoid clicks registering on other elements (#25445) 2024-01-26 22:24:21 +00:00
about.scss UX: fix spacing for about page headings (#25410) 2024-01-24 16:36:36 -05:00
activation.scss UX: cleaning up some invite page styles (#25247) 2024-01-12 17:15:01 -05:00
alert.scss UX: revert icon colour change in alerts (#24916) 2023-12-15 13:32:35 +01:00
bbcode.scss
category-list.scss FIX: Use same names for category CSS variables (#24527) 2023-11-24 16:42:24 +02:00
code_highlighting.scss UX: Add some missing hljs classes 2023-12-11 18:11:27 +00:00
colorpicker.scss FEATURE: Use native color-picker (#15748) 2022-02-01 11:18:13 -03:00
compose.scss Revert "UX: allow fullscreen composer on mobile (#25787)" (#25842) 2024-02-23 12:21:26 -05:00
composer-user-selector.scss DEV: Use css var font sizes (#18518) 2022-10-12 15:31:59 +02:00
crawler_layout.scss PERF: eliminate some slow CSS selectors (#25392) 2024-01-26 13:10:45 -05:00
d-icon.scss
d-image-grid.scss UX: Better alignment for experimental grids (#22066) 2023-06-13 09:25:46 -04:00
dialog.scss A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
directory.scss DEV: update classes, remove unused CSS (#25825) 2024-02-23 09:14:37 -05:00
discourse.scss UX: clean up some label and form inconsistencies, reduce excess bolding (#25701) 2024-02-15 11:27:51 -05:00
edit-category.scss DEV: Apply form template to categories (#20337) 2023-02-23 11:18:14 -08:00
edit-topic-timer-modal.scss UX: minor fixes in topic action modal (#24772) 2023-12-07 14:54:56 +01:00
ember-select.scss
emoji.scss UX: improve emoji alignment for text (#19815) 2023-01-30 14:07:08 +01:00
empty-state.scss DEV: Use css var font sizes (#18518) 2022-10-12 15:31:59 +02:00
exception.scss DEV: Use css var font sizes (#18518) 2022-10-12 15:31:59 +02:00
explain-reviewable.scss DEV: Prettify negative numbers in reviewable score explanation (#23642) 2023-09-25 10:34:51 +01:00
faqs.scss FEATURE: remove category badge style options, set bullet style as default (#24198) 2023-11-13 10:46:15 -05:00
group.scss DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
groups.scss DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
header.scss DEV: Convert header to glimmer (#25214) 2024-02-23 11:08:15 -07:00
history.scss DEV: update classes, remove unused CSS (#25825) 2024-02-23 09:14:37 -05:00
json_schema.scss UX: Various improvements to JSON Schema editor (#24543) 2023-11-29 13:39:49 +03:00
lightbox.scss UX: remove rounded border on hover lightbox (#22080) 2023-06-13 13:31:28 +02:00
login.scss DEV: update classes, remove unused CSS (#25825) 2024-02-23 09:14:37 -05:00
magnific-popup.scss A11Y: Better contrast for lightbox overlay links (#25208) 2024-01-10 14:07:49 -05:00
menu-panel.scss FIX: better supports ipad and hub footer nav (#25518) 2024-02-01 10:24:44 +01:00
modal.scss DEV: update classes, remove unused CSS (#25825) 2024-02-23 09:14:37 -05:00
new-user.scss DEV: Refactor GroupNotificationsButton into userPrivateMessages.group route (#21930) 2023-06-07 06:22:50 +08:00
not-found.scss FEATURE: remove category badge style options, set bullet style as default (#24198) 2023-11-13 10:46:15 -05:00
onebox.scss UX: Fix the video spinner css (#25770) 2024-02-20 20:44:23 +01:00
personal-message.scss UX: update post background highlight (#25094) 2024-01-02 16:53:40 -05:00
popup-menu.scss UX: improve btn-transparent styling (#24666) 2023-12-02 14:21:22 +11:00
redirection.scss DEV: Use more css vars (#18561) 2022-10-12 16:05:42 +02:00
reorder-categories.scss DEV: Rework reorder-categories modal (#25475) 2024-02-01 13:13:38 +01:00
request_access.scss DEV: Use css var font sizes (#18518) 2022-10-12 15:31:59 +02:00
request-group-membership-form.scss DEV: Convert request-group-membership-form to new modal api (#23600) 2023-09-15 00:39:52 +02:00
reviewables.scss UX: fix review queue category and tag alignment, whitespace (#25166) 2024-01-08 12:55:39 -05:00
revise-and-reject-post-reviewable.scss FEATURE: Add Revise... option for queued post reviewable (#23454) 2023-10-13 11:28:31 +10:00
rtl.scss FEATURE: Serve RTL versions of admin and plugins CSS bundles for RTL locales (#21876) 2023-06-01 05:27:11 +03:00
search-menu.scss UX: fix group search result alignment and styles (#25681) 2024-02-14 17:51:44 -05:00
search.scss UX: clean up some label and form inconsistencies, reduce excess bolding (#25701) 2024-02-15 11:27:51 -05:00
share_link.scss UX: refactor .d-modal to use BEM and improve styling (#23967) 2023-11-15 10:14:47 +00:00
shared-drafts.scss
sidebar-custom-section.scss UX: normal cursor on custom sidebar link icon (#24427) 2023-11-20 09:13:08 +11:00
sidebar-footer.scss FIX: restore sidebar footer background (#21956) 2023-06-06 14:46:08 -04:00
sidebar-more-section-links.scss UX: fix "More" menu at small tablet width (#23616) 2023-09-15 17:21:24 -04:00
sidebar-section-link.scss FEATURE: remove category badge style options, set bullet style as default (#24198) 2023-11-13 10:46:15 -05:00
sidebar-section.scss DEV: FloatKit (#23650) 2023-09-26 13:39:52 +02:00
sidebar.scss UX: fix sidebar section modal styles (#25803) 2024-02-21 18:22:03 -05:00
static-login.scss REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
tagging.scss UX: improve featured link positioning in topic titles (#25427) 2024-01-25 16:49:34 -05:00
tooltip.scss REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
topic-admin-menu.scss DEV: update classes, remove unused CSS (#25825) 2024-02-23 09:14:37 -05:00
topic-post.scss UX: fix topic map link expansion hover (#25822) 2024-02-22 15:47:38 -05:00
topic-summary.scss A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
topic.scss FIX: better supports ipad and hub footer nav (#25518) 2024-02-01 10:24:44 +01:00
upload.scss
user-badges.scss UX: impove badge granted spacing with grid (#24150) 2023-10-30 10:55:01 -04:00
user-tips.scss DEV: FloatKit (#23650) 2023-09-26 13:39:52 +02:00
user.scss UX: clean up some label and form inconsistencies, reduce excess bolding (#25701) 2024-02-15 11:27:51 -05:00