Skip to content

Commit

Permalink
very duplicated accordions for side-panel usage
Browse files Browse the repository at this point in the history 
this all needs a major refactor top-to-bottom; will create an issue accordingly to offer some guidance for future us
  • Loading branch information
@nucleogenesis
nucleogenesis committed May 17, 2024
1 parent 593653c commit 1183b13
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 8 deletions.
6 changes: 5 additions & 1 deletion kolibri/plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,11 @@
},
buttonClass(item) {
if (this.questionItem === item) {
return this.$computedClass({ backgroundColor: this.$themePalette.grey.v_100 });
return this.$computedClass({
color: this.$themeTokens.text,
backgroundColor: this.$themeTokens.surface,
border: `2px solid ${this.$themeTokens.primary}`,
});
}
return this.$computedClass({
backgroundColor: this.$themeTokens.surface,
Expand Down
164 changes: 157 additions & 7 deletions kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,121 @@
:route="homePageLink"
:appBarTitle="exam.title || ''"
>

<template #actions>

<KIconButton
v-if="windowIsSmall || windowIsMedium"
ref="mobileQuestionsMenu"
icon="menu"
@click="showSidePanel = true"
/>

</template>

<KCircularLoader v-if="loading" />

<div v-else>
<SidePanelModal
v-if="showSidePanel && (windowIsSmall || windowIsMedium)"
ref="resourcePanel"
class="also-in-this-side-panel"
alignment="right"
closeButtonIconType="close"
@closePanel="showSidePanel = false"
@shouldFocusFirstEl="findFirstEl()"
>

<AccordionContainer
:hideTopActions="true"
:items="exam.question_sources.map(s => ({ id: s.section_id }))"
>
<template #default="{ toggleItemState, isItemExpanded }">
<AccordionItem
v-for="(section) in exam.question_sources"
:id="section.section_id"
:key="section.section_id"
:title="section.section_title"
>
<template #heading="{ title }">
<h3 class="accordion-header">
<KButton
tabindex="0"
appearance="basic-link"
:style="accordionStyleOverrides"
class="accordion-header-label"
:aria-expanded="isItemExpanded(section.section_id)
|| section.questions.some(q => q.item === currentQuestion.item)"
:aria-controls="`section-question-panel-${section.section_id}`"
@click="toggleItemState(section.section_id)"
>
<KIcon
class="dot"
:icon="sectionQuestionsIcon(section.section_id)"
:color="sectionQuestionsIconColor(section.section_id)"
/>
<span style="margin-left: 1em;">{{ title }}</span>
<KIcon
class="chevron-icon"
:icon="(isItemExpanded(section.section_id)
|| section.questions.some(q => q.item === currentQuestion.item)) ?
'chevronUp' : 'chevronRight'"
/>
</KButton>
</h3>
</template>

<template #content>

<div
v-if="isItemExpanded(section.section_id)
|| section.questions.some(q => q.item === currentQuestion.item)"
class="spacing-items"
:style="{
backgroundColor: $themePalette.grey.v_100,
}"
>

<p style="font-size: 14px; text-align:left">
{{ section.description }}
</p>


<!-- <p>{{ coreString('timeSpentLabel') }}</p>
<div :style="{ paddingBottom: '8px' }">
<TimeDuration class="timer" :seconds="time_spent" />
</div>
<p v-if="content && content.duration">
{{ learnString('suggestedTime') }}
</p>
<SuggestedTime
v-if="content && content.duration"
class="timer"
:seconds="content.duration"
/> -->

<span
class="divider"
:style="{ borderTop: `solid 1px ${$themeTokens.fineLine}` }"
>
</span>

<AnswerHistory
:pastattempts="pastattempts"
:questions="section.questions"
:questionNumber="questionNumber"
:questionItem="attemptLogItemValue"
:wrapperComponentRefs="$refs"
:questionItemsList="questionItemsList"
@goToQuestion="goToQuestion"
/>
</div>
</template>
</AccordionItem>
</template>

</AccordionContainer>
</SidePanelModal>
<KGrid :gridStyle="gridStyle">
<!-- this.$refs.questionListWrapper is referenced inside AnswerHistory for scrolling -->
<KGridItem
Expand Down Expand Up @@ -35,7 +148,8 @@
appearance="basic-link"
:style="accordionStyleOverrides"
class="accordion-header-label"
:aria-expanded="isItemExpanded(section.section_id)"
:aria-expanded="isItemExpanded(section.section_id)
|| section.questions.some(q => q.item === currentQuestion.item)"
:aria-controls="`section-question-panel-${section.section_id}`"
@click="toggleItemState(section.section_id)"
>
Expand All @@ -47,7 +161,8 @@
<span style="margin-left: 1em;">{{ title }}</span>
<KIcon
class="chevron-icon"
:icon="isItemExpanded(section.section_id) ?
:icon="(isItemExpanded(section.section_id)
|| section.questions.some(q => q.item === currentQuestion.item)) ?
'chevronUp' : 'chevronRight'"
/>
</KButton>
Expand All @@ -57,7 +172,8 @@
<template #content>

<div
v-if="isItemExpanded(section.section_id)"
v-if="isItemExpanded(section.section_id)
|| section.questions.some(q => q.item === currentQuestion.item)"
class="spacing-items"
:style="{
backgroundColor: $themePalette.grey.v_100,
Expand Down Expand Up @@ -111,9 +227,12 @@
<main :class="{ 'column-contents-wrapper': !windowIsSmall }">
<KPageContainer>

<h1 class="number-of-questions">
{{ $tr('question', { num: questionNumber + 1, total: exam.question_count }) }}
<h1 class="section-title">
{{ currentSection.section_title }}
</h1>
<h2 class="number-of-questions">
{{ $tr('question', { num: questionNumber + 1, total: exam.question_count }) }}
</h2>
<ContentRenderer
v-if="content && itemId"
ref="contentRenderer"
Expand Down Expand Up @@ -259,6 +378,7 @@
import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
import AccordionItem from 'kolibri-common/components/AccordionItem';
import AccordionContainer from 'kolibri-common/components/AccordionContainer';
import SidePanelModal from 'kolibri-common/components/SidePanelModal';
import ResourceSyncingUiAlert from '../ResourceSyncingUiAlert';
import useProgressTracking from '../../composables/useProgressTracking';
import { PageNames, ClassesPageNames } from '../../constants';
Expand All @@ -277,6 +397,7 @@
AccordionContainer,
AnswerHistory,
BottomAppBar,
SidePanelModal,
ImmersivePage,
ResourceSyncingUiAlert,
},
Expand All @@ -290,7 +411,12 @@
startTrackingProgress,
stopTrackingProgress,
} = useProgressTracking();
const { windowBreakpoint, windowIsLarge, windowIsSmall } = useKResponsiveWindow();
const {
windowBreakpoint,
windowIsMedium,
windowIsLarge,
windowIsSmall,
} = useKResponsiveWindow();
return {
pastattempts,
time_spent,
Expand All @@ -301,10 +427,12 @@
windowBreakpoint,
windowIsLarge,
windowIsSmall,
windowIsMedium,
};
},
data() {
return {
showSidePanel: false,
submitModalOpen: false,
// Note this time is only used to calculate the time spent on a
// question, it is not used to generate any timestamps.
Expand Down Expand Up @@ -390,6 +518,11 @@
}
);
},
currentSection() {
return this.exam.question_sources.find(section =>
section.questions.find(q => q.item === this.attemptLogItemValue)
);
},
currentQuestion() {
return this.questionItemsMap[
// We have the index of the question item, so we get the item using that, then we get
Expand Down Expand Up @@ -460,6 +593,13 @@
attemptLogItemValue(newVal, oldVal) {
if (newVal !== oldVal) {
this.startTime = Date.now();
this.showSidePanel = false;
}
},
windowIsLarge(newVal) {
if (newVal && this.showSidePanel) {
// If windowIsLarge has become true, we need to close the side panel
this.showSidePanel = false;
}
},
},
Expand All @@ -483,6 +623,9 @@
});
},
methods: {
findFirstEl() {
this.$refs.resourcePanel.focusFirstEl();
},
sectionQuestionsIconColor(section_id) {
const answered = this.sectionCompletionMap[section_id];
const total = this.exam.question_sources.find(s => s.section_id === section_id).questions
Expand Down Expand Up @@ -723,8 +866,15 @@
overflow-y: hidden;
}
.number-of-questions {
.section-title {
margin-bottom: 0;
font-size: 1em;
text-align: center;
}
.number-of-questions {
margin-bottom: 0;
font-size: 0.9em;
font-weight: 400;
text-align: center;
}
Expand Down

0 comments on commit 1183b13

Please sign in to comment.