Merge pull request #269 from NfoAlex/PinMessage

Pin message

Girack-v/src/components/ChannelWindowComponent/ChannelHead.vue

@@ -5,6 +5,7 @@ import { getCONFIG } from "../../config.js";
 import { setCookie } from "../../data/socket";
 import { dataUser } from "../../data/dataUserinfo";
 import ChannelConfig from "./HeadComponents/ChannelConfig.vue";
+import ChannelPin from "./HeadComponents/ChannelPin.vue";
 
 export default {
   setup() {
@@ -14,14 +15,15 @@ export default {
     return { mobile, myUserinfo, LIST_NOTIFICATION_MUTE_CHANNEL };
   },
 
-  components: { ChannelConfig },
+  components: { ChannelConfig, ChannelPin },
   props: ["channelInfo"],
 
   data() {
     return {
       //チャンネルメニューダイアログ用
       channelDialogShow: false,
       channelDialogId: "0001",
+      channelPinsShow: false,
     };
   },
 
@@ -37,25 +39,25 @@ export default {
     getDisplaySize() {
       switch (useDisplay().name.value) {
         case "xs":
-          return "small";
+          return "x-small";
 
         case "sm":
-          return "default";
+          return "small";
 
         case "md":
-          return "48";
+          return "default";
 
         case "lg":
-          return "64";
+          return "48";
 
         case "xl":
-          return "x-large";
+          return "large";
 
         case "xxl":
           return "96";
 
         default:
-          return "";
+          return "small";
       }
     },
 
@@ -94,6 +96,7 @@ export default {
 </script>
 
 <template>
+
   <!-- チャンネル設定ダイアログ -->
   <ChannelConfig
     v-if="channelDialogShow"
@@ -103,6 +106,16 @@ export default {
     :channelInfo="channelInfo"
   />
 
+  <!-- チャンネルのピン留め表示ダイアログ -->
+  <ChannelPin
+    v-if="channelPinsShow"
+    v-model="channelPinsShow"
+    :pins="channelInfo.pins!==undefined?channelInfo.pins:[]"
+    :channelname="channelInfo.channelname"
+    :channelid="getPath"
+    @closePin="channelPinsShow=false"
+  />
+
   <!-- ヘッダの表示部分(メイン) -->
   <div
     class="d-flex align-center justify-space-evenly pa-1"
@@ -183,8 +196,8 @@ export default {
         @click="toggleMuteChannel"
         :size="getDisplaySize"
         icon=""
-        class="rounded-lg ma-1"
-        color="secondary"
+        class="rounded-lg ma-0"
+        variant="text"
       >
         <v-icon
           v-if="!LIST_NOTIFICATION_MUTE_CHANNEL.includes($route.params.id)"
@@ -204,19 +217,32 @@ export default {
         ブラウザへ戻る
       </v-btn>
 
+      <!-- ピン留め表示ボタン -->
+      <v-btn
+        v-if="!isMobile"
+        @click="() => (channelPinsShow = !channelPinsShow)"
+        :size="getDisplaySize"
+        icon=""
+        class="rounded-lg ma-0"
+        variant="text"
+      >
+        <v-icon>mdi:mdi-pin</v-icon>
+      </v-btn>
+
       <!-- チャンネルメニューボタン -->
       <v-btn
         v-if="!isMobile"
         @click="() => (channelDialogShow = !channelDialogShow)"
         :size="getDisplaySize"
         icon=""
-        class="rounded-lg ma-1"
-        color="secondary"
+        class="rounded-lg ma-0"
+        variant="text"
       >
         <v-icon>mdi:mdi-menu</v-icon>
       </v-btn>
     </div>
   </div>
+
 </template>
 
 <style scoped></style>

Girack-v/src/components/ChannelWindowComponent/ContentComponents/ContentHoverMenu.vue

@@ -96,6 +96,20 @@ export default {
 
     //削除したりリアクションしたり編集(ToDo)したり
     messageAction(msgId, act, reaction) {
+      //ピン留めする
+      if (act === "pin") {
+        //ピン
+        socket.emit("actMessage", {
+          action: "pin",
+          channelid: this.channelid,
+          messageid: msgId,
+          reqSender: {
+            userid: this.myUserinfo.userid,
+            sessionid: this.myUserinfo.sessionid,
+          },
+        });
+      }
+
       //削除する
       if (act === "delete") {
         console.log("messageAction :: 削除します");
@@ -153,17 +167,17 @@ export default {
   <v-card
     class="pa-2 rounded-lg"
     color="#222"
-    style="width: fit-content; margin-top: -16px; max-width: 500px"
+    style="width:fit-content; margin-top:-16px; max-width:500px"
   >
     <!-- ここからホバーメニュー -->
-    <span style="position: relative; float: right">
+    <span style="position:relative; float:right" class="d-flex align-center">
       <!-- 時間表示 -->
-      <span style="margin-right: 12px" class="text-body-2 font-italic">
+      <span style="margin-right:12px" class="text-body-2">
         {{ printDate() }}
       </span>
       <v-btn
         @click="messageAction(m.messageid, 'reaction', 'smile')"
-        style="margin-right: 3px"
+        class="ml-1"
         variant="tonal"
         rounded="pill"
         size="x-small"
@@ -172,7 +186,7 @@ export default {
       </v-btn>
       <v-btn
         @click="messageAction(m.messageid, 'reaction', 'thinking_face')"
-        style="margin-right: 3px"
+        class="ml-1"
         variant="tonal"
         rounded="pill"
         size="x-small"
@@ -181,18 +195,29 @@ export default {
       </v-btn>
       <v-btn
         @click="messageAction(m.messageid, 'reaction', 'cold_sweat')"
-        style="margin-right: 3px"
+        class="ml-1"
         variant="tonal"
         rounded="pill"
         size="x-small"
       >
         😰
       </v-btn>
 
+      <!-- ピン留め -->
+      <v-btn
+        @click="messageAction(m.messageid, 'pin')"
+        class="ml-1"
+        variant="tonal"
+        rounded="pill"
+        size="x-small"
+      >
+        <v-icon> mdi:mdi-pin </v-icon>
+      </v-btn>
+
       <!-- 返信 -->
       <v-btn
         @click="reply"
-        style="margin-right: 3px"
+        class="ml-1"
         variant="tonal"
         rounded="pill"
         size="x-small"
@@ -204,38 +229,44 @@ export default {
       <v-btn
         v-if="m.userid===myUserinfo.userid"
         @click="$emit('updateEditingMessage',m.messageid)"
-        style="margin-right: 3px"
+        class="ml-1"
         variant="tonal"
         rounded="pill"
         size="x-small"
       >
         <v-icon> mdi:mdi-pencil </v-icon>
       </v-btn>
 
-      <v-divider vertical></v-divider>
-
-      <!-- 削除ボタン -->
-      <v-btn
-        prepend-icon="mdi:mdi-delete-forever"
+      <span
         v-if="
           myUserinfo.role === 'Admin' ||
           (userrole !== 'Admin' && myUserinfo.role === 'Moderator') ||
           m.userid === myUserinfo.userid
         "
-        @dblclick="messageAction(m.messageid, 'delete')"
-        style="margin-right: 3px"
-        variant="tonal"
-        rounded="pill"
-        size="x-small"
+        class="d-flex align-center"
       >
-        削除
-        <v-tooltip
-          activator="parent"
-          location="top center"
+        <v-divider vertical class="mx-1"></v-divider>
+
+        <!-- 削除ボタン -->
+        <v-btn
+          prepend-icon="mdi:mdi-delete-forever"
+
+          @dblclick="messageAction(m.messageid, 'delete')"
+          style="margin-right: 3px"
+          variant="tonal"
+          rounded="pill"
+          size="x-small"
         >
-          ダブルクリックで削除
-        </v-tooltip>
-      </v-btn>
+          削除
+          <v-tooltip
+            activator="parent"
+            location="top center"
+          >
+            ダブルクリックで削除
+          </v-tooltip>
+        </v-btn>
+      </span>
+
     </span>
   </v-card>
 </template>

Girack-v/src/components/ChannelWindowComponent/ContentComponents/ContentRender.vue

@@ -506,7 +506,8 @@ export default {
     <!-- メッセージ本体 -->
     <span
       :class="[
-        msgHovered && msgIdHovering === m.messageid ? 'hovered' : null,
+        m.pinned?'pinned':null,
+        msgHovered && msgIdHovering === m.messageid ? 'hovered' : null, //ホバー
         checkMsgPosition(m.userid, index),
       ]"
       class="flex-grow-1"
@@ -592,6 +593,16 @@ export default {
               :channelid="m.channelid"
             />
 
+            <!-- ピン留めされているかどうか -->
+            <div class="my-1">
+              <v-chip v-if="m.pinned" size="x-small">
+                <v-icon  size="small">
+                  mdi:mdi-pin
+                </v-icon>
+                ピン留め済み
+              </v-chip>
+            </div>
+
             <!-- メッセージ本文と編集中表示 -->
             <ContentMessageRender v-if="!msgEditing" :content="m.content" />
             <ContentEditing
@@ -655,10 +666,16 @@ export default {
 
 <style scoped>
 
+/* ホバーされたメッセージ */
 .hovered {
   background-color: #444 !important;
 }
 
+/* ピン留めされたメッセージ */
+.pinned {
+  background-color: #334 !important;
+}
+
 .pointed {
   cursor: pointer;
 }