Move logs icons to a menu (#3766)

* Move logs icons to a menu * Debug clicks * Replace Small font size / Reduce font size * Fix HTML format issues * Translate in French
kubernetes · May 30, 2019 · 722cb50 · 722cb50
1 parent 0e6cb1b
commit 722cb50
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 53 deletions.
diff --git a/i18n/messages.fr.xlf b/i18n/messages.fr.xlf
@@ -966,6 +966,54 @@
           <context context-type="linenumber">137</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fb31e77d231aa06eb2e8494b50596519bbeeb386" datatype="html">
+        <source>Invert colors</source>
+        <target>Inverser les couleurs</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">124</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="8902979878d0f294dfc6f5b95fd7788c3fa2dd49" datatype="html">
+        <source>Reduce font size</source>
+        <target>Réduire les caractères</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">129</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="b5c4c520630525f705f7bddbeb2f0b0aec7a30d6" datatype="html">
+        <source>Show timestamps</source>
+        <target>Voir les horodatages</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">134</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="deb6f7adf24853a40f57516d8512227e75ab5a2e" datatype="html">
+        <source>Auto-refresh (every <x id="INTERPOLATION" equiv-text="{{refreshInterval / 1000}}"/> s.)</source>
+        <target>Rafraîchir (toutes les <x id="INTERPOLATION" equiv-text="{{refreshInterval / 1000}}"/> s.)</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">139</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="6e73f7b06ce74fa29c8866cf5a82bfbeaf2452ed" datatype="html">
+        <source>Follow logs</source>
+        <target>Suivre les journaux</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">144</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="3de87d94cff5d685043f035ac20e6d4521f8edf2" datatype="html">
+        <source>Show previous logs</source>
+        <target>Voir les journaux précédents</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">149</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="eb3d5aefff38a814b76da74371cbf02c0789a1ef" datatype="html">
         <source>Logs</source>
         <target>Journaux</target>

diff --git a/i18n/messages.xlf b/i18n/messages.xlf
@@ -379,7 +379,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/search/template.html</context>
-          <context context-type="linenumber">48</context>
+          <context context-type="linenumber">58</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0349fe54380ff3444a3a881afb66c9158a299575" datatype="html">
@@ -390,7 +390,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/search/template.html</context>
-          <context context-type="linenumber">58</context>
+          <context context-type="linenumber">68</context>
         </context-group>
       </trans-unit>
       <trans-unit id="01269ce8051398188d50367ead1831407e77d504" datatype="html">
@@ -883,7 +883,7 @@
         <source>Download logs</source>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
-          <context context-type="linenumber">110</context>
+          <context context-type="linenumber">61</context>
         </context-group>
       </trans-unit>
       <trans-unit id="122c7fce44be1544d617270e10871acd92934225" datatype="html">
@@ -892,7 +892,49 @@
         </source>
         <context-group purpose="location">
           <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
-          <context context-type="linenumber">138</context>
+          <context context-type="linenumber">93</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="fb31e77d231aa06eb2e8494b50596519bbeeb386" datatype="html">
+        <source>Invert colors</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">124</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="8902979878d0f294dfc6f5b95fd7788c3fa2dd49" datatype="html">
+        <source>Reduce font size</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">129</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="b5c4c520630525f705f7bddbeb2f0b0aec7a30d6" datatype="html">
+        <source>Show timestamps</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">134</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="deb6f7adf24853a40f57516d8512227e75ab5a2e" datatype="html">
+        <source>Auto-refresh (every <x id="INTERPOLATION" equiv-text="{{refreshInterval / 1000}}"/> s.)</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">139</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="6e73f7b06ce74fa29c8866cf5a82bfbeaf2452ed" datatype="html">
+        <source>Follow logs</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">144</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="3de87d94cff5d685043f035ac20e6d4521f8edf2" datatype="html">
+        <source>Show previous logs</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/logs/template.html</context>
+          <context context-type="linenumber">149</context>
         </context-group>
       </trans-unit>
       <trans-unit id="eb3d5aefff38a814b76da74371cbf02c0789a1ef" datatype="html">

diff --git a/src/app/frontend/logs/template.html b/src/app/frontend/logs/template.html
@@ -56,61 +56,16 @@
         </mat-select>
       </mat-form-field>
       <div class="kd-logs-style-buttons">
-        <button mat-icon-button
-                matTooltip="Invert colors"
-                (click)="onTextColorChange()">
-          <mat-icon [ngClass]="{'kd-logs-color-icon-invert': logService?.getInverted(), 'kd-logs-color-icon': !logService?.getInverted()}">format_color_text</mat-icon>
-        </button>
-        <button mat-icon-button
-                matTooltip="Toggle font size"
-                (click)="onFontSizeChange()">
-          <mat-icon [ngClass]="{'kd-logs-size-icon-compact': logService.getCompact(),
-          'kd-logs-size-icon': !logService.getCompact()}">text_fields</mat-icon>
-        </button>
-        <button mat-icon-button
-                matTooltip="Show timestamps"
-                (click)="onShowTimestamp()">
-          <mat-icon>{{logService.getShowTimestamp() ? 'timer' : 'timer_off'}}</mat-icon>
-        </button>
-        <button mat-icon-button
-                matTooltip="Toggle auto-refresh (every {{refreshInterval / 1000}} seconds)"
-                (click)="toggleLogAutoRefresh()">
-          <mat-icon>
-            refresh
-            <svg class="kd-cross-style"
-                 *ngIf="!logService.getAutoRefresh()"
-                 width="32px"
-                 height="32px"
-                 viewBox="0 0 32 32">
-              <line class="kd-cross-line-white"
-                    x1="9"
-                    x2="27"
-                    y1="9"
-                    y2="27" />
-              <line class="kd-cross-line-black"
-                    x1="9"
-                    x2="27"
-                    y1="10"
-                    y2="28" />
-            </svg>
-          </mat-icon>
-        </button>
-        <button mat-icon-button
-                [matTooltip]="logService.getFollowing() ? 'Following logs' : 'Follow logs'"
-                (click)="toggleLogFollow()">
-          <mat-icon>{{logService.getFollowing() ? 'flash_on' : 'flash_off'}}</mat-icon>
-        </button>
-        <button mat-icon-button
-                matTooltip="{{logService?.getPrevious() ? 'Show current logs' : 'Show previous logs'}}"
-                (click)="onPreviousChange()">
-          <mat-icon>{{logService?.getPrevious() ? 'exposure_neg_1' : 'exposure_zero'}}</mat-icon>
-        </button>
         <button mat-icon-button
                 i18n-matTooltip
                 matTooltip="Download logs"
                 (click)="downloadLog()">
           <mat-icon>file_download</mat-icon>
         </button>
+        <button mat-icon-button
+                [matMenuTriggerFor]="kdMenu">
+          <mat-icon>more_vert</mat-icon>
+        </button>
       </div>
     </div>
 
@@ -163,3 +118,36 @@
     </div>
   </kd-card>
 </div>
+
+<mat-menu #kdMenu="matMenu">
+  <button mat-menu-item
+          (click)="onTextColorChange()">
+    <mat-icon>{{logService?.getInverted() ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+    <span i18n>Invert colors</span>
+  </button>
+  <button mat-menu-item
+          (click)="onFontSizeChange()">
+    <mat-icon>{{logService.getCompact() ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+    <span i18n>Reduce font size</span>
+  </button>
+  <button mat-menu-item
+          (click)="onShowTimestamp()">
+    <mat-icon>{{logService.getShowTimestamp() ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+    <span i18n>Show timestamps</span>
+  </button>
+  <button mat-menu-item
+          (click)="toggleLogAutoRefresh()">
+    <mat-icon>{{logService.getAutoRefresh() ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+    <span i18n>Auto-refresh (every {{refreshInterval / 1000}} s.)</span>
+  </button>
+  <button mat-menu-item
+          (click)="toggleLogFollow()">
+    <mat-icon>{{logService.getFollowing() ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+    <span i18n>Follow logs</span>
+  </button>
+  <button mat-menu-item
+          (click)="onPreviousChange()">
+    <mat-icon>{{logService.getPrevious() ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
+    <span i18n>Show previous logs</span>
+  </button>
+</mat-menu>