1428 like/dislike tooltip (#1466)

GolosChain · Nov 8, 2018 · b14c26e · b14c26e
1 parent f0aac9c
commit b14c26e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/app/locales/en.json b/app/locales/en.json
@@ -53,14 +53,13 @@
     "category": "Category",
     "chanel_card": "Contact",
     "close_button": "Close",
-    "dislike": "Dislike",
+    "expected_payout": "Expected payout",
     "dislikers_list": "Voted with dislike",
     "expected_payout": "Expected payout",
     "facebook_link": "Golos.io on Facebook page",
     "followers": "Followers",
     "following": "Following",
     "header_logo": "Golos.io logo",
-    "like": "Like",
     "likers_list": "Voted with like",
     "notifications": "Notifications",
     "share_on_facebook": "Share on Facebook",
@@ -479,6 +478,7 @@
     },
     "delegated_vesting": "%(VESTING_TOKEN)s delegated from this account",
     "delete": "Delete",
+    "dislike": "Dislike",
     "dismiss": "Dismiss",
     "do_you_need_to": "Do you need to",
     "documentation": "Documentation",
@@ -522,6 +522,7 @@
     "invites": "Invites",
     "joined": "Joined",
     "keep_me_logged_in": "Keep me logged in",
+    "like": "Like",
     "list_posts": "List",
     "loading": "Loading",
     "login": "Login",

diff --git a/app/locales/ru-RU.json b/app/locales/ru-RU.json
@@ -53,14 +53,13 @@
     "category": "Категория",
     "channel_card": "Канал",
     "close_button": "Закрыть",
-    "dislike": "Голосовать против",
+    "expected_payout": "Ожидаемая выплата",
     "dislikers_list": "Проголосовали против",
     "expected_payout": "Ожидаемая выплата",
     "facebook_link": "Страница Golos.io на Facebook",
     "followers": "Подписчики",
     "following": "Подписки",
     "header_logo": "Логотип golos.io",
-    "like": "Голосовать за",
     "likers_list": "Проголосовали за",
     "notifications": "Счётчик уведомлений",
     "share_on_facebook": "Поделиться на Facebook",
@@ -481,6 +480,7 @@
     },
     "delegated_vesting": "%(VESTING_TOKEN)s делегированная с этого аккаунта",
     "delete": "Удалить",
+    "dislike": "Голосовать против",
     "dismiss": "Скрыть",
     "do_you_need_to": "Вам нужно",
     "documentation": "Документация",
@@ -524,6 +524,7 @@
     "invites": "Приглашения",
     "joined": "Присоединился",
     "keep_me_logged_in": "Оставить меня залогиненным",
+    "like": "Голосовать за",
     "list_posts": "Список",
     "loading": "Загрузка",
     "login": "Войти",

diff --git a/src/app/components/common/VotePanel/VotePanel.jsx b/src/app/components/common/VotePanel/VotePanel.jsx
@@ -254,28 +254,32 @@ export default class VotePanel extends PureComponent {
         const { className, sidePanel, votesSummary } = this.props;
         const { showSlider, sliderAction } = this.state;
 
+        const likersList = showSlider
+            ? null
+            : makeTooltip(votesSummary.firstLikes, votesSummary.likes > 10);
+        const dislikersList = showSlider
+            ? null
+            : makeTooltip(votesSummary.firstDislikes, votesSummary.dislikes > 10);
+
         return (
             <Root className={className} innerRef={this._onRef} vertical={sidePanel}>
                 <LikeBlock
                     active={votesSummary.myVote === 'like' || sliderAction === 'like'}
-                    data-tooltip={
-                        showSlider
-                            ? null
-                            : makeTooltip(votesSummary.firstLikes, votesSummary.likes > 10)
-                    }
-                    data-tooltip-html
                     vertical={sidePanel}
                 >
                     <LikeWrapper
-                        innerRef={this._onLikeRef}
-                        onClick={this._onLikeClick}
-                        vertical={sidePanel}
                         role="button"
-                        aria-label={tt('aria_label.like')}
+                        data-tooltip={tt('g.like')}
+                        aria-label={tt('g.like')}
+                        innerRef={this.onLikeRef}
+                        vertical={sidePanel}
+                        onClick={this.onLikeClick}
                     >
                         <LikeIcon name="like" />
                     </LikeWrapper>
                     <LikeCount
+                        data-tooltip={likersList}
+                        data-tooltip-html
                         role="button"
                         aria-label={tt('aria_label.likers_list')}
                         onClick={votesSummary.likes === 0 ? null : this.onLikesNumberClick}
@@ -288,24 +292,21 @@ export default class VotePanel extends PureComponent {
                 <LikeBlockNeg
                     last
                     activeNeg={votesSummary.myVote === 'dislike' || sliderAction === 'dislike'}
-                    data-tooltip={
-                        showSlider
-                            ? null
-                            : makeTooltip(votesSummary.firstDislikes, votesSummary.dislikes > 10)
-                    }
-                    data-tooltip-html
                     vertical={sidePanel}
                 >
                     <LikeWrapper
-                        innerRef={this._onDisLikeRef}
-                        onClick={this._onDislikeClick}
-                        vertical={sidePanel}
                         role="button"
-                        aria-label={tt('aria_label.dislike')}
+                        data-tooltip={tt('g.dislike')}
+                        aria-label={tt('g.dislike')}
+                        innerRef={this.onDisLikeRef}
+                        vertical={sidePanel}
+                        onClick={this.onDislikeClick}
                     >
                         <LikeIconNeg name="like" />
                     </LikeWrapper>
                     <LikeCount
+                        data-tooltip={dislikersList}
+                        data-tooltip-html
                         role="button"
                         aria-label={tt('aria_label.dislikers_list')}
                         onClick={votesSummary.dislikes === 0 ? null : this.onDislikesNumberClick}
@@ -408,15 +409,15 @@ export default class VotePanel extends PureComponent {
         this._root = el;
     };
 
-    _onLikeRef = el => {
+    onLikeRef = el => {
         this._like = el;
     };
 
-    _onDisLikeRef = el => {
+    onDisLikeRef = el => {
         this._disLike = el;
     };
 
-    _onLikeClick = () => {
+    onLikeClick = () => {
         const { votesSummary } = this.props;
 
         if (this.state.showSlider) {
@@ -436,7 +437,7 @@ export default class VotePanel extends PureComponent {
         }
     };
 
-    _onDislikeClick = async () => {
+    onDislikeClick = async () => {
         const { votesSummary } = this.props;
 
         if (this.state.showSlider) {