WIP: apply bootstrap theme

* comment

lib/views/modal/delete.html

@@ -8,9 +8,9 @@
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title">
             {% if page.isDeleted() %}
-            <i class="icon-fire text-danger"></i> {{ t('modal_delete.label.completely') }}
+            <i class="icon-fw icon-fire text-danger"></i> {{ t('modal_delete.label.completely') }}
             {% else %}
-            <i class="icon-trash"></i> {{ t('modal_delete.label.Delete Page') }}
+            <i class="icon-fw icon-trash"></i> {{ t('modal_delete.label.Delete Page') }}
             {% endif %}
           </h4>
         </div>

resource/js/components/PageComment/Comment.js

@@ -57,7 +57,7 @@ export default class Comment extends React.Component {
     const commentBody = ReactUtils.nl2br(comment.comment);
     const creatorsPage = `/user/${creator.username}`;
     const revHref = `?revision=${comment.revision}`;
-    const revFirst8Letters = comment.revision.substr(0,8);
+    const revFirst8Letters = comment.revision.substr(-8);
     const revisionLavelClassName = this.getRevisionLabelClassName();
 
     return (

resource/js/components/PageComment/DeleteCommentModal.js

@@ -41,16 +41,22 @@ export default class DeleteCommentModal extends React.Component {
     return (
       <Modal show={this.props.isShown} onHide={this.props.cancel} className="page-comment-delete-modal">
         <Modal.Header closeButton>
-          <Modal.Title>Delete comment?</Modal.Title>
+          <Modal.Title>
+            <i className="icon-fw icon-fire text-danger"></i>
+            Delete comment?
+          </Modal.Title>
         </Modal.Header>
         <Modal.Body>
           <UserPicture user={comment.creator} size="xs" /> <strong>{comment.creator.username}</strong> wrote on {commentDate}:
-          <p className="comment-body">{commentBody}</p>
+          <p className="well well-sm comment-body m-t-5">{commentBody}</p>
         </Modal.Body>
         <Modal.Footer>
           <span className="text-danger">{this.props.errorMessage}</span>&nbsp;
-          <Button onClick={this.props.cancel}>Cancel</Button>
-          <Button onClick={this.props.confirmedToDelete} className="btn-danger">Delete</Button>
+          <Button onClick={this.props.cancel} bsClass="btn btn-sm">Cancel</Button>
+          <Button onClick={this.props.confirmedToDelete} bsClass="btn btn-sm btn-danger">
+            <i className="icon icon-fire"></i>
+            Delete
+          </Button>
         </Modal.Footer>
       </Modal>
     );

resource/styles/scss/_comment.scss

@@ -1,15 +1,22 @@
-// import crowi variable
-// @import 'utilities';
-
 .crowi.main-container {
+  .page-comment-main {
+    // delete button
+    .page-comment-control {
+      position: absolute;
+      display: none;    // default hidden
+      top: 0;
+      right: 0;
+
+      .btn {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // modal
   .page-comment-delete-modal .modal-content {
     .modal-body {
       .comment-body {
-        background-color: #eee;
-        padding: .5em;
-        margin-top: .5em;
-        border-radius: 4px;
-
         // scrollable
         overflow-y: auto;
         max-height: 13em;
@@ -75,10 +82,6 @@
           display: none;    // default hidden
           top: 0;
           right: 0;
-
-          a {
-            padding: 3px;
-          }
         }
       }
 

resource/styles/scss/_comment_crowi-plus.scss

@@ -6,7 +6,6 @@
     padding: 1em;
     margin-left: 4.5em;
     margin-bottom: 1em;
-    border-radius: 3px;
     &:before {
       border: 1em solid transparent;
       border-right-color:#f5f5f5;
@@ -20,7 +19,7 @@
     }
   }
 
-  %picture-rounded {
+  %picture {
     float: left;
     margin-top: 0.8em;
     width: 3em;
@@ -49,8 +48,8 @@
     }
 
     // ユーザーアイコン
-    .picture.picture-rounded {
-      @extend %picture-rounded;
+    .picture {
+      @extend %picture;
     }
 
     // コメントセクション
@@ -72,14 +71,6 @@
         vertical-align: 25%;
       }
     }
-
-    .page-comment-control {
-      position: absolute;
-      display: none;    // default hidden
-      top: 0;
-      right: 0;
-    }
-
   }
 
   // show when hover
@@ -91,8 +82,8 @@
     position: relative;
     margin-top: 2em;
     // user icon
-    .picture.picture-rounded {
-      @extend %picture-rounded;
+    .picture {
+      @extend %picture;
     }
 
     // seciton

resource/styles/scss/_override-agileadmin.scss

@@ -135,3 +135,15 @@
     border-radius: 0;
   }
 }
+
+
+/*
+ * Wells
+ */
+.well {
+  background-color: #f5f5f5;
+  padding: .7em;
+  &.well-sm {
+    padding: .5em;
+  }
+}

resource/styles/scss/crowi.scss

@@ -13,8 +13,8 @@
 // crowi component
 // @import 'admin';
 // @import 'attachments';
-// @import 'comment';
-// @import 'comment_crowi-plus';
+@import 'comment';
+@import 'comment_crowi-plus';
 @import 'create-page';
 @import 'crowi-sidebar';
 // @import 'delete';