modify styles

packages/growi-plugin-lsx/src/resource/css/index.css

@@ -1,4 +1,11 @@
-.lsxBlink {
+.lsx .page-list-ul > li > a:not(:hover) {
+  text-decoration: none;
+}
+.lsx .lsx-page-not-exist {
+  opacity: 0.6;
+}
+
+.lsx .lsx-blink {
   animation: lsx-fadeIn 1s ease 0s infinite alternate;
 }
 

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

@@ -187,7 +187,7 @@ export class Lsx extends React.Component {
       return (
         <div className="text-muted">
           <i className="fa fa-spinner fa-pulse fa-fw"></i>
-          <span className="lsxBlink">{lsxContext.tagExpression}</span>
+          <span className="lsx-blink">{lsxContext.tagExpression}</span>
         </div>
       );
     }

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

@@ -29,7 +29,7 @@ export class ListView extends React.Component {
     }
 
     return (
-      <div className="page-list">
+      <div className="page-list lsx">
         <ul className="page-list-ul">
         {listView}
         </ul>

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

@@ -68,8 +68,8 @@ export class Page extends React.Component {
 
   getIconElement() {
     return (this.state.isExists)
-        ? <i className="fa fa-file-text" aria-hidden="true"></i>
-        : <i className="fa fa-file-o" aria-hidden="true"></i>;
+        ? <i className="ti-agenda" aria-hidden="true"></i>
+        : <i className="ti-file lsx-page-not-exist" aria-hidden="true"></i>;
   }
 
   /**
@@ -88,7 +88,7 @@ export class Page extends React.Component {
     const pageNode = this.props.pageNode;
 
     // create PagePath element
-    let pagePathNode = <PagePath pagePath={pageNode.pagePath} />;
+    let pagePathNode = <PagePath pagePath={pageNode.pagePath} isExists={this.state.isExists} />;
     if (this.state.isLinkable) {
       pagePathNode = <a className="page-list-link" href={this.omitSlashOfEnd(pageNode.pagePath)}>{pagePathNode}</a>;
     }

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

@@ -23,12 +23,12 @@ export class PageListMeta extends React.Component {
 
     let CommentCount;
     if (page.commentCount > 0) {
-      CommentCount = <span><i className="fa fa-comment" />{page.commentCount}</span>;
+      CommentCount = <span><i className="icon-bubble" />{page.commentCount}</span>;
     }
 
     let LikerCount;
     if (page.liker.length > 0) {
-      LikerCount = <span><i className="fa fa-thumbs-up" />{page.liker.length}</span>;
+      LikerCount = <span><i className="icon-like" />{page.liker.length}</span>;
     }
 
 

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

@@ -28,11 +28,14 @@ export class PagePath extends React.Component {
   render() {
     const pagePath = this.props.pagePath.replace(this.props.excludePathString.replace(/^\//, ''), '');
     const shortPath = this.getShortPath(pagePath);
-    const shortPathEscaped = shortPath.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
-    const pathPrefix = pagePath.replace(new RegExp(shortPathEscaped + '(/)?$'), '');
+
+    let classNames = ['page-path']
+    if (!this.props.isExists) {
+      classNames.push('lsx-page-not-exist');
+    }
 
     return (
-      <span className="page-path">
+      <span className={classNames.join(' ')}>
         {shortPath}
       </span>
     );
@@ -41,6 +44,7 @@ export class PagePath extends React.Component {
 
 PagePath.propTypes = {
   pagePath: PropTypes.string.isRequired,
+  isExists: PropTypes.bool.isRequired,
 };
 
 PagePath.defaultProps = {