WIP: apply bootstrap theme

* anonymous user image

lib/util/middlewares.js

@@ -89,7 +89,7 @@ exports.swigFilters = function(app, swig) {
       return user.image;
     }
     else {
-      return '/images/userpicture.png';
+      return '/images/user.svg';
     }
   };
 
@@ -165,7 +165,7 @@ exports.swigFilters = function(app, swig) {
 
     swig.setFilter('picture', function(user) {
       if (!user) {
-        return '/images/userpicture.png';
+        return '/images/user.svg';
       }
 
       if (user.isGravatarEnabled === true) {

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

@@ -29,7 +29,7 @@
       <ul class="authors visible-md visible-lg">
         <li>
           <div class="d-flex align-items-center">
-            <a class="m-r-10" href="{{ userPageRoot(page.creator) }}">
+            <a class="m-r-5" href="{{ userPageRoot(page.creator) }}">
               <img src="{{ page.creator|default(author)|picture }}" class="picture img-circle">
             </a>
             <div>
@@ -40,7 +40,7 @@
         </li>
         <li class="m-t-5">
           <div class="d-flex align-items-center">
-            <a class="m-r-10" href="{{ userPageRoot(page.lastUpdateUser) }}">
+            <a class="m-r-5" href="{{ userPageRoot(page.lastUpdateUser) }}">
               <img src="{{ page.lastUpdateUser|default(author)|picture }}" class="picture img-circle">
             </a>
             <div>

lib/views/me/index.html

@@ -128,7 +128,7 @@
           </label>
           <div class="col-sm-8">
             <p>
-            <img src="{{ user|uploadedpicture }}" width="64" id="settingUserPicture"><br>
+            <img src="{{ user|uploadedpicture }}" class="picture picture-lg img-circle" id="settingUserPicture"><br>
             </p>
             <p>
             {% if user.image %}

public/images/user.svg

@@ -0,0 +1 @@
+<svg x="0" y="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="64" height="64" style="fill: rgb(204, 204, 204);"><g fill="none" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="sans-serif" font-weight="none" font-size="none" text-anchor="start" mix-blend-mode="normal"><g><g><path d="M0,24l0,-24l24,0l0,24z" fill="none" font-weight="normal" font-size="12"/><path d="M0,24l0,-24l24,0l0,24z" fill="#f0f0f0" font-weight="normal" font-size="12"/><g id="user" fill="#cccccc" font-weight="400" font-size="16"><path d="M17,9c0,-1.38 -0.56,-2.63 -1.464,-3.535c-0.906,-0.905 -2.156,-1.465 -3.536,-1.465c-1.38,0 -2.63,0.56 -3.536,1.465c-0.904,0.905 -1.464,2.155 -1.464,3.535c0,1.38 0.56,2.63 1.464,3.535c0.906,0.905 2.156,1.465 3.536,1.465c1.38,0 2.63,-0.56 3.536,-1.465c0.904,-0.905 1.464,-2.155 1.464,-3.535z M6,19c0,1 2.25,2 6,2c3.518,0 6,-1 6,-2c0,-2 -2.354,-4 -6,-4c-3.75,0 -6,2 -6,4z"/></g></g></g></g></svg>

resource/js/components/User/UserPicture.js

@@ -12,7 +12,7 @@ export default class UserPicture extends React.Component {
     }
     // uploaded image
     else {
-      return user.image || '/images/userpicture.png';
+      return user.image || '/images/user.svg';
     }
   }
 
@@ -24,6 +24,7 @@ export default class UserPicture extends React.Component {
 
   getClassName() {
     let className = ['img-circle', 'picture'];
+    // size
     if (this.props.size) {
       className.push('picture-' + this.props.size);
     }

resource/js/legacy/crowi.js

@@ -92,10 +92,10 @@ Crowi.setCaretLineAndFocusToEditor = function() {
 // original: middleware.swigFilter
 Crowi.userPicture = function (user) {
   if (!user) {
-    return '/images/userpicture.png';
+    return '/images/user.svg';
   }
 
-  return user.image || '/images/userpicture.png';
+  return user.image || '/images/user.svg';
 };
 
 Crowi.modifyScrollTop = function() {

resource/styles/scss/_page_crowi-plus.scss

@@ -37,8 +37,9 @@
       }
 
       .picture {
-        width: 20px;
-        height: 20px;
+        width: 22px;
+        height: 22px;
+        border: 1px solid #ccc;
       }
     }