From 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 18 Feb 2021 10:34:06 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-9-stable-ee

---
 .../javascripts/boards/components/toggle_focus.vue | 52 ++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 app/assets/javascripts/boards/components/toggle_focus.vue

(limited to 'app/assets/javascripts/boards/components/toggle_focus.vue')

diff --git a/app/assets/javascripts/boards/components/toggle_focus.vue b/app/assets/javascripts/boards/components/toggle_focus.vue
new file mode 100644
index 00000000000..74805f8a681
--- /dev/null
+++ b/app/assets/javascripts/boards/components/toggle_focus.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { hide } from '~/tooltips';
+
+export default {
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip,
+  },
+  props: {
+    issueBoardsContentSelector: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+    };
+  },
+  methods: {
+    toggleFocusMode() {
+      hide(this.$refs.toggleFocusModeButton);
+
+      const issueBoardsContent = document.querySelector(this.issueBoardsContentSelector);
+      issueBoardsContent.classList.toggle('is-focused');
+
+      this.isFullscreen = !this.isFullscreen;
+    },
+  },
+  i18n: {
+    toggleFocusMode: __('Toggle focus mode'),
+  },
+};
+</script>
+
+<template>
+  <div class="board-extra-actions gl-ml-3 gl-display-flex gl-align-items-center">
+    <gl-button
+      ref="toggleFocusModeButton"
+      v-gl-tooltip
+      :icon="isFullscreen ? 'minimize' : 'maximize'"
+      class="js-focus-mode-btn"
+      data-qa-selector="focus_mode_button"
+      :title="$options.i18n.toggleFocusMode"
+      @click="toggleFocusMode"
+    />
+  </div>
+</template>
-- 
cgit v1.2.1