feat(cc-logs-application-view): add a fullscreen button mode

Fixes #983
CleverCloud · Apr 12, 2024 · d6c7e36 · d6c7e36
1 parent ba1e0b4
commit d6c7e36
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 19 deletions.
diff --git a/src/components/cc-logs-application-view/cc-logs-application-view.js b/src/components/cc-logs-application-view/cc-logs-application-view.js
@@ -8,6 +8,7 @@ import '../cc-notice/cc-notice.js';
 import '../cc-popover/cc-popover.js';
 import '../cc-toggle/cc-toggle.js';
 import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import {
   iconRemixArrowDownSLine,
@@ -19,6 +20,8 @@ import {
   iconRemixPauseLine,
   iconRemixPlayLine,
   iconRemixTimeLine,
+  iconRemixFullscreenLine as fullscreenIcon,
+  iconRemixFullscreenExitLine as fullscreenExitIcon,
 } from '../../assets/cc-remix.icons.js';
 import { dispatchCustomEvent } from '../../lib/events.js';
 import { i18n } from '../../lib/i18n.js';
@@ -106,6 +109,7 @@ export class CcLogsApplicationView extends LitElement {
       _customDateRange: { type: Object, state: true },
       _overflowDecision: { type: String, state: true },
       _textFilter: { type: String, state: true },
+      _fullscreen: { type: Boolean, state: true },
     };
   }
 
@@ -180,6 +184,8 @@ export class CcLogsApplicationView extends LitElement {
     this._overflowDecision = 'none';
 
     this._textFilter = '';
+
+    this._fullscreen = false;
   }
 
   /* region Public methods */
@@ -466,6 +472,10 @@ export class CcLogsApplicationView extends LitElement {
     dispatchCustomEvent(this, 'options-change', this.options);
   }
 
+  _onFullscreenToggle () {
+    this._fullscreen = !this._fullscreen;
+  }
+
   _onPause () {
     dispatchCustomEvent(this, 'pause');
   }
@@ -554,17 +564,27 @@ export class CcLogsApplicationView extends LitElement {
   }
 
   render () {
+    const overlay = {
+      overlay: true,
+      fullscreen: this._fullscreen,
+    };
+    const wrapper = {
+      wrapper: true,
+      fullscreen: this._fullscreen,
+    };
     return html`
-      <div class="wrapper">
-        <div class="left">
-          ${this._renderDateRangeSelection()}
-          ${this._renderCustomDateRange()}
-          ${this._renderInstances()}
-          ${this._renderLoadingProgress()}
-        </div>
-
-        <div class="logs-wrapper">
-          ${this._renderLogs()}
+      <div class=${classMap(overlay)}>
+        <div class=${classMap(wrapper)}>
+          <div class="left">
+            ${this._renderDateRangeSelection()}
+            ${this._renderCustomDateRange()}
+            ${this._renderInstances()}
+            ${this._renderLoadingProgress()}
+          </div>
+  
+          <div class="logs-wrapper">
+            ${this._renderLogs()}
+          </div>
         </div>
       </div>
     `;
@@ -821,13 +841,22 @@ export class CcLogsApplicationView extends LitElement {
         @cc-logs-control:option-change=${this._onLogsOptionChange}
       >
         <div slot="header">
-          <cc-input-text
-            class="logs-filter-input"
-            label=${i18n('cc-logs-application-view.filter')}
-            .value=${this._textFilter}
-            inline
-            @cc-input-text:input=${this._onTextFilterInput}
-          ></cc-input-text>
+          <div class="logs-header">
+            <cc-input-text
+              class="logs-filter-input"
+              label=${i18n('cc-logs-application-view.filter')}
+              .value=${this._textFilter}
+              inline
+              @cc-input-text:input=${this._onTextFilterInput}
+            ></cc-input-text>
+            <cc-button
+              class="header-fullscreen-button"
+              .icon=${this._fullscreen ? fullscreenExitIcon : fullscreenIcon}
+              a11y-name=${this._fullscreen ? i18n('cc-logs-application-view.fullscreen.exit') : i18n('cc-logs-application-view.fullscreen')}
+              hide-text
+              @cc-button:click=${this._onFullscreenToggle}
+            ></cc-button>
+          </div>
         </div>
       </cc-logs-control-beta>
 
@@ -869,13 +898,36 @@ export class CcLogsApplicationView extends LitElement {
         :host {
           display: block;
         }
+        
+        .overlay {
+          display: flex;
+          height: 100%;
+        }
+
+        .overlay.fullscreen {
+          position: fixed;
+          z-index: 999;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          backdrop-filter: blur(5px);
+        }
 
         .wrapper {
           display: flex;
-          height: 100%;
+          flex: 1;
           gap: 0.5em;
         }
         
+        .wrapper.fullscreen {
+          padding: 1em;
+          border: 1px solid var(--cc-color-border-neutral);
+          margin: 1em;
+          background-color: var(--cc-color-bg-default);
+          border-radius: var(--cc-border-radius-default);
+        }
+        
         .left {
           display: flex;
           width: 18em;
@@ -1057,8 +1109,15 @@ export class CcLogsApplicationView extends LitElement {
           height: 100%;
         }
         
-        .logs-filter-input {
+        .logs-header {
+          display: flex;
           width: 100%;
+          align-items: center;
+          gap: 1em;
+        }
+        
+        .logs-filter-input {
+          flex: 1;
         }
         
         .center-logs-wrapper {

diff --git a/src/translations/translations.en.js b/src/translations/translations.en.js
@@ -499,6 +499,8 @@ export const translations = {
   'cc-logs-application-view.date-selection.today': `Today`,
   'cc-logs-application-view.date-selection.yesterday': `Yesterday`,
   'cc-logs-application-view.filter': `Filter`,
+  'cc-logs-application-view.fullscreen': `Fullscreen`,
+  'cc-logs-application-view.fullscreen.exit': `Exit fullscreen`,
   'cc-logs-application-view.logs.error': `Something went wrong while loading logs`,
   'cc-logs-application-view.logs.loading': `Looking for log entries...`,
   'cc-logs-application-view.logs.warning.no-logs.message': `There are no logs matching the selected criteria`,

diff --git a/src/translations/translations.fr.js b/src/translations/translations.fr.js
@@ -512,6 +512,8 @@ export const translations = {
   'cc-logs-application-view.date-selection.today': `Aujourd'hui`,
   'cc-logs-application-view.date-selection.yesterday': `Hier`,
   'cc-logs-application-view.filter': `Filtrer`,
+  'cc-logs-application-view.fullscreen': `Mode plein écran`,
+  'cc-logs-application-view.fullscreen.exit': `Sortir du mode plein écran`,
   'cc-logs-application-view.logs.error': `Une erreur est survenue pendant le chargement des logs`,
   'cc-logs-application-view.logs.loading': `Recherche de logs...`,
   'cc-logs-application-view.logs.warning.no-logs.message': `Il n'y a aucun log qui correspond aux critères sélectionnés`,