评论区加入了Emoji表情选择面板

changbin1997 · Nov 4, 2019 · e6104da · e6104da
1 parent db999ca
commit e6104da
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 3 deletions.
diff --git a/comments.php b/comments.php
@@ -1,4 +1,5 @@
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+<?php require_once 'emoji.php'; ?>
 <?php function threadedComments($comments, $options) {
     $commentClass = '';
     if ($comments->authorId) {
@@ -71,6 +72,36 @@
                     <label for="textarea" class="required"><?php _e('评论内容'); ?></label>
                     <textarea name="text" id="textarea" class="textarea form-control" required placeholder="请在此处输入评论内容"><?php $this->remember('text'); ?></textarea>
                 </div>
+                <?php if ($this->options->emojiPanel == 'on'): ?>
+                <div class="col-lg-12 form-group">
+                    <button type="button" class="btn btn btn-outline-secondary btn-sm" data-target="#emoji-box" data-toggle="collapse" aria-expanded="false" aria-controls="emoji-box" id="show-emoji" url="<?php $this->options->themeUrl('emoji.php'); ?>">
+                        <span>😀</span>
+                        <span>Emoji表情</span>
+                    </button>
+                    <div id="emoji-box" class="collapse" aria-label="表情面板">
+                        <div class="mt-2 mb-2 border">
+                            <div class="emoji-classification border-bottom" aria-label="表情类型">
+                                <button title="表情" type="button" class="btn btn btn-outline-secondary btn-sm" classification="smileys">😀</button>
+                                <button title="人物/手势" type="button" class="btn btn btn-outline-secondary btn-sm" classification="character">👦</button>
+                                <button title="服装/配饰" type="button" class="btn btn btn-outline-secondary btn-sm" classification="clothing">👕</button>
+                                <button title="动物/自然" type="button" class="btn btn btn-outline-secondary btn-sm" classification="animal">🐶</button>
+                                <button title="食物" type="button" class="btn btn btn-outline-secondary btn-sm" classification="food">🍏</button>
+                                <button title="运动" type="button" class="btn btn btn-outline-secondary btn-sm" classification="motion">⚽</button>
+                                <button title="旅行/地点" type="button" class="btn btn btn-outline-secondary btn-sm" classification="tourism">🚚</button>
+                                <button title="物体" type="button" class="btn btn btn-outline-secondary btn-sm" classification="objects">⌚</button>
+                                <button title="符号" type="button" class="btn btn btn-outline-secondary btn-sm" classification="symbols">❤</button>
+                            </div>
+                            <div class="emoji-select ml-2 mr-2 clearfix" aria-label="表情选择">
+                                <div class="d-flex justify-content-center text-info m-3">
+                                    <div class="spinner-border" role="status">
+                                        <span class="sr-only">正在加载 Emoji</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <?php  endif; ?>
                 <?php if($this->user->hasLogin()): ?>
                 <div class="col-lg-12 comment-user">
                     <?php _e('登录身份: '); ?><a href="<?php $this->options->profileUrl(); ?>" title="当前登录身份：<?php $this->user->screenName(); ?>"><?php $this->user->screenName(); ?></a>. <a href="<?php $this->options->logoutUrl(); ?>" title="退出"><?php _e('退出'); ?> &raquo;</a>

diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/css/style.scss b/css/style.scss
@@ -150,6 +150,16 @@ header{
     .navbar{
         transition: 0.5s;
         box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
+        .search-btn{
+            background: #F8F8F8;
+            border: 1px solid #D3D3D3;
+        }
+        .search-btn:hover{
+            background: #F0F0F0;
+        }
+        .search-btn:focus{
+            background: #F0F0F0;
+        }
     }
 }
 
@@ -458,6 +468,25 @@ footer{
     }
 }
 
+//  emoji表情面板
+#emoji-box{
+    .emoji-classification{
+        padding: 8px;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+    .emoji-select .emoji{
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        cursor: pointer;
+    }
+    .emoji-select .emoji:hover{
+        background: #6C757D;
+    }
+}
+
 //  评论区
 #comments{
     border-top: 1px solid #DADADA;
@@ -485,7 +514,7 @@ footer{
                     width: 100%;
                 }
                 //  头像
-                img{
+                .avatar{
                     width: 42px;
                     height: 42px;
                     margin-right: 20px;