diff options
Diffstat (limited to 'app/assets/javascripts/boards/toggle_focus.js')
-rw-r--r-- | app/assets/javascripts/boards/toggle_focus.js | 46 |
1 files changed, 45 insertions, 1 deletions
diff --git a/app/assets/javascripts/boards/toggle_focus.js b/app/assets/javascripts/boards/toggle_focus.js index 2d1ec238274..a437a34c948 100644 --- a/app/assets/javascripts/boards/toggle_focus.js +++ b/app/assets/javascripts/boards/toggle_focus.js @@ -1 +1,45 @@ -export default () => {}; +import $ from 'jquery'; +import Vue from 'vue'; +import collapseIcon from './icons/fullscreen_collapse.svg'; +import expandIcon from './icons/fullscreen_expand.svg'; + +export default (ModalStore, boardsStore) => { + const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board'); + + return new Vue({ + el: document.getElementById('js-toggle-focus-btn'), + data: { + modal: ModalStore.store, + store: boardsStore.state, + isFullscreen: false, + }, + methods: { + toggleFocusMode() { + $(this.$refs.toggleFocusModeButton).tooltip('hide'); + issueBoardsContent.classList.toggle('is-focused'); + + this.isFullscreen = !this.isFullscreen; + }, + }, + template: ` + <div class="board-extra-actions"> + <a + href="#" + class="btn btn-default has-tooltip prepend-left-10 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"> + <span v-show="isFullscreen"> + ${collapseIcon} + </span> + <span v-show="!isFullscreen"> + ${expandIcon} + </span> + </a> + </div> + `, + }); +}; |