vim-jp / slacklog-generator

Archive generator for Slack
https://vim-jp.org/slacklog/
Creative Commons Attribution 4.0 International
26 stars 9 forks source link

Add display reactions #124

Closed higashi000 closed 4 years ago

higashi000 commented 4 years ago

リアクションの表示を行うようにしました。

リアクションの表示は問題なくされますが、カーソルを合わせた際にでるユーザーリストの上部分が途切れてしまっています。

get-me-power commented 4 years ago

対応issueは #9 でしたっけ

heavenshell commented 4 years ago
diff --git a/templates/channel_per_month_index.tmpl b/templates/channel_per_month_index.tmpl
index a0b748a..4ce13b1 100644
--- a/templates/channel_per_month_index.tmpl
+++ b/templates/channel_per_month_index.tmpl
@@ -58,18 +58,21 @@
               <div class="pt-1 pb-1">
                 {{ text . }}
               </div>
-
               <div>
                 {{- if reactions . }}
+                  <ul class="d-flex list-style-none flex-justify-start">
                   {{- range reactions . }}
-                    <span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="{{ .Users }}">
-                      {{- if eq .Default false }}
-                        <img class="slacklog-emoji" alt="{{ .Name }}" title="{{ .Name }}" src="{{ .EmojiLink }}">{{ .Count }}
-                      {{- else if eq .Default true }}
-                        <span>{{ .Name }}{{ .Count }}</span>
-                      {{- end }}
-                    </span>
+                    <li>
+                      <span class="tooltipped tooltipped-ne tooltipped-align-left-1 p-1" aria-label="{{ .Users }}">
+                        {{- if eq .Default false }}
+                          <img class="slacklog-emoji" alt="{{ .Name }}" title="{{ .Name }}" src="{{ .EmojiLink }}">{{ .Count }}
+                        {{- else if eq .Default true }}
+                          <span>{{ .Name }}{{ .Count }}</span>
+                        {{- end }}
+                      </span>
+                    </li>
                   {{- end }}
+                  </ul>
                 {{- end }}
               </div>

こんな感じでいかがでしょう? emoji の周りの border は一旦消してます(重なるのを調整する必要がありそう)。

heavenshell commented 4 years ago

一行コメントの時に切れてしまってたのでさらに改良

diff --git a/templates/channel_per_month_index.tmpl b/templates/channel_per_month_index.tmpl
index a0b748a..db01f20 100644
--- a/templates/channel_per_month_index.tmpl
+++ b/templates/channel_per_month_index.tmpl
@@ -59,19 +59,23 @@
                 {{ text . }}
               </div>

+              {{- if reactions . }}
               <div>
-                {{- if reactions . }}
-                  {{- range reactions . }}
-                    <span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="{{ .Users }}">
+                <ul class="d-flex list-style-none flex-justify-start pt-2">
+                {{- range reactions . }}
+                  <li>
+                    <span class="tooltipped tooltipped-ne tooltipped-align-left-1 p-1" aria-label="{{ .Users }}">
                       {{- if eq .Default false }}
-                        <img class="slacklog-emoji" alt="{{ .Name }}" title="{{ .Name }}" src="{{ .EmojiLink }}">{{ .Count }}
+                        <img class="slacklog-emoji" alt="{{ .Name }}" title="{{ .Name }}" src="{{ .EmojiLink }}"><span class="ml-1">{{ .Count }}</span>
                       {{- else if eq .Default true }}
                         <span>{{ .Name }}{{ .Count }}</span>
                       {{- end }}
                     </span>
-                  {{- end }}
+                  </li>
                 {{- end }}
+                </ul>
               </div>
+              {{- end }}

             {{- if and (ne .ThreadTs "") (ne .ThreadTs .Ts) }}
             <span class="f6 text-gray-light">
heavenshell commented 4 years ago

channel_per_month_index.tmpl は channel_per_month/index.tmpl に対して修正すべきではないですか?

あぁ、そうですね。古いままになってますね。 というわけで templates/channel_per_month/index.tmpl に移動してくださいませ @higashi000

heavenshell commented 4 years ago
diff --git a/templates/channel_per_month/index.tmpl b/templates/channel_per_mont
h/index.tmpl
index 3997316..9a4455f 100644
--- a/templates/channel_per_month/index.tmpl
+++ b/templates/channel_per_month/index.tmpl
@@ -59,6 +59,24 @@
                 {{ text . }}
               </div>

+              {{- if reactions . }}
+              <div>
+                <ul class="d-flex list-style-none flex-justify-start pt-2">
+                {{- range reactions . }}
+                  <li>
+                    <span class="tooltipped tooltipped-ne tooltipped-align-left-1 p-1" aria-label="{{ .Users }}">
+                      {{- if eq .Default false }}
+                        <img class="slacklog-emoji" alt="{{ .Name }}" title="{{ .Name }}" src="{{ .EmojiLink }}"><span class="ml-1">{{ .Count }}</span>
+                      {{- else if eq .Default true }}
+                        <span>{{ .Name }}{{ .Count }}</span>
+                      {{- end }}
+                    </span>
+                  </li>
+                {{- end }}
+                </ul>
+              </div>
+              {{- end }}
+
             {{- if and (ne .ThreadTimestamp "") (ne .ThreadTimestamp .Timestamp
) }}
             <span class="f6 text-gray-light">
               このスレッドに返信しました : <a href="#ts-{{- .ThreadTimestamp }}">{{- threadRootText .ThreadTimestamp }}</a>

こうかな? 古いやつは消しちゃって OK かと。