feat; Provide a screen activity (close #154)

kalisio · Aug 1, 2024 · bad9b88 · bad9b88
1 parent 37bff54
commit bad9b88
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 2 deletions.
diff --git a/config/default.js b/config/default.js
@@ -28,6 +28,7 @@ if (process.env.NODE_APP_INSTANCE === 'dev') {
 const LeftPane = {
   content: [
     { component: 'account/KProfile', class: 'full-width' },
+    { id: 'screen', icon: 'las la-tv', label: 'ScreenActivity.LABEL', renderer: 'item', route: { name: 'screen-activity' } },
     { id: 'layout', icon: 'las la-desktop', label: 'LayoutActivity.LABEL', renderer: 'item', route: { name: 'layout-activity', params: { mode: 'header-footer' } } },
     { id: 'miscellaneous', icon: 'las la-icons', label: 'MiscellaneousActivity.LABEL', renderer: 'item', route: { name: 'miscellaneous-activity' } },
     { id: 'document', icon: 'las la-icons', label: 'DocumentActivity.LABEL', renderer: 'item', route: { name: 'document-activity', params: { type: 'html' } } },
@@ -248,6 +249,11 @@ module.exports = {
     ],
     deletable: true
   },
+  screenActivity: {
+    panes: { 
+      left: LeftPane
+    }
+  },
   layoutActivity: {
     header: {
       content: {

diff --git a/src/boot/kdk.js b/src/boot/kdk.js
@@ -34,6 +34,7 @@ export default async ({ app }) => {
 
   // Register global components
   app.component('KAction', await kdkCoreUtils.loadComponent('action/KAction'))
+  app.component('KToggleFullscreenAction', await kdkCoreUtils.loadComponent('action/KToggleFullscreenAction'))
   app.component('KPanel', await kdkCoreUtils.loadComponent('KPanel'))
   app.component('KStamp', await kdkCoreUtils.loadComponent('KStamp'))
   app.component('KModal', await kdkCoreUtils.loadComponent('KModal'))
@@ -53,6 +54,7 @@ export default async ({ app }) => {
   app.component('KTimeLine', await kdkCoreUtils.loadComponent('collection/KTimeLine'))
   app.component('KActivity', await kdkCoreUtils.loadComponent('KActivity'))
 
+
   // Register global properties
   // FIXME: This is used for testing purpose, don't know how to access this from Puppeteer otherwise
   global.$store = app.config.globalProperties.$store

diff --git a/src/components/layout/LayoutActivity.vue b/src/components/layout/LayoutActivity.vue
@@ -3,7 +3,7 @@
     name="layout"
     :mode="mode"
     padding
-  />
+  /> 
 </template>
 
 <script setup>

diff --git a/src/components/screen/ScreenActivity.vue b/src/components/screen/ScreenActivity.vue
@@ -0,0 +1,37 @@
+<template>
+  <KActivity 
+    name="screen"
+    padding
+  >
+    <div class="q-pa-md fixed-center column items-center q-gutter-y-xl">
+      <KStamp
+        :text="text" 
+        textSize="1rem"
+        :icon="ScreenOrientation === 'portrait' ? 'las la-portrait' : 'las la-image'" 
+        iconSize="8rem"
+        direction="vertical"
+      /> 
+      <KToggleFullscreenAction
+        id="toggle-fullscreen" 
+        icon="las la-expand"
+        label="ScreenActivity.ENTER_FULLSCREEN"
+        :toggle="{ icon: 'las la-compress', label: 'ScreenActivity.EXIT_FULLSCREEN' }"
+        renderer="form-button"
+      />
+
+    </div>
+  </KActivity>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { i18n, composables as kdkCoreComposables } from '@kalisio/kdk/core.client'
+
+// Data
+const { Orientation: ScreenOrientation, Screen } = kdkCoreComposables.useScreen()
+
+// Computed
+const text = computed(() => {
+  return i18n.t(ScreenOrientation === 'portrait' ? 'ScreenActivity.PORTRAIT_ORIENTATION' : 'ScreenActivity.LANDSCAPE_ORIENTATION', { w: Screen.width, h: Screen.height })
+})
+</script>
diff --git a/src/i18n/app_en.json b/src/i18n/app_en.json
@@ -14,6 +14,13 @@
     "CONTACT": "Contact",
     "TERMS_AND_POLICIES": "Terms and Policies"
   },
+  "ScreenActivity": {
+    "LABEL": "Screen",
+    "PORTRAIT_ORIENTATION": "Portrait [{w}px x {h}px]",
+    "LANDSCAPE_ORIENTATION": "Landscape [{w}px x {h}px]",
+    "ENTER_FULLSCREEN": "Enter fulscreen mode",
+    "EXIT_FULLSCREEN": "Exit fullscreen mode"
+  },
   "LayoutActivity": {
     "LABEL": "Layout"
   },

diff --git a/src/i18n/app_fr.json b/src/i18n/app_fr.json
@@ -14,6 +14,13 @@
     "CONTACT": "Contact",
     "TERMS_AND_POLICIES": "Conditions générales"
   },
+  "ScreenActivity": {
+    "LABEL": "Ecran",
+    "PORTRAIT_ORIENTATION": "Portrait [{w}px x {h}px]",
+    "LANDSCAPE_ORIENTATION": "Paysage [{w}px x {h}px]",
+    "ENTER_FULLSCREEN": "Basculer en mode plein écran",
+    "EXIT_FULLSCREEN": "Quitter le mode plein écran"
+  },  
   "LayoutActivity": {
     "LABEL": "Layout"
   },  

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -29,12 +29,16 @@ module.exports = [{
           // Because this child is the default one path is empty and name is the one of the parent route
           path: '',
           name: 'home',
-          redirect: { name: 'layout-activity', params: { mode: 'header-footer' } },
+          redirect: { name: 'screen-activity' },
           tour: {
             home: tours.home,
             'side-nav': tours['side-nav']
           },
         },
+        'screen': {
+          name: 'screen-activity',
+          component: 'screen/ScreenActivity',
+        },
         'layout/:mode': {
           name: 'layout-activity',
           component: 'layout/LayoutActivity',