WIP: apply bootstrap theme

* add Simple Line Icons

lib/views/crowi-plus/widget/header.html

@@ -17,7 +17,7 @@
             data-csrftoken="{{ csrf() }}"
             data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
             class="like-button btn btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
-        ><i class="fa fa-thumbs-o-up"></i></button>
+        ><i class="icon-like"></i></button>
         {% endif %}
       </div>
       <div class="flex-item-action">

lib/views/layout/layout.html

@@ -90,6 +90,8 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
   <!-- Themify Icons -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cd-themify-icons@0.0.1/index.min.css">
+  <!-- Simple Line icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-line-icons@2.4.1/css/simple-line-icons.min.css">
   <!-- emojione -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css">
   <!-- highlight.js -->
@@ -176,7 +178,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
         {% if user %}
         <li id="" class="dropdown">
           <a href="#" data-target="#create-page" data-toggle="modal">
-            <i class="ti-pencil"></i> {{ t('New') }}
+            <i class="icon-pencil"></i> {{ t('New') }}
           </a>
         </li>
         <li class="dropdown">

lib/views/page.html

@@ -23,7 +23,7 @@
             data-csrftoken="{{ csrf() }}"
             data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
             class="like-button btn btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
-        ><i class="fa fa-thumbs-o-up"></i></button>
+        ><i class="icon-like"></i></button>
         {% endif %}
       </div>
       {% endif %}
@@ -132,14 +132,14 @@
 
     <li {% if req.body.pageForm %}class="active"{% endif %}>
       <a {% if user %}href="#edit-form" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
-        <i class="ti-pencil-alt"></i> {{ t('Edit') }}
+        <i class="icon-note"></i> {{ t('Edit') }}
       </a>
     </li>
 
 
     <li class="dropdown pull-right">
       <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
-        <i class="fa fa-ellipsis-v"></i>
+        <i class="icon-options-vertical"></i>
       </a>
       <ul class="dropdown-menu">
        <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="fa-fw ti-location-arrow"></i> {{ t('Move') }}</a></li>
@@ -152,8 +152,8 @@
       </ul>
     </li>
     {% if page %}
-    <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="ti-timer"></i> History</a></li>
-    <li class="pull-right"><a href="?presentation=1" class="toggle-presentation"><i class="ti-layout-slider-alt"></i> {{ t('Presentation Mode') }}</a></li>
+    <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="icon-layers"></i> History</a></li>
+    <li class="pull-right"><a href="?presentation=1" class="toggle-presentation"><i class="icon-film"></i> {{ t('Presentation Mode') }}</a></li>
     {% endif %}
   </ul>
   {% endif %}
@@ -195,7 +195,7 @@
     {# raw revision history #}
     {% if not page %}
     {% else %}
-    <div class="tab-pane revision-history" id="revision-history">
+    <div class="tab-pane revision-history m-t-10" id="revision-history">
     </div>
     {% endif %}
 

lib/views/page_list.html

@@ -43,7 +43,7 @@
             data-csrftoken="{{ csrf() }}"
             data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
             class="like-button btn btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
-        ><i class="fa fa-thumbs-o-up"></i></button>
+        ><i class="icon-like"></i></button>
         {% endif %}
       </div>
       {% endif %}
@@ -97,7 +97,7 @@
     </li>
     <li {% if req.body.pageForm %}class="active"{% endif %}>
       <a {% if user %}href="#edit-form" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
-        <i class="ti-pencil-alt"></i> {{ t('Edit') }}
+        <i class="icon-note"></i> {{ t('Edit') }}
       </a>
     </li>
 
@@ -110,13 +110,13 @@
     {% else %}
     <li class="dropdown pull-right">
       <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
-        <i class="fa fa-ellipsis-v"></i>
+        <i class="icon-virtical"></i>
       </a>
       <ul class="dropdown-menu">
         <li><a href="#" data-target="#unportalize" data-toggle="modal"><i class="fa fa-share"></i> {{ t('Unportalize') }}</a></li>
       </ul>
     </li>
-    <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="ti-timer"></i> History</a></li>
+    <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="icon-layers"></i> History</a></li>
     {% endif %}
   </ul>
 
@@ -136,8 +136,7 @@
       {% include '_form.html' with {forceGrant: 1} %}
     </div>
 
-    <div class="tab-pane revision-history" id="revision-history">
-      <h1><i class="fa fa-history"></i> History</h1>
+    <div class="tab-pane revision-history m-t-10" id="revision-history">
       {% if not page %}
       {% else %}
       <div class="revision-history-list">

lib/views/widget/page_side_header.html

@@ -27,7 +27,7 @@
   <div class="like-box">
     <dl class="dl-horizontal">
       <dt>
-        <i class="fa fa-thumbs-o-up"></i> {{ t('Like!') }}
+        <i class="icon-like"></i> {{ t('Like!') }}
       </dt>
       <dd>
         <p class="liker-count">
@@ -37,7 +37,7 @@
           data-csrftoken="{{ csrf() }}"
           data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
           class="like-button btn btn-default btn-outline btn-circle {% if page.isLiked(user) %}active{% endif %}"
-          ><i class="fa fa-thumbs-o-up"></i> {{ t('Like!') }}</button>
+          ><i class="icon-like"></i> {{ t('Like!') }}</button>
         {% endif %}
         </p>
         <p id="liker-list" class="liker-list" data-likers="{{ page.liker|default([])|join(',') }}">

resource/js/components/Page/RevisionPath.js

@@ -108,7 +108,7 @@ export default class RevisionPath extends React.Component {
         <CopyButton buttonId="btnCopyRevisionPath" text={this.props.pagePath}
             buttonClassName="btn btn-default btn-copy" iconClassName="ti-clipboard" />
         <a href="#edit-form" className="btn btn-default btn-edit" style={editButtonStyle}>
-          <i className="ti-pencil-alt"></i>
+          <i className="icon-note"></i>
         </a>
       </span>
     );

resource/js/legacy/crowi.js

@@ -46,7 +46,7 @@ Crowi.appendEditSectionButtons = function(parentElement) {
     $(this).append(`
       <span class="revision-head-edit-button">
         <a href="#edit-form" onClick="Crowi.setCaretLineData(${line})">
-          <i class="ti-pencil-alt"></i>
+          <i class="icon-note"></i>
         </a>
       </span>
       `