From 20b099ad2d24066493bd6493e34684f10d119ae7 Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Mon, 13 Nov 2023 16:32:05 +0100 Subject: [PATCH] outfactor color-schemes --- backend/experiment/actions/form.py | 14 +--- backend/experiment/actions/styles.py | 3 +- backend/experiment/actions/wrappers.py | 2 +- backend/experiment/rules/categorization.py | 2 +- frontend/src/components/Question/Question.js | 3 +- .../src/components/Question/_ButtonArray.scss | 65 ++++----------- .../src/components/Question/_IconRange.js | 6 +- .../src/components/Question/_RangeTitle.js | 2 +- frontend/src/index.scss | 1 + frontend/src/scss/color-schemes.scss | 81 +++++++++++++++++++ frontend/src/scss/variables.scss | 3 + 11 files changed, 110 insertions(+), 72 deletions(-) create mode 100644 frontend/src/scss/color-schemes.scss diff --git a/backend/experiment/actions/form.py b/backend/experiment/actions/form.py index 446d13824..6dd7257de 100644 --- a/backend/experiment/actions/form.py +++ b/backend/experiment/actions/form.py @@ -1,7 +1,7 @@ from django.conf import settings from django.utils.translation import gettext_lazy as _ -from .styles import STYLE_NEUTRAL, STYLE_BOOLEAN_NEGATIVE_FIRST +from .styles import STYLE_NEUTRAL, STYLE_BOOLEAN_NEGATIVE_FIRST, STYLE_GRADIENT_7 from .base_action import BaseAction class Question(BaseAction): @@ -68,7 +68,7 @@ def __init__(self, choices=None, **kwargs): 'yes': _('Yes') } self.view = 'BUTTON_ARRAY' - self.style = STYLE_BOOLEAN_NEGATIVE_FIRST + self.style = {STYLE_BOOLEAN_NEGATIVE_FIRST: True, 'buttons-large-gap': True} class ChoiceQuestion(Question): def __init__(self, choices, min_values=1, **kwargs): @@ -157,15 +157,7 @@ def __init__(self, scale_steps=7, likert_view='ICON_RANGE', **kwargs): 6: 'fa-face-frown-open', 7: 'fa-face-angry', } - self.config = {'icons':True, 'colors': ['#d843e2', '#c863e8', '#bb7ae9','#ab86f1', '#8b9bfa', '#42b5ff', '#0CC7F1']} - elif scale_steps == 5: - self.choices = { - 1: _("Strongly Disagree"), - 2: _("Disagree"), - 3: _("Neither Agree nor Disagree"), # Undecided - 4: _("Agree"), - 5: _("Strongly Agree"), - } + self.style = STYLE_GRADIENT_7 class Form(BaseAction): ''' Form is a view which brings together an array of questions with submit and optional skip button diff --git a/backend/experiment/actions/styles.py b/backend/experiment/actions/styles.py index fcdbc04cd..22ae0a248 100644 --- a/backend/experiment/actions/styles.py +++ b/backend/experiment/actions/styles.py @@ -3,4 +3,5 @@ STYLE_BLUE = 'blue' STYLE_PINK = 'pink' STYLE_BOOLEAN = 'boolean' -STYLE_BOOLEAN_NEGATIVE_FIRST = 'boolean-negative-first' \ No newline at end of file +STYLE_BOOLEAN_NEGATIVE_FIRST = 'boolean-negative-first' +STYLE_GRADIENT_7 = 'gradient-7' \ No newline at end of file diff --git a/backend/experiment/actions/wrappers.py b/backend/experiment/actions/wrappers.py index 85b56e029..90891fe63 100644 --- a/backend/experiment/actions/wrappers.py +++ b/backend/experiment/actions/wrappers.py @@ -21,7 +21,7 @@ def two_alternative_forced(session, section, choices, expected_response=None, st 'BUTTON' ) key = 'choice' - button_style = {'invisible-text': True, 'buttons-large-gap': True} + button_style = {'invisible-text': True, 'buttons-large-gap': True, 'buttons-large-text': True} button_style.update(style) question = ChoiceQuestion( key=key, diff --git a/backend/experiment/rules/categorization.py b/backend/experiment/rules/categorization.py index 1926ab9d5..c4a11c663 100644 --- a/backend/experiment/rules/categorization.py +++ b/backend/experiment/rules/categorization.py @@ -510,5 +510,5 @@ def get_title(self, session): }, submits=True, is_skippable=False, - style={'buttons-large-gap': True, 'boolean': True} + style={'buttons-large-gap': True, 'buttons-large-text': True, 'boolean': True} ) diff --git a/frontend/src/components/Question/Question.js b/frontend/src/components/Question/Question.js index ae48751bd..512e12fa9 100644 --- a/frontend/src/components/Question/Question.js +++ b/frontend/src/components/Question/Question.js @@ -28,7 +28,6 @@ const Question = ({ onChange, id, active, - style, emphasizeTitle = false, }) => { const [value, setValue] = useState(question.value || ""); @@ -44,7 +43,7 @@ const Question = ({ value, question, active, - style, + style: question.style, emphasizeTitle, onChange: registerChange, }; diff --git a/frontend/src/components/Question/_ButtonArray.scss b/frontend/src/components/Question/_ButtonArray.scss index fe57753af..f6374c085 100644 --- a/frontend/src/components/Question/_ButtonArray.scss +++ b/frontend/src/components/Question/_ButtonArray.scss @@ -14,7 +14,20 @@ .btn-group-toggle-custom{ display: flex; - column-gap: 20px; + column-gap: 3rem; + + &.buttons-large-gap { + column-gap: 5rem; + } + + &.buttons-large-text { + font-size: 1.3rem; + } + + .btn { + min-width: 4rem; + } + input{ display: none; @@ -26,54 +39,4 @@ } } } - - .buttons-large-gap { - column-gap: 5rem; - font-size: 1.3rem; - } -} - -.boolean { - .btn-secondary:nth-of-type(1) { - @include btn-style($teal); - } - .btn-secondary:nth-of-type(2) { - @include btn-style($yellow); - } - .btn-secondary:last-of-type { - @include btn-style($red); - } } - -.boolean-negative-first { - .btn-secondary:nth-of-type(1) { - @include btn-style($red); - } - .btn-secondary:nth-of-type(2) { - @include btn-style($yellow); - } - .btn-secondary:last-of-type { - @include btn-style($teal); - } -} - -.neutral { - .btn:nth-of-type(1) { - @include btn-style($blue); - &.submit { - @include btn-style($pink); - } - } - .btn:nth-of-type(2) { - @include btn-style($yellow); - } -} - -.neutral-inverted { - .btn:nth-of-type(1) { - @include btn-style($yellow); - } - .btn:nth-of-type(2) { - @include btn-style($blue); - } -} \ No newline at end of file diff --git a/frontend/src/components/Question/_IconRange.js b/frontend/src/components/Question/_IconRange.js index 0f85f3f81..210cfec6f 100644 --- a/frontend/src/components/Question/_IconRange.js +++ b/frontend/src/components/Question/_IconRange.js @@ -2,11 +2,9 @@ import React from "react"; import Slider from "react-rangeslider"; import classNames from "classnames"; -import RangeLimits from "./_RangeLimits"; import RangeTitle from "./_RangeTitle"; -import { renderLabel } from "../../util/label"; -const IconRange = ({ question, value, onChange, emphasizeTitle }) => { +const IconRange = ({ question, value, style, onChange, emphasizeTitle }) => { const emptyValue = !value; const keys = Object.keys(question.choices); @@ -24,7 +22,7 @@ const IconRange = ({ question, value, onChange, emphasizeTitle }) => { } return ( -
+
{renderLabel(question.choices[value], "fa-2x")} + {renderLabel(question.choices[value], "fa-2x")} ) } diff --git a/frontend/src/index.scss b/frontend/src/index.scss index 319af4d17..b445b88f9 100644 --- a/frontend/src/index.scss +++ b/frontend/src/index.scss @@ -4,6 +4,7 @@ @import "scss/layout"; @import "scss/animations"; @import "scss/elements"; +@import "scss/color-schemes"; @import "scss/fontawesome/include.scss"; diff --git a/frontend/src/scss/color-schemes.scss b/frontend/src/scss/color-schemes.scss new file mode 100644 index 000000000..7d0bd0b2d --- /dev/null +++ b/frontend/src/scss/color-schemes.scss @@ -0,0 +1,81 @@ +.boolean { + // buttons + .btn-secondary { + &:first-of-type { + @include btn-style($positive); + } + &:nth-of-type(2) { + @include btn-style($yellow); + } + &:last-of-type { + @include btn-style($negative); + } + } +} + +.boolean-negative-first { + // buttons + .btn-secondary { + &:first-of-type { + @include btn-style($negative); + } + &:nth-of-type(2) { + @include btn-style($yellow); + } + &:last-of-type { + @include btn-style($positive); + } + } +} + +.neutral { + // buttons + .btn-secondary { + &:first-of-type { + @include btn-style($yellow); + } + &:last-of-type { + @include btn-style($blue); + } + } +} + +.neutral-inverted { + // buttons + .btn-secondary { + &:first-of-type { + @include btn-style($blue); + } + &:last-of-type { + @include btn-style($yellow); + } + } +} + +.btn.submit { + @include btn-style($primary); +} + +.gradient-7 { + .is-1 { + color: #d843e2; + } + .is-2 { + color: #c863e8; + } + .is-3 { + color: #bb7ae9; + } + .is-4 { + color: #ab86f1; + } + .is-5 { + color: #8b9bfa; + } + .is-6 { + color: #42b5ff; + } + .is-7 { + color: #0cc7f1; + } +} \ No newline at end of file diff --git a/frontend/src/scss/variables.scss b/frontend/src/scss/variables.scss index 8d37573d1..f2fdee84d 100644 --- a/frontend/src/scss/variables.scss +++ b/frontend/src/scss/variables.scss @@ -10,8 +10,11 @@ $indigo: #2b2bee; $gray: #bdbebf; $gray-900: #212529; $black: $gray-900; + $primary: $pink; $success: $teal; +$positive: $teal; +$negative: $red; $secondary: $gray-900; $info: $blue;