Skip to content

Commit

Permalink
Merge pull request #12311 from nucleogenesis/fix--sidepanel-routing-icon
Browse files Browse the repository at this point in the history 
EQM: Side panel back / close icon UX improvements
  • Loading branch information
@nucleogenesis
nucleogenesis authored Jun 26, 2024
2 parents ecc9510 + e06a2c3 commit a06464b
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 71 deletions.
103 changes: 54 additions & 49 deletions kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,18 @@
ref="resourcePanel"
alignment="right"
sidePanelWidth="700px"
:closeButtonIconType="closeBackIcon"
closeButtonIconType="close"
@closePanel="handleClosePanel"
@shouldFocusFirstEl="findFirstEl()"
>
<template #header>
<KIconButton
v-if="canGoBack"
icon="back"
:style="backButtonStyles"
@click="$router.go(-1)"
/>
</template>
<router-view @closePanel="handleClosePanel" />
</SidePanelModal>

Expand All @@ -17,7 +25,6 @@

<script>
import { onClickOutside } from '@vueuse/core';
import SidePanelModal from 'kolibri-common/components/SidePanelModal';
import { ref, watch, computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
import { PageNames } from '../../../constants';
Expand All @@ -27,69 +34,67 @@
components: {
SidePanelModal,
},
setup(_, context) {
setup() {
const store = getCurrentInstance().proxy.$store;
const router = getCurrentInstance().proxy.$router;
const route = computed(() => store.state.route);
const routeWhenSidePanelOpened = route.value;
const prevRoute = ref({
name: PageNames.EXAM_CREATION_ROOT,
params: { ...route.value.params },
});
const canCloseSidePanel = ref(true);
const canGoBack = ref(false);
const showSidePanel = computed(() => route.value?.name !== PageNames.EXAM_CREATION_ROOT);
watch(route, (to, from) => {
// We're on the same route we were on when we started so should be able to close it
canCloseSidePanel.value =
to.name === routeWhenSidePanelOpened.name &&
// I tried using _.isEqual on the params & query objects but it didn't work as I expected
// so this is hard-coded for now.
to.params.sectionIndex === routeWhenSidePanelOpened.params.sectionIndex &&
to.params.topic_id === routeWhenSidePanelOpened.params.topic_id &&
to.query.showBookmarks === routeWhenSidePanelOpened.query.showBookmarks &&
to.query.search === routeWhenSidePanelOpened.query.search;
prevRoute.value = from;
});
function handleClosePanel() {
if (canCloseSidePanel.value) {
// Avoid redundant navigation error
if (prevRoute.value.name === PageNames.EXAM_CREATION_ROOT) {
router.back();
} else {
router.push({
name: PageNames.EXAM_CREATION_ROOT,
params: { ...prevRoute.value.params },
});
}
} else {
router.back();
}
router.push({
name: PageNames.EXAM_CREATION_ROOT,
params: {
classId: route.value.params.classId,
quizId: route.value.params.quizId,
sectionIndex: route.value.params.sectionIndex,
},
query: { ...route.value.query },
});
}
onClickOutside(context.refs.resourcePanel, () => {
canCloseSidePanel.value = true;
handleClosePanel();
});
const closeBackIcon = computed(() => {
if (canCloseSidePanel.value) {
return 'close';
} else {
return 'back';
}
watch(route, (newRoute, oldRoute) => {
// Here we basically handle all of the edge cases around when we do and don't show the back
// button in the heading of the side panel -- basically, we're going for:
// - If we just loaded, no back arrow (ie, refresh the page w/ the panel open)
// - If we're viewing bookmarks or have gone into a topic show the back arrow
// - If we're still not on the same route as before, then show it
canGoBack.value =
oldRoute.name !== PageNames.EXAM_CREATION_ROOT && // We didn't just get here
newRoute.name !== PageNames.QUIZ_SECTION_EDITOR && // The new route isn't section editor // One of these is also true...
(Boolean(newRoute.query.showBookmarks) || // We're viewing bookmarks
Boolean(newRoute.params.topic_id) || // We're viewing a topic
oldRoute.name !== newRoute.name); // We're just not on the same page within the panel
});
return {
canGoBack,
showSidePanel,
canCloseSidePanel,
closeBackIcon,
handleClosePanel,
};
},
computed: {
backButtonStyles() {
if (this.isRtl) {
return {
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
right: '1em',
'z-index': '24',
};
} else {
return {
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
left: '1em',
'z-index': '24',
};
}
},
},
methods: {
/**
* Calls the currently displayed ref's focusFirstEl method.
Expand Down
46 changes: 24 additions & 22 deletions packages/kolibri-common/components/SidePanelModal/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,24 @@
>
<!-- Fixed header -->
<div
v-show="$slots.header"
ref="fixedHeader"
class="fixed-header"
:style="fixedHeaderStyles"
>
<div class="header-content">
<slot name="header"> </slot>
<KIconButton
v-if="closeButtonIconType"
:icon="closeButtonIconType"
class="close-button"
:style="closeButtonStyle"
:ariaLabel="closeButtonMessage"
:tooltip="closeButtonMessage"
@click="closePanel"
/>
</div>
</div>

<KIconButton
v-if="closeButtonIconType"
:icon="closeButtonIconType"
class="close-button"
:style="closeButtonStyle"
:ariaLabel="closeButtonMessage"
:tooltip="closeButtonMessage"
@click="closePanel"
/>

<!-- Default slot for inserting content which will scroll on overflow -->
<div
class="side-panel-content"
Expand Down Expand Up @@ -149,8 +147,8 @@
position: 'fixed',
top: 0,
backgroundColor: this.$themeTokens.surface,
'border-bottom': `1px solid ${this.$themePalette.grey.v_500}`,
padding: '24px 32px',
borderBottom: `1px solid ${this.$themePalette.grey.v_400}`,
padding: '0 1em',
// Header border stays over content with this, but under any tooltips
'z-index': 16,
};
Expand All @@ -177,39 +175,43 @@
if (this.closeButtonIconType === 'close') {
return {
position: 'absolute',
top: '16px',
left: '16px',
top: '50%',
transform: 'translateY(-50%)',
left: '1em',
'z-index': '24',
};
} else {
return {
position: 'absolute',
top: '16px',
right: '24px',
top: '50%',
transform: 'translateY(-50%)',
right: '1em',
'z-index': '24',
};
}
}
if (this.closeButtonIconType === 'back') {
return {
position: 'absolute',
top: '16px',
left: '16px',
top: '50%',
transform: 'translateY(-50%)',
left: '1em',
'z-index': '24',
};
} else {
return {
position: 'absolute',
top: '16px',
right: '24px',
top: '50%',
transform: 'translateY(-50%)',
right: '1em',
'z-index': '24',
};
}
},
contentStyles() {
return {
/* When the header margin is 0px from top, add 24 to accomodate close button */
'margin-top': this.fixedHeaderHeight === '0px' ? '24px' : this.fixedHeaderHeight,
'margin-top': this.fixedHeaderHeight === '0px' ? '16px' : this.fixedHeaderHeight,
padding: '24px 32px 16px',
'overflow-y': 'scroll',
'overflow-x': 'hidden',
Expand Down

0 comments on commit a06464b

Please sign in to comment.