From e7283b680682fa4e85a6b3f5af003b0336cf0a65 Mon Sep 17 00:00:00 2001 From: Heitor Mattosinho Date: Thu, 3 Sep 2020 08:21:00 -0300 Subject: [PATCH 1/2] refactor (choose template): line height changed for title --- src/adonisjs/public/infra/css/common-author.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/adonisjs/public/infra/css/common-author.css b/src/adonisjs/public/infra/css/common-author.css index 5e5721f7c..b962ad215 100644 --- a/src/adonisjs/public/infra/css/common-author.css +++ b/src/adonisjs/public/infra/css/common-author.css @@ -83,6 +83,7 @@ nav.navbar { font-size: 18px; font-weight: bold; color: #808080; + line-height: 1.2; margin-right: 3%; margin-left: 3%; } From 77d5e3b63f1462e48e27955e768780a7ae9db30d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= Date: Sun, 6 Sep 2020 20:24:08 -0300 Subject: [PATCH 2/2] feat (theme): customizable themes --- src/adonisjs/public/author/js/author.js | 4 ++- .../public/dccs/components/dcc-block.js | 5 ++- src/adonisjs/public/infra/basic.js | 35 ++++++++++++++++++- src/adonisjs/public/player/js/player.js | 3 +- .../templates/simple/case/eletro_challenge.md | 2 +- .../templates/simple/case/quiz_sequence.md | 2 +- .../templates/simple/case/quiz_short.md | 2 +- .../templates/simple/case/radio_challenge.md | 2 +- .../templates/simple/case/virtual_visit.md | 2 +- .../themes/simple/css/blue/dcc-trigger.css | 5 +++ .../public/themes/simple/css/blue/theme.css | 5 +++ .../public/themes/simple/css/dcc-trigger.css | 1 - .../themes/simple/css/default/dcc-trigger.css | 5 +++ .../themes/simple/css/default/theme.css | 5 +++ .../themes/simple/css/green/dcc-trigger.css | 5 +++ .../public/themes/simple/css/green/theme.css | 5 +++ .../themes/simple/css/purple/dcc-trigger.css | 5 +++ .../public/themes/simple/css/purple/theme.css | 5 +++ .../themes/simple/css/red/dcc-trigger.css | 5 +++ .../public/themes/simple/css/red/theme.css | 5 +++ .../public/themes/simple/css/theme.css | 1 - .../themes/simple/css/yellow/dcc-trigger.css | 5 +++ .../public/themes/simple/css/yellow/theme.css | 5 +++ src/adonisjs/public/translator/translator.js | 3 +- 24 files changed, 110 insertions(+), 12 deletions(-) create mode 100644 src/adonisjs/public/themes/simple/css/blue/dcc-trigger.css create mode 100644 src/adonisjs/public/themes/simple/css/blue/theme.css create mode 100644 src/adonisjs/public/themes/simple/css/default/dcc-trigger.css create mode 100644 src/adonisjs/public/themes/simple/css/default/theme.css create mode 100644 src/adonisjs/public/themes/simple/css/green/dcc-trigger.css create mode 100644 src/adonisjs/public/themes/simple/css/green/theme.css create mode 100644 src/adonisjs/public/themes/simple/css/purple/dcc-trigger.css create mode 100644 src/adonisjs/public/themes/simple/css/purple/theme.css create mode 100644 src/adonisjs/public/themes/simple/css/red/dcc-trigger.css create mode 100644 src/adonisjs/public/themes/simple/css/red/theme.css create mode 100644 src/adonisjs/public/themes/simple/css/yellow/dcc-trigger.css create mode 100644 src/adonisjs/public/themes/simple/css/yellow/theme.css diff --git a/src/adonisjs/public/author/js/author.js b/src/adonisjs/public/author/js/author.js index 885f2499e..af01bea95 100644 --- a/src/adonisjs/public/author/js/author.js +++ b/src/adonisjs/public/author/js/author.js @@ -287,7 +287,9 @@ class AuthorManager { this._knots = this._compiledCase.knots - Basic.service.currentThemeFamily = this._compiledCase.theme + // Basic.service.currentThemeFamily = this._compiledCase.theme + console.log('=== setting theme family') + Basic.service.composedThemeFamily(this._compiledCase.theme) if (this._compiledCase.title) { this._currentCaseTitle = this._compiledCase.title } console.log('***** COMPILED CASE *****') diff --git a/src/adonisjs/public/dccs/components/dcc-block.js b/src/adonisjs/public/dccs/components/dcc-block.js index f9dc996a6..f4335cd10 100644 --- a/src/adonisjs/public/dccs/components/dcc-block.js +++ b/src/adonisjs/public/dccs/components/dcc-block.js @@ -171,7 +171,10 @@ class DCCBlock extends DCCMultiVisual { } else if (this.xstyle == 'theme') { html = "" + html + "' \n" + + "" + html } const template = document.createElement('template') diff --git a/src/adonisjs/public/infra/basic.js b/src/adonisjs/public/infra/basic.js index 83cb7d6c9..7ad6cac53 100644 --- a/src/adonisjs/public/infra/basic.js +++ b/src/adonisjs/public/infra/basic.js @@ -10,6 +10,7 @@ class Basic { // initial values of shared states this._currentThemeFamily = Basic.standardThemeFamily this._currentThemeCSS = null + this._currentCustomCSS = null this.currentCaseId = null /* @@ -48,13 +49,40 @@ class Basic { } set currentThemeFamily (newValue) { - // Translator.instance.currentThemeFamily = newValue; this._currentThemeFamily = newValue this._currentThemeCSS = this.replaceStyle(document, this._currentThemeCSS, newValue) } + get currentCustomTheme () { + return this._currentCustomTheme + } + + set currentCustomTheme (newValue) { + this._currentCustomTheme = newValue + + this._currentCustomCSS = + this.replaceStyle(document, this._currentCustomCSS, this.currentThemeFamily, + newValue + '/theme.css') + } + + composedThemeFamily (themeFamily) { + const dtf = this.decomposeThemeFamily(themeFamily); + this.currentThemeFamily = dtf.family + this.currentCustomTheme = dtf.custom + } + + decomposeThemeFamily (themeFamily) { + let family = themeFamily; + let custom = "default"; + if (family.includes("(")) { + custom = family.substring(family.indexOf('(') + 1, family.length - 1) + family = family.substring(0, family.indexOf('(')) + } + return {family: family, custom: custom} + } + /* requestCurrentThemeFamily(topic, message) { MessageBus.ext.publish(MessageBus.buildResponseTopic(topic, message), @@ -244,6 +272,11 @@ class Basic { '/css/' + cssFile } + themeCustomStyleResolver (cssFile) { + return this._rootPath + 'themes/' + this.currentThemeFamily + + '/css/' + this.currentCustomTheme + "/" + cssFile + } + systemStyleResolver (cssFile) { return this._rootPath + 'themes/' + Basic.systemThemeFamily + '/css/' + cssFile diff --git a/src/adonisjs/public/player/js/player.js b/src/adonisjs/public/player/js/player.js index c866c2962..f02b1f5b6 100644 --- a/src/adonisjs/public/player/js/player.js +++ b/src/adonisjs/public/player/js/player.js @@ -274,7 +274,8 @@ class PlayerManager { console.log('***** COMPILED CASE *****') console.log(this._compiledCase) this._knots = this._compiledCase.knots - Basic.service.currentThemeFamily = this._compiledCase.theme + // Basic.service.currentThemeFamily = this._compiledCase.theme + Basic.service.composedThemeFamily(this._compiledCase.theme) } _caseFlow () { diff --git a/src/adonisjs/public/templates/simple/case/eletro_challenge.md b/src/adonisjs/public/templates/simple/case/eletro_challenge.md index 6ef6c673e..238f8f590 100644 --- a/src/adonisjs/public/templates/simple/case/eletro_challenge.md +++ b/src/adonisjs/public/templates/simple/case/eletro_challenge.md @@ -31,7 +31,7 @@ ___ Flow ___ ___ Data ___ -* theme: simple +* theme: simple(yellow) * namespaces: * evidence: http://purl.org/versum/evidence/ * templates: diff --git a/src/adonisjs/public/templates/simple/case/quiz_sequence.md b/src/adonisjs/public/templates/simple/case/quiz_sequence.md index 04effbc9d..c56c76360 100644 --- a/src/adonisjs/public/templates/simple/case/quiz_sequence.md +++ b/src/adonisjs/public/templates/simple/case/quiz_sequence.md @@ -47,7 +47,7 @@ ___ Flow ___ ___ Data ___ -* theme: simple +* theme: simple(purple) * namespaces: * evidence: http://purl.org/versum/evidence/ * templates: diff --git a/src/adonisjs/public/templates/simple/case/quiz_short.md b/src/adonisjs/public/templates/simple/case/quiz_short.md index 411c8e56e..47c02f94c 100644 --- a/src/adonisjs/public/templates/simple/case/quiz_short.md +++ b/src/adonisjs/public/templates/simple/case/quiz_short.md @@ -35,7 +35,7 @@ ___ Flow ___ ___ Data ___ -* theme: simple +* theme: simple(red) * namespaces: * evidence: http://purl.org/versum/evidence/ * templates: diff --git a/src/adonisjs/public/templates/simple/case/radio_challenge.md b/src/adonisjs/public/templates/simple/case/radio_challenge.md index 6ef6c673e..66cb6bc1e 100644 --- a/src/adonisjs/public/templates/simple/case/radio_challenge.md +++ b/src/adonisjs/public/templates/simple/case/radio_challenge.md @@ -31,7 +31,7 @@ ___ Flow ___ ___ Data ___ -* theme: simple +* theme: simple(green) * namespaces: * evidence: http://purl.org/versum/evidence/ * templates: diff --git a/src/adonisjs/public/templates/simple/case/virtual_visit.md b/src/adonisjs/public/templates/simple/case/virtual_visit.md index c674964ca..411eb0bfc 100644 --- a/src/adonisjs/public/templates/simple/case/virtual_visit.md +++ b/src/adonisjs/public/templates/simple/case/virtual_visit.md @@ -58,7 +58,7 @@ ___ Flow ___ ___ Data ___ -* theme: simple +* theme: simple(blue) * namespaces: * evidence: http://purl.org/versum/evidence/ * templates: diff --git a/src/adonisjs/public/themes/simple/css/blue/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/blue/dcc-trigger.css new file mode 100644 index 000000000..ea1c8f63f --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/blue/dcc-trigger.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.dcc-trigger-theme { + background-color: #234a98; +} diff --git a/src/adonisjs/public/themes/simple/css/blue/theme.css b/src/adonisjs/public/themes/simple/css/blue/theme.css new file mode 100644 index 000000000..eafcd0180 --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/blue/theme.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.styt-button, .styt-button-option { + background-color: #234a98; +} \ No newline at end of file diff --git a/src/adonisjs/public/themes/simple/css/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/dcc-trigger.css index 6113aa084..134bccbe3 100644 --- a/src/adonisjs/public/themes/simple/css/dcc-trigger.css +++ b/src/adonisjs/public/themes/simple/css/dcc-trigger.css @@ -14,7 +14,6 @@ margin-right: auto; text-align: center; - background-color: #ba2027; color: white; /* padding: 12px 0px 0px 0px; */ border-radius: 10px; diff --git a/src/adonisjs/public/themes/simple/css/default/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/default/dcc-trigger.css new file mode 100644 index 000000000..7599db95d --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/default/dcc-trigger.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.dcc-trigger-theme { + background-color: gray; +} diff --git a/src/adonisjs/public/themes/simple/css/default/theme.css b/src/adonisjs/public/themes/simple/css/default/theme.css new file mode 100644 index 000000000..3e60e708e --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/default/theme.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.styt-button, .styt-button-option { + background-color: gray; +} \ No newline at end of file diff --git a/src/adonisjs/public/themes/simple/css/green/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/green/dcc-trigger.css new file mode 100644 index 000000000..7f31bc288 --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/green/dcc-trigger.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.dcc-trigger-theme { + background-color: #00903a; +} diff --git a/src/adonisjs/public/themes/simple/css/green/theme.css b/src/adonisjs/public/themes/simple/css/green/theme.css new file mode 100644 index 000000000..372824587 --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/green/theme.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.styt-button, .styt-button-option { + background-color: #00903a; +} \ No newline at end of file diff --git a/src/adonisjs/public/themes/simple/css/purple/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/purple/dcc-trigger.css new file mode 100644 index 000000000..8f99b8338 --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/purple/dcc-trigger.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.dcc-trigger-theme { + background-color: #650061; +} diff --git a/src/adonisjs/public/themes/simple/css/purple/theme.css b/src/adonisjs/public/themes/simple/css/purple/theme.css new file mode 100644 index 000000000..a716d71c3 --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/purple/theme.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.styt-button, .styt-button-option { + background-color: #650061; +} \ No newline at end of file diff --git a/src/adonisjs/public/themes/simple/css/red/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/red/dcc-trigger.css new file mode 100644 index 000000000..c777002e6 --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/red/dcc-trigger.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.dcc-trigger-theme { + background-color: #ba2027; +} diff --git a/src/adonisjs/public/themes/simple/css/red/theme.css b/src/adonisjs/public/themes/simple/css/red/theme.css new file mode 100644 index 000000000..839086e8f --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/red/theme.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.styt-button, .styt-button-option { + background-color: #ba2027; +} \ No newline at end of file diff --git a/src/adonisjs/public/themes/simple/css/theme.css b/src/adonisjs/public/themes/simple/css/theme.css index 1f696fe39..856e151fb 100644 --- a/src/adonisjs/public/themes/simple/css/theme.css +++ b/src/adonisjs/public/themes/simple/css/theme.css @@ -72,7 +72,6 @@ margin-right: auto; text-align: center; - background-color: #ba2027; color: white; /* padding: 12px 0px 0px 0px; */ border-radius: 10px; diff --git a/src/adonisjs/public/themes/simple/css/yellow/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/yellow/dcc-trigger.css new file mode 100644 index 000000000..60d77c3ba --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/yellow/dcc-trigger.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.dcc-trigger-theme { + background-color: #839b27; +} diff --git a/src/adonisjs/public/themes/simple/css/yellow/theme.css b/src/adonisjs/public/themes/simple/css/yellow/theme.css new file mode 100644 index 000000000..e19cc0000 --- /dev/null +++ b/src/adonisjs/public/themes/simple/css/yellow/theme.css @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +.styt-button, .styt-button-option { + background-color: #839b27; +} \ No newline at end of file diff --git a/src/adonisjs/public/translator/translator.js b/src/adonisjs/public/translator/translator.js index 29effdda9..afa2e2480 100644 --- a/src/adonisjs/public/translator/translator.js +++ b/src/adonisjs/public/translator/translator.js @@ -57,7 +57,8 @@ class Translator { if (this._themeSettings) { delete this._themeSettings } if (compiledCase.theme) { const themeSt = await MessageBus.int.request( - 'data/theme_family/' + compiledCase.theme + '/settings') + 'data/theme_family/' + Basic.service.decomposeThemeFamily(compiledCase.theme).family + + '/settings') if (themeSt != null) { this._themeSettings = themeSt.message } }