update photo viewer

src/components/PlaceBlock.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Key24Regular } from '@vicons/fluent'
-import { LockOutlined } from '@vicons/material'
+import { CloseOutlined, LockOutlined } from '@vicons/material'
 import { Icon } from '@vicons/utils'
 import {
   NButton,
@@ -116,6 +116,13 @@ function removeApplicationFile(application: EditableApplication) {
 const viewApplication = ref<Application | null>(null)
 const viewImage = ref<{ title: string; url: string } | null>(null)
 const showViewApplicationModal = ref(false)
+const viewPhotoURL = computed(() =>
+  viewImage.value
+    ? viewImage.value.url
+    : applicationFileType(viewApplication.value || undefined) == 'image'
+      ? applicationFileURL(viewApplication.value?.image)
+      : '',
+)
 
 function openApplicationView(application: Application) {
   viewApplication.value = application
@@ -586,23 +593,52 @@ const bottomApplications = computed<Application[]>(() => {
   <!-- Просмотр улики / картинки точки -->
   <n-modal v-model:show="showViewApplicationModal" :mask-closable="true">
     <n-card
-      style="width: min(94vw, 1200px)"
+      :class="{ 'photo-paper': viewPhotoURL }"
+      :theme-overrides="
+        viewPhotoURL
+          ? {
+              titleTextColor: 'black',
+              actionColor: 'transparent',
+              paddingMedium: '14px',
+              borderRadius: '10px',
+            }
+          : undefined
+      "
+      :style="{
+        maxWidth: 'min(94vw, 1200px)',
+        width: viewPhotoURL ? 'max-content' : 'min(94vw, 1200px)',
+      }"
       :bordered="false"
       role="dialog"
       aria-modal="true"
-      :content-style="{ padding: '14px' }"
+      :header-style="viewPhotoURL ? { paddingBottom: '10px' } : undefined"
+      :content-style="{ padding: viewPhotoURL ? '0 14px' : '14px' }"
     >
       <template #header>
-        {{ viewApplication?.name || viewImage?.title }}
+        <span :class="{ 'photo-paper-title': viewPhotoURL }">
+          {{ viewApplication?.name || viewImage?.title }}
+        </span>
       </template>
       <template #header-extra>
-        <n-button quaternary circle @click="closeApplicationView()"> x </n-button>
+        <n-button
+          quaternary
+          circle
+          :theme-overrides="viewPhotoURL ? { textColor: 'black', textColorHover: '#63e2b7' } : undefined"
+          aria-label="Закрыть"
+          @click="closeApplicationView()"
+        >
+          <Icon size="20"><CloseOutlined /></Icon>
+        </n-button>
       </template>
       <div
         v-if="viewApplication && applicationFileType(viewApplication) == 'image'"
         class="view-application-image-block"
       >
-        <img :src="applicationFileURL(viewApplication.image)" class="view-application-image" />
+        <img
+          :src="applicationFileURL(viewApplication.image)"
+          :alt="viewApplication.name || 'Фото улики'"
+          class="view-application-image"
+        />
       </div>
       <iframe
         v-else-if="viewApplication && applicationFileType(viewApplication) == 'pdf'"
@@ -617,8 +653,21 @@ const bottomApplications = computed<Application[]>(() => {
         class="view-application-audio"
       ></audio>
       <div v-else-if="viewImage" class="view-application-image-block">
-        <img :src="viewImage.url" class="view-application-image" />
+        <img :src="viewImage.url" :alt="viewImage.title || 'Фото точки'" class="view-application-image" />
       </div>
+      <template v-if="viewPhotoURL" #action>
+        <n-button
+          class="photo-paper-action"
+          tag="a"
+          :href="viewPhotoURL"
+          target="_blank"
+          rel="noopener noreferrer"
+          :bordered="false"
+          :theme-overrides="{ textColor: '#bfa07d', textColorHover: '#63e2b7' }"
+        >
+          Открыть в новой вкладке
+        </n-button>
+      </template>
     </n-card>
   </n-modal>
 </template>
@@ -726,13 +775,38 @@ const bottomApplications = computed<Application[]>(() => {
   text-decoration: underline;
 }
 
+.photo-paper {
+  background-image: url('@/assets/images/paper_white.jpg');
+  background-size: cover;
+  border-radius: 10px;
+  box-shadow: 0 3px 15px rgb(98 98 98);
+  color: black;
+}
+
+.photo-paper-title {
+  font-family: 'font_old_typer', serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.photo-paper-action {
+  background-image: url('@/assets/images/belt.png');
+  background-size: cover;
+  border-radius: 5px;
+}
+
 .view-application-image-block {
   text-align: center;
 }
 
 .view-application-image {
+  border-radius: 5px;
+  display: block;
+  margin: 0 auto;
   max-height: 72vh;
-  max-width: 100%;
+  max-width: min(calc(94vw - 28px), 1172px);
 }
 
 .view-application-pdf {