Просмотр исходного кода

add remove button to Comment component

Yuki Takei 8 лет назад
Родитель
Сommit
e471bfa45d

+ 15 - 1
resource/css/_comment.scss

@@ -43,11 +43,11 @@
       }
       }
 
 
       .page-comment-creator {
       .page-comment-creator {
-        margin-left: 40px;
         font-weight: bold;
         font-weight: bold;
       }
       }
 
 
       .page-comment-main {
       .page-comment-main {
+        position: relative;
         margin-left: 40px;
         margin-left: 40px;
 
 
         .page-comment-meta {
         .page-comment-meta {
@@ -58,6 +58,20 @@
           padding: 8px 0;
           padding: 8px 0;
           word-wrap: break-word;
           word-wrap: break-word;
         }
         }
+        .page-comment-control {
+          position: absolute;
+          display: none;    // default hidden
+          top: 0;
+          right: 0;
+
+          a {
+            padding: 3px;
+          }
+        }
+      }
+      // show when hover
+      .page-comment-main:hover > .page-comment-control {
+        display: block;
       }
       }
     }
     }
 
 

+ 12 - 0
resource/css/_comment_crowi-plus.scss

@@ -1,6 +1,7 @@
 .crowi-plus.main-container  {
 .crowi-plus.main-container  {
 
 
   %comment-section {
   %comment-section {
+    position: relative;
     background: #f5f5f5;
     background: #f5f5f5;
     padding: 1em;
     padding: 1em;
     margin-left: 4.5em;
     margin-left: 4.5em;
@@ -72,6 +73,17 @@
       }
       }
     }
     }
 
 
+    .page-comment-control {
+      position: absolute;
+      display: none;    // default hidden
+      top: 0;
+      right: 0;
+    }
+    // show when hover
+    .page-comment-main:hover > .page-comment-control {
+      display: block;
+    }
+
   }
   }
 
 
   .page-comment-old {
   .page-comment-old {

+ 5 - 4
resource/css/_page.scss

@@ -238,10 +238,11 @@
         font-size: 1.1em;
         font-size: 1.1em;
       }
       }
 
 
-      a {
-        color: #ccc;
-        &:hover { color: #aaa;}
-      }
+      // disabled in crowi-plus -- 2017.06.03 Yuki Takei
+      // a {
+      //   color: #ccc;
+      //   &:hover { color: #aaa;}
+      // }
 
 
       ul.fitted-list {
       ul.fitted-list {
         padding-left: 0;
         padding-left: 0;

+ 3 - 0
resource/js/components/PageComment/Comment.js

@@ -62,6 +62,9 @@ export default class Comment extends React.Component {
             {commentDate} 
             {commentDate} 
             <a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a>
             <a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a>
           </div>
           </div>
+          <div className="page-comment-control">
+            <a className="btn btn-link"><i className="fa fa-trash-o"></i></a>
+          </div>
         </div>
         </div>
       </div>
       </div>
     );
     );