Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style refactoring #1305

Merged
merged 20 commits into from
Jul 18, 2023
Merged

Style refactoring #1305

merged 20 commits into from
Jul 18, 2023

Conversation

alecarn
Copy link
Collaborator

@alecarn alecarn commented Jun 29, 2023

This is a big one, we refactored all the library style.

  • No more magic import each file know what to do.
  • Remove scss-bundle
  • Refactor the pipeline and migrate gulp script to use the native ng-packagr capabilities or node
  • Allow style composition
  • Remove gulp fix for @angular/cdk styles

TO TEST THIS PR, YOU NEED TO:

  1. Check this branch
  2. Delete the node_modules folder or @angular and stylus folder (unwanted fix is apply to @angular and stylus library)
  3. Launch a clean install "npm ci"

What is the current behavior? (You can also link to an open issue here)
All the prebuilt themes was bundled and loaded in each app

What is the new behavior?
Compile prebuilt themes seperately and load only the theme we need.

Does this PR introduce a breaking change? (check one with "x")

  • [x ] Yes
  • No

If this PR contains a breaking change, please describe the impact and migration path for existing applications:
The theming configuration has change. We need to check each application, who are not using prebuilt-themes. If your application configure manually the theme, please see the file demo/src/style.scss in the Demo and then the theme config

Other information:

@aziz-access
Copy link
Contributor

The Font-family not loaded also the font-size changed you can see it in the home page.

The "mat-toolbar" height changed .mat-toolbar-row, .mat-toolbar-single-row { height: 64px;}.


In "draw/measure/import-export/spatial-filter": the color and size of buttons 'mat-button-toggle' of the component 'mat-button-toggle-group' was changed:
the background color changed from background-color: #ffd740; to background-color: #e0e0e0;
From:
image
To:
image

you need to check "mat-button-toggle-group" and "mat-button-toggle" styles.


For "auth-form" component i found this
image

- fix eslint ignore Packages
- add IGO favicon
- add splash-screen
- fix sidenav background
- fix and standardize font-family
- fix button-toggle override
@alecarn
Copy link
Collaborator Author

alecarn commented Jul 4, 2023

  1. Normalize the font-family and avoir flickering (DONE)
  2. Mat-toolbar height is not the same (NOT DONE, This is the default style of Material. It's look like a old regression
  3. Button-toggle the accent color not apply (DONE)
  4. Authentication background should not over the sidenav (DONE)
  5. Button-toggle density is not the same
    There is an issue in the material-theme-override.scss, the density mixin is not available but it will be fixed in the @angular/material v15 update. They will export the density style to override it.

@pelord pelord merged commit 2ca6002 into next Jul 18, 2023
5 checks passed
@alecarn alecarn deleted the refact-styles branch July 19, 2023 10:07
@alecarn alecarn linked an issue Aug 28, 2023 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

refactor style management
3 participants