Configurable styles #1953
Merged
Configurable styles #1953
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deployed to https://pr-1953.aam-digital.net/ |
TheSlimvReal
force-pushed
the
configurable_styles
branch
from
886e072
to
7b423fe
Compare
7 tasks
TheSlimvReal
force-pushed
the
configurable_styles
branch
from
7b423fe
to
5c77d5b
Compare
sleidig
reviewed
Aug 7, 2023
# Conflicts: # src/app/child-dev-project/children/child-block/child-block.component.html # src/app/core/analytics/analytics.service.ts # src/app/core/entity-components/entity-utils/dynamic-form-components/edit-photo/edit-photo.component.html # src/app/core/language/language.service.ts # src/app/core/ui/ui/ui.component.html # src/app/core/ui/ui/ui.component.ts # src/app/features/location/map-utils.ts # src/index.html # src/styles/themes/ndb-theme.scss # src/styles/variables/_ndb-light-theme.scss
TheSlimvReal
commented
Aug 22, 2023
TheSlimvReal
commented
Aug 28, 2023
| A200: var(--primary-A200, map-get(mat.$orange-palette, A200)), | ||
| A400: var(--primary-A400, map-get(mat.$orange-palette, A400)), | ||
| A700: var(--primary-A700, map-get(mat.$orange-palette, A700)), | ||
| contrast: map-get(mat.$orange-palette, contrast) |
There was a problem hiding this comment.
Contrast colors are not configurable and not adjusted based on the selected theme.
|
Should we also store the settings in the local storage in order to already apply them on startup? |
sleidig
requested changes
Sep 6, 2023
There was a problem hiding this comment.
the import module still has an orange background in some part. Otherwise looks and works great. Code also looks pretty good.
Great work, @TheSlimvReal ! :-)
...ic-datatypes/configurable-enum/configurable-enum-datatype/configurable-enum.datatype.spec.ts
Outdated
Show resolved
Hide resolved
| translationService.initDefaultLanguage(); | ||
| // Making locales enum available at runtime | ||
| enumService["cacheEnum"](availableLocales); |
There was a problem hiding this comment.
This looks dangerous to me ... but I can't think of another solution that is anywhere close to being that simple 🤔
src/app/core/site-settings/demo-site-settings-generator.service.ts
Outdated
Show resolved
Hide resolved
…urable_styles # Conflicts: # src/app/core/site-settings/site-settings.service.ts
# Conflicts: # src/app/core/entity/schema/entity-schema.service.ts # src/app/core/site-settings/site-settings.service.spec.ts # src/app/core/site-settings/site-settings.service.ts
|
Kudos, SonarCloud Quality Gate passed!
|
sleidig
approved these changes
Sep 8, 2023
|
🎉 This PR is included in version 3.24.0-master.6 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
sleidig
added a commit
that referenced
this pull request
Sep 13, 2023
this enables user-configured "white-label" design of the system in custom colors MIGRATION NECESSARY: see PR #1953 closes #1949 --------- This functionality has been developed for the project “codo”. codo is developed under the projects “Landungsbrücken – Patenschaften in Hamburg stärken” and “openTransfer Patenschaften”. It is funded through the program “Menschen stärken Menschen” by the German Federal Ministry of Family Affairs, Senior Citizens, Women and Youth. More information at https://github.com/codo-mentoring “Landungsbrücken – Patenschaften in Hamburg stärken” is a project of BürgerStiftung Hamburg in cooperation with the Mentor.Ring Hamburg. With a mix of networking opportunities, capacity building and financial support the project strengthens Hamburg’s scene of mentoring projects since its founding in 2016. The “Stiftung Bürgermut” foundation since 2007 supports the digital and real exchange of experiences and connections of active citizens. Within the federal program “Menschen stärken Menschen” the foundation as part of its program “openTransfer Patenschaften” offers support services for connecting, spreading and upskilling mentoring organisations across Germany. Diese Funktion wurde entwickelt für das Projekt codo. codo wird entwickelt im Rahmen der Projekte Landungsbrücken – Patenschaften in Hamburg stärken und openTransfer Patenschaften. Er ist gefördert durch das Bundesprogramm Menschen stärken Menschen des Bundesministeriums für Familie, Senioren, Frauen und Jugend. Mehr Informationen unter https://github.com/codo-mentoring “Landungsbrücken – Patenschaften in Hamburg stärken” ist ein Projekt der BürgerStiftung Hamburg in Kooperation mit dem Mentor.Ring Hamburg. Mit einer Mischung aus Vernetzungsangeboten, Qualifizierungsmaßnahmen und finanzieller Förderung stärkt das Projekt die Hamburger Szene der Patenschaftsprojekte seit der Gründung im Jahr 2016. Die Stiftung Bürgermut fördert seit 2007 den digitalen und realen Erfahrungsaustausch und die Vernetzung von engagierten Bürger:innen. Innerhalb des Bundesprogramms „Menschen stärken Menschen” bietet die Stiftung im Rahmen ihres Programms openTransfer Patenschaften Unterstützungsleistungen zur Vernetzung, Verbreitung und Qualifizierung von Patenschafts- und Mentoringorganisationen bundesweit. Co-authored-by: codo-mentoring <117934638+codo-mentoring@users.noreply.github.com> Co-authored-by: Sebastian <sebastian@aam-digital.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
see issue: #1949
Generally it is possible to use CSS variables to change the theme colors as well as the font family/style etc.
Colors
Here we have to assign a variable to each hue which is a bit cumbersome and also raises the question, how these values are generated (probably a user would just want to choose one color and all others should be derived from it).
To pick the colors according to an Material Design Color Palette is also not super straight forward.
There is no official API but some reverse engineered solutions (thread, solution 1 (npm package), solution 2 (newer npm package), solution 3 (code snippet)).
Alternatively, we could refer to a tool like this and allow user to copy paste the result from it.
Fonts
Changing the font works just like changing the colors but is much easier as we only need one variable for the font family.
The problem is where do we get the fonts from (dynamically)?
Most pages and the Angular Material docs use the Google Fonts API, which is however not GDPR compliant (IP is sent to Google).
We either have to download the fonts beforehand and include them statically which may result in outdated fonts and also reduces flexibility or use a nginx reverse proxy which which also doesn't seem to be the best idea (see this thread).
I would therefore recommend not to allow choosing a different font (I have never seen a website that allows to change a font).
Migration
user_apppermissions need to be extended withreadpermissions forSiteSettingsentity and manager permissions withupdate