diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js index 0fbea109a4..54e1547717 100644 --- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js +++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js @@ -63,10 +63,6 @@ describe('ContentNodeListItem', () => { expect(wrapper.contains('[data-test="btn-chevron"]')).toBe(false); }); - it("doesn't render a subtitle for a node different from topic and exercise", () => { - expect(wrapper.contains('[data-test="subtitle"]')).toBe(false); - }); - it('emits an event when list item is clicked', () => { wrapper.find('[data-test="content-item"]').trigger('click'); diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue index 357af90a18..ca56f34b8f 100644 --- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue +++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue @@ -28,8 +28,10 @@ 'py-3': isCompact, }" > - @@ -64,13 +66,32 @@ + + + - {{ subtitle }} + {{ subtitle }} + + {{ category(node.categories) }} + + + + - + @@ -149,33 +184,37 @@ + + diff --git a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue index 5828c28fc0..6a5c0eca4b 100644 --- a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue +++ b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue @@ -8,8 +8,6 @@ {{ overflowText }} -

-

{{ togglerText }} @@ -99,6 +97,7 @@ .text { margin: 0; + font-size: 12px; word-wrap: break-word; white-space: normal; } diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js new file mode 100644 index 0000000000..f48e207a1e --- /dev/null +++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js @@ -0,0 +1,72 @@ +import Vue from 'vue'; +import Vuetify from 'vuetify'; +import { mount } from '@vue/test-utils'; +import ContentNodeLearningActivityIcon from '../ContentNodeLearningActivityIcon.vue'; + +Vue.use(Vuetify); + +document.body.setAttribute('data-app', true); // Vuetify prints a warning without this + +describe('ContentNodeLearningActivityIcon', () => { + let wrapper; + // expect(wrapper.find('.v-icon').text()).toContain(kind.icon); + describe('labeled icons', () => { + wrapper = mount(ContentNodeLearningActivityIcon, { + propsData: { + learningActivities: { + '#j8L0eq3': true, + }, + includeText: true, + chip: false, + }, + }); + it('should display a KLabeledIcon for each activity if includeText is true', () => { + expect(wrapper.find('[data-test="labeled-icon"]').exists()).toBe(true); + expect(wrapper.find('[data-test="icon-only"]').exists()).toBe(false); + }); + }); + describe('icon only', () => { + it('if there is only one learning activity, it should display the KIcon', () => { + wrapper = mount(ContentNodeLearningActivityIcon, { + propsData: { + learningActivities: { + '#j8L0eq3': true, + }, + includeText: false, + chip: false, + }, + }); + expect(wrapper.find('[data-test="icon-only"]').exists()).toBe(true); + expect(wrapper.find('[data-test="labeled-icon"]').exists()).toBe(false); + }); + describe('when there is more than one learning activity', () => { + it('if showEachActivityIcon is true, it should show a KIcon for each learning activity', () => { + wrapper = mount(ContentNodeLearningActivityIcon, { + propsData: { + learningActivities: { + '#j8L0eq3': true, + UXADWcXZ: true, + }, + includeText: false, + showEachActivityIcon: true, + }, + }); + expect(wrapper.find('[data-test="multiple-activities-icon"]').exists()).toBe(false); + expect(wrapper.find('[data-test="icon-only"]').exists()).toBe(true); + }); + }); + it('if showEachActivityIcon is false, it should show only the multipleLearningActivity KIcon', () => { + wrapper = mount(ContentNodeLearningActivityIcon, { + propsData: { + learningActivities: { + '#j8L0eq3': true, + UXADWcXZ: true, + }, + includeText: false, + showEachActivityIcon: false, + }, + }); + expect(wrapper.find('[data-test="multiple-activities-icon"]').exists()).toBe(true); + }); + }); +}); diff --git a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue new file mode 100644 index 0000000000..c761c24f5f --- /dev/null +++ b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue @@ -0,0 +1,239 @@ + + + + + diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js index b069c4a8ef..5ad894742e 100644 --- a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js +++ b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import vuetifyIcons from 'vuetify/lib/components/Vuetify/mixins/icons'; +import { camelCase } from 'lodash'; import CollapseAllIcon from '../views/icons/CollapseAllIcon'; import IndicatorIcon from '../views/icons/IndicatorIcon'; import LightBulbIcon from '../views/icons/LightBulbIcon'; @@ -26,6 +27,16 @@ export function getContentKindIcon(kind, isEmpty = false) { return icon ? CONTENT_KIND_ICONS[icon] : 'error_outline'; } +export function getLearningActivityIcon(activity) { + if (activity == 'Explore') { + return 'interactShaded'; + } else if (activity == 'Multiple learning activities') { + return 'allActivities'; + } else { + return `${camelCase(activity) + 'Solid'}`; + } +} + // Can use $vuetify.icons.iconName in tags const customIcons = { collapse_all: {