feat: add fullscreen button to home

src/components/Button.vue

@@ -60,8 +60,13 @@ defineProps({
   background-color: var(--black);
 }
 .button-border--black {
+  font-size: toRem(1.4);
   background-color: var(--white);
   border: toRem(0.1) solid var(--black);
+  .icon {
+    font-size: toRem(1.4);
+    color: var(--black);
+  }
 }
 .button--blue {
   color: var(--white);
@@ -160,8 +165,10 @@ defineProps({
   align-items: center;
   border-radius: 50%;
   padding: 0;
-  height: toRem(2.5);
-  width: toRem(2.5);
+  height: toRem(4);
+  width: toRem(4);
+  background-color: var(--white);
+  border: toRem(0.1) solid var(--grey-pale);
   .icon {
     color: var(---black);
     font-size: toRem(1.8);

src/components/EditText.vue

@@ -32,7 +32,7 @@
     <span v-else class="title">{{ text }}</span>
     <div v-if="!isEditTitle" class="edit-button">
       <Button
-        look="no-text"
+        look="no-text-blue-dark"
         icon="bi bi-pen"
         :tooltip="$t('pages.upload.edit_title_tooltip')"
         :disabled="isDisabled"
@@ -101,7 +101,7 @@ const isDisabled = computed<boolean>(() => props.isLoading && !props.isLoaded)
   width: 100%;
 }
 .edit-button {
-  background-color: var(--blue-dark);
+  background-color: var(--grey);
   border-radius: 50%;
   height: toRem(3.5);
   width: toRem(3.5);

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer">
+  <footer id="navFooter" class="footer">
     <ul class="link-list">
       <li class="link-item">
         <div class="link">
@@ -62,6 +62,9 @@ ul {
   padding: toRem(1.5) toRem(3);
   border-top: toRem(0.1) solid var(--grey);
 }
+.hidden {
+  display: none;
+}
 .link-list {
   display: flex;
   justify-content: center;

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="header">
+  <header id="navHeader" class="header">
     <div class="responsive entry-instance">
       <InstanceName />
     </div>
@@ -160,6 +160,9 @@ const userName = computed((): string => {
   background-color: var(--white);
   border-bottom: toRem(0.1) solid var(--grey-pale);
 }
+.hidden {
+  display: none;
+}
 .nav {
   width: 100%;
   display: flex;

src/components/Viewer.vue

@@ -1,5 +1,7 @@
 <template>
-  <div id="viewer" class="entry-viewer"></div>
+  <div id="viewer" class="entry-viewer">
+    <slot name="fullscreen"></slot>
+  </div>
 </template>
 
 <script setup lang="ts">

src/locales/en.json

@@ -38,7 +38,9 @@
     "home": {
       "report_mail": "?subject=⚠️ Report on picture {picId}&body=HEllo, %0D%0A%0D%0A Problem on image (keep type of problem reported) : %0D%0A%0D%0A %0D%0A%0D%0A inappropriate content / lack of blurring on an element to be anonymized or blurred for security reasons / overblurring (too much blurring) %0D%0A%0D%0A Link to affected photo : {link} %0D%0A%0D%0A Details of affected elements (especially for blurring problems - what should be blurred or unblurred?) :",
       "report_button_text": "Report this picture",
-      "sequence_title": "See the séquence"
+      "sequence_title": "See the séquence",
+      "open_fullscreen": "Fullscreen mode",
+      "close_fullscreen": "Normal mode"
     },
     "settings": {
       "title": "My tokens",

src/locales/fr.json

@@ -38,7 +38,9 @@
     "home": {
       "report_mail": "?subject=⚠️ Signalement sur l`image {picId}&body=Bonjour, %0D%0A%0D%0A Problème sur l`image (garder le type de problème signalé) : %0D%0A%0D%0A contenu inapproprié / absence de floutage sur un élément à anonymiser ou flouter pour des raisons de sécurité /surfloutage (floutage en trop) %0D%0A%0D%0A Lien vers la photo concernée : {link} %0D%0A%0D%0A Précision sur les éléments concernés (en particulier pour les problèmes de floutage - que faut-il flouter ou déflouter?) :",
       "report_button_text": "Signaler la photo",
-      "sequence_title": "Voir la séquence"
+      "sequence_title": "Voir la séquence",
+      "open_fullscreen": "Mode plein écran",
+      "close_fullscreen": "Mode normal"
     },
     "settings": {
       "title": "Mes Tokens",

src/locales/hu.json

@@ -38,7 +38,9 @@
     "home": {
       "report_mail": "?subject=⚠️ Report on picture {picId}&body=Hello, %0D%0A%0D%0A Problem on image (keep type of problem reported) : %0D%0A%0D%0A %0D%0A%0D%0A inappropriate content / lack of blurring on an element to be anonymized or blurred for security reasons / overblurring (too much blurring) %0D%0A%0D%0A Link to affected photo : {link} %0D%0A%0D%0A Details of affected elements (especially for blurring problems - what should be blurred or unblurred?) :",
       "report_button_text": "Fénykép jelentése",
-      "sequence_title": "lásd a sorrendet"
+      "sequence_title": "lásd a sorrendet",
+      "open_fullscreen": "Teljes képernyős mód",
+      "close_fullscreen": "Normál mód"
     },
     "settings": {
       "title": "Saját tokenek",

src/views/HomeView.vue

@@ -1,17 +1,68 @@
 <template>
-  <main class="entry-page">
-    <section class="entry-section">
-      <Viewer ref="viewerRef" />
+  <main :class="['entry-page', { 'full-viewer': isFull }]">
+    <section ref="sectionRef" class="entry-section">
+      <Viewer ref="viewerRef">
+        <template v-slot:fullscreen>
+          <div class="fullscreen-button">
+            <Button
+              class="desktop"
+              :text="buttonText"
+              look="button-border--black"
+              :icon="isFull ? 'bi bi-fullscreen-exit' : 'bi bi-fullscreen'"
+              @trigger="fullBrowser"
+            />
+            <Button
+              class="mobile"
+              look="button--rounded no-text"
+              :icon="isFull ? 'bi bi-fullscreen-exit' : 'bi bi-fullscreen'"
+              @trigger="fullscreen"
+            />
+          </div>
+        </template>
+      </Viewer>
     </section>
   </main>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import Viewer from '@/components/Viewer.vue'
+import Button from '@/components/Button.vue'
 import type ViewerType from '@/components/Viewer.vue'
-
+import type { ExtendedHtmlEl } from '@/views/interfaces/HomeView'
+import { toggleFullscreen } from '@/views/utils/home'
+const { t } = useI18n()
 const viewerRef = ref<InstanceType<typeof ViewerType>>()
+const sectionRef = ref<HTMLDivElement>()
+const isFull = ref<boolean>(false)
+
+const buttonText = computed<string>(() => {
+  if (isFull.value) return t('pages.home.close_fullscreen')
+  return t('pages.home.open_fullscreen')
+})
+function fullscreen() {
+  if (sectionRef.value) {
+    const elem = sectionRef.value as ExtendedHtmlEl
+    toggleFullscreen(elem)
+    isFull.value = !isFull.value
+  }
+}
+function fullBrowser() {
+  const header = document.getElementById('navHeader')
+  const footer = document.getElementById('navFooter')
+  if (header) {
+    const isHiddenHeader = header.classList.contains('hidden')
+    if (isHiddenHeader) header.classList.remove('hidden')
+    else header.classList.add('hidden')
+  }
+  if (footer) {
+    const isHiddenHeader = footer.classList.contains('hidden')
+    if (isHiddenHeader) footer.classList.remove('hidden')
+    else footer.classList.add('hidden')
+  }
+  isFull.value = !isFull.value
+}
 </script>
 <style scoped lang="scss">
 .entry-page {
@@ -21,10 +72,25 @@ const viewerRef = ref<InstanceType<typeof ViewerType>>()
   width: 100%;
   height: calc(100vh - #{toRem(13.2)});
 }
+.mobile {
+  display: none;
+}
+.fullscreen-button {
+  position: absolute;
+  bottom: toRem(1);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
 .focus-pic,
 .logged .entry-section {
   height: calc(100vh - #{toRem(8)});
 }
+.full-viewer {
+  .entry-section {
+    height: 100vh;
+  }
+}
 .gvs-focus-map .entry-report-button {
   display: none;
 }
@@ -36,5 +102,23 @@ const viewerRef = ref<InstanceType<typeof ViewerType>>()
   .entry-section {
     height: calc(100dvh - #{toRem(18)});
   }
+  .full-viewer {
+    height: 100vh;
+    padding-top: 0;
+  }
+}
+@media (max-width: toRem(50)) {
+  .fullscreen-button {
+    left: initial;
+    transform: initial;
+    right: toRem(1.3);
+    top: toRem(16);
+  }
+  .mobile {
+    display: block;
+  }
+  .desktop {
+    display: none;
+  }
 }
 </style>

src/views/UploadPicturesView.vue

@@ -9,7 +9,7 @@
         <template v-slot:cross>
           <Button
             icon="bi bi-x-lg"
-            look="no-text"
+            look="no-text-blue-dark"
             @trigger="informationCardDisplayed = false"
           />
         </template>
@@ -280,7 +280,6 @@ h3 {
 .entry-page {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   min-height: calc(100vh - #{toRem(13.82)});
   background-color: var(--grey);

src/views/interfaces/HomeView.ts

@@ -0,0 +1,5 @@
+export interface ExtendedHtmlEl extends HTMLElement {
+  mozRequestFullScreen?: () => void
+  webkitRequestFullScreen?: () => void
+  msRequestFullscreen?: () => void
+}

src/views/utils/home/index.ts

@@ -0,0 +1,43 @@
+import type { ExtendedHtmlEl } from '@/views/interfaces/HomeView'
+interface ExtendedDocument extends Document {
+  webkitFullscreenElement?: Element
+  mozFullScreenElement?: Element
+  msFullscreenElement?: Element
+  mozCancelFullScreen?: () => void
+  webkitExitFullscreen?: () => void
+  msExitFullscreen?: () => void
+}
+export function toggleFullscreen(element: ExtendedHtmlEl) {
+  const documentWithExtensions = document as ExtendedDocument
+  const isInFullScreen =
+    (documentWithExtensions.fullscreenElement &&
+      documentWithExtensions.fullscreenElement !== null) ||
+    (documentWithExtensions.webkitFullscreenElement &&
+      documentWithExtensions.webkitFullscreenElement !== null) ||
+    (documentWithExtensions.mozFullScreenElement &&
+      documentWithExtensions.mozFullScreenElement !== null) ||
+    (documentWithExtensions.msFullscreenElement &&
+      documentWithExtensions.msFullscreenElement !== null)
+
+  if (!isInFullScreen) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen()
+    } else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen()
+    } else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen()
+    } else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen()
+    }
+  } else {
+    if (documentWithExtensions.exitFullscreen) {
+      documentWithExtensions.exitFullscreen()
+    } else if (documentWithExtensions.webkitExitFullscreen) {
+      documentWithExtensions.webkitExitFullscreen()
+    } else if (documentWithExtensions.mozCancelFullScreen) {
+      documentWithExtensions.mozCancelFullScreen()
+    } else if (documentWithExtensions.msExitFullscreen) {
+      documentWithExtensions.msExitFullscreen()
+    }
+  }
+}