From 6ee9238dd7d7d6367feae0a710d5fb584ce8e23e Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Fri, 20 Sep 2019 21:15:02 +0300 Subject: [PATCH 1/7] Add StaticPicker - component that is not using vue-virtual-scroller. --- css/emoji-mart.css | 18 +- src/components/StaticPicker.vue | 286 ++++++++++++++++++++++++++++++++ src/components/index.js | 1 + src/index.js | 1 + 4 files changed, 303 insertions(+), 3 deletions(-) create mode 100644 src/components/StaticPicker.vue diff --git a/css/emoji-mart.css b/css/emoji-mart.css index e0bcf6f2..441a2853 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -75,6 +75,16 @@ border-bottom-right-radius: 5px; } +.emoji-mart-scroll { + position: relative; + overflow-y: scroll; + flex: 1; + padding: 0 6px 6px 6px; + z-index: 0; /* Fix for rendering sticky positioned category labels on Chrome */ + will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */ + -webkit-overflow-scrolling: touch; +} + .emoji-mart-anchors { display: flex; flex-direction: row; @@ -175,12 +185,14 @@ } .emoji-mart-category-label { - /* z-index: 2; */ - /* position: relative; */ - /* position: -webkit-sticky; */ position: sticky; top: 0; } +.emoji-mart-static .emoji-mart-category-label { + z-index: 2; + /* position: relative; */ + position: -webkit-sticky; +} .emoji-mart-category-label span { display: block; diff --git a/src/components/StaticPicker.vue b/src/components/StaticPicker.vue new file mode 100644 index 00000000..c478d371 --- /dev/null +++ b/src/components/StaticPicker.vue @@ -0,0 +1,286 @@ + + + diff --git a/src/components/index.js b/src/components/index.js index 34ace13b..9b146d27 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -5,3 +5,4 @@ export { default as Search } from './search' export { default as Skins } from './skins' export { default as Emoji } from './Emoji' export { default as Picker } from './Picker' +export { default as StaticPicker } from './StaticPicker' diff --git a/src/index.js b/src/index.js index 4fab6775..f5a5bd81 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import frequently from './utils/frequently' export { Picker, + StaticPicker, Emoji, Anchors, Preview, From d215738e0a3ed8cec40ddad4fa0afd878e673d65 Mon Sep 17 00:00:00 2001 From: Boris Serebrov Date: Fri, 20 Sep 2019 21:15:53 +0300 Subject: [PATCH 2/7] Update demo app --- docs/app.vue | 11 +- docs/bundle.js | 588 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 591 insertions(+), 8 deletions(-) diff --git a/docs/app.vue b/docs/app.vue index db7e5dab..19644c91 100644 --- a/docs/app.vue +++ b/docs/app.vue @@ -76,7 +76,11 @@

Custom Search And Preview Templates Example

- + Also here we use "StaticPicker" which does not use virtual scroller (it is + slower, but easier to customize with css) +
+
+ - +
@@ -127,7 +131,7 @@