WIP: apply bootstrap theme

* picture and img-circle

lib/views/admin/users.html

@@ -155,7 +155,7 @@
           {% for sUser in users %}
           <tr>
             <td>
-              <img src="{{ sUser|picture }}" class="img-circle" />
+              <img src="{{ sUser|picture }}" class="picture 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="img-circle" width="25" alt="{{ user.name }}" title="{{ user.name }}" />
+            <img src="{{ user|picture }}" class="picture 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="img-circle"><br>
+              <img src="{{ page.creator|default(author)|picture }}" class="picture 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="img-circle"><br>
+              <img src="{{ page.lastUpdateUser|default(author)|picture }}" class="picture img-circle"><br>
             </a>
           </div>
           <div class="">

lib/views/layout/layout.html

@@ -184,7 +184,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
         </li>
         <li class="dropdown">
           <a class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" href="/user/{{ user.username }}">
-            <img src="{{ user|picture }}" class="img-circle" width="25" /> {{ user.name }}
+            <img src="{{ user|picture }}" class="picture img-circle" width="25" /> {{ user.name }}
           </a>
           <ul class="dropdown-menu">
             <li><a href="/me"><i class="fa-fw ti-home"></i>{{ t('Home') }}</a></li>

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="img-circle-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
+      Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture-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="img-circle"> {{ page.lastUpdateUser.name }}<br>
+    Last updated at {{ page.updatedAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.lastUpdateUser|picture }}" class="picture 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="img-circle"> {{ 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="picture 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="img-circle"> {{ 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="picture 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="img-circle">
+          <img src="{{ tr.author|picture }}" class="picture 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="img-circle">
+      <img src="{{ pageUser|picture }}" class="picture 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="img-circle">
+  <img src="{{ page.revision.author|picture }}" class="picture 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="img-circle-lg img-circle"><br>
+        <img src="{{ page.creator|default(author)|picture }}" class="picture picture-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="img-circle-xs img-circle" 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="picture picture-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="img-circle-xs img-circle" 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="picture picture-xs img-circle" alt="{{ page.revision.author.name }}"></a>
         {% endif %}
       </p>
     </div>

resource/js/components/User/UserPicture.js

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

resource/js/legacy/crowi.js

@@ -719,7 +719,7 @@ $(function() {
       $userHtml.attr('href', '/user/' + user.username);
       $userHtml.attr('title', user.name);
 
-      var $userPicture = $('<img class="img-circle-xs img-circle">');
+      var $userPicture = $('<img class="picture picture-xs img-circle">');
       $userPicture.attr('alt', user.name);
       $userPicture.attr('src',  Crowi.userPicture(user));
 

resource/styles/scss/_override-agileadmin.scss

@@ -73,23 +73,3 @@
     padding: 10px 15px;
   }
 }
-
-
-/*
- * Helper Classes
- */
-.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

@@ -430,6 +430,29 @@ input.searching {
  * Helper Classes
  */
 
+.picture {
+  width: 24px;
+  height: 24px;
+
+  // size list
+  &.picture-lg {
+    width: 48px;
+    height: 48px;
+  }
+  &.picture-md {
+    width: 24px;
+    height: 24px;
+  }
+  &.picture-sm {
+    width: 16px;
+    height: 16px;
+  }
+  &.picture-xs {
+    width: 12px;
+    height: 12px;
+  }
+}
+
 .cmd-key.mac {
   &:after {
     content: '⌘';