adjust styles

packages/growi-plugin-lsx/src/resource/js/components/Lsx.jsx

@@ -163,7 +163,9 @@ export class Lsx extends React.Component {
     }
     // render tree
     else {
-      return <ListView nodeTree={this.state.nodeTree} options={lsxContext.options} />
+      return <ListView nodeTree={this.state.nodeTree}
+          options={lsxContext.options}
+          lsxContext={this.props.lsxContext} />
     }
   }
 }

packages/growi-plugin-lsx/src/resource/js/components/PageList/ListView.js

@@ -3,6 +3,8 @@ import React from 'react';
 import { Page } from './Page';
 import { PageNode } from '../PageNode';
 
+import { LsxContext } from '../../util/LsxContext';
+
 export class ListView extends React.Component {
 
   render() {
@@ -10,6 +12,16 @@ export class ListView extends React.Component {
       return <Page pageNode={pageNode} options={this.props.options} />;
     });
 
+    // no contents
+    if (this.props.nodeTree.length == 0) {
+      return <div className="text-muted">
+          <small>
+            <i className="fa fa-fw fa-info-circle" aria-hidden="true"></i>
+            $lsx(<a href={this.props.lsxContext.pagePath}>{this.props.lsxContext.pagePath}</a>) has no contents
+          </small>
+        </div>;
+    }
+
     return (
       <div className="page-list">
         <ul className="page-list-ul">
@@ -23,4 +35,5 @@ export class ListView extends React.Component {
 ListView.propTypes = {
   nodeTree: React.PropTypes.arrayOf(PageNode).isRequired,
   options: React.PropTypes.object.isRequired,
+  lsxContext: React.PropTypes.instanceOf(LsxContext).isRequired,
 };

packages/growi-plugin-lsx/src/resource/js/components/PageList/Page.js

@@ -9,12 +9,17 @@ export class Page extends React.Component {
   render() {
     const pageNode = this.props.pageNode;
     const page = pageNode.page;
+
     const childPages = pageNode.children.map((pageNode) => {
       return <Page pageNode={pageNode} options={this.props.options} />;
     });
+    const icon = (pageNode.children.length > 0) ?
+      <i className="fa fa-folder" aria-hidden="true"></i>:
+      <i className="fa fa-file-text-o" aria-hidden="true"></i>;
 
     return (
       <li className="page-list-li">
+        <small>{icon}</small>
         <a className="page-list-link" href={page.path}>
           <PagePath page={page}/>
         </a>