From 42182666044dd4463cce042e12e8c9faadd28b13 Mon Sep 17 00:00:00 2001 From: Henriette Dinger Date: Tue, 16 Apr 2019 15:42:05 +0200 Subject: [PATCH] Hide delete list functionality behind drop down --- config/locales/js-en.yml | 2 + .../wp-card-view/wp-card-view.component.sass | 2 +- .../board-list-dropdown.directive.ts | 116 ++++++++++++++++++ .../board-list/board-list.component.html | 10 +- .../board-list/board-list.component.sass | 13 +- .../board/board-list/board-list.component.ts | 4 +- .../modules/boards/board/board.component.sass | 7 +- .../boards/openproject-boards.module.ts | 2 + 8 files changed, 142 insertions(+), 14 deletions(-) create mode 100644 frontend/src/app/modules/boards/board/board-list/board-list-dropdown.directive.ts diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml index 4f6dfe7a7c..ff8841772a 100644 --- a/config/locales/js-en.yml +++ b/config/locales/js-en.yml @@ -51,6 +51,8 @@ en: upsale: boards: 'Need to freely structure your work in a board view?' check_out_link: 'Check out the Enterprise Edition.' + lists: + delete: 'Delete list' card: add_new: 'Add new card' diff --git a/frontend/src/app/components/wp-card-view/wp-card-view.component.sass b/frontend/src/app/components/wp-card-view/wp-card-view.component.sass index 81b6957ec1..28e9d4781e 100644 --- a/frontend/src/app/components/wp-card-view/wp-card-view.component.sass +++ b/frontend/src/app/components/wp-card-view/wp-card-view.component.sass @@ -21,7 +21,7 @@ padding: 10px 30px 10px 10px margin-top: 10px position: relative - box-shadow: 2px 2px 5px 0px lightgrey + box-shadow: 1px 1px 3px 0px lightgrey background: var(--body-background) .wp-card--assignee diff --git a/frontend/src/app/modules/boards/board/board-list/board-list-dropdown.directive.ts b/frontend/src/app/modules/boards/board/board-list/board-list-dropdown.directive.ts new file mode 100644 index 0000000000..33b416e0cd --- /dev/null +++ b/frontend/src/app/modules/boards/board/board-list/board-list-dropdown.directive.ts @@ -0,0 +1,116 @@ +//-- copyright +// OpenProject is a project management system. +// Copyright (C) 2012-2015 the OpenProject Foundation (OPF) +// +// This program is free software; you can redistribute it and/or +// modify it under the terms of the GNU General Public License version 3. +// +// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: +// Copyright (C) 2006-2013 Jean-Philippe Lang +// Copyright (C) 2010-2013 the ChiliProject Team +// +// This program is free software; you can redistribute it and/or +// modify it under the terms of the GNU General Public License +// as published by the Free Software Foundation; either version 2 +// of the License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with this program; if not, write to the Free Software +// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +// +// See doc/COPYRIGHT.rdoc for more details. +//++ + +import { + ChangeDetectorRef, + Directive, + ElementRef, + EventEmitter, + Injector, + Input, + OnDestroy, + OnInit, + Output +} from '@angular/core'; +import {I18nService} from 'core-app/modules/common/i18n/i18n.service'; +import {AuthorisationService} from 'core-app/modules/common/model-auth/model-auth.service'; +import {OpContextMenuTrigger} from 'core-components/op-context-menu/handlers/op-context-menu-trigger.directive'; +import {OPContextMenuService} from 'core-components/op-context-menu/op-context-menu.service'; +import {States} from 'core-components/states.service'; +import {WorkPackagesListService} from 'core-components/wp-list/wp-list.service'; +import {componentDestroyed} from 'ng2-rx-componentdestroyed'; +import {takeUntil} from 'rxjs/operators'; +import {QueryFormResource} from 'core-app/modules/hal/resources/query-form-resource'; +import {QueryResource} from 'core-app/modules/hal/resources/query-resource'; +import {OpModalService} from "core-components/op-modals/op-modal.service"; +import {WpTableExportModal} from "core-components/modals/export-modal/wp-table-export.modal"; +import {SaveQueryModal} from "core-components/modals/save-modal/save-query.modal"; +import {QuerySharingModal} from "core-components/modals/share-modal/query-sharing.modal"; +import {WpTableConfigurationModalComponent} from 'core-components/wp-table/configuration-modal/wp-table-configuration.modal'; +import {IsolatedQuerySpace} from "core-app/modules/work_packages/query-space/isolated-query-space"; +import { + selectableTitleIdentifier, + triggerEditingEvent +} from "core-app/modules/common/editable-toolbar-title/editable-toolbar-title.component"; +import {WorkPackageInlineCreateService} from "core-components/wp-inline-create/wp-inline-create.service"; +import {BoardListComponent} from "core-app/modules/boards/board/board-list/board-list.component"; + +@Directive({ + selector: '[boardListDropdown]' +}) +export class BoardListDropdownMenuDirective extends OpContextMenuTrigger { + + constructor(readonly elementRef:ElementRef, + readonly opContextMenu:OPContextMenuService, + readonly opModalService:OpModalService, + readonly authorisationService:AuthorisationService, + readonly wpInlineCreate:WorkPackageInlineCreateService, + readonly boardList:BoardListComponent, + readonly injector:Injector, + readonly querySpace:IsolatedQuerySpace, + readonly cdRef:ChangeDetectorRef, + readonly I18n:I18nService) { + + super(elementRef, opContextMenu); + } + + protected open(evt:JQueryEventObject) { + this.items = this.buildItems(); + this.opContextMenu.show(this, evt); + } + + /** + * Positioning args for jquery-ui position. + * + * @param {Event} openerEvent + */ + public positionArgs(evt:JQueryEventObject) { + let additionalPositionArgs = { + my: 'right top', + at: 'right bottom' + }; + + let position = super.positionArgs(evt); + _.assign(position, additionalPositionArgs); + + return position; + } + + private buildItems() { + return [ + { + disabled: !this.boardList.canDelete, + linkText: this.I18n.t('js.boards.lists.delete'), + onClick: () => { + this.boardList.deleteList(); + return true; + } + } + ]; + } +} diff --git a/frontend/src/app/modules/boards/board/board-list/board-list.component.html b/frontend/src/app/modules/boards/board/board-list/board-list.component.html index 6cf8db531c..88544600b7 100644 --- a/frontend/src/app/modules/boards/board/board-list/board-list.component.html +++ b/frontend/src/app/modules/boards/board/board-list/board-list.component.html @@ -18,12 +18,10 @@ class="-small"> -
- - - +
+ + +
diff --git a/frontend/src/app/modules/boards/board/board-list/board-list.component.sass b/frontend/src/app/modules/boards/board/board-list/board-list.component.sass index 0ddb2c8924..9d69de09bd 100644 --- a/frontend/src/app/modules/boards/board/board-list/board-list.component.sass +++ b/frontend/src/app/modules/boards/board/board-list/board-list.component.sass @@ -10,12 +10,16 @@ .board-list--container height: 100% + &:hover + .board-list--delete-icon + visibility: visible + .board-list--action-bar width: 100% height: 5px .board-list--header - padding: 5px 10px 5px 15px + padding: 5px 15px display: flex align-items: center @@ -37,3 +41,10 @@ &:hover background-color: #eeeeee50 + +.board-list--menu + visibility: hidden + @include without-link-styling + + a, a:hover + color: var(--light-gray) diff --git a/frontend/src/app/modules/boards/board/board-list/board-list.component.ts b/frontend/src/app/modules/boards/board/board-list/board-list.component.ts index 4fb03292b8..f34e62a071 100644 --- a/frontend/src/app/modules/boards/board/board-list/board-list.component.ts +++ b/frontend/src/app/modules/boards/board/board-list/board-list.component.ts @@ -189,7 +189,9 @@ export class BoardListComponent extends AbstractWidgetComponent implements OnIni this.cardView.addNewCard(); } - public deleteList(query:QueryResource) { + public deleteList(query?:QueryResource) { + query = query ? query : this.query; + if (!window.confirm(this.text.areYouSure)) { return; } diff --git a/frontend/src/app/modules/boards/board/board.component.sass b/frontend/src/app/modules/boards/board/board.component.sass index ed937b52ac..f911af479c 100644 --- a/frontend/src/app/modules/boards/board/board.component.sass +++ b/frontend/src/app/modules/boards/board/board.component.sass @@ -19,15 +19,12 @@ .boards-list--item flex: 0 0 300px max-width: 300px - margin-left: 1rem position: relative - &:first-child - margin-left: 0 - .board--header-container display: flex align-items: flex-start + margin-bottom: 0 .boards-list-item-handle position: absolute @@ -43,7 +40,7 @@ &:before padding: 0 - color: #888 + color: var(--light-gray) .boards-list--item:hover & opacity: 1 diff --git a/frontend/src/app/modules/boards/openproject-boards.module.ts b/frontend/src/app/modules/boards/openproject-boards.module.ts index d0063ef6eb..9b3410f94b 100644 --- a/frontend/src/app/modules/boards/openproject-boards.module.ts +++ b/frontend/src/app/modules/boards/openproject-boards.module.ts @@ -51,6 +51,7 @@ import {BoardHighlightingTabComponent} from "core-app/modules/boards/board/confi import {AddCardDropdownMenuDirective} from "core-app/modules/boards/board/add-card-dropdown/add-card-dropdown-menu.directive"; import {BoardFilterComponent} from "core-app/modules/boards/board/board-filter/board-filter.component"; import {DragScrollModule} from "cdk-drag-scroll"; +import {BoardListDropdownMenuDirective} from "core-app/modules/boards/board/board-list/board-list-dropdown.directive"; export const BOARDS_ROUTES:Ng2StateDeclaration[] = [ { @@ -148,6 +149,7 @@ export function registerBoardsModule(injector:Injector) { NewBoardModalComponent, AddListModalComponent, AddCardDropdownMenuDirective, + BoardListDropdownMenuDirective, BoardFilterComponent, ], entryComponents: [