Merge pull request #7625 from opf/styling/30910/drag-and-drop

[30910] Improve styling of drag&drop in table
pull/7616/head
ulferts 5 years ago committed by GitHub
commit f6aad25be3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      app/assets/stylesheets/content/_work_packages.sass
  2. 12
      app/assets/stylesheets/content/work_packages/_table_content.sass
  3. 30
      app/assets/stylesheets/content/work_packages/_table_drag_and_drop.sass
  4. 2
      app/assets/stylesheets/vendor/_dragula.sass
  5. 1
      frontend/src/app/modules/common/drag-and-drop/drag-and-drop.service.ts

@ -31,6 +31,7 @@
@import work_packages/table_hierarchy
@import work_packages/table_relations
@import work_packages/table_inline_create
@import work_packages/table_drag_and_drop
// WP creation styles
@import work_packages/new/type_status_row

@ -100,18 +100,6 @@ html:not(.-browser-mobile)
// Override the default td line-height
line-height: initial !important
.wp-table-context-menu-icon,
.wp-table--drag-and-drop-handle
// Hide from viewers, but allow to be focused
opacity: 0
.issue:hover .wp-table-context-menu-icon,
.issue:hover .wp-table--drag-and-drop-handle,
.wp-table--context-menu-td:focus,
.wp-table-context-menu-icon:focus
// Hide by default
opacity: 100
// Show context menu button when hovering
.wp-table--context-menu-td a
vertical-align: -3px

@ -0,0 +1,30 @@
//
// Drag & Drop styles for the table
//
.wp--row.gu-mirror
border: 1px solid $table-row-border-color
background: #E5F2FA !important
// Align the items correctly since
// we're no longer in a table context
display: flex
align-items: center
// Hide the context menu button outside mobile
html:not(.-browser-mobile)
.wp-table-context-menu-icon,
.wp-table--drag-and-drop-handle
// Hide from viewers, but allow to be focused
opacity: 0
display: inline-block
height: calc(#{$table-timeline--row-height} - 1px)
line-height: calc(#{$table-timeline--row-height} - 1px)
.issue:hover .wp-table-context-menu-icon,
.issue:hover .wp-table--drag-and-drop-handle,
.wp-table--context-menu-td:focus,
.wp-table-context-menu-icon:focus
// Hide by default
opacity: 100

@ -2,7 +2,7 @@
position: fixed !important
margin: 0 !important
z-index: 9999 !important
opacity: 0.8
opacity: 0.95
.gu-hide
display: none !important

@ -2,6 +2,7 @@ import {Inject, Injectable, Injector, OnDestroy} from "@angular/core";
import {DOCUMENT} from "@angular/common";
import {DomAutoscrollService} from "core-app/modules/common/drag-and-drop/dom-autoscroll.service";
import {DragAndDropHelpers} from "core-app/modules/common/drag-and-drop/drag-and-drop.helpers";
import DropEvent = JQuery.DropEvent;
export interface DragMember {
dragContainer:HTMLElement;

Loading…
Cancel
Save