Commit e9468e0f authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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

added focus mode button to issue boards

Closes #1959

See merge request !1472
parents 13fb6abb b2c059fe
......@@ -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>
`,
});
......
<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>
<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>
......@@ -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;
}
......
- 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
......
---
title: added focus mode button to issue boards
merge_request:
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment