Merge branch '1959-full-screen-focus-mode-issue-boards' into 'master'

added focus mode button to issue boards

Closes #1959

See merge request !1472

app/assets/javascripts/boards/boards_bundle.js

@@ -4,6 +4,8 @@
 
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
+import collapseIcon from './icons/fullscreen_collapse.svg';
+import expandIcon from './icons/fullscreen_expand.svg';
 
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
@@ -29,6 +31,7 @@ $(() => {
   const $boardApp = document.getElementById('board-app');
   const Store = gl.issueBoards.BoardsStore;
   const ModalStore = gl.issueBoards.ModalStore;
+  const issueBoardsContent = document.querySelector('.js-focus-mode-board');
 
   window.gl = window.gl || {};
 
@@ -116,7 +119,7 @@ $(() => {
     },
     mounted () {
       gl.issueBoards.newListDropdownInit();
-    }
+    },
   });
 
   gl.IssueBoardsModalAddBtn = new Vue({
@@ -125,6 +128,7 @@ $(() => {
     data: {
       modal: ModalStore.store,
       store: Store.state,
+      isFullscreen: false,
     },
     watch: {
       disabled() {
@@ -145,7 +149,7 @@ $(() => {
     },
     methods: {
       updateTooltip() {
-        const $tooltip = $(this.$el);
+        const $tooltip = $(this.$refs.addIssuesButton);
 
         this.$nextTick(() => {
           if (this.disabled) {
@@ -160,21 +164,45 @@ $(() => {
           this.toggleModal(true);
         }
       },
+      toggleFocusMode() {
+        $(this.$refs.toggleFocusModeButton).tooltip('hide');
+        issueBoardsContent.classList.toggle('is-focused');
+
+        this.isFullscreen = !this.isFullscreen;
+      },
     },
     mounted() {
       this.updateTooltip();
     },
     template: `
+      <div class="board-extra-actions">
         <button
-        class="btn btn-create pull-right prepend-left-10"
+          class="btn btn-create prepend-left-10"
           type="button"
           data-placement="bottom"
+          ref="addIssuesButton"
           :class="{ 'disabled': disabled }"
           :title="tooltipTitle"
           :aria-disabled="disabled"
           @click="openModal">
           Add issues
         </button>
+        <a
+          href="#"
+          class="btn btn-default has-tooltip prepend-left-10"
+          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>
     `,
   });
 

app/assets/javascripts/boards/icons/fullscreen_collapse.svg

+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg"><path d="M.147 15.496l2.146-2.146-1.286-1.286a.55.55 0 0 1-.125-.616c.101-.238.277-.357.527-.357h4a.55.55 0 0 1 .402.17.55.55 0 0 1 .17.401v4c0 .25-.12.426-.358.527-.232.101-.437.06-.616-.125l-1.286-1.286-2.146 2.146-1.428-1.428zM14.996.646l1.428 1.43-2.146 2.145 1.286 1.286c.185.179.226.384.125.616-.101.238-.277.357-.527.357h-4a.55.55 0 0 1-.402-.17.55.55 0 0 1-.17-.401v-4c0-.25.12-.426.358-.527a.553.553 0 0 1 .616.125l1.286 1.286L14.996.647zm-13.42 0L3.72 2.794l1.286-1.286a.55.55 0 0 1 .616-.125c.238.101.357.277.357.527v4a.55.55 0 0 1-.17.402.55.55 0 0 1-.401.17h-4c-.25 0-.426-.12-.527-.358-.101-.232-.06-.437.125-.616l1.286-1.286L.147 2.075 1.575.647zm14.848 14.85l-1.428 1.428-2.146-2.146-1.286 1.286c-.179.185-.384.226-.616.125-.238-.101-.357-.277-.357-.527v-4a.55.55 0 0 1 .17-.402.55.55 0 0 1 .401-.17h4c.25 0 .426.12.527.358a.553.553 0 0 1-.125.616l-1.286 1.286 2.146 2.146z" fill-rule="evenodd"/></svg>

app/assets/javascripts/boards/icons/fullscreen_expand.svg

+<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path d="M8.591 5.056l2.147-2.146-1.286-1.286a.55.55 0 0 1-.125-.616c.101-.238.277-.357.527-.357h4a.55.55 0 0 1 .402.17.55.55 0 0 1 .17.401v4c0 .25-.12.426-.358.527-.232.101-.437.06-.616-.125l-1.286-1.286-2.146 2.147-1.429-1.43zM5.018 8.553l1.429 1.43L4.3 12.127l1.286 1.286c.185.179.226.384.125.616-.101.238-.277.357-.527.357h-4a.55.55 0 0 1-.402-.17.55.55 0 0 1-.17-.401v-4c0-.25.12-.426.358-.527a.553.553 0 0 1 .616.125L2.872 10.7l2.146-2.147zm4.964 0l2.146 2.147 1.286-1.286a.55.55 0 0 1 .616-.125c.238.101.357.277.357.527v4a.55.55 0 0 1-.17.402.55.55 0 0 1-.401.17h-4c-.25 0-.426-.12-.527-.358-.101-.232-.06-.437.125-.616l1.286-1.286-2.147-2.146 1.43-1.429zM6.447 5.018l-1.43 1.429L2.873 4.3 1.586 5.586c-.179.185-.384.226-.616.125-.238-.101-.357-.277-.357-.527v-4a.55.55 0 0 1 .17-.402.55.55 0 0 1 .401-.17h4c.25 0 .426.12.527.358a.553.553 0 0 1-.125.616L4.3 2.872l2.147 2.146z" fill-rule="evenodd"/></svg>

app/assets/stylesheets/pages/boards.scss

@@ -60,6 +60,26 @@
   }
 }
 
+.board-extra-actions {
+  font-size: 0;
+  white-space: nowrap;
+}
+
+@media (min-width: $screen-sm-min) {
+  .issue-boards-content.is-focused {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background: $white-light;
+    z-index: 100;
+
+    .boards-list {
+      height: calc(100vh - 50px);
+    }
+  }
+}
+
 .boards-app {
   position: relative;
 }

app/views/projects/boards/_show.html.haml

 - board = local_assigns.fetch(:board, nil)
 - @no_container = true
-- @content_class = "issue-boards-content"
+- @content_class = "issue-boards-content js-focus-mode-board"
 - page_title "Boards"
 
 - content_for :page_specific_javascripts do

changelogs/unreleased/25234-focus-mode-board.yml

+---
+title: added focus mode button to issue boards
+merge_request:
+author: