Merge pull request #5004 from weseek/imprv/reaction-buttons

imprv: Change reaction icons

packages/app/src/client/app.jsx

@@ -33,7 +33,6 @@ import PageStatusAlert from '../components/PageStatusAlert';
 import RecentCreated from '../components/RecentCreated/RecentCreated';
 import RecentlyCreatedIcon from '../components/Icons/RecentlyCreatedIcon';
 import MyDraftList from '../components/MyDraftList/MyDraftList';
-import BookmarkIcon from '../components/Icons/BookmarkIcon';
 import BookmarkList from '../components/PageList/BookmarkList';
 import LikerList from '../components/User/LikerList';
 import Fab from '../components/Fab';
@@ -127,7 +126,6 @@ if (pageContainer.state.pageId != null) {
     'page-content-footer': <PageContentFooter />,
 
     'recent-created-icon': <RecentlyCreatedIcon />,
-    'user-bookmark-icon': <BookmarkIcon />,
   });
 
   // show the Page accessory modal when query of "compare" is requested

packages/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -116,7 +116,7 @@ class GlobalNotificationList extends React.Component {
                   )}
                   {notification.triggerEvents.includes('pageLike') && (
                     <li className="list-inline-item badge badge-pill badge-info">
-                      <i className="icon-like"></i> LIKE
+                      <i className="fa fa-heart-o"></i> LIKE
                     </li>
                   )}
                   {notification.triggerEvents.includes('comment') && (

packages/app/src/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -275,7 +275,7 @@ class ManageGlobalNotification extends React.Component {
                   onChange={() => this.onChangeTriggerEvents('pageLike')}
                 >
                   <span className="badge badge-pill badge-info">
-                    <i className="icon-like mr-1" />LIKE
+                    <i className="fa fa-heart-o mr-1" />LIKE
                   </span>
                 </TriggerEventCheckBox>
               </div>

packages/app/src/components/BookmarkButton.jsx

@@ -2,12 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { UncontrolledTooltip } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { withUnstatedContainers } from './UnstatedUtils';
 
-import { toastError } from '~/client/util/apiNotification';
-import { apiv3Put } from '~/client/util/apiv3-client';
-
 import AppContainer from '~/client/services/AppContainer';
 
 class LegacyBookmarkButton extends React.Component {
@@ -28,25 +25,27 @@ class LegacyBookmarkButton extends React.Component {
 
   render() {
     const {
-      appContainer, t, isBookmarked, sumOfBookmarks,
+      appContainer, t, isBookmarked, hideTotalNumber, sumOfBookmarks,
     } = this.props;
     const { isGuestUser } = appContainer;
 
     return (
-      <div>
+      <>
         <button
           type="button"
           id="bookmark-button"
           onClick={this.handleClick}
           className={`btn btn-bookmark border-0
-          ${`btn-${this.props.size}`} ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
         >
-          <i className="icon-star mr-3"></i>
-          <span className="total-bookmarks">
-            {sumOfBookmarks && (
-              sumOfBookmarks
-            )}
-          </span>
+          <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
+          { !hideTotalNumber && (
+            <span className="total-bookmarks ml-3">
+              {sumOfBookmarks && (
+                sumOfBookmarks
+              )}
+            </span>
+          ) }
         </button>
 
         {isGuestUser && (
@@ -54,7 +53,7 @@ class LegacyBookmarkButton extends React.Component {
             {t('Not available for guest')}
           </UncontrolledTooltip>
         )}
-      </div>
+      </>
     );
   }
 
@@ -69,18 +68,17 @@ LegacyBookmarkButton.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   isBookmarked: PropTypes.bool.isRequired,
+
+  hideTotalNumber: PropTypes.bool,
   sumOfBookmarks: PropTypes.number,
   t: PropTypes.func.isRequired,
-  size: PropTypes.string,
   onBookMarkClicked: PropTypes.func,
 };
 
-LegacyBookmarkButton.defaultProps = {
-  size: 'md',
-};
-
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const BookmarkButton = (props) => {
-  return <LegacyBookmarkButtonWrapper {...props}></LegacyBookmarkButtonWrapper>;
+  const { t } = useTranslation();
+  return <LegacyBookmarkButtonWrapper t={t} {...props}></LegacyBookmarkButtonWrapper>;
 };
 
-export default withTranslation()(BookmarkButton);
+export default BookmarkButton;

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -63,7 +63,7 @@ const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps)
         )}
         {isEnableActions && (
           <DropdownItem onClick={() => toastr.warning(t('search_result.currently_not_implemented'))}>
-            <i className="icon-fw icon-star"></i>
+            <i className="fa fa-fw fa-bookmark-o"></i>
             {t('Add to bookmark')}
           </DropdownItem>
         )}

packages/app/src/components/ContentLinkButtons.jsx

@@ -55,7 +55,7 @@ const ContentLinkButtons = (props) => {
         className="btn btn-outline-secondary btn-sm px-2"
         onClick={() => smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
       >
-        <i className="mr-2 icon-star"></i>
+        <i className="fa fa-fw fa-bookmark-o"></i>
         <span>Bookmarks</span>
       </button>
 

packages/app/src/components/Icons/BookmarkIcon.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const BookmarkIcon = () => (
-
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-  >
-
-    <g transform="translate(-925.888 168.873)">
-      <rect width="20" height="20" transform="translate(925.888 -168.873)" fill="none" />
-      <path d="M936.092-168.527a1.141,1.141,0,0,1,.205.039,1.685,1.685,0,0,1,.185.068c.058.026.116.056.175.088a1.038,1.038,0,0,1,
-        .166.117,1.826,1.826,0,0,1,.146.146c.045.052.088.1.127.156a.8.8,0,0,1,.1.175l2.26,4.7,5.2.76a1.424,1.424,0,0,1,.7.311,1.413,
-        1.413,0,0,1,.449.643,1.294,1.294,0,0,1-.351,1.423l-3.8,3.8.876,5.28a1.225,1.225,0,0,1-.088.76,1.451,1.451,0,0,1-.5.6,1.456,
-        1.456,0,0,1-.838.253,1.614,1.614,0,0,1-.351-.039,1.316,1.316,0,0,1-.35-.137l-4.52-2.435-4.54,2.435a1.37,1.37,0,0,1-.682.176h-.156a.525.525,
-        0,0,1-.146-.02l-.137-.039a1.117,1.117,0,0,1-.136-.049,1.231,1.231,0,0,1-.136-.068c-.046-.026-.088-.052-.127-.077a1.462,1.462,
-        0,0,1-.5-.6,1.232,1.232,0,0,1-.087-.76l.877-5.28-3.8-3.8a1.29,1.29,0,0,1-.35-1.423,1.4,1.4,0,0,1,.448-.643,1.423,1.423,0,0,1,
-        .7-.311l5.2-.76,2.26-4.7a1.351,1.351,0,0,1,.526-.584,1.467,1.467,0,0,1,.78-.215C935.953-168.537,936.02-168.533,936.092-168.527Zm-2.49,
-        5.9-.41.84-6.1.9,4.415,4.415-.136.879-.9,5.275,5.412-2.891,5.411,2.891-.9-5.275-.137-.879,4.415-4.415-6.115-.9-2.676-5.587Z"
-      />
-    </g>
-  </svg>
-
-);
-
-export default BookmarkIcon;

packages/app/src/components/LikeButtons.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 
 import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import UserPictureList from './User/UserPictureList';
 import { withUnstatedContainers } from './UnstatedUtils';
 
@@ -10,14 +10,17 @@ import { IUser } from '../interfaces/user';
 
 type LikeButtonsProps = {
   appContainer: AppContainer,
+
+  hideTotalNumber?: boolean,
   sumOfLikers: number,
   isLiked: boolean,
   likers: IUser[],
   onLikeClicked?: ()=>void,
-  t: (s:string)=>string,
 }
 
 const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
+  const { t } = useTranslation();
+
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const togglePopover = () => {
@@ -33,7 +36,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
   };
 
   const {
-    appContainer, isLiked, sumOfLikers, t,
+    appContainer, hideTotalNumber, isLiked, sumOfLikers,
   } = props;
   const { isGuestUser } = appContainer;
 
@@ -46,7 +49,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         className={`btn btn-like border-0
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
-        <i className="icon-like"></i>
+        <i className={`fa ${isLiked ? 'fa-heart' : 'fa-heart-o'}`}></i>
       </button>
       {isGuestUser && (
         <UncontrolledTooltip placement="top" target="like-button" fade={false}>
@@ -54,16 +57,20 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         </UncontrolledTooltip>
       )}
 
-      <button type="button" id="po-total-likes" className={`btn btn-like border-0 total-likes ${isLiked ? 'active' : ''}`}>
-        {sumOfLikers}
-      </button>
-      <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-likes" toggle={togglePopover} trigger="legacy">
-        <PopoverBody className="seen-user-popover">
-          <div className="px-2 text-right user-list-content text-truncate text-muted">
-            {props.likers?.length ? <UserPictureList users={props.likers} /> : t('No users have liked this yet.')}
-          </div>
-        </PopoverBody>
-      </Popover>
+      { !hideTotalNumber && (
+        <>
+          <button type="button" id="po-total-likes" className={`btn btn-like border-0 total-likes ${isLiked ? 'active' : ''}`}>
+            {sumOfLikers}
+          </button>
+          <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-likes" toggle={togglePopover} trigger="legacy">
+            <PopoverBody className="seen-user-popover">
+              <div className="px-2 text-right user-list-content text-truncate text-muted">
+                {props.likers?.length ? <UserPictureList users={props.likers} /> : t('No users have liked this yet.')}
+              </div>
+            </PopoverBody>
+          </Popover>
+        </>
+      ) }
     </div>
   );
 
@@ -74,8 +81,9 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
  */
 const LikeButtonsUnstatedWrapper = withUnstatedContainers(LikeButtons, [AppContainer]);
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const LikeButtonsWrapper = (props) => {
   return <LikeButtonsUnstatedWrapper {...props}></LikeButtonsUnstatedWrapper>;
 };
 
-export default withTranslation()(LikeButtonsWrapper);
+export default LikeButtonsWrapper;

packages/app/src/components/Navbar/GrowiSubNavigation.jsx

@@ -103,17 +103,15 @@ const GrowiSubNavigation = (props) => {
       <div className="d-flex">
 
         <div className="d-flex flex-column align-items-end">
-          <div className="d-flex">
-            <SubNavButtons
-              isCompactMode={isCompactMode}
-              pageId={pageId}
-              revisionId={revisionId}
-              path={path}
-              isDeletable={isDeletable}
-              isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-              willShowPageManagement={isAbleToShowPageManagement}
-            />
-          </div>
+          <SubNavButtons
+            isCompactMode={isCompactMode}
+            pageId={pageId}
+            revisionId={revisionId}
+            path={path}
+            isDeletable={isDeletable}
+            isAbleToDeleteCompletely={isAbleToDeleteCompletely}
+            willShowPageManagement={isAbleToShowPageManagement}
+          />
           <div className="mt-2">
             {pageContainer.isAbleToShowPageEditorModeManager && (
               <PageEditorModeManager

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -49,7 +49,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     catch (err) {
       toastError(err);
     }
-  }, [pageInfo]);
+  }, [appContainer, mutatePageInfo, pageId, pageInfo]);
 
   const bookmarkClickHandler = useCallback(async() => {
     if (isGuestUser) {
@@ -63,7 +63,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     catch (err) {
       toastError(err);
     }
-  }, [bookmarkInfo]);
+  }, [bookmarkInfo, isGuestUser, mutateBookmarkInfo, pageId]);
 
   if (pageInfoError != null || pageInfo == null) {
     return <></>;
@@ -77,9 +77,10 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   const { sumOfBookmarks, isBookmarked } = bookmarkInfo;
 
   return (
-    <>
+    <div className="d-flex" style={{ gap: '2px' }}>
       {isViewMode && (
         <PageReactionButtons
+          isCompactMode={isCompactMode}
           sumOfLikers={sumOfLikers}
           isLiked={isLiked}
           likers={likers || []}
@@ -101,7 +102,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
         >
         </PageManagement>
       )}
-    </>
+    </div>
   );
 };
 

packages/app/src/components/Page/PageManagement.jsx

@@ -203,7 +203,7 @@ const LegacyPageManagemenet = (props) => {
       <>
         <button
           type="button"
-          className={`btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management ${isCompactMode && 'py-0'}`}
+          className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management"
           data-toggle="dropdown"
         >
           <i className="text-muted icon-options"></i>
@@ -217,7 +217,7 @@ const LegacyPageManagemenet = (props) => {
       <>
         <button
           type="button"
-          className={`btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled ${isCompactMode && 'py-0'}`}
+          className="btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled"
           id="icon-options-guest-tltips"
         >
           <i className="text-muted icon-options"></i>

packages/app/src/components/PageReactionButtons.tsx

@@ -4,36 +4,42 @@ import { IUser } from '../interfaces/user';
 import BookmarkButton from './BookmarkButton';
 
 type Props = {
-  sumOfLikers: number,
+  isCompactMode?: boolean,
+
   isLiked: boolean,
+  sumOfLikers: number,
   likers: IUser[],
   onLikeClicked?: ()=>void,
-  sumOfBookmarks: number,
+
   isBookmarked: boolean,
+  sumOfBookmarks: number,
   onBookMarkClicked: ()=>void,
 }
 
 
 const PageReactionButtons : FC<Props> = (props: Props) => {
   const {
-    sumOfLikers, isLiked, likers, onLikeClicked, sumOfBookmarks, isBookmarked, onBookMarkClicked,
+    isCompactMode, sumOfLikers, isLiked, likers, onLikeClicked, sumOfBookmarks, isBookmarked, onBookMarkClicked,
   } = props;
 
 
   return (
     <>
-      <span>
-        <LikeButtons
-          onLikeClicked={onLikeClicked}
-          sumOfLikers={sumOfLikers}
-          isLiked={isLiked}
-          likers={likers}
-        >
-        </LikeButtons>
-      </span>
-      <span>
-        <BookmarkButton sumOfBookmarks={sumOfBookmarks} isBookmarked={isBookmarked} onBookMarkClicked={onBookMarkClicked}></BookmarkButton>
-      </span>
+      <LikeButtons
+        hideTotalNumber={isCompactMode}
+        onLikeClicked={onLikeClicked}
+        sumOfLikers={sumOfLikers}
+        isLiked={isLiked}
+        likers={likers}
+      >
+      </LikeButtons>
+      <BookmarkButton
+        hideTotalNumber={isCompactMode}
+        sumOfBookmarks={sumOfBookmarks}
+        isBookmarked={isBookmarked}
+        onBookMarkClicked={onBookMarkClicked}
+      >
+      </BookmarkButton>
     </>
   );
 };

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -81,7 +81,7 @@ const SidebarNav: FC<Props> = (props: Props) => {
         {!isSharedUser && <PrimaryItem contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" onItemSelected={onItemSelected} />}
         {!isSharedUser && <PrimaryItem contents={SidebarContentsType.TREE} label="Page Tree" iconName="format_list_bulleted" onItemSelected={onItemSelected} />}
         {/* <PrimaryItem id="tag" label="Tags" iconName="icon-tag" /> */}
-        {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
+        {/* <PrimaryItem id="favorite" label="Favorite" iconName="fa fa-bookmark-o" /> */}
       </div>
       <div className="grw-sidebar-nav-secondary-container">
         {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}

packages/app/src/components/User/LikerList.jsx

@@ -15,7 +15,7 @@ class LikerList extends React.Component {
       <div className="user-list-content text-truncate text-muted text-right">
         <span className="text-info">
           <span className="liker-user-count">{pageContainer.state.sumOfLikers}</span>
-          <i className="icon-fw icon-like"></i>
+          <i className="fa fa-fw fa-heart-o"></i>
         </span>
         <span className="mr-1">
           <UserPictureList users={pageContainer.state.likerUsers} />

packages/app/src/server/views/layout-growi/user_page.html

@@ -16,7 +16,7 @@
 
       <div class="grw-user-page-list-m d-edit-none">
         <h2 class="grw-user-page-header border-bottom pb-2 mb-3" id="bookmarks-list">
-          <i id="user-bookmark-icon"></i>
+          <i class="fa fa-fw fa-bookmark-o" style="font-size: 1.3em"></i>
           Bookmarks
         </h2>
         <div class="page-list" id="user-bookmark-list">
@@ -27,7 +27,7 @@
 
       <div class="grw-user-page-list-m mt-5 d-edit-none">
         <h2 class="grw-user-page-header border-bottom pb-2 mb-3" id="recently-created-list">
-          <i id="recent-created-icon"></i>
+          <i id="recent-created-icon" class="mr-1"></i>
           Recently Created
         </h2>
         <div class="page-list" id="user-created-list">

packages/app/src/server/views/widget/page_list.html

@@ -29,7 +29,7 @@
 
     {% if listPage.liker.length > 0 %}
     <span class="page-list-liker" data-count="{{ listPage.liker.length }}">
-      <i class="icon-like"></i>{{ listPage.liker.length }}
+      <i class="fa fa-heart-o"></i>{{ listPage.liker.length }}
     </span>
     {% endif  %}
 

packages/app/src/styles/_subnav.scss

@@ -43,10 +43,9 @@
     height: 40px;
     font-size: 20px;
   }
-
-  .btn-bookmark {
-    display: flex;
-    align-items: center;
+  .grw-btn-page-management {
+    height: 40px;
+    font-size: 16px;
   }
 
   .total-likes,
@@ -89,15 +88,15 @@
 
     .btn-like,
     .btn-bookmark {
-      @extend .btn-sm;
-
-      height: 30px;
-      font-size: 15px !important;
+      width: 32px;
+      height: 32px;
+      padding: 4px;
+      font-size: 16px;
     }
-
-    .total-likes,
-    .total-bookmarks {
-      height: 12px;
+    .grw-btn-page-management {
+      width: 32px;
+      height: 32px;
+      padding: 4px;
       font-size: 12px;
     }
   }

packages/app/src/styles/atoms/_buttons.scss

@@ -1,8 +1,8 @@
 .btn.btn-like {
-  @include button-outline-variant($secondary, lighten($info, 15%), rgba(lighten($info, 10%), 0.15), rgba(lighten($info, 10%), 0.5));
+  @include button-outline-variant($secondary, lighten($red, 15%), rgba(lighten($red, 10%), 0.15), rgba(lighten($red, 10%), 0.5));
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
-    color: lighten($info, 15%);
+    color: lighten($red, 15%);
   }
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
@@ -11,10 +11,10 @@
 }
 
 .btn.btn-bookmark {
-  @include button-outline-variant($secondary, $warning, rgba(lighten($warning, 20%), 0.5), rgba(lighten($warning, 20%), 0.5));
+  @include button-outline-variant($secondary, $orange, rgba(lighten($orange, 20%), 0.5), rgba(lighten($orange, 20%), 0.5));
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
-    color: $warning;
+    color: $orange;
   }
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;

packages/ui/src/components/PagePath/PageListMeta.jsx

@@ -30,7 +30,7 @@ export class PageListMeta extends React.Component {
 
     let likerCount;
     if (page.liker != null && page.liker.length > 0) {
-      likerCount = <span className="meta-icon"><i className="icon-like" />{page.liker.length}</span>;
+      likerCount = <span className="meta-icon"><i className="fa fa-heart-o" />{page.liker.length}</span>;
     }
 
     let locked;
@@ -50,11 +50,11 @@ export class PageListMeta extends React.Component {
 
     let bookmarkCount;
     if (this.props.bookmarkCount > 0) {
-      bookmarkCount = <span className="meta-icon"><i className="icon-star" />{this.props.bookmarkCount}</span>;
+      bookmarkCount = <span className="meta-icon"><i className="fa fa-bookmark-o" />{this.props.bookmarkCount}</span>;
     }
 
     return (
-      <span className="page-list-meta">
+      <span className="page-list-meta ml-2">
         {topLabel}
         {templateLabel}
         {seenUserCount}