DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Update studio themes provision

Browse Source
This commit is contained in:
kinyaelgrande 2023-12-20 14:31:38 +03:00 committed by Mumbi Francis
parent dcc0876254
commit a9d1bc098c
9 changed files with 173 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
View File

@ -120,19 +120,19 @@ export default {
data () {
return {
themeInputs: [
'white',
'black',
'primary',
'black',
'white',
'secondary',
'gray-200',
'success',
'warning',
'danger',
'light',
'extra-light',
'dark',
'tertiary',
'gray-200',
'body-bg',
'tertiary',
],
lightModeVariables: {
'white': '#FFFFFF',

5
client/web/compose/src/app.js
View File

@ -56,6 +56,11 @@ export default (options = {}) => {
.setHeader('Content-Language', user.meta.preferredLanguage)
}
// switch the webapp theme based on user preference
if (user.meta.theme) {
document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
}
// ref to vue is needed inside compose helper
// load and register bundle and list of client/server scripts

5
client/web/discovery/src/App.vue
View File

@ -28,6 +28,11 @@ export default {
this.$i18n.i18next.changeLanguage(user.meta.preferredLanguage)
}
// switch the webapp theme based on user preference
if (user.meta.theme) {
document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
}
this.$Settings.init({ api: this.$SystemAPI }).then(() => {
this.loaded = true

5
client/web/one/src/app.js
View File

@ -37,6 +37,11 @@ export default (options = {}) => {
this.$i18n.i18next.changeLanguage(user.meta.preferredLanguage)
}
// switch the webapp theme based on user preference
if (user.meta.theme) {
document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
}
this.$store.dispatch('wfPrompts/update')
return this.$Settings.init({ api: this.$SystemAPI }).finally(() => {

5
client/web/privacy/src/app.js
View File

@ -36,6 +36,11 @@ export default (options = {}) => {
this.$i18n.i18next.changeLanguage(user.meta.preferredLanguage)
}
// switch the webapp theme based on user preference
if (user.meta.theme) {
document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
}
// Load effective permissions
this.$store.dispatch('rbac/load')

5
client/web/reporter/src/app.js
View File

@ -44,6 +44,11 @@ export default (options = {}) => {
.setHeader('Content-Language', user.meta.preferredLanguage)
}
// switch the webapp theme based on user preference
if (user.meta.theme) {
document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
}
// Load effective permissions
this.$store.dispatch('rbac/load')

5
client/web/workflow/src/app.js
View File

@ -34,6 +34,11 @@ export default (options = {}) => {
this.$i18n.i18next.changeLanguage(user.meta.preferredLanguage)
}
// switch the webapp theme based on user preference
if (user.meta.theme) {
document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
}
// Load effective permissions
this.$store.dispatch('rbac/load')

173
server/pkg/provision/stylesheet.go
View File

@ -10,8 +10,8 @@ import (
"strconv"
)
// updateWebappTheme is a function that provisions webapp themes.
// It migrates the old custom css and branding sass settings to the new webapp themes setting.
// updateWebappTheme is a function that provisions new webapp themes,
// and migrates the old custom css and branding sass settings to new webapp themes setting.
func updateWebappTheme(ctx context.Context, log *zap.Logger, s store.Storer) (err error) {
vv, _, err := store.SearchSettingValues(ctx, s, types.SettingsFilter{})
if err != nil {
@ -20,37 +20,62 @@ func updateWebappTheme(ctx context.Context, log *zap.Logger, s store.Storer) (er
oldCustomCSS := vv.FindByName("ui.custom-css")
oldBranding := vv.FindByName("ui.studio.branding-sass")
studioThemes := vv.FindByName("ui.studio.themes")
provisionTheme := func(name string, oldValue *types.SettingValue, themeIDs ...string) (err error) {
oldValueStr, err := strconv.Unquote(oldValue.Value.String())
//provision new studio themes setting
newThemes := processNewTheme()
if oldBranding.IsNull() && studioThemes.IsNull() {
err = provisionTheme(ctx, s, "ui.studio.themes", newThemes, log)
if err != nil {
return err
}
}
// provision old branding sass setting to studio themes setting
if !oldBranding.IsNull() {
themes, err := processOldTheme(oldBranding, sass.LightTheme, sass.DarkTheme)
if err != nil {
return err
}
var themes []types.Theme
for _, themeID := range themeIDs {
if len(themeIDs) == 2 {
themes = append(themes, types.Theme{
ID: themeID,
Values: oldValueStr,
})
continue
//append dark mode from new themes
themes = append(themes, newThemes[1])
err = provisionTheme(ctx, s, "ui.studio.themes", themes, log)
if err != nil {
return err
}
if themeID == sass.GeneralTheme {
themes = append(themes, types.Theme{
ID: themeID,
Values: oldValueStr,
})
continue
// delete old custom css and branding sass settings from the database
err = store.DeleteSettingValue(ctx, s, oldBranding)
if err != nil {
return err
}
}
themes = append(themes, types.Theme{
ID: themeID,
Values: "",
})
// provision custom CSS
if !oldCustomCSS.IsNull() {
themes, err := processOldTheme(oldCustomCSS, sass.GeneralTheme, sass.LightTheme, sass.DarkTheme)
if err != nil {
return err
}
err = provisionTheme(ctx, s, "ui.studio.custom-css", themes, log)
if err != nil {
return err
}
// delete old custom css and branding sass settings from the database
err = store.DeleteSettingValue(ctx, s, oldCustomCSS)
if err != nil {
return err
}
}
return nil
}
func provisionTheme(ctx context.Context, s store.Storer, name string, themes []types.Theme, log *zap.Logger) (err error) {
value, err := json.Marshal(themes)
if err != nil {
return err
@ -67,27 +92,87 @@ func updateWebappTheme(ctx context.Context, log *zap.Logger, s store.Storer) (er
return err
}
// delete old custom css and branding sass settings from the database
err = store.DeleteSettingValue(ctx, s, oldValue)
if err != nil {
return err
}
return nil
}
// provision custom CSS
if !oldCustomCSS.IsNull() {
err = provisionTheme("ui.studio.custom-css", oldCustomCSS, sass.GeneralTheme, sass.LightTheme, sass.DarkTheme)
if err != nil {
return err
}
}
// provision branding sass
if !oldBranding.IsNull() {
err = provisionTheme("ui.studio.themes", oldBranding, sass.LightTheme, sass.DarkTheme)
}
return nil
}
func processNewTheme() (themes []types.Theme) {
lightModeValues := `
{
"white":"#FFFFFF",
"black":"#162425",
"primary":"#2E15CCFF",
"secondary":"#758D9B",
"success":"#43AA8B",
"warning":"#E2A046",
"danger":"#E54122",
"light":"#E4E9EF",
"extra-light":"#F3F5F7",
"dark":"#162425",
"tertiary":"#5E727E",
"gray-200":"#F9FAFB",
"body-bg":"#F9FAFB"
}`
darkModeValues := `
{
"white":"#162425",
"black":"#FFFFFF",
"primary":"#2E15CCFF",
"secondary":"#758D9B",
"success":"#43AA8B",
"warning":"#E2A046",
"danger":"#E54122",
"light":"#E4E9EF",
"extra-light":"#F3F5F7",
"dark":"#162425",
"tertiary":"#5E727E",
"gray-200":"#F9FAFB",
"body-bg":"#F9FAFB"
}`
themes = []types.Theme{
{
ID: "light",
Values: lightModeValues,
},
{
ID: "dark",
Values: darkModeValues,
},
}
return themes
}
func processOldTheme(oldValue *types.SettingValue, themeIDs ...string) (themes []types.Theme, err error) {
oldValueStr, err := strconv.Unquote(oldValue.Value.String())
if err != nil {
return
}
for _, themeID := range themeIDs {
//append only light mode on studio themes
if len(themeIDs) == 2 {
themes = append(themes, types.Theme{
ID: themeID,
Values: oldValueStr,
})
break
}
if themeID == sass.GeneralTheme {
themes = append(themes, types.Theme{
ID: themeID,
Values: oldValueStr,
})
continue
}
themes = append(themes, types.Theme{
ID: themeID,
Values: "",
})
}
return
}

17
server/system/service/stylesheet.go
View File

@ -42,7 +42,6 @@ func GenerateCSS(settings *types.AppSettings, sassDirPath string, log *zap.Logge
transpiler := sass.DartSassTranspiler(log)
// transpile sass to css for each theme
if studio.Themes != nil {
for _, theme := range studio.Themes {
if studio.CustomCSS == nil {
err := sass.Transpile(transpiler, log, theme.ID, theme.Values, "", sassDirPath)
@ -58,22 +57,6 @@ func GenerateCSS(settings *types.AppSettings, sassDirPath string, log *zap.Logge
continue
}
}
} else {
if studio.CustomCSS != nil {
for key := range customCSSMap {
if key == sass.GeneralTheme {
continue
}
customCSS := processCustomCSS(key, customCSSMap)
// transpile sass to css
err := sass.Transpile(transpiler, log, key, "", customCSS, sassDirPath)
if err != nil {
continue
}
}
}
}
return
}