Resolved

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -73,23 +73,25 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   // TODO: improve style
   const opacityStyle = { opacity: 1.0 };
   if (page.isTarget) opacityStyle.opacity = 0.7;
-  if (isOpen) opacityStyle.opacity = 0.5;
 
   const buttonClass = isOpen ? 'rotate' : '';
 
   return (
-    <div style={{ margin: '10px' }}>
-      <div style={opacityStyle}>
+    <div className="grw-pagetree-item-wrapper">
+      <div style={opacityStyle} className="grw-pagetree-item d-flex align-items-center">
         <button
           type="button"
-          className={`grw-page-tree-button d-inline-block mr-1 ${buttonClass}`}
+          className={`grw-pagetree-button btn ${buttonClass}`}
           onClick={onClickLoadChildren}
         >
-          <i className="fa fa-caret-right"></i>
+          <i className="icon-control-play"></i>
         </button>
-        <a href={page._id} className="d-inline-block">
-          <p>{nodePath.basename(page.path as string) || '/'}</p>
+        <a href={page._id} className="d-block flex-grow-1">
+          <p className="grw-pagetree-title">{nodePath.basename(page.path as string) || '/'}</p>
         </a>
+        <div className="grw-pagetree-control">
+          Ctrl
+        </div>
       </div>
       {
         isOpen && hasChildren() && currentChildren.map(node => (

packages/app/src/components/Sidebar/SidebarContents.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-import NavigationContainer from '~/client/services/NavigationContainer';
-import { useTargetAndAncestors } from '../../stores/context';
-
-import RecentChanges from './RecentChanges';
-import CustomSidebar from './CustomSidebar';
-import PageTree from './PageTree';
-
-const SidebarContents = (props) => {
-  const { navigationContainer, isSharedUser } = props;
-
-  const pageContainer = navigationContainer.getPageContainer();
-
-  const { targetAndAncestors } = pageContainer.state;
-
-  useTargetAndAncestors(targetAndAncestors);
-
-  if (isSharedUser) {
-    return null;
-  }
-
-  let Contents;
-  switch (navigationContainer.state.sidebarContentsId) {
-    case 'recent':
-      Contents = RecentChanges;
-      break;
-    case 'tree':
-      Contents = PageTree;
-      break;
-    default:
-      Contents = CustomSidebar;
-  }
-
-  return (
-    <Contents />
-  );
-
-};
-
-SidebarContents.propTypes = {
-  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
-
-  isSharedUser: PropTypes.bool,
-};
-
-SidebarContents.defaultProps = {
-  isSharedUser: false,
-};
-
-/**
- * Wrapper component for using unstated
- */
-const SidebarContentsWrapper = withUnstatedContainers(SidebarContents, [NavigationContainer]);
-
-export default withTranslation()(SidebarContentsWrapper);

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

@@ -1,95 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-import AppContainer from '~/client/services/AppContainer';
-import NavigationContainer from '~/client/services/NavigationContainer';
-
-
-class SidebarNav extends React.Component {
-
-  static propTypes = {
-    onItemSelected: PropTypes.func,
-  };
-
-  state = {
-  };
-
-  itemSelectedHandler = (contentsId) => {
-    const { navigationContainer, onItemSelected } = this.props;
-    if (onItemSelected != null) {
-      onItemSelected(contentsId);
-    }
-
-    navigationContainer.selectSidebarContents(contentsId);
-  }
-
-  PrimaryItem = ({ id, label, iconName }) => {
-    const { sidebarContentsId } = this.props.navigationContainer.state;
-    const isSelected = sidebarContentsId === id;
-
-    return (
-      <button
-        type="button"
-        className={`d-block btn btn-primary ${isSelected ? 'active' : ''}`}
-        onClick={() => this.itemSelectedHandler(id)}
-      >
-        <i className="material-icons">{iconName}</i>
-      </button>
-    );
-  }
-
-  SecondaryItem({
-    label, iconName, href, isBlank,
-  }) {
-    return (
-      <a href={href} className="d-block btn btn-primary" target={`${isBlank ? '_blank' : ''}`}>
-        <i className="material-icons">{iconName}</i>
-      </a>
-    );
-  }
-
-  generateIconFactory(classNames) {
-    return () => <i className={classNames}></i>;
-  }
-
-  render() {
-    const { isAdmin, currentUsername, isSharedUser } = this.props.appContainer;
-    const isLoggedIn = currentUsername != null;
-
-    const { PrimaryItem, SecondaryItem } = this;
-
-    return (
-      <div className="grw-sidebar-nav">
-        <div className="grw-sidebar-nav-primary-container">
-          {!isSharedUser && <PrimaryItem id="custom" label="Custom Sidebar" iconName="code" />}
-          {!isSharedUser && <PrimaryItem id="recent" label="Recent Changes" iconName="update" />}
-          {!isSharedUser && <PrimaryItem id="tree" label="Page Tree" iconName="format_list_bulleted" />}
-          {/* <PrimaryItem id="tag" label="Tags" iconName="icon-tag" /> */}
-          {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
-        </div>
-        <div className="grw-sidebar-nav-secondary-container">
-          {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}
-          {isLoggedIn && <SecondaryItem label="Draft" iconName="file_copy" href="/me/drafts" />}
-          <SecondaryItem label="Help" iconName="help" href="https://docs.growi.org" isBlank />
-          <SecondaryItem label="Trash" iconName="delete" href="/trash" />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-SidebarNav.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
-};
-
-/**
- * Wrapper component for using unstated
- */
-const SidebarNavWrapper = withUnstatedContainers(SidebarNav, [AppContainer, NavigationContainer]);
-
-export default withTranslation()(SidebarNavWrapper);

packages/app/src/styles/_page-tree.scss

@@ -1,12 +1,33 @@
-// TODO: improve styles
 .grw-pagetree {
-  .grw-pagetree-button {
-    // animation: transform 3s ease-out;
+  .grw-pagetree-item-wrapper {
+    margin-top: 10px;
+    margin-left: 10px;
   }
 
-  .grw-pagetree-button {
-    &.rotate {
-      transform: rotate(90deg);
+  .grw-pagetree-item-wrapper {
+    .grw-pagetree-item {
+      &:hover {
+        opacity: 0.7;
+      }
+
+      .grw-pagetree-button {
+        background-color: transparent;
+
+        &.rotate {
+          transform: rotate(90deg);
+        }
+      }
+
+      .grw-pagetree-title {
+        margin: auto;
+        font-size: medium;
+      }
+
+      .grw-pagetree-control {
+        &:hover {
+          display: inline-block;
+        }
+      }
     }
   }
 }