Skip to content

Commit 897511c

Browse files
committed
initial removal of svg tag
1 parent f2e30e7 commit 897511c

File tree

3 files changed

+71
-37
lines changed

3 files changed

+71
-37
lines changed
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import camelCase from 'lodash/camelCase';
2+
import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
3+
4+
const EMPTY = '_empty';
5+
const CONTENT_KIND_ICONS = {
6+
[ContentKindsNames.TOPIC]: 'topic',
7+
[ContentKindsNames.TOPIC + EMPTY]: 'emptyTopic',
8+
[ContentKindsNames.VIDEO]: 'video',
9+
[ContentKindsNames.AUDIO]: 'audio',
10+
[ContentKindsNames.SLIDESHOW]: 'slideshow',
11+
[ContentKindsNames.EXERCISE]: 'exercise',
12+
[ContentKindsNames.DOCUMENT]: 'document',
13+
[ContentKindsNames.HTML5]: 'html5',
14+
[ContentKindsNames.ZIM]: 'html5',
15+
};
16+
17+
export function getContentKindIcon(kind, isEmpty = false) {
18+
const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS);
19+
return icon ? CONTENT_KIND_ICONS[icon] : 'error';
20+
}
21+
22+
export function getLearningActivityIcon(activity) {
23+
if (activity.toLowerCase() === 'explore') {
24+
return 'interactShaded';
25+
} else if (activity === 'multiple') {
26+
return 'allActivities';
27+
} else {
28+
return `${camelCase(activity) + 'Solid'}`;
29+
}
30+
}

contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
>
1717
<VCard
1818
ref="thumbnail"
19-
class="thumbnail"
19+
class="thumbnail-wrapper"
2020
data-test="loading"
2121
>
2222
<VLayout
@@ -355,7 +355,7 @@
355355
border: 2px solid var(--v-grey-darken2);
356356
}
357357
358-
.thumbnail {
358+
.thumbnail-wrapper {
359359
padding: 28% 0;
360360
/* stylelint-disable-next-line custom-property-pattern */
361361
border-color: var(--v-greyBorder-base) !important;

contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
[kind]: compact,
77
'icon-only': compact,
88
nothumbnail: !showThumbnail && !compact,
9+
'with-caption': showCaption,
910
}"
1011
:style="{ 'max-width': maxWidth }"
1112
>
1213
<VLayout
13-
v-if="kind && !printing && showKind && !compact"
14+
v-if="showCaption"
1415
tag="figcaption"
1516
row
1617
align-center
@@ -21,12 +22,10 @@
2122
shrink
2223
class="px-1"
2324
>
24-
<VIconWrapper
25-
v-if="!compact"
26-
dark
27-
small
28-
:aria-label="kindTitle"
29-
v-text="icon"
25+
<KIcon
26+
:icon="icon"
27+
class="icon-thumbnail"
28+
:style="{ fill: '#ffffff' }"
3029
/>
3130
</VFlex>
3231
<VFlex shrink>
@@ -55,42 +54,35 @@
5554
</div>
5655

5756
<!-- Bury icon within SVG so it's more responsive, since font-size scaling is more difficult -->
58-
<svg
57+
<div
5958
v-else-if="compact"
60-
viewBox="0 0 24 24"
61-
:aria-label="kindTitle"
62-
class="thumbnail-image"
59+
class="kicon-wrapper"
6360
>
6461
<KIcon
65-
icon="infoOutline"
66-
:x="+10"
67-
:y="y + 20"
62+
:icon="icon"
63+
class="icon-thumbnail"
6864
:style="{ fill: '#ffffff' }"
6965
/>
70-
</svg>
71-
<svg
66+
</div>
67+
<div
7268
v-else
73-
viewBox="0 0 40 40"
74-
:aria-label="kindTitle"
75-
class="nothumbnail-image"
76-
:class="$isRTL ? 'rtl-image' : 'ltr-image'"
69+
class="kicon-wrapper"
7770
>
7871
<KIcon
7972
icon="image"
80-
:x="-3"
81-
:y="y - 14"
82-
:style="{ fill: '#999999' }"
73+
class="icon-thumbnail"
74+
:style="{ fill: '#999999', fontSize: '3em' }"
8375
/>
84-
</svg>
76+
</div>
8577
</figure>
8678

8779
</template>
8880

8981

9082
<script>
9183
84+
import { getContentKindIcon } from 'shared/utils/icons';
9285
import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
93-
import { getContentKindIcon } from 'shared/vuetify/icons';
9486
9587
export default {
9688
name: 'Thumbnail',
@@ -136,22 +128,15 @@
136128
},
137129
},
138130
computed: {
139-
y() {
140-
switch (this.kind) {
141-
case 'exercise':
142-
return 28;
143-
case 'topic':
144-
case 'audio':
145-
default:
146-
return 26;
147-
}
148-
},
149131
objectFit() {
150132
return this.kind ? 'cover' : 'contain';
151133
},
152134
icon() {
153135
return getContentKindIcon(this.kind, this.isEmpty);
154136
},
137+
showCaption() {
138+
return this.kind && !this.printing && this.showKind && !this.compact;
139+
},
155140
thumbnailSrc() {
156141
return this.encoding && this.encoding.base64 ? this.encoding.base64 : this.src;
157142
},
@@ -302,4 +287,23 @@
302287
}
303288
}
304289
290+
.kicon-wrapper {
291+
position: absolute;
292+
display: flex;
293+
align-items: center;
294+
justify-content: center;
295+
width: 100%;
296+
height: 100%;
297+
298+
.icon-thumbnail {
299+
top: 0;
300+
}
301+
}
302+
303+
.thumbnail.with-caption {
304+
.kicon-wrapper {
305+
height: calc(100% - #{$caption-height});
306+
}
307+
}
308+
305309
</style>

0 commit comments

Comments
 (0)