Skip to content

Commit c7b28a9

Browse files
Prashant-thakur77pre-commit-ci-lite[bot]
Prashant-thakur77
and
pre-commit-ci-lite[bot]
authored
[Remove Vuetify from Studio] Main navigation in Channels (#5642)
* Mkaing the studionavigationtab * Updated * FIX: resolved the merge conflicts * Updated * Updated * Updated * Update * Update * Update styles * Updated sidepanel styles * Updated sidepanel styles * Updated sidepanel styles * Updated sidepanel styles * Updated sidepanel styles * Updated sidepanel styles * Updated sidepanel styles * Updated styles * Updated * Updated styles for tabs * Updated styles for tabs * Updated styles for tabs * Updated styles for tabs * Updated styles of sidepanel * Updated styles of sidepanel * Updated sidepanel styles * Updated sidepanel styles * Updated sidepanel styles * Updated sidepanel styles * Added scrollable funcality to tabs * Updated the link design * Updated the link design * Updated the link design * Updated the link design * Updated the link design * Updated the link design * Updated the title styles * Updated the title styles * Updated the sliding indicator * Updated the sliding indicator * Updated class anmes * Updated the tabs container * Sliding approach * Sliding approach * old approach after review * updated code for tabs * Updated menu styles * Added StudioPanelOption.vue * Added StudioPanelOption.vue * Added StudioPanelOption.vue * Added StudioPanelOption.vue * Added StudioPanelOption.vue * Updated styles * Updated the skipnavigationlink functionality * Removed the padding added to the sie panle modal and rather added that where modal is used * updatedstyles * updatedstyles * Updated Catalogfiltercontent to handle padding wihout sidepanelmodal * Updated boolean * Updated the tabtrack method to studionavigation * Updated the tabtrack method to studionavigation * finalising * Test file updated * Test file created * Updated test files * Updated strings * Test files * Final updates * Final updates * Final updates * Updated class names * precommit * Added aria-label to the nav * Updated * updated * resolving review * used ktexttruncaotr * aligned the ktexttruncator with ktoolbar * removed aria-live * updated * don * decresd offsst * updated * vreated a diff file to sidepanel to manage codebas * UPdated with reviews * Removed magic stirngs * done * Made updates * Made updates * Made updates * Made updates * Made updates * corrected test suits * [pre-commit.ci lite] apply automatic fixes * FIX: Resolve merge conflicts and lint errors in ChannelListIndex.vue * FEAT: Add notification indicators to StudioNavigation and SidePanel * FIX: Move NotificationsModal into explicit default slot * Resolved merge issues * Fix: Fixed kdropdown size * Fixing Kdropdown sizes * Fixing Kdropdown sizes * Fix: Resolved rtl issues in the red dot usage for notification * Resolved some indentaion * Added transition to Vbadge * Updated according to the reviews * Updated gap to 32px * UPDATED by improving trnasition --------- Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
1 parent 2b5f94c commit c7b28a9

14 files changed

Lines changed: 1808 additions & 61 deletions

File tree

‎contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</template>
1313

1414
<template #default>
15-
<div>
15+
<div style="padding: 24px 32px 16px">
1616
<component :is="showDraftMode ? 'KRadioButtonGroup' : 'div'">
1717
<KRadioButton
1818
v-if="showDraftMode"

‎contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -725,6 +725,7 @@
725725
display: flex;
726726
flex-direction: column;
727727
gap: 16px;
728+
padding: 24px 32px 16px;
728729
margin-top: -24px;
729730
line-height: 140%;
730731
}

‎contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
alignment="left"
2222
@closePanel="closeSidePanel"
2323
>
24-
<CatalogFilterPanelContent />
24+
<CatalogFilterPanelContent :style="{ padding: '24px 32px 16px' }" />
2525
</SidePanelModal>
2626
</div>
2727

‎contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue‎

Lines changed: 54 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -27,53 +27,21 @@
2727
{{ isFAQPage ? $tr('frequentlyAskedQuestions') : $tr('libraryTitle') }}
2828
</VToolbarTitle>
2929
</VToolbar>
30-
<AppBar v-else>
31-
<template
32-
v-if="loggedIn"
33-
#tabs
34-
>
35-
<VTab
36-
v-for="listType in lists"
37-
:key="listType.id"
38-
:to="getChannelLink(listType)"
39-
@click="trackTabClick(listType)"
40-
>
41-
<VBadge
42-
:value="invitationsByListCounts[listType]"
43-
color="black"
44-
>
45-
<template #badge>
46-
<span>{{ $formatNumber(invitationsByListCounts[listType]) }}</span>
47-
</template>
48-
<span>{{ translateConstant(listType) }}</span>
49-
</VBadge>
50-
</VTab>
51-
<VTab
52-
:to="catalogLink"
53-
@click="publicTabClick"
54-
>
55-
{{ $tr('catalog') }}
56-
</VTab>
57-
<VTab
58-
:to="communityLibraryLink"
59-
@click="communityLibraryTabClick"
60-
>
61-
{{ communityLibraryLabel$() }}
62-
</VTab>
63-
<VTab
64-
:to="channelSetLink"
65-
@click="channelSetsTabClick"
66-
>
67-
{{ $tr('channelSets') }}
68-
</VTab>
69-
</template>
70-
</AppBar>
30+
31+
<StudioNavigation
32+
v-else
33+
:tabs="navigationTabs"
34+
/>
35+
7136
<VContent>
7237
<StudioOfflineAlert
7338
v-if="!isCatalogPage"
7439
:offset="toolbarHeight"
7540
/>
7641
<VContainer
42+
id="main"
43+
role="main"
44+
tabindex="-1"
7745
fluid
7846
class="main-container pa-0"
7947
:style="`height: calc(100vh - ${contentOffset}px); margin-top: ${offline ? 48 : 0}px;`"
@@ -106,7 +74,7 @@
10674
import { ChannelListTypes } from 'shared/constants';
10775
import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
10876
import GlobalSnackbar from 'shared/views/GlobalSnackbar';
109-
import AppBar from 'shared/views/AppBar';
77+
import StudioNavigation from 'shared/views/StudioNavigation/StudioNavigation.vue';
11078
import StudioOfflineAlert from 'shared/views/StudioOfflineAlert.vue';
11179
import PolicyModals from 'shared/views/policies/PolicyModals';
11280
import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
@@ -129,7 +97,7 @@
12997
export default {
13098
name: 'ChannelListIndex',
13199
components: {
132-
AppBar,
100+
StudioNavigation,
133101
ChannelListAppError,
134102
GlobalSnackbar,
135103
PolicyModals,
@@ -148,6 +116,49 @@
148116
}),
149117
...mapGetters(['loggedIn']),
150118
...mapGetters('channelList', ['invitations']),
119+
120+
navigationTabs() {
121+
if (!this.loggedIn) return [];
122+
123+
const tabs = [];
124+
125+
this.lists.forEach(listType => {
126+
tabs.push({
127+
id: listType,
128+
label: this.translateConstant(listType),
129+
to: this.getChannelLink(listType),
130+
badgeValue: this.invitationsByListCounts[listType] || 0,
131+
analyticsLabel: ListTypeToAnalyticsLabel[listType],
132+
});
133+
});
134+
135+
tabs.push({
136+
id: 'catalog',
137+
label: this.$tr('catalog'),
138+
to: this.catalogLink,
139+
badgeValue: 0,
140+
analyticsLabel: ChannelListTypes.PUBLIC,
141+
});
142+
143+
tabs.push({
144+
id: 'communityLibrary',
145+
label: this.communityLibraryLabel$(),
146+
to: this.communityLibraryLink,
147+
badgeValue: 0,
148+
analyticsLabel: 'COMMUNITY_LIBRARY',
149+
});
150+
151+
tabs.push({
152+
id: CHANNEL_SETS,
153+
label: this.$tr('channelSets'),
154+
to: this.channelSetLink,
155+
badgeValue: 0,
156+
analyticsLabel: CHANNEL_SETS,
157+
});
158+
159+
return tabs;
160+
},
161+
151162
fullPageError() {
152163
return this.$store.state.errors.fullPageError;
153164
},
@@ -193,15 +204,6 @@
193204
homeLink() {
194205
return this.libraryMode ? window.Urls.base() : window.Urls.channels();
195206
},
196-
publicTabClick() {
197-
return this.trackTabClick.bind(this, ChannelListTypes.PUBLIC);
198-
},
199-
communityLibraryTabClick() {
200-
return this.trackTabClick.bind(this, 'COMMUNITY_LIBRARY');
201-
},
202-
channelSetsTabClick() {
203-
return this.trackTabClick.bind(this, CHANNEL_SETS);
204-
},
205207
},
206208
watch: {
207209
$route(route) {
@@ -260,9 +262,6 @@
260262
this.updateTabTitle(title);
261263
}
262264
},
263-
trackTabClick(list) {
264-
this.$analytics.trackClick('channel_list', ListTypeToAnalyticsLabel[list]);
265-
},
266265
},
267266
$trs: {
268267
channelSets: 'Collections',

‎contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div
2727
class="header-content"
2828
:style="{
29-
flexDirection: closeButtonIconType === 'close' ? 'row' : 'row-reverse',
29+
flexDirection: headerFlexDirection,
3030
}"
3131
>
3232
<div style="overflow: hidden">
@@ -104,6 +104,13 @@
104104
return ['close', 'back'].includes(value);
105105
},
106106
},
107+
closeButtonPosition: {
108+
type: String,
109+
required: false,
110+
default: null,
111+
validator: value => ['left', 'right'].includes(value),
112+
},
113+
107114
/* Optionally override the default width of the side panel with valid CSS value */
108115
sidePanelWidth: {
109116
type: String,
@@ -118,6 +125,11 @@
118125
return ['right', 'left'].includes(value);
119126
},
120127
},
128+
fixedWidth: {
129+
type: Boolean,
130+
required: false,
131+
default: false,
132+
},
121133
ariaLabel: {
122134
type: String,
123135
required: false,
@@ -151,7 +163,15 @@
151163
[this.rtlAlignment]: 0,
152164
};
153165
},
166+
headerFlexDirection() {
167+
if (this.closeButtonPosition === 'left') return 'row-reverse';
168+
if (this.closeButtonPosition === 'right') return 'row';
169+
return this.closeButtonIconType === 'close' ? 'row' : 'row-reverse';
170+
},
154171
responsiveWidth() {
172+
if (this.fixedWidth) {
173+
return this.sidePanelWidth;
174+
}
155175
return this.isMobile ? '100vw' : this.sidePanelWidth;
156176
},
157177
/** Styling Properties */
@@ -252,7 +272,6 @@
252272
253273
.side-panel-content {
254274
flex-grow: 1;
255-
padding: 24px 32px 16px;
256275
overflow-x: hidden;
257276
overflow-y: auto;
258277
}

‎contentcuration/contentcuration/frontend/shared/views/StudioNavigation/SkipNavigationLink.vue‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
3+
<div class="skip-nav-link">
4+
<KButton
5+
ref="button"
6+
:style="linkStyles"
7+
appearance="basic-link"
8+
:text="$tr('skipToMainContentAction')"
9+
@click="handleClickSkipLink"
10+
/>
11+
</div>
12+
13+
</template>
14+
15+
16+
<script>
17+
18+
export default {
19+
name: 'SkipNavigationLink',
20+
computed: {
21+
linkStyles() {
22+
return {
23+
backgroundColor: this.$themeTokens.surface + ' !important',
24+
};
25+
},
26+
},
27+
methods: {
28+
handleClickSkipLink() {
29+
// Every page where this is supposed to work needs to have a top-level
30+
// element with 'role' and 'id' attribute equal to 'main' and 'tabindex= -1'.
31+
// If it doesn't have one, clicking this link is a noop, but will re-focus itself
32+
// as a convenience (in case main div is still loading).
33+
const mainEl = document.getElementById('main');
34+
if (mainEl) {
35+
// If it exists, actually target and focus on the main header
36+
const header = mainEl.querySelector('h1');
37+
if (header) {
38+
// HACK: Need to set its tabindex attribute on the fly to get tab behavior
39+
header.setAttribute('tabindex', -1);
40+
header.focus();
41+
} else {
42+
mainEl.focus();
43+
}
44+
} else {
45+
// NOTE: the button retains focus, but loses :focus styling after hitting "Enter"
46+
// TODO: look into theme input modality to see if we can get consistent
47+
// styling when in keyboard modality
48+
this.$refs.button.$el.focus();
49+
}
50+
},
51+
},
52+
$trs: {
53+
skipToMainContentAction: {
54+
message: 'Skip to main content',
55+
context:
56+
'Button label for the hamburger menu in the top left corner. Accessible only to those who use screen readers and other assistive technology (AT).',
57+
},
58+
},
59+
};
60+
61+
</script>
62+
63+
64+
<style lang="scss" scoped>
65+
66+
@import '~kolibri-design-system/lib/styles/definitions';
67+
68+
.skip-nav-link {
69+
position: relative;
70+
z-index: 2;
71+
}
72+
73+
.skip-nav-link a {
74+
@extend %dropshadow-2dp;
75+
76+
position: absolute;
77+
left: -1000px;
78+
padding: 8px 16px;
79+
font-size: 14px;
80+
outline-offset: 0 !important;
81+
82+
&:focus {
83+
top: 8px;
84+
left: 8px;
85+
z-index: 2;
86+
}
87+
}
88+
89+
</style>

0 commit comments

Comments
 (0)