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.

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

Quiz rebase regression fixes #11661

Merged
merged 4 commits into from
Dec 21, 2023
Merged

Quiz rebase regression fixes #11661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b92824
section editor .value & local data definition fixes
nucleogenesis Dec 19, 2023
3d0fb1d
tab styles fixed - remove styles mistakenly kept during conflict reso…
nucleogenesis Dec 19, 2023
e2caa8e
re-apply styles for "no questions" view
nucleogenesis Dec 19, 2023
efb974a
fix WARN: do not use v-for index as key in SectionEditor
nucleogenesis Dec 21, 2023
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
62 changes: 31 additions & 31 deletions kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
tabsId="quizSectionTabs"
class="section-tabs"
:tabs="tabs"
:appearanceOverrides="{ padding: '0px', overflow: 'hidden' }"
:activeTabId="activeSection ?
activeSection.section_id :
'' "
Expand Down Expand Up @@ -108,36 +107,39 @@
tabsId="quizSectionTabs"
:activeTabId="activeSection ? activeSection.section_id : ''"
>
<p>{{ activeSection.section_id }}</p>
<!-- TODO This should be a separate component like "empty section container" or something -->
<div v-if="!activeQuestions.length" class="no-question-style">
<KGrid class="questions-list-label-row">
<KGridItem
class="right-side-heading"
style="padding: 0.7em 0.75em;"
<KGrid v-if="!activeQuestions.length" class="questions-list-label-row">
<KGridItem
class="right-side-heading"
style="padding: 0.7em 0.75em;"
>
<KButton
primary
:text="coreString('optionsLabel')"
>
<KButton
primary
:text="coreString('optionsLabel')"
>
<template #menu>
<KDropdownMenu
:primary="false"
:disabled="false"
:hasIcons="true"
:options="activeSectionActions"
@tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
@select="handleActiveSectionAction"
/>
</template>
</KButton>
</KGridItem>
</KGrid>
<template #menu>
<KDropdownMenu
:primary="false"
:disabled="false"
:hasIcons="true"
:options="activeSectionActions"
@tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
@select="handleActiveSectionAction"
/>
</template>
</KButton>
</KGridItem>
</KGrid>
Comment on lines +110 to +131
Copy link
Member Author

Choose a reason for hiding this comment

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

Note: I moved this outside of the div in order to put the styles below onto that div without affecting this [Options] dropdown menu. Then I put the same v-if condition on it as the same [Options] button is displayed a little differently below.

<!-- TODO This should be a separate component like "empty section container" or something -->
<div
v-if="!activeQuestions.length"
style="text-align: center; padding: 0 0 1em 0; max-width: 350px; margin: 0 auto;"
Copy link
Member Author

Choose a reason for hiding this comment

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

max-width: 350px here is to accommodate the styles represented in the Figma so that the text remains at a readable length across languages as the same text in other languages may take up much more horizontal space

>
<!-- TODO This question mark thing should probably be an SVG for improved a11y -->
<div class="question-mark-layout">
<span class="help-icon-style">?</span>
</div>

<p class="no-question-style">
<p style="margin-top: 1em; font-weight: bold;">
{{ noQuestionsInSection$() }}
</p>

Expand All @@ -146,6 +148,7 @@
<KButton
primary
icon="plus"
style="margin-top: 1em;"
@click="openSelectResources(activeSection.section_id)"
>
{{ addQuestionsLabel$() }}
Expand Down Expand Up @@ -587,10 +590,11 @@
}

.question-mark-layout {
align-items: center;
width: 2.5em;
height: 2.5em;
margin: auto;
line-height: 1.7;
text-align: center;
background-color: #dbc3d4;
}

Expand All @@ -600,10 +604,6 @@
color: #996189;
}

.no-question-style {
font-weight: bold;
}

.kgrid-alignment-style {
padding-right: 1em;
padding-left: 0;
Expand Down
35 changes: 21 additions & 14 deletions kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,8 @@
>
<transition-group>
<Draggable
v-for="(section,index) in sectionOrderList"
:key="index"
v-for="(section) in sectionOrderList"
:key="section.section_id"
:style="draggableStyle"
>
<DragHandle>
Expand Down Expand Up @@ -175,7 +175,7 @@
:style="{ color: $themePalette.grey.v_700 }"
>
<p
v-if="activeSection.value.section_id === section.section_id"
v-if="activeSection.section_id === section.section_id"
class="current-section-text space-content"
>
{{ currentSection$() }}
Expand All @@ -197,7 +197,7 @@
>
<KButton
:text="deleteSectionLabel$()"
@click="deleteSection(activeSection.value.section_id)"
@click="deleteSection(activeSection.section_id)"
/>
</KGridItem>
<KGridItem
Expand All @@ -222,6 +222,8 @@

<script>

import { ref } from 'kolibri.lib.vueCompositionApi';
import { get } from '@vueuse/core';
import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
import Draggable from 'kolibri.coreVue.components.Draggable';
Expand Down Expand Up @@ -264,15 +266,28 @@
deleteSection,
} = injectQuizCreation();

const selectedQuestionOrder = ref(get(activeSection).learners_see_fixed_order);
const numberOfQuestions = ref(get(activeSection).question_count);
const descriptionText = ref(get(activeSection).description);
const sectionTitle = ref(get(activeSection).section_title);

const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
return {
// useQuizCreation
activeSection,
allSections,
updateSection,
updateQuiz,
deleteSection,
// Form models
selectedQuestionOrder,
numberOfQuestions,
descriptionText,
sectionTitle,
// Responsiveness
windowIsLarge,
windowIsSmall,
// i18n
sectionSettings$,
sectionTitle$,
numberOfQuestionsLabel$,
Expand All @@ -291,14 +306,6 @@
fixedOptionDescription$,
};
},
data() {
return {
selectedQuestionOrder: this.activeSection.value.learners_see_fixed_order,
numberOfQuestions: this.activeSection.value.question_count,
descriptionText: this.activeSection.value.description,
sectionTitle: this.activeSection.value.section_title,
};
},
computed: {
borderStyle() {
return `border: 1px solid ${this.$themeTokens.fineLine}`;
Expand All @@ -316,7 +323,7 @@
* @returns { QuizSection[] }
*/
sectionOrderList() {
return this.allSections.value;
return this.allSections;
},
draggableStyle() {
return {
Expand All @@ -330,7 +337,7 @@
},
applySettings() {
this.updateSection({
section_id: this.activeSection.value.section_id,
section_id: this.activeSection.section_id,
section_title: this.sectionTitle,
description: this.descriptionText,
question_count: this.numberOfQuestions,
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"extends browserslist-config-kolibri"
],
"volta": {
"node": "16.18.0"
"node": "16.18.0",
"yarn": "1.12.3"
}
}