1.0.27

Usability improvements, fix Firefox message hovering.

backend/routes/communications.js

@@ -992,13 +992,24 @@ router.delete("/:id/message/:mId", auth, async (req, res, next) => {
       ]
     })
     if (chat) {
-      const message = await Message.findOne({
+      let options
+      if (chat.rank === "admin") {
+        options = {
+          where: {
+            id: req.params.mId,
+            chatId: chat.chat.id
+          }
+        }
+      } else {
+        options = {
           where: {
             id: req.params.mId,
             chatId: chat.chat.id,
             userId: req.user.id
           }
-      })
+        }
+      }
+      const message = await Message.findOne(options)
       if (message) {
         await message.destroy()
         chat.chat.users.forEach((user) => {

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colubrina",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Simple instant communication.",
   "private": true,
   "author": "Troplo <troplo@troplo.com>",

frontend/src/App.vue

@@ -753,6 +753,8 @@ export default {
     }
   },
   async mounted() {
+    if (localStorage.getItem("forceEnableDevMode"))
+      this.$store.state.release = "dev"
     await this.$store.dispatch("doInit")
     if (this.$vuetify.breakpoint.mobile) {
       this.$store.state.drawer = false

frontend/src/assets/styles.css

@@ -15,6 +15,7 @@
   right: 0;
   margin-top: -15px;
   margin-right: 5px;
+  visibility: hidden;
 }
 /* large codeblock */
 code {
@@ -23,13 +24,25 @@ code {
   display: block;
   padding: 20px;
 }
-.message-hover {
+.message:hover {
   background-color: var(--v-bg-lighten1);
   border-radius: 5px;
 }
 .message-toast {
   background-color: rgba(47, 47, 47, 0.9) !important;
 }
+.message-date {
+  visibility: hidden;
+}
+.message:hover .message-date {
+  visibility: visible;
+}
+.message:hover .message-action-card {
+  visibility: visible;
+}
+.message:hover .hide-on-hover {
+  visibility: hidden;
+}
 img.emoji {
   /* Since we are using SVGs, you have to change the width using CSS */
   height: 1.4em;

frontend/src/components/Header.vue

@@ -601,9 +601,27 @@
         </v-tooltip>
       </template>
       <template v-else>
-        <v-toolbar-title>
+        <v-toolbar-title
-          {{ $route.name }}
+          v-if="!$vuetify.breakpoint.mobile"
-        </v-toolbar-title>
+          id="bettercompass-title"
+          :style="
+            'color: ' +
+            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']
+              .primary
+          "
+          class="troplo-title"
+          @click="$router.push('/')"
+          style="cursor: pointer"
+          >{{ $store.state.site.name }}</v-toolbar-title
+        ><v-app-bar-nav-icon
+          v-if="
+            !$vuetify.breakpoint.mobile &&
+            $store.state.site.release !== 'stable'
+          "
+          style="z-index: 1000"
+          disabled
+          >{{ $store.state.site.release }}</v-app-bar-nav-icon
+        >
         <v-spacer></v-spacer>
         <v-tooltip bottom>
           <template v-slot:activator="{ on }">
@@ -954,6 +972,12 @@ export default {
   },
   methods: {
     goToRoute() {
+      if (this.route.value === "forceEnableDevMode") {
+        this.$store.state.site.release = "dev"
+        localStorage.setItem("forceEnableDevMode", "true")
+        this.$toast.success("OK")
+        return
+      }
       this.$router.push(this.route.value)
       this.route.modal = false
       this.route.value = ""

frontend/src/components/Message.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <v-hover v-slot="{ hover }">
+    <template>
-      <span>
-        <template v-if="!message.type">
       <v-toolbar
         @click="jumpToMessage(message.replyId)"
         :key="message.keyId + '-reply-toolbar'"
@@ -16,9 +14,7 @@
         <v-avatar size="24" class="mr-2">
           <v-img
             :src="
-                  $store.state.baseURL +
+              $store.state.baseURL + '/usercontent/' + message.reply.user.avatar
-                  '/usercontent/' +
-                  message.reply.user.avatar
             "
             v-if="message.reply.user.avatar"
             class="elevation-1"
@@ -38,34 +34,76 @@
       <v-list-item
         :key="message.keyId"
         :class="{
-              'message-hover': hover,
           'pa-0': $vuetify.breakpoint.mobile,
           'mentioned-message': mentioned
         }"
+        class="message"
         :dense="lastMessage"
         :id="'message-' + index"
         @contextmenu="show($event, 'message', message)"
         :style="lastMessage ? 'margin-bottom: -5px; margin-top: -5px;' : ''"
       >
-            <v-avatar size="45" class="mr-2" v-if="!lastMessage">
+        <v-avatar
+          size="45"
+          class="mr-2"
+          v-if="!lastMessage"
+          :class="{ 'hide-on-hover': message.type }"
+        >
           <v-img
-                :src="
+            :src="$store.state.baseURL + '/usercontent/' + message.user.avatar"
-                  $store.state.baseURL + '/usercontent/' + message.user.avatar
+            v-if="message.user.avatar && !message.type"
-                "
-                v-if="message.user.avatar"
             class="elevation-1"
           />
-              <v-icon v-else class="elevation-1"> mdi-account </v-icon>
+          <v-icon class="elevation-1" v-else-if="!message.type">
+            mdi-account
+          </v-icon>
+          <v-icon
+            v-else-if="message.type === 'leave'"
+            color="red"
+            class="mr-2 ml-1"
+            size="32"
+          >
+            mdi-arrow-left
+          </v-icon>
+          <v-icon
+            v-else-if="message.type === 'join'"
+            size="32"
+            color="success"
+            class="mr-2 ml-1"
+          >
+            mdi-arrow-right
+          </v-icon>
+          <v-icon
+            v-else-if="message.type === 'pin'"
+            size="32"
+            color="grey"
+            class="mr-2 ml-1"
+          >
+            mdi-pin-outline
+          </v-icon>
+          <v-icon v-else size="32" color="grey" class="mr-2 ml-1">
+            mdi-pencil
+          </v-icon>
         </v-avatar>
+        <v-tooltip top style="z-index: 15">
+          <template v-slot:activator="{ on }">
             <small
+              v-on="on"
               style="font-size: 9px; position: absolute"
-              class="grey--text"
+              class="grey--text message-date"
-              v-if="lastMessage && hover"
+              v-if="lastMessage || message.type"
             >
               {{ $date(message.createdAt).format("hh:mm A") }}
             </small>
+          </template>
+          <span>
+            {{
+              $date(message.createdAt).format("DD/MM/YYYY, hh:mm:ss A")
+            }}</span
+          >
+        </v-tooltip>
         <v-list-item-content :class="{ 'offset-message': lastMessage }">
-              <v-list-item-subtitle v-if="!lastMessage">
+          <v-list-item-subtitle v-if="!lastMessage && !message.type">
             {{ getName(message.user) }}
             <v-chip
               v-if="message.user.bot"
@@ -94,16 +132,11 @@
                 </span>
               </template>
               <span>
-                    {{
+                {{ $date(message.editedAt).format("DD/MM/YYYY hh:mm:ss A") }}
-                      $date(message.editedAt).format("DD/MM/YYYY hh:mm:ss A")
-                    }}
               </span>
             </v-tooltip>
           </v-list-item-subtitle>
-              <span
+          <span v-if="edit.id !== message.id" style="overflow-wrap: anywhere">
-                v-if="edit.id !== message.id"
-                style="overflow-wrap: anywhere"
-              >
             <span v-markdown>
               {{ message.content }}
             </span>
@@ -114,9 +147,7 @@
                 </v-icon>
               </template>
               <span>
-                    {{
+                {{ $date(message.editedAt).format("DD/MM/YYYY hh:mm:ss A") }}
-                      $date(message.editedAt).format("DD/MM/YYYY hh:mm:ss A")
-                    }}
               </span>
             </v-tooltip>
           </span>
@@ -141,6 +172,8 @@
                       contain
                       :max-width="500"
                       :max-height="500"
+                      :min-height="250"
+                      :min-width="250"
                       :src="$store.state.baseURL + embed.mediaProxyLink"
                     >
                       <template v-slot:placeholder>
@@ -400,6 +433,8 @@
                       '/usercontent/' +
                       attachment.attachment
                     "
+                    :min-height="250"
+                    :min-width="250"
                   >
                     <template v-slot:placeholder>
                       <v-row
@@ -409,8 +444,6 @@
                       >
                         <v-progress-circular
                           indeterminate
-                              width="500"
-                              height="500"
                           color="grey lighten-5"
                         ></v-progress-circular>
                       </v-row>
@@ -471,7 +504,7 @@
           elevation="8"
           color="card"
           class="message-action-card"
-              v-if="!$vuetify.breakpoint.mobile && hover"
+          v-if="!$vuetify.breakpoint.mobile"
         >
           <v-tooltip top>
             <template v-slot:activator="{ on }">
@@ -479,7 +512,10 @@
                 <v-btn
                   icon
                   v-on="on"
-                      v-if="message.userId === $store.state.user.id"
+                  v-if="
+                    message.userId === $store.state.user.id ||
+                    chat.rank === 'admin'
+                  "
                   @click="deleteMessage(message)"
                 >
                   <v-icon> mdi-delete </v-icon>
@@ -555,9 +591,7 @@
                 <v-btn
                   v-on="on"
                   icon
-                      v-if="
+                  v-if="chat.rank === 'admin' || chat.chat.type === 'direct'"
-                        chat.rank === 'admin' || chat.chat.type === 'direct'
-                      "
                   @click="
                     pinMessage()
                     focusInput()
@@ -569,306 +603,19 @@
             </template>
             <span> Pin to Chat </span>
           </v-tooltip>
+          <v-menu offset-y v-if="$store.state.site.release === 'dev'">
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn v-on="on" icon v-bind="attrs">
+                <v-icon> mdi-dots-horizontal </v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item><v-icon>mdi-delete</v-icon> Delete </v-list-item>
+            </v-list>
+          </v-menu>
         </v-card>
       </v-list-item>
     </template>
-        <template v-else-if="message.type === 'leave'">
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="red" class="mr-2 ml-1"> mdi-arrow-left </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
-                    focusInput()
-                  "
-                >
-                  <v-icon> mdi-reply </v-icon>
-                </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-        <template v-else-if="message.type === 'join'">
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="success" class="mr-2 ml-1"> mdi-arrow-right </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
-                    focusInput()
-                  "
-                >
-                  <v-icon> mdi-reply </v-icon>
-                </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-        <template v-else-if="message.type === 'rename'">
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="grey" class="mr-2 ml-1"> mdi-pencil </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
-                    focusInput()
-                  "
-                >
-                  <v-icon> mdi-reply </v-icon>
-                </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-        <template v-else-if="message.type === 'pin'">
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="grey" class="mr-2 ml-1"> mdi-pin-outline </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
-                    focusInput()
-                  "
-                >
-                  <v-icon> mdi-reply </v-icon>
-                </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-        <template v-else>
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="grey" class="mr-2 ml-1"> mdi-pencil </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
-                    focusInput()
-                  "
-                >
-                  <v-icon> mdi-reply </v-icon>
-                </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-      </span>
-    </v-hover>
   </div>
 </template>