Hide delete list functionality behind drop down

pull/7216/head
Henriette Dinger 6 years ago
parent 3d1546fbee
commit 4218266604
  1. 2
      config/locales/js-en.yml
  2. 2
      frontend/src/app/components/wp-card-view/wp-card-view.component.sass
  3. 116
      frontend/src/app/modules/boards/board/board-list/board-list-dropdown.directive.ts
  4. 10
      frontend/src/app/modules/boards/board/board-list/board-list.component.html
  5. 13
      frontend/src/app/modules/boards/board/board-list/board-list.component.sass
  6. 4
      frontend/src/app/modules/boards/board/board-list/board-list.component.ts
  7. 7
      frontend/src/app/modules/boards/board/board.component.sass
  8. 2
      frontend/src/app/modules/boards/openproject-boards.module.ts

@ -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'

@ -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

@ -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;
}
}
];
}
}

@ -18,12 +18,10 @@
class="-small">
</editable-toolbar-title>
<div class="board-list--delete-icon">
<accessible-by-keyboard *ngIf="canDelete"
linkClass="button -narrow -no-decoration"
(execute)="deleteList(query)">
<op-icon icon-classes="icon-small icon-delete"></op-icon>
</accessible-by-keyboard>
<div class="board-list--menu">
<a boardListDropdown>
<op-icon icon-classes="icon-show-more-horizontal"></op-icon>
</a>
</div>
</div>

@ -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)

@ -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;
}

@ -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

@ -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: [

Loading…
Cancel
Save