add blur sensitive (#132)

vitormarcal · Dec 20, 2024 · d9ee714 · d9ee714
1 parent 239c7f1
commit d9ee714
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 51 deletions.
diff --git a/frontend/components/ChatItem.vue b/frontend/components/ChatItem.vue
@@ -1,30 +1,33 @@
 <template>
   <div class="chat-item d-flex flex-row p-2 w-100" @click="emitThisChatActive()">
     <profile-image :id="item.chatId"/>
-    <div class="w-50" style="padding-left: .5rem">
+    <div
+        class="w-50"
+        :class="{ 'blur-sensitive': store.blurEnabled }"
+        style="padding-left: .5rem"
+    >
       <div class="name">{{ item.chatName }}</div>
-      <div class="small text-truncate ">
+      <div class="small text-truncate">
         <i class="far fa-check-circle mr-1"></i>
         {{ item.content }}
       </div>
     </div>
-    <message-created-at :date="item.msgCreatedAt"/>
+    <message-created-at :date="item.msgCreatedAt" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useMainStore } from "~/store";
 
-const props = defineProps(['item'])
-
-const emit = defineEmits(['update:chat-active'])
+const store = useMainStore();
+const props = defineProps(["item"]);
+const emit = defineEmits(["update:chat-active"]);
 
 function emitThisChatActive() {
-  emit('update:chat-active', props.item)
+  emit("update:chat-active", props.item);
 }
-
 </script>
 
-
 <style>
 .chat-item {
   cursor: pointer;
@@ -35,4 +38,13 @@ function emitThisChatActive() {
 .chat-item:hover {
   background: #360d3c;
 }
+
+.blur-sensitive {
+  filter: blur(6px);
+  transition: filter 0.3s ease-in-out;
+}
+
+.chat-item:hover .blur-sensitive {
+  filter: none;
+}
 </style>
diff --git a/frontend/components/ChatList.vue b/frontend/components/ChatList.vue
@@ -5,8 +5,13 @@
     <div class="action-bar d-flex flex-row p-2 sticky-top">
       <div class="btn-group" role="group">
         <button type="button" class="btn btn-outline-primary btn-sm" @click="emitCreateNewChat">Create new chat</button>
-        <button type="button" class="btn btn-outline-primary btn-sm" @click="emitDiskImport">Execute Disk Import</button>
-        <button type="button" class="btn btn-outline-primary btn-sm" @click="emitChatExport">Execute chat export</button>
+        <button type="button" class="btn btn-outline-primary btn-sm" @click="emitDiskImport">Execute Disk Import
+        </button>
+        <button type="button" class="btn btn-outline-primary btn-sm" @click="emitChatExport">Execute chat export
+        </button>
+        <button type="button" class="btn btn-outline-primary btn-sm" @click="store.toggleBlur">
+          {{ store.blurEnabled ? "Disable Blur" : "Enable Blur" }}
+        </button>
       </div>
 
     </div>
@@ -45,7 +50,7 @@ function emitCreateNewChat() {
 
 function emitChatExport() {
   exitThisChat()
-  emit( 'export:chat')
+  emit('export:chat')
 }
 
 async function emitDiskImport() {

diff --git a/frontend/components/MessageAreaNavBar.vue b/frontend/components/MessageAreaNavBar.vue
@@ -1,25 +1,8 @@
-<script setup lang="ts">
-import {useMainStore} from "~/store";
-
-const store = useMainStore()
-
-const chatActive = computed(() => store.chatActive.chatId > 0)
-
-function exitThisChat() {
-  store.chatExited()
-}
-
-function toggleOpenChatConfig() {
-  store.chatConfigOpen = !store.chatConfigOpen
-}
-
-</script>
-
 <template>
   <div id="navbar"
        class="sticky-top d-flex p-2 m-0 justify-content-between"
        v-if="chatActive">
-    <div class="chat-info-header d-flex align-items-center">
+    <div :class="{ 'blur-sensitive': store.blurEnabled }" class="chat-info-header d-flex align-items-center">
       <a href="#" class="h2" @click="exitThisChat">
         <rotable-arrow-icon/>
       </a>
@@ -29,7 +12,7 @@ function toggleOpenChatConfig() {
       <div class="d-flex flex-column" role="button" @click="() => toggleOpenChatConfig()">
         <div class="font-weight-bold" id="name">{{ store.chatActive.chatName }}
         </div>
-        <span class="badge align-content-end bg-success">{{store.chatActive.msgCount}} messages</span>
+        <span class="badge align-content-end bg-success">{{ store.chatActive.msgCount }} messages</span>
         <div class="small d-flex" id="details">last message sent:
           <message-created-at :date="store.chatActive.msgCreatedAt"/>
         </div>
@@ -41,8 +24,32 @@ function toggleOpenChatConfig() {
   </div>
 </template>
 
+<script setup lang="ts">
+import {useMainStore} from '~/store';
+
+const store = useMainStore();
+const chatActive = computed(() => store.chatActive.chatId > 0);
+
+function exitThisChat() {
+  store.chatExited();
+}
+
+function toggleOpenChatConfig() {
+  store.chatConfigOpen = !store.chatConfigOpen;
+}
+</script>
+
 <style scoped>
 #navbar {
   background: #000000;
 }
-</style>
+
+.blur-sensitive {
+  filter: blur(6px);
+  transition: filter 0.3s ease-in-out;
+}
+
+#navbar:hover .blur-sensitive {
+  filter: none;
+}
+</style>
diff --git a/frontend/components/MessageItem.vue b/frontend/components/MessageItem.vue
@@ -1,42 +1,49 @@
 <template>
-  <div class="message-item rounded d-flex flex-column mt-3" :class="classObject">
+  <div
+      class="message-item rounded d-flex flex-column mt-3"
+      :class="classObject"
+  >
     <div class="message-id">{{ message.id }}</div>
     <div class="author font-weight-bold">{{ message.author }}</div>
-    <div class="message-content" v-html="safeContent"></div>
-    <focusable-attachment v-if="hasAttachment" :attachment="message.attachment"></focusable-attachment>
+    <div :class="{ 'blur-sensitive': store.blurEnabled }" class="message-content" v-html="safeContent"></div>
+    <focusable-attachment
+        :class="{ 'blur-sensitive': store.blurEnabled }"
+        v-if="hasAttachment"
+        :attachment="message.attachment"
+    ></focusable-attachment>
     <div class="message-createdAt">{{ message.createdAt }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {useMainStore} from "~/store";
+import {useMainStore} from '~/store';
 
-const store = useMainStore()
+const store = useMainStore();
 
-const props = defineProps(["message"])
+const props = defineProps(['message']);
 
-const safeContent = computed(() => props.message.content.replace(
-    /https?:\/\/[^\s]+/g,
-    '<a href="$&" target="_blank">$&</a>'
-))
+const safeContent = computed(() =>
+    props.message.content.replace(
+        /https?:\/\/[^\s]+/g,
+        '<a href="$&" target="_blank">$&</a>'
+    )
+);
 
-const hasAttachment = computed(() => !!props.message.attachment)
-const isSystem = computed(() => props.message.authorType === 'SYSTEM')
+const hasAttachment = computed(() => !!props.message.attachment);
+const isSystem = computed(() => props.message.authorType === 'SYSTEM');
 
-const self = computed(() => props.message.author === store.authorActive)
+const self = computed(() => props.message.author === store.authorActive);
 
 const classObject = computed(() => {
   return {
     'system-message w-50 align-self-center': isSystem.value,
     'align-self-end': self.value,
-    'align-self-start': !self.value
-  }
-})
+    'align-self-start': !self.value,
+  };
+});
 </script>
 
-
 <style scoped>
-
 .message-item {
   padding: 8px 10px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px;
@@ -65,6 +72,7 @@ const classObject = computed(() => {
   opacity: 1;
 }
 
+
 .message-content {
   overflow-wrap: break-word;
   word-break: break-word;
@@ -84,4 +92,12 @@ const classObject = computed(() => {
   align-self: flex-end;
 }
 
-</style>
+.blur-sensitive {
+  filter: blur(6px);
+  transition: filter 0.3s ease-in-out;
+}
+
+.message-item:hover .blur-sensitive {
+  filter: none;
+}
+</style>
diff --git a/frontend/store/index.ts b/frontend/store/index.ts
@@ -17,6 +17,11 @@ export const useMainStore = defineStore('main', () => {
     const attachments = computed<Attachment[]>(() => {
         return attachmentsInfo.value.map((it: any) => AttachmentConstructor(it.name, attachmentUrl(chatActive.value.chatId, it.id)))
     })
+    const blurEnabled = ref(true);
+
+    function toggleBlur() {
+        blurEnabled.value = !blurEnabled.value;
+    }
 
     function updateMessages(items: ChatMessage []) {
         messages.value = items
@@ -79,6 +84,8 @@ export const useMainStore = defineStore('main', () => {
         authorActive,
         authors,
         reloadImageProfile,
+        blurEnabled,
+        toggleBlur,
         updateMessages,
         clearMessages,
         toNextPage,