diff options
Diffstat (limited to 'app/assets/javascripts/boards/toggle_focus.js')
-rw-r--r-- | app/assets/javascripts/boards/toggle_focus.js | 48 |
1 files changed, 10 insertions, 38 deletions
diff --git a/app/assets/javascripts/boards/toggle_focus.js b/app/assets/javascripts/boards/toggle_focus.js index 347deb81846..0a230f72dcc 100644 --- a/app/assets/javascripts/boards/toggle_focus.js +++ b/app/assets/javascripts/boards/toggle_focus.js @@ -1,45 +1,17 @@ -import $ from 'jquery'; import Vue from 'vue'; -import { GlIcon } from '@gitlab/ui'; -import { hide } from '~/tooltips'; +import ToggleFocus from './components/toggle_focus.vue'; -export default (ModalStore, boardsStore) => { - const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board'); +export default () => { + const issueBoardsContentSelector = '.content-wrapper > .js-focus-mode-board'; return new Vue({ - el: document.getElementById('js-toggle-focus-btn'), - components: { - GlIcon, + el: '#js-toggle-focus-btn', + render(h) { + return h(ToggleFocus, { + props: { + issueBoardsContentSelector, + }, + }); }, - data: { - modal: ModalStore.store, - store: boardsStore.state, - isFullscreen: false, - }, - methods: { - toggleFocusMode() { - const $el = $(this.$refs.toggleFocusModeButton); - hide($el); - - issueBoardsContent.classList.toggle('is-focused'); - - this.isFullscreen = !this.isFullscreen; - }, - }, - template: ` - <div class="board-extra-actions"> - <a - href="#" - class="btn btn-default has-tooltip gl-ml-3 js-focus-mode-btn" - data-qa-selector="focus_mode_button" - role="button" - aria-label="Toggle focus mode" - title="Toggle focus mode" - ref="toggleFocusModeButton" - @click="toggleFocusMode"> - <gl-icon :name="isFullscreen ? 'minimize' : 'maximize'" /> - </a> - </div> - `, }); }; |