FIX: Some style fixes

kevinfaveri · May 10, 2020 · f751521 · f751521
1 parent 1e14c6e
commit f751521
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 12 deletions.
diff --git a/docs/.vuepress/components/TwemojiTextarea.vue b/docs/.vuepress/components/TwemojiTextarea.vue
@@ -11,6 +11,9 @@
       idTextarea="idTextarea"
       pickerWidth="#idTextarea"
       :pickerArrowEnabled="false"
+      :pickerPaddingOffset="0"
+      componentColor="#F7F7F7"
+      placeholder="Type here..."
       >
     </twemoji-textarea>
   </div>

diff --git a/docs/docs/changelog/index.md b/docs/docs/changelog/index.md
@@ -4,6 +4,9 @@ title: 'Changelog'
 
 # Changelog
 
+## 5.7.4
+- Minor style bugfix for components
+
 ## 5.7.3
 - Style update for TwemojiPicker
 

diff --git a/docs/docs/twemoji-textarea-api/index.md b/docs/docs/twemoji-textarea-api/index.md
@@ -35,7 +35,7 @@ The value of this prop represents whether the textarea is enabled.
 
 ### componentColor
 - Type: ``string``
-- Default: ``'#f0f0f0'``
+- Default: ``'#F7F7F7'``
 - Valid Props: ``Any CSS valid color.``
 
 Define the component color style.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kevinfaguiar/vue-twemoji-picker",
-  "version": "5.7.3",
+  "version": "5.7.4",
   "main": "dist/vue-twemoji-picker.umd.min.js",
   "module": "dist/vue-twemoji-picker.esm.min.js",
   "unpkg": "dist/vue-twemoji-picker.min.js",
@@ -49,7 +49,7 @@
     "vue": "^2.6.11"
   },
   "devDependencies": {
-    "@kevinfaguiar/vue-twemoji-picker": "^5.7.1",
+    "@kevinfaguiar/vue-twemoji-picker": "^5.7.3",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-image": "^2.0.4",
     "@rollup/plugin-node-resolve": "^7.1.3",

diff --git a/src/components/Sandbox.vue b/src/components/Sandbox.vue
@@ -36,6 +36,7 @@
         pickerWidth="#idTextarea"
         :randomEmojiArray="randomEmojiArray"
         :emojiPickerDisabled="emojiPickerDisabled"
+        :textareaDisabled="textareaDisabled"
       >
       </twemoji-textarea>
       <button @click="onClickTest">Working Test</button>
@@ -64,7 +65,7 @@
 @import '../assets/simple-grid.css';
 
 body {
-  background-color: #fafafa;
+  background-color: #ffffff;
 }
 
 a {
@@ -121,6 +122,7 @@ export default Vue.extend({
       content: '',
       randomEmojiArray: ['😀'],
       emojiPickerDisabled: false,
+      textareaDisabled: false,
     };
   },
   mounted() {
@@ -186,6 +188,7 @@ export default Vue.extend({
     },
     onClickTest() {
       this.emojiPickerDisabled = !this.emojiPickerDisabled;
+      this.textareaDisabled = !this.textareaDisabled;
     },
     testChangeIsPickerOpen1() {
       this.$refs.picker.isPickerOpen = !this.$refs.picker.isPickerOpen;

diff --git a/src/components/TwemojiPicker/TwemojiPicker.vue b/src/components/TwemojiPicker/TwemojiPicker.vue
@@ -37,7 +37,7 @@
             <div id="emoji-popover-header" class="scroll-min">
               <span
                 v-if="recentEmojisFeat && recentEmojis.length !== 0"
-                v-html="getEmojiImgFromUnicode('⏱️')"
+                v-html="getEmojiImgFromUnicode('🕒')"
                 class="emoji-tab"
                 @click="changeEmojiListActive(-1)"
                 :class="{ active: emojiGroupActive === -1 }"
@@ -155,7 +155,7 @@
     }
 
     > #emoji-popover-header {
-      padding: 15px;
+      padding: 15px 5px;
       overflow-y: hidden;
       overflow-x: auto;
       white-space: nowrap;
@@ -264,6 +264,10 @@
         }
 
         > span {
+          > img {
+            width: 24px;
+            height: 24px;
+          }
           flex-grow: 1;
           padding: 5px 10px;
           width: 32px !important;

diff --git a/src/components/TwemojiTextarea.vue b/src/components/TwemojiTextarea.vue
@@ -59,7 +59,7 @@
   > #twemoji-textarea {
     flex-grow: 95;
     flex-basis: 0;
-    background-color: #fafafa;
+    background-color: #ffffff;
     font-size: 14px;
     overflow-y: auto;
     overflow-x: hidden;
@@ -159,7 +159,7 @@ export default Vue.extend({
     },
     componentColor: {
       type: String as () => string,
-      default: '#f0f0f0',
+      default: '#F7F7F7',
       validator: function (value: string) {
         const s = new Option().style;
         s.color = value;

diff --git a/yarn.lock b/yarn.lock
@@ -1358,10 +1358,10 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
-"@kevinfaguiar/vue-twemoji-picker@^5.7.1":
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/@kevinfaguiar/vue-twemoji-picker/-/vue-twemoji-picker-5.7.1.tgz#6f7e3bf333c7df34a306fd3aa719b492f4bedf1f"
-  integrity sha512-kRQsHpeHDxjJ7OA+QdQNowVKukERfwFYtuqTxlLTA8aPEtEgfeBAzweetzUElguWkf5iog8x13OWkqQmO1YLRg==
+"@kevinfaguiar/vue-twemoji-picker@^5.7.3":
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/@kevinfaguiar/vue-twemoji-picker/-/vue-twemoji-picker-5.7.3.tgz#e33648363d6415385919930aa9da663cffae48b8"
+  integrity sha512-OOu05k7oYKyAWHsy/5IrN+xYsDKG5Gb967yySLGdWefM51wHtel0gl6vPvHmaBP6A5+4eD24gpLGE9QuslFGsA==
   dependencies:
     "@popperjs/core" "^2.4.0"
     lodash.pick "^4.4.0"