WIP: WIP: apply bootstrap theme

* img-circle

lib/views/admin/users.html

@@ -155,7 +155,7 @@
           {% for sUser in users %}
           <tr>
             <td>
-              <img src="{{ sUser|picture }}" class="picture picture-rounded" />
+              <img src="{{ sUser|picture }}" class="img-circle" />
               {% if sUser.admin %}
               <span class="label label-primary label-admin">
                 Admin

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

@@ -22,7 +22,7 @@
     <form class="form page-comment-form" id="page-comment-form" onsubmit="return false;">
       <div class="comment-form">
         <div class="comment-form-user">
-            <img src="{{ user|picture }}" class="picture picture-rounded" width="25" alt="{{ user.name }}" title="{{ user.name }}" />
+            <img src="{{ user|picture }}" class="img-circle" width="25" alt="{{ user.name }}" title="{{ user.name }}" />
         </div>
         <div class="comment-form-main">
           <div class="comment-write" id="comment-write">

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

@@ -34,7 +34,7 @@
         <li>
           <div class="creator-picture">
             <a href="{{ userPageRoot(page.creator) }}">
-              <img src="{{ page.creator|default(author)|picture }}" class="picture picture-rounded"><br>
+              <img src="{{ page.creator|default(author)|picture }}" class="img-circle"><br>
             </a>
           </div>
           <div class="">
@@ -45,7 +45,7 @@
         <li>
           <div class="creator-picture">
             <a href="{{ userPageRoot(page.lastUpdateUser) }}">
-              <img src="{{ page.lastUpdateUser|default(author)|picture }}" class="picture picture-rounded"><br>
+              <img src="{{ page.lastUpdateUser|default(author)|picture }}" class="img-circle"><br>
             </a>
           </div>
           <div class="">

lib/views/login.html

@@ -136,7 +136,7 @@
     <div class="google-info alert alert-info">
       {% if googleImage %}
       <p class="text-center">
-        <img src="{{ googleImage }}" class="picture picture-rounded picture-lg">
+        <img src="{{ googleImage }}" class="img-circle img-circle-lg">
       </p>
       {% endif %}
       <code>{{ googleEmail }}</code> {{ t('page_register with this Google Account') }}<br>

lib/views/page.html

@@ -90,7 +90,7 @@
 
       <i class="fa fa-trash-o" aria-hidden="true"></i>
       This page is in the trash.<br>
-      Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm picture-rounded"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
+      Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="img-circle-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
     </div>
   </div>
   {% endif %}
@@ -230,12 +230,12 @@
   Path: <span id="pagePath">{{ page.path }}</span><br>
   {# for BC #}
   {% if page.lastUpdateUser %}
-    Last updated at {{ page.updatedAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-rounded"> {{ page.lastUpdateUser.name }}<br>
+    Last updated at {{ page.updatedAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.lastUpdateUser|picture }}" class="img-circle"> {{ page.lastUpdateUser.name }}<br>
   {% else %}
-    Last updated at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.revision.author|picture }}" class="picture picture-rounded"> {{ page.revision.author.name }}<br>
+    Last updated at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.revision.author|picture }}" class="img-circle"> {{ page.revision.author.name }}<br>
   {% endif %}
   {# /for BC #}
-  Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.creator|default(page.creator)|picture }}" class="picture picture-rounded"> {{ page.creator.name }}<br>
+  Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.creator|default(page.creator)|picture }}" class="img-circle"> {{ page.creator.name }}<br>
 </p>
 {% endif %}
 

lib/views/page_list.html

@@ -144,7 +144,7 @@
       <div class="revision-history-list">
         {% for tr in tree %}
         <div class="revision-hisory-outer">
-          <img src="{{ tr.author|picture }}" class="picture picture-rounded">
+          <img src="{{ tr.author|picture }}" class="img-circle">
           <div class="revision-history-main">
             <div class="revision-history-author">
               <strong>{% if tr.author %}{{ tr.author.username }}{% else %}-{% endif %}</strong>

lib/views/user_page.html

@@ -13,7 +13,7 @@
     <span id="bookmark-button" data-csrftoken="{{ csrf() }}"></span>
   {% endif %}
     <div class="pull-left user-page-picture">
-      <img src="{{ pageUser|picture }}" class="picture picture-rounded">
+      <img src="{{ pageUser|picture }}" class="img-circle">
     </div>
     <div class="user-page-meta">
       <h2>{{ pageUser.name }}</h2>

lib/views/widget/page_list.html

@@ -8,7 +8,7 @@
 {% endif %}
 
 <li>
-  <img src="{{ page.revision.author|picture }}" class="picture picture-rounded">
+  <img src="{{ page.revision.author|picture }}" class="img-circle">
   <a href="{{ page.path }}"
     class="page-list-link"
     data-path="{{ page.path }}"

lib/views/widget/page_side_header.html

@@ -4,7 +4,7 @@
     {# default(author) としているのは、v1.1.1 以前に page.creator データが入ってないから。暫定として最新更新ユーザーを表示しちゃう。 #}
     <div class="col-md-3 creator-picture">
       <a href="{{ userPageRoot(page.creator) }}">
-        <img src="{{ page.creator|default(author)|picture }}" class="picture picture-lg picture-rounded"><br>
+        <img src="{{ page.creator|default(author)|picture }}" class="img-circle-lg img-circle"><br>
       </a>
     </div>
     <div class="col-md-9">
@@ -15,10 +15,10 @@
         {{ t('Created') }}: {{ page.createdAt|datetz('Y/m/d H:i:s') }}<br>
 
         {% if page.lastUpdateUser %}
-          {{ t('Last updated') }}: {{ page.updatedAt|datetz('Y/m/d H:i:s') }} <a href="/user/{{ page.lastUpdateUser.username }}"><img src="{{ page.lastUpdateUser|picture }}" class="picture picture-xs picture-rounded" alt="{{ page.lastUpdateUser.name }}"></a>
+          {{ t('Last updated') }}: {{ page.updatedAt|datetz('Y/m/d H:i:s') }} <a href="/user/{{ page.lastUpdateUser.username }}"><img src="{{ page.lastUpdateUser|picture }}" class="img-circle-xs img-circle" alt="{{ page.lastUpdateUser.name }}"></a>
         {% else %}
           {# for BC 1.5.x #}
-          {{ t('Last updated') }}: {{ page.updatedAt|datetz('Y/m/d H:i:s') }} <a href="/user/{{ page.revision.author.username }}"><img src="{{ page.revision.author|picture }}" class="picture picture-xs picture-rounded" alt="{{ page.revision.author.name }}"></a>
+          {{ t('Last updated') }}: {{ page.updatedAt|datetz('Y/m/d H:i:s') }} <a href="/user/{{ page.revision.author.username }}"><img src="{{ page.revision.author|picture }}" class="img-circle-xs img-circle" alt="{{ page.revision.author.name }}"></a>
         {% endif %}
       </p>
     </div>

resource/js/app.js

@@ -89,6 +89,7 @@ crowiRenderer.setup(crowi.config);
  */
 const componentMappings = {
   'search-top': <HeaderSearchBox crowi={crowi} />,
+  'search-sidebar': <HeaderSearchBox crowi={crowi} />,
   'search-page': <SearchPage crowi={crowi} crowiRenderer={crowiRenderer} />,
   'page-list-search': <PageListSearch crowi={crowi} />,
 

resource/js/components/HeaderSearchBox/SearchForm.js

@@ -1,14 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import FormGroup from 'react-bootstrap/es/FormGroup';
 import Button from 'react-bootstrap/es/Button';
 import InputGroup from 'react-bootstrap/es/InputGroup';
 
 import SearchTypeahead from '../SearchTypeahead';
 
-import UserPicture from '../User/UserPicture';
-import PageListMeta from '../PageList/PageListMeta';
-import PagePath from '../PageList/PagePath';
-import PropTypes from 'prop-types';
 
 // Header.SearchForm
 export default class SearchForm extends React.Component {
@@ -55,7 +53,7 @@ export default class SearchForm extends React.Component {
     return (
       <form
         action="/_search"
-        className="search-form form-group input-group search-top-input-group"
+        className="search-form form-group input-group search-input-group"
       >
         <FormGroup>
           <InputGroup>
@@ -66,8 +64,8 @@ export default class SearchForm extends React.Component {
               placeholder="Search ..."
             />
             <InputGroup.Button>
-              <Button type="submit">
-                <i className="search-top-icon fa fa-search"></i>
+              <Button href="#" type="submit" bsStyle="link">
+                <i className="ti-search"></i>
               </Button >
             </InputGroup.Button>
           </InputGroup>

resource/js/components/SearchTypeahead.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { noop } from 'lodash/noop';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
@@ -6,7 +7,6 @@ import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 import UserPicture from './User/UserPicture';
 import PageListMeta from './PageList/PageListMeta';
 import PagePath from './PageList/PagePath';
-import PropTypes from 'prop-types';
 
 export default class SearchTypeahead extends React.Component {
 
@@ -106,7 +106,7 @@ export default class SearchTypeahead extends React.Component {
     const page = option;
     return (
       <span>
-      <UserPicture user={page.revision.author} />
+      <UserPicture user={page.revision.author} size="sm" />
       <PagePath page={page} />
       <PageListMeta page={page} />
       </span>

resource/js/components/User/UserPicture.js

@@ -23,9 +23,9 @@ export default class UserPicture extends React.Component {
   }
 
   getClassName() {
-    let className = ['picture', 'picture-rounded'];
+    let className = ['img-circle'];
     if (this.props.size) {
-      className.push('picture-' + this.props.size);
+      className.push('img-circle-' + this.props.size);
     }
 
     return className.join(' ');

resource/js/legacy/crowi.js

@@ -559,7 +559,7 @@ $(function() {
     // omg
     function createCommentHTML(revision, creator, comment, commentedAt) {
       var $comment = $('<div>');
-      var $commentImage = $('<img class="picture picture-rounded">')
+      var $commentImage = $('<img class="picture img-circle">')
         .attr('src', Crowi.userPicture(creator));
       var $commentCreator = $('<div class="page-comment-creator">')
         .text(creator.username);
@@ -729,7 +729,7 @@ $(function() {
       $userHtml.attr('href', '/user/' + user.username);
       $userHtml.attr('title', user.name);
 
-      var $userPicture = $('<img class="picture picture-xs picture-rounded">');
+      var $userPicture = $('<img class="img-circle-xs img-circle">');
       $userPicture.attr('alt', user.name);
       $userPicture.attr('src',  Crowi.userPicture(user));
 

resource/styles/scss/_override-agileadmin.scss

@@ -34,3 +34,19 @@
   }
 }
 
+
+.img-circle {
+  // size list
+  &.img-circle-lg {
+    width: 48px;
+    height: 48px;
+  }
+  &.img-circle-sm {
+    width: 16px;
+    height: 16px;
+  }
+  &.img-circle-xs {
+    width: 12px;
+    height: 12px;
+  }
+}

resource/styles/scss/crowi.scss

@@ -230,38 +230,6 @@ footer {
   cursor: not-allowed;
 }
 
-// user picture
-.picture {
-
-  // 通常サイズ
-  width: 24px;
-  height: 24px;
-
-  // size list
-  &.picture-lg {
-    width: 48px;
-    height: 48px;
-  }
-  &.picture-sm {
-    width: 16px;
-    height: 16px;
-  }
-  &.picture-xs {
-    width: 12px;
-    height: 12px;
-  }
-
-  // design option
-  &.picture-sq {
-    border-radius: 2px;
-    border: solid 1px #ccc;
-  }
-  &.picture-rounded {
-    border-radius: 50%;
-    box-shadow: 0 0 2px rgba(0,0,0,.3);
-  }
-}
-
 .highlighted {
   color: #333;
   background-color: rgba(255,255,140,0.5);