diff options
| -rw-r--r-- | app/assets/javascripts/boards/boards_bundle.js | 7 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/filters.scss | 16 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 58 | ||||
| -rw-r--r-- | app/views/projects/boards/_show.html.haml | 2 | ||||
| -rw-r--r-- | app/views/shared/issuable/_filter.html.haml | 26 | ||||
| -rw-r--r-- | changelogs/unreleased/focus-mode-board.yml | 4 |
6 files changed, 101 insertions, 12 deletions
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js index 3874c2819a5..52c227e6b15 100644 --- a/app/assets/javascripts/boards/boards_bundle.js +++ b/app/assets/javascripts/boards/boards_bundle.js @@ -28,6 +28,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 || {}; @@ -103,6 +104,12 @@ $(() => { }, mounted () { gl.issueBoards.newListDropdownInit(); + }, + methods: { + toggleFocusMode() { + $(this.$refs.toggleFocusModeButton).tooltip('hide'); + issueBoardsContent.classList.toggle('is-focused'); + } } }); diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 2ebeaf9a40d..25ba500050d 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -44,6 +44,14 @@ } } +@media (max-width: $screen-md-max) { + .issues-details-filters { + .dropdown-menu-toggle { + width: 110px; + } + } +} + @media (max-width: $screen-xs-max) { .filter-item { display: block; @@ -232,14 +240,6 @@ overflow: auto; } -@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - .issues-details-filters { - .dropdown-menu-toggle { - width: 100px; - } - } -} - @media (max-width: $screen-xs-max) { .issues-details-filters { padding: 0 0 10px; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index f9ee33019cd..2c7e9b56744 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -51,6 +51,58 @@ } } +.focus-mode-button { + margin-right: 10px; + color: $gl-text-color-secondary; + background: none; + border: 0; + margin-top: 7px; + width: 28px; + text-align: center; + + &:hover, + &:active { + outline: none; + color: $filter-value-text-color; + } + + .fa-compress { + display: none; + } +} + +@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); + } + + .focus-mode-button { + margin-top: 9px; + + &:hover, + &:focus { + text-decoration: none; + } + + .fa-compress { + display: block; + } + + .fa-expand { + display: none; + } + } + } +} + .boards-app { position: relative; } @@ -250,11 +302,15 @@ } .issue-boards-search { - width: 395px; .form-control { display: inline-block; width: 210px; + margin-right: 10px; + + @media (max-width: $screen-md-max) { + width: 155px; + } } } diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml index added3f669b..5a78f6f7fb0 100644 --- a/app/views/projects/boards/_show.html.haml +++ b/app/views/projects/boards/_show.html.haml @@ -1,5 +1,5 @@ - @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 diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml index 847a86e2e68..4d029bf9d0a 100644 --- a/app/views/shared/issuable/_filter.html.haml +++ b/app/views/shared/issuable/_filter.html.haml @@ -34,7 +34,29 @@ %a{ href: page_filter_path(without: issuable_filter_params) } Reset filters .pull-right - = render 'shared/sort_dropdown' + - if boards_page + #js-boards-search.issue-boards-search + %a.focus-mode-button.pull-left.has-tooltip{ role: "button", + href: "#", + "aria-label" => "Toggle focus mode", + title: "Toggle focus mode", + ref: "toggleFocusModeButton", + "@click" => "toggleFocusMode" } + = icon("expand") + = icon("compress") + %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" } + - if can?(current_user, :admin_list, @project) + #js-add-issues-btn.pull-right.prepend-left-10 + .dropdown.pull-right + %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } } + Add list + .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable + = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" } + - if can?(current_user, :admin_label, @project) + = render partial: "shared/issuable/label_page_create" + = dropdown_loading + - else + = render 'shared/sort_dropdown' - if @bulk_edit .issues_bulk_update.hide @@ -79,4 +101,4 @@ $('form.filter-form').on('submit', function (event) { event.preventDefault(); gl.utils.visitUrl(this.action + '&' + $(this).serialize()); - }); + });
\ No newline at end of file diff --git a/changelogs/unreleased/focus-mode-board.yml b/changelogs/unreleased/focus-mode-board.yml new file mode 100644 index 00000000000..641ad599bf4 --- /dev/null +++ b/changelogs/unreleased/focus-mode-board.yml @@ -0,0 +1,4 @@ +--- +title: added focus mode button to issue boards +merge_request: !9806 +author: |