Skip to content

Commit

Permalink
feat(glyphs): virtual list glyph pack placeholder images (#700)
Browse files Browse the repository at this point in the history
  • Loading branch information
josephmcg authored Dec 22, 2021
1 parent d9bf3a7 commit 247ad55
Show file tree
Hide file tree
Showing 26 changed files with 199 additions and 221 deletions.
Binary file added assets/img/glyphLoader.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 5 additions & 6 deletions components/views/chat/enhancers/Enhancers.less
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
&:extend(.full-width);
height: calc(@full - 3rem);
overflow-y: scroll;
}
#container::-webkit-scrollbar {
display: none;
&::-webkit-scrollbar {
display: none;
}
}
.navbar {
&:extend(.full-width);
Expand All @@ -33,8 +33,7 @@
}
}
height: @enhancers-height;
min-width: @enhancers-width;
max-width: @enhancers-width;
width: @enhancers-width;
position: absolute;
margin-left: @normal-spacing;
right: @normal-spacing !important;
Expand Down Expand Up @@ -98,6 +97,6 @@

@media only screen and (max-width: @mobile-breakpoint) {
#enhancers {
width: calc(100vw - @normal-spacing*2);
width: calc(@full - @normal-spacing*2);
}
}
32 changes: 10 additions & 22 deletions components/views/chat/enhancers/glyphs/Glyphs.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,17 @@
type="primary"
/>
</div>

<EnhancersGlyphsNav />
<div class="glyph-content hidden-scroll">
<UiScroll verticalScroll scrollbarVisibility="scroll" class="glyph-content">
<EnhancersGlyphsMostUsed></EnhancersGlyphsMostUsed>

<div v-for="(pack, i) in filteredGlyphs">
<v-responsive max-height="@full">
<UiLoadersLoadingInline :count="3" v-if="!pack.isActive" />
<v-lazy
v-model="pack.isActive"
:options="{
threshold: .4
}"
min-height="30"
transition="fade-transition"
>
<EnhancersGlyphsPack :key="pack.id" :pack="pack">
</EnhancersGlyphsPack>
</v-lazy>
</v-responsive>
</div>
</UiScroll>
<virtual-list
class="virtual-list"
style="height: 325px; overflow-y: auto"
:data-key="'id'"
:data-sources="filteredGlyphs"
:data-component="packGroup"
:keeps="15"
/>
</div>

<EnhancersGlyphsItemInfo></EnhancersGlyphsItemInfo>
<EnhancersGlyphsItemInfo />
</div>
16 changes: 11 additions & 5 deletions components/views/chat/enhancers/glyphs/Glyphs.less
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
#glyphs {
position: relative;
height: @full;
&:extend(.light-padding); padding-bottom: @xlarge-spacing;
&:extend(.light-padding);
.search-glyph-box {
margin-bottom: @light-spacing;
input {
Expand All @@ -11,13 +11,19 @@
.glyph-list-box {
&:extend(.blur);
&:extend(.bordered);
&:extend(.light-padding); &:extend(.round-corners);
&:extend(.light-padding);
&:extend(.round-corners);
}
.glyph-content {
height: @full;
font-size: 0.75rem;
section {
height: @full;
}
.virtual-list {
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
background-color: @primary-color;
border-radius: 6px;
}
}
}
22 changes: 8 additions & 14 deletions components/views/chat/enhancers/glyphs/Glyphs.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<template src="./Glyphs.html"></template>
<script lang="ts">
import Vue from 'vue'
import _, { cloneDeep, isEmpty } from 'lodash'
import VirtualList from 'vue-virtual-scroll-list'
import PackGroup from './pack/PackGroup.vue'
export default Vue.extend({
components: { VirtualList },
data() {
return {
filteredGlyphs: this.$mock.glyphs,
filteredGlyphs: Object.values(this.$mock.glyphs),
searchText: '',
selectedPack: null,
packGroup: PackGroup,
}
},
watch: {
Expand All @@ -18,19 +21,10 @@ export default Vue.extend({
},
methods: {
filter(filterValue: any) {
this.filteredGlyphs = Object.entries(
_.cloneDeep(this.$mock.glyphs),
).reduce(
(prev, [key, value]: [string, any]) => ({
...prev,
...(value?.name?.includes(filterValue) ? { [key]: value } : {}),
}),
{},
this.filteredGlyphs = Object.values(this.$mock.glyphs).filter(
(pack) =>
pack.name.toLowerCase().indexOf(filterValue.toLowerCase()) !== -1,
)
// set active to ensure pack loads. Otherwise lazy load scroll trigger can be impossible to execute
if (!_.isEmpty(this.filteredGlyphs)) {
this.filteredGlyphs[Object.keys(this.filteredGlyphs)[0]].isActive = true
}
},
},
})
Expand Down
9 changes: 6 additions & 3 deletions components/views/chat/enhancers/glyphs/item/Item.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<div
<img
:width="`${width}px`"
:height="`${height}px`"
class="glyph-item"
:style="getStyle()"
:src="getSrc"
@mouseover="mouseOver"
@mouseleave="mouseLeave"
v-on="sendOnClick ? {click: addGlyph} : {}"
></div>
@load="setLoaded"
/>
11 changes: 4 additions & 7 deletions components/views/chat/enhancers/glyphs/item/Item.less
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
.glyph-item {
cursor: pointer;
background: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-style: none;
}
cursor: pointer;
aspect-ratio: 1/1;
object-fit: cover;
}
22 changes: 14 additions & 8 deletions components/views/chat/enhancers/glyphs/item/Item.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template src="./Item.html"></template>
<script lang="ts">
// eslint-disable-next-line import/named
import Vue, { PropType } from 'vue'
import { Glyph } from '~/types/ui/glyph'
import * as loadImg from '~/assets/img/glyphLoader.png'
export default Vue.extend({
props: {
Expand All @@ -27,14 +27,17 @@ export default Vue.extend({
},
sendOnClick: { type: Boolean, default: false, required: false },
},
methods: {
getStyle() {
return {
'background-image': `url(${this.src})`,
width: `${this.width}px`,
height: `${this.height}px`,
}
computed: {
getSrc() {
return this.isLoaded ? this.src : loadImg
},
},
data() {
return {
isLoaded: false,
}
},
methods: {
mouseOver() {
/* Set hovered glyph info only pack property exist */
if (this.pack) {
Expand Down Expand Up @@ -62,6 +65,9 @@ export default Vue.extend({
pack: this.pack.name,
})
},
setLoaded() {
this.isLoaded = true
},
},
})
</script>
Expand Down
17 changes: 0 additions & 17 deletions components/views/chat/enhancers/glyphs/mostUsed/MostUsed.html

This file was deleted.

3 changes: 0 additions & 3 deletions components/views/chat/enhancers/glyphs/mostUsed/MostUsed.less

This file was deleted.

29 changes: 0 additions & 29 deletions components/views/chat/enhancers/glyphs/mostUsed/MostUsed.vue

This file was deleted.

15 changes: 8 additions & 7 deletions components/views/chat/enhancers/glyphs/nav/Nav.html
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
<div id="glyphs-nav" class="glyph-list-box">
<div class="account-list">
<div class="timer" @click="() => {$emit('navSelected', '')}">
<clock-icon class="control-icon" size="1x" />
</div>
<div class="timer">
<clock-icon class="control-icon" size="1x" />
</div>
<div class="pack-list">
<div v-for="pack in $mock.glyphs" @click="$emit('navSelected', pack.name)">
<div v-for="pack in $mock.glyphs">
<EnhancersGlyphsItem
:key="pack.id"
:src="pack.stickerURLs[0]"
:pack="pack"
></EnhancersGlyphsItem>
:height="32"
:width="32"
:sendOnClick="true"
/>
</div>
</div>
<div class="market-place" v-on:click="toggleMarketPlace">
<div class="market-place" @click="toggleMarketPlace">
<shopping-bag-icon class="control-icon" size="1x" />
</div>
</div>
22 changes: 7 additions & 15 deletions components/views/chat/enhancers/glyphs/nav/Nav.less
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
#glyphs-nav {
display: flex;
align-items: center;
justify-content: space-between;
.account-list {
display: flex;
align-items: center;
.timer {
cursor: pointer;
margin-right: @light-spacing;
&:extend(.background-semitransparent-dark);
padding: @xlight-spacing @light-spacing;
&:extend(.round-corners);
}
justify-content: space-around;
gap: @light-spacing;
.timer {
&:extend(.background-semitransparent-dark);
padding: @xlight-spacing @light-spacing;
&:extend(.round-corners);
}
.pack-list {
display: flex;
border-left: @mini-light-border;
border-right: @mini-light-border;
padding: 0 @light-spacing;
display: flex;
align-items: center;
flex-grow: 1;
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
Expand All @@ -31,6 +24,5 @@
}
.market-place {
cursor: pointer;
padding: 0 @light-spacing;
}
}
2 changes: 1 addition & 1 deletion components/views/chat/enhancers/glyphs/pack/Pack.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
:src="glyph"
:pack="pack"
:sendOnClick="true"
></EnhancersGlyphsItem>
/>
</div>
</div>
3 changes: 0 additions & 3 deletions components/views/chat/enhancers/glyphs/pack/Pack.less
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,5 @@
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 1rem;
margin-top: @light-spacing;
.glyph-item {
margin: 0 @light-spacing @light-spacing 0;
}
}
}
21 changes: 21 additions & 0 deletions components/views/chat/enhancers/glyphs/pack/PackGroup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template>
<EnhancersGlyphsPack :key="source.id" :pack="source" />
</template>

<script lang="ts">
export default {
name: 'PackGroup',
props: {
index: {
type: Number,
default: 0,
},
source: {
type: Object,
default() {
return {}
},
},
},
}
</script>
2 changes: 2 additions & 0 deletions components/views/chat/message/glyph/Glyph.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
.glyph {
width: 192px;
height: 192px;
aspect-ratio: 1/1;
object-fit: cover;
cursor: pointer;
}

Expand Down
Loading

0 comments on commit 247ad55

Please sign in to comment.