Skip to content

[Jetsurvey] Redesigning single and multiple choice questions #265

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.

Sign up for GitHub

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

Merged
florina-muntenescu merged 6 commits into from
Nov 4, 2020
Merged

[Jetsurvey] Redesigning single and multiple choice questions #265

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4354d04
[Jetsurvey] Styling the questions progress indicator
florina-muntenescu Oct 28, 2020
d75e4c1
[Jetsurvey] Styling Single and Multiple choice questions
florina-muntenescu Oct 31, 2020
77e548d
[Jetsurvey] Adding question description
florina-muntenescu Oct 31, 2020
8cec984
[Jetsurvey] Setting correct border and background colors
florina-muntenescu Nov 2, 2020
13d04f3
[Jetsurvey] Make the entire Row clickable
florina-muntenescu Nov 2, 2020
b2b8816
[Jetsurvey] Adding end padding to description
florina-muntenescu Nov 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[Jetsurvey] Styling Single and Multiple choice questions
  • Loading branch information
@florina-muntenescu
florina-muntenescu committed Nov 2, 2020
commit d75e4c15f79f3d208b03851afad979218a70d4c4
106 changes: 64 additions & 42 deletions Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyQuestions.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@

package com.example.compose.jetsurvey.survey

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
Expand All @@ -37,6 +39,7 @@ import androidx.compose.material.ProvideEmphasis
import androidx.compose.material.RadioButton
import androidx.compose.material.RadioButtonConstants
import androidx.compose.material.Slider
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand Down Expand Up @@ -164,28 +167,38 @@ private fun SingleChoiceQuestion(
Unit
}
val optionSelected = text == selectedOption
Row(
modifier = Modifier
.fillMaxWidth()
.selectable(
selected = optionSelected,
onClick = onClickHandle
)
.padding(vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically
Surface(
shape = MaterialTheme.shapes.small,
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colors.surface.copy(alpha = 0.12f)
),
modifier = Modifier.padding(vertical = 4.dp)
) {
RadioButton(
selected = optionSelected,
onClick = onClickHandle,
colors = RadioButtonConstants.defaultColors(
selectedColor = MaterialTheme.colors.primary
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 16.dp, horizontal = 24.dp)
.selectable(
selected = optionSelected,
onClick = onClickHandle
),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = text
)
)

Text(
text = text,
modifier = Modifier.padding(horizontal = 16.dp)
)
RadioButton(
selected = optionSelected,
onClick = onClickHandle,
colors = RadioButtonConstants.defaultColors(
selectedColor = MaterialTheme.colors.primary
)
)

}
}
}
}
Expand All @@ -205,31 +218,40 @@ private fun MultipleChoiceQuestion(
val selectedOption = answer?.answersStringRes?.contains(option.value)
mutableStateOf(selectedOption ?: false)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 4.dp)
.clickable(
onClick = {
checkedState = !checkedState
onAnswerSelected(option.value, checkedState)
}
)
Surface(
shape = MaterialTheme.shapes.small,
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colors.surface.copy(alpha = 0.12f)
),
modifier = Modifier.padding(vertical = 4.dp)
) {
Checkbox(
checked = checkedState,
onCheckedChange = { selected ->
checkedState = selected
onAnswerSelected(option.value, selected)
},
colors = CheckboxConstants.defaultColors(
checkedColor = MaterialTheme.colors.primary
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 16.dp, horizontal = 24.dp)
.clickable(
onClick = {
checkedState = !checkedState
onAnswerSelected(option.value, checkedState)
}
),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(text = option.key)

Checkbox(
checked = checkedState,
onCheckedChange = { selected ->
checkedState = selected
onAnswerSelected(option.value, selected)
},
colors = CheckboxConstants.defaultColors(
checkedColor = MaterialTheme.colors.primary
),
)
)
Text(
text = option.key,
modifier = Modifier.padding(horizontal = 16.dp)
)
}
}
}
}
Expand Down