From 1a74f9dabf41dfb8f84cabf5b8b94a813cc82aca Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Thu, 28 Nov 2024 16:05:28 +0800
Subject: [PATCH] ['wiki' page] redesigned the 'change cover' button (#7120)

---
 .../wiki2/wiki-right-header/page-cover.css    | 30 ++++-----
 .../wiki2/wiki-right-header/page-cover.js     | 64 +++++++++----------
 2 files changed, 43 insertions(+), 51 deletions(-)

diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-cover.css b/frontend/src/pages/wiki2/wiki-right-header/page-cover.css
index 150c2da662..70a77dac3b 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-cover.css
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-cover.css
@@ -11,28 +11,22 @@
   object-fit: cover;
 }
 
-.wiki-page-cover__controller {
-  display: none;
-  position: absolute;
-  top: 15px;
-  right: 20%;
-}
-
-.wiki-page-cover__controller.show {
-  display: block;
-}
-
-.wiki-page-cover__controller .wiki-cover-controller-btn {
-  padding: 4px 6px;
-  background-color: #fff;
+.wiki-cover-controller-btn {
+  padding: 0 .5rem;
+  background: rgba(0,0,0, 0.5);
+  height: 28px;
+  line-height: 28px;
   border-radius: 4px;
-  font-size: 12px;
-  color: #6a6767b3;
+  font-size: 14px;
+  color: #fff;
   cursor: pointer;
+  position: absolute;
+  top: 16px;
+  right: 16px;
 }
 
-.wiki-page-cover__controller .wiki-cover-controller-btn:hover {
-  color: #4d5156;
+.wiki-cover-controller-btn:hover {
+  background: rgba(0,0,0, 0.7);
 }
 
 .wiki-page-cover-popover {
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-cover.js b/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
index 29f7b4a0d4..eb508fca40 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
@@ -1,6 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { UncontrolledPopover } from 'reactstrap';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Utils } from '../../../utils/utils';
 import { gettext, wikiPermission } from '../../../utils/constants';
@@ -50,38 +49,37 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
   }
 
   return (
-    <>
-      <div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-        <img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} />
-        <div className={classNames('wiki-page-cover__controller', { show: isShowCoverController, 'd-none': !isDesktop })}>
-          {wikiPermission !== 'public' &&
-            <div className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div>
-          }
-        </div>
-      </div>
-      {isDesktop && wikiPermission !== 'public' &&
-        <UncontrolledPopover
-          ref={popoverRef}
-          flip
-          target="wiki-change-cover-btn"
-          placement="bottom"
-          hideArrow={true}
-          popperClassName='wiki-page-cover-popover'
-          innerClassName='wiki-page-cover-panel wiki-page-panel'
-          trigger="legacy"
-        >
-          <div className='wiki-page-cover-panel__header popover-header'>
-            <span>{gettext('Gallery')}</span>
-            <span onClick={removeCoverImage} className='wiki-remove-icon-btn'>{gettext('Remove')}</span>
-          </div>
-          <div className='wiki-page-cover-panel__body popover-body'>
-            {WIKI_COVER_LIST.map(imgName => (
-              <img key={imgName} onClick={updateCoverImage.bind(null, imgName)} className='wiki-cover-gallery-img' alt={gettext('Cover')} src={getCoverImgUrl(`${imgName}`)} />
-            ))}
-          </div>
-        </UncontrolledPopover>
-      }
-    </>
+    <div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} />
+      {isDesktop && wikiPermission !== 'public' && isShowCoverController && (
+        <>
+          <button className='wiki-cover-controller-btn border-0 d-flex align-items-center' id='wiki-change-cover-btn'>
+            <i className="sf3-font sf3-font-image mr-1"></i>
+            {gettext('Change cover')}
+          </button>
+          <UncontrolledPopover
+            ref={popoverRef}
+            flip
+            target="wiki-change-cover-btn"
+            placement="bottom"
+            hideArrow={true}
+            popperClassName='wiki-page-cover-popover'
+            innerClassName='wiki-page-cover-panel wiki-page-panel'
+            trigger="legacy"
+          >
+            <div className='wiki-page-cover-panel__header popover-header'>
+              <span>{gettext('Gallery')}</span>
+              <span onClick={removeCoverImage} className='wiki-remove-icon-btn'>{gettext('Remove')}</span>
+            </div>
+            <div className='wiki-page-cover-panel__body popover-body'>
+              {WIKI_COVER_LIST.map(imgName => (
+                <img key={imgName} onClick={updateCoverImage.bind(null, imgName)} className='wiki-cover-gallery-img' alt={gettext('Cover')} src={getCoverImgUrl(`${imgName}`)} />
+              ))}
+            </div>
+          </UncontrolledPopover>
+        </>
+      )}
+    </div>
   );
 }