Merge branch 'feat/article-area-renovation' into imprv/omit-if-page-path-is-too-long-on-edit-mode

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -25,6 +25,8 @@ import RevisionAuthor from './RevisionAuthor';
 import DrawerToggler from './DrawerToggler';
 import UserPicture from '../User/UserPicture';
 
+import PageManagement from '../Page/PageManagement';
+
 
 // eslint-disable-next-line react/prop-types
 const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
@@ -196,6 +198,7 @@ const GrowiSubNavigation = (props) => {
         <div className="d-flex flex-column align-items-end justify-content-center">
           <div className="d-flex">
             { !isPageInTrash && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
+            <PageManagement />
           </div>
           <div className="mt-2">
             <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} />

src/client/js/components/Page/PageManagement.jsx

@@ -175,10 +175,10 @@ const PageManagement = (props) => {
       <>
         <button
           type="button"
-          className="btn-link nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret"
+          className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management"
           data-toggle="dropdown"
         >
-          <i className="icon-options-vertical"></i>
+          <i className="icon-options"></i>
         </button>
       </>
     );
@@ -192,7 +192,7 @@ const PageManagement = (props) => {
           className="btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled"
           id="icon-options-guest-tltips"
         >
-          <i className="icon-options-vertical"></i>
+          <i className="icon-options"></i>
         </button>
         <UncontrolledTooltip placement="top" target="icon-options-guest-tltips">
           {t('Not available for guest')}

src/client/styles/scss/atoms/_buttons.scss

@@ -85,3 +85,9 @@
     }
   }
 }
+
+// Page Management Dropdown icon
+.grw-btn-page-management {
+  background-color: transparent;
+  transition: 0.3s;
+}

src/client/styles/scss/theme/_apply-colors.scss

@@ -491,3 +491,9 @@ mark.rbt-highlight-text {
     fill: $gray-900;
   }
 }
+
+// Page Management Dropdown icon
+.grw-btn-page-management:hover,
+.grw-btn-page-management:focus {
+  background-color: rgba($color-link, 0.15);
+}

src/server/views/widget/page_tabs.html

@@ -47,7 +47,7 @@
   {# to place right side #}
   <div class="mr-auto"></div>
 
-  <!-- icon-options-vertical -->
+  <!-- icon-options -->
   {% if !isTrashPage() %}
     <li id="page-management" class="nav-item dropdown d-edit-none"></li>
   {% endif %}