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

Add Corteza studio UI personalization feature #1469

Merged
merged 1 commit into from Oct 31, 2023

Conversation

KinyaElGrande
Copy link
Contributor

@KinyaElGrande KinyaElGrande commented Oct 6, 2023

Ref: #1267

Corteza Studio PR

This PR introduces a new feature that empowers users to personalize Corteza web applications according to their preferences using corteza main sass variables as branding parameters [white, black, primary, secondary, success, warning, danger, light,extra-light, dark, tertiary, gray-200, body-bg]. Something to note, however, when a sass variable for example $primary is defined in the custom CSS editor, it will take precedence over branding variables.
In case of any sass-related error, the default CSS which is compiled and minified Bootstrap SASS, Bootstrap-Vue SASS and custom-webapp sass variables will be returned.

Additionally, SASS support has been integrated into the Corteza Server. However, users will need to install Dart-SASS locally or in the deployment environment, as detailed in the setup instructions provided here.

Major change introduced

Most of the SASS processing has been moved to the BE this includes; Bootstrap SASS, Bootstrap-Vue SASS, and custom webapp sass variables.

It is important to note that this change hasn't affected Custom CSS functionality

Branding Editor Screenshot

Screenshot 2023-10-25 at 14 25 56

Video demo

corteza-studio.mov

Checklist when submitting a final (!draft) PR

  • Commits are tidied up, squashed if needed and follow guidelines in CONTRIBUTING.md
  • Code builds
  • All existing tests pass
  • All new critical code is covered by tests
  • PR is linked to the relevant issue(s)
  • Rebased with the target branch

@KinyaElGrande KinyaElGrande linked an issue Oct 6, 2023 that may be closed by this pull request
@KinyaElGrande KinyaElGrande force-pushed the 2023.9.x-corteza-studio branch 2 times, most recently from eab0ec5 to 3e3e595 Compare October 6, 2023 08:20
@KinyaElGrande KinyaElGrande force-pushed the 2023.9.x-corteza-studio branch 4 times, most recently from b912418 to 342910e Compare October 11, 2023 08:58
Copy link
Member

@tjerman tjerman left a comment

Choose a reason for hiding this comment

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

We'll need to do a bit of refactoring to clean it up and make it a bit friendlier to use. Also, please rebase so my changes don't show up in the diff (needles bloating).

Other then that, back-end stuff looking decent already

server/assets/embed.go Outdated Show resolved Hide resolved
server/assets/embed.go Outdated Show resolved Hide resolved
server/pkg/webapp/serve.go Outdated Show resolved Hide resolved
server/pkg/webapp/serve.go Show resolved Hide resolved
server/pkg/webapp/serve.go Show resolved Hide resolved
@KinyaElGrande KinyaElGrande force-pushed the 2023.9.x-corteza-studio branch 7 times, most recently from 850455b to 4c95f59 Compare October 24, 2023 08:17
Copy link
Member

@tjerman tjerman left a comment

Choose a reason for hiding this comment

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

Some meta bits here and there

server/app/options/webapp.cue Outdated Show resolved Hide resolved
server/assets/embed.go Outdated Show resolved Hide resolved
server/pkg/sass/processor.go Outdated Show resolved Hide resolved
server/pkg/sass/processor.go Outdated Show resolved Hide resolved
server/pkg/sass/processor.go Outdated Show resolved Hide resolved
server/pkg/sass/processor.go Outdated Show resolved Hide resolved
server/pkg/sass/processor.go Outdated Show resolved Hide resolved
@KinyaElGrande KinyaElGrande force-pushed the 2023.9.x-corteza-studio branch 3 times, most recently from 1e76f94 to f08b964 Compare October 25, 2023 12:02
Copy link
Member

@tjerman tjerman left a comment

Choose a reason for hiding this comment

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

1+1 bits left; do take a quick look please

server/pkg/sass/processor.go Outdated Show resolved Hide resolved
server/pkg/sass/processor.go Outdated Show resolved Hide resolved
Copy link
Member

@tjerman tjerman left a comment

Choose a reason for hiding this comment

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

I think this looks decent now!

What I'd consider is making the system service not just clear out the cache, but do the actual re-computation. It'll probably not change much, but could be a bit better.

Copy link
Member

@tjerman tjerman left a comment

Choose a reason for hiding this comment

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

A few notes but lgtm as before 👍

server/system/service/settings.go Show resolved Hide resolved
server/pkg/sass/processor.go Show resolved Hide resolved
@katrinDY
Copy link
Contributor

  • Getting this issue in compose:
Screenshot 2023-10-30 at 17 47 55 - Getting this is err when I open Custom CSS editor modal ![12](https://github.com/cortezaproject/corteza/assets/85161724/d857b7a8-036e-41bd-aa6f-cab1b6aa6182) - Think it's a good idea to add a way to undo a color change. Maybe add a set to default btn. If I change a color and wanna undo it, I gotta change the page and go back to UI settings. :( Discuss with Jože before hopping onto this - Color changes in admin aren't applied to privacy, reporter, and wf - Colors in privacy, reporter, and wf aren't the default ones Screenshot 2023-10-30 at 18 15 07 Screenshot 2023-10-30 at 18 14 59 Screenshot 2023-10-30 at 18 14 50 - Please, rebase with .9 because the submit btn for custom css is missing. Can't submit changes without the btn

@KinyaElGrande KinyaElGrande force-pushed the 2023.9.x-corteza-studio branch 2 times, most recently from f7e5e20 to b04c775 Compare October 31, 2023 12:46
@KinyaElGrande KinyaElGrande merged commit e426966 into 2023.9.x Oct 31, 2023
1 check passed
@KinyaElGrande KinyaElGrande deleted the 2023.9.x-corteza-studio branch October 31, 2023 12:52
@KinyaElGrande
Copy link
Contributor Author

@katrinDY good observation I almost missed that..I've fixed that on my latest commit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Corteza studio
5 participants