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

Remote content browsing final polish #10573

Merged
merged 6 commits into from
Apr 26, 2023
Merged

Remote content browsing final polish #10573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ba65ac0
Ui fixes for the explore libraries page
akolson Apr 19, 2023
86cfbac
makes changes to MoreNetworkDevice component
akolson Apr 21, 2023
34c2435
adds device loading states
akolson Apr 26, 2023
0aee981
Merge branch 'develop' into remote-content-browsing-final-polish
akolson Apr 26, 2023
6bf630f
adds device loading states
akolson Apr 26, 2023
b625ab3
skips failing library-page.spec.js tests for now
akolson Apr 26, 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
6 changes: 6 additions & 0 deletions kolibri/core/assets/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,3 +174,9 @@ export const FacilityUserGender = {
};

export const IsPinAuthenticated = 'is_pin_authenticated';

// maps to possible network applications that we import/export content from
export const ApplicationTypes = {
KOLIBRI: 'kolibri',
STUDIO: 'studio',
};
6 changes: 0 additions & 6 deletions kolibri/plugins/device/assets/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,6 @@ export const ContentWizardPages = {
SELECT_NETWORK_ADDRESS: 'SELECT_NETWORK_ADDRESS',
};

// maps to possible network applications that we import/export content from
export const ApplicationTypes = {
KOLIBRI: 'kolibri',
STUDIO: 'studio',
};

export const ContentWizardErrors = {
INVALID_PARAMETERS: 'INVALID_PARAMETERS',
CHANNEL_NOT_FOUND_ON_SERVER: 'CHANNEL_NOT_FOUND_ON_SERVER',
Expand Down
2 changes: 1 addition & 1 deletion kolibri/plugins/device/assets/src/modules/wizard/getters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import find from 'lodash/find';
import isEmpty from 'lodash/isEmpty';
import { TransferTypes } from 'kolibri.utils.syncTaskUtils';
import { ApplicationTypes } from '../../constants';
import { ApplicationTypes } from 'kolibri.coreVue.vuex.constants';

export function cachedTopicPath(state) {
return function getPath(id) {
Expand Down
1 change: 1 addition & 0 deletions kolibri/plugins/learn/assets/src/routes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ export default [
props: route => {
return {
deviceId: route.params.deviceId,
goBackRoute: route.params.goBackRoute,
Copy link
Member

Choose a reason for hiding this comment

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

Hrm, this doesn't seem quite right to me. The goBackRoute prop of the LibraryPage is a route object, but route params are strings, so I don't quite see how this is meant to be working.

Copy link
Member

Choose a reason for hiding this comment

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

Ah, I see how this is kind of working - the underlying params object does get modified, but it doesn't get encoded in the URL. Unfortunately, it means if the page is refreshed the back link no longer works.

I think this is probably best handled in a similar way to the other back links in Learn, by encoding the name of the page in the query parameters.

Can add an additional function to this composable for creating the library page back links: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/src/composables/useContentLink.js#L7

};
},
},
Expand Down
128 changes: 79 additions & 49 deletions kolibri/plugins/learn/assets/src/views/ChannelCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,60 +7,70 @@
:class="$computedClass({ ':focus': $coreOutline })"
>

<h3
class="title"
dir="auto"
:style="{ borderBottom: `1px solid ${$themeTokens.fineLine}` }"
>
<TextTruncator
:text="title"
:maxHeight="titleHeight"
:showTooltip="true"
/>
</h3>

<KFixedGrid
numCols="4"
gutter="16"
style="margin: 0 16px;"
<div
v-if="explore"
class="explore"
>
<KFixedGridItem span="1">
<ChannelThumbnail
class="thumbnail"
v-bind="{ thumbnail, isMobile }"
/>
</KFixedGridItem>
<KFixedGridItem
span="3"
alignment="auto"
<h1>
{{ title }}
</h1>
</div>
<div v-else>
<h3
class="title"
dir="auto"
:style="{ borderBottom: `1px solid ${$themeTokens.fineLine}` }"
>
<TextTruncator
:text="tagline"
:maxHeight="taglineHeight"
:showTooltip="false"
:text="title"
:maxHeight="titleHeight"
:showTooltip="true"
/>
</KFixedGridItem>
</KFixedGrid>
</h3>

<CoachContentLabel
v-if="isUserLoggedIn && !isLearner"
class="coach-content-label"
:value="numCoachContents"
:isTopic="true"
/>
<KFixedGrid
numCols="4"
gutter="16"
style="margin: 0 16px;"
>
<KFixedGridItem span="1">
<ChannelThumbnail
class="thumbnail"
v-bind="{ thumbnail, isMobile }"
/>
</KFixedGridItem>
<KFixedGridItem
span="3"
alignment="auto"
>
<TextTruncator
:text="tagline"
:maxHeight="taglineHeight"
:showTooltip="false"
/>
</KFixedGridItem>
</KFixedGrid>

<div
v-if="version"
class="version-wrapper"
:style="versionStyle"
>
<p>{{ $tr('version', { version: version }) }}</p>
</div>
<div
v-if="isRemote"
class="wifi-icon"
>
<KIcon icon="wifi" />
<CoachContentLabel
v-if="isUserLoggedIn && !isLearner"
class="coach-content-label"
:value="numCoachContents"
:isTopic="true"
/>

<div
v-if="version"
class="version-wrapper"
:style="versionStyle"
>
<p>{{ $tr('version', { version: version }) }}</p>
</div>
<div
v-if="isRemote"
class="wifi-icon"
>
<KIcon icon="wifi" />
</div>
</div>

</router-link>
Expand Down Expand Up @@ -124,6 +134,11 @@
required: false,
default: false,
},
explore: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
...mapGetters(['isLearner', 'isUserLoggedIn']),
Expand Down Expand Up @@ -198,6 +213,20 @@
}
}

.explore {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 270px;
text-align: center;

h1 {
padding: 0;
margin: 0 20px;
}
}

.title {
padding: 0 48px $margin $margin;
}
Expand Down Expand Up @@ -227,7 +256,8 @@
position: absolute;
right: 0;
bottom: 0;
padding: 10px;
padding: 20px;
margin: 0;
}

</style>
19 changes: 9 additions & 10 deletions kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@
<KGridItem
v-for="content in contents"
:key="content.id"
:layout="{ span: cardColumnSpan, alignment: 'auto' }"
:layout12="{ span: 3 }"
:layout8="{ span: 4 }"
:layout4="{ span: 4 }"
>
<ChannelCard
:isMobile="windowIsSmall"
:title="content.title || content.name"
:thumbnail="content.thumbnail"
:tagline="getTagLine(content)"
:numCoachContents="content.num_coach_contents"
:link="genContentLinkBackLinkCurrentPage(content.id, false)"
:link="genContentLinkBackLinkCurrentPage(content.id, false, deviceId)"
:isRemote="isRemote"
/>
</KGridItem>
Expand Down Expand Up @@ -44,19 +46,16 @@
type: Array,
required: true,
},
deviceId: {
type: String,
required: false,
default: null,
},
isRemote: {
type: Boolean,
default: false,
},
},
computed: {
cardColumnSpan() {
if (this.windowBreakpoint <= 2) return 4;
if (this.windowBreakpoint <= 3) return 6;
if (this.windowBreakpoint <= 6) return 4;
return 3;
},
},
methods: {
getTagLine(content) {
return content.tagline || content.description;
Expand Down
17 changes: 16 additions & 1 deletion kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,14 @@
<KIconButton
ref="pinIcon"
:icon="pinIcon"
:disabled="disablePinDevice"
appearance="flat-button"
@click="$emit('togglePin', deviceId)"
/>
<KTooltip reference="pinIcon" :refs="$refs">
<KTooltip
reference="pinIcon"
:refs="$refs"
>
{{ (pinIcon === 'pinned') ? $tr('removePin') : $tr('pinTo') }}
</KTooltip>
</h2>
Expand Down Expand Up @@ -130,13 +134,24 @@
required: false,
default: false,
},
disablePinDevice: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
goBackRoute() {
return {
name: PageNames.EXPLORE_LIBRARIES,
};
},
libraryPageRoute() {
return {
name: PageNames.LIBRARY,
params: {
deviceId: this.deviceId,
goBackRoute: this.goBackRoute,
},
};
},
Expand Down
Loading