summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/boards/boards_bundle.js.es62
-rw-r--r--app/assets/javascripts/boards/components/board.js.es618
-rw-r--r--app/assets/javascripts/boards/components/board_list.js.es616
-rw-r--r--app/assets/javascripts/boards/mixins/sortable_default_options.js.es65
-rw-r--r--app/assets/stylesheets/pages/boards.scss29
-rw-r--r--app/views/projects/boards/components/_board.html.haml1
-rw-r--r--app/views/projects/boards/components/_card.html.haml1
7 files changed, 34 insertions, 38 deletions
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 2c65d4427be..a612cf0f1ae 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -38,7 +38,7 @@ $(() => {
ready () {
Store.disabled = this.disabled;
gl.boardService.all()
- .then((resp) => {
+ .then((resp) => {
resp.json().forEach((board) => {
const list = Store.addList(board);
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index 5ef6a1b2277..0bf7d632be3 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -72,11 +72,21 @@
}
});
- if (bp.getBreakpointSize() === 'xs') {
- options.handle = '.js-board-drag-handle';
- }
-
this.sortable = Sortable.create(this.$el.parentNode, options);
+
+ // if (gl.issueBoards.touchEnabled) {
+ // this.$on('scroll', () => {
+ // if (!startedDragging) {
+ // this.sortable.option("disabled", true);
+ // }
+ // this.$broadcast('scroll');
+ // });
+ //
+ // this.$on('scrollend', () => {
+ // this.sortable.option("disabled", false);
+ // this.$broadcast('scrollend');
+ // });
+ // }
},
beforeDestroy () {
Store.state.lists.$remove(this.list);
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index dceacb25452..f735ef10f9f 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -74,10 +74,6 @@
}
});
- if (bp.getBreakpointSize() === 'xs') {
- options.handle = '.js-card-drag-handle';
- }
-
this.sortable = Sortable.create(this.$els.list, options);
// Scroll event on list to load more
@@ -86,6 +82,18 @@
this.loadNextPage();
}
};
+
+ // if (gl.issueBoards.touchEnabled) {
+ // this.$on('scroll', () => {
+ // if (!startedDragging) {
+ // this.sortable.option("disabled", true);
+ // }
+ // });
+ //
+ // this.$on('scrollend', () => {
+ // this.sortable.option("disabled", false);
+ // });
+ // }
}
});
})();
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
index 8e8d13ede5a..44addb3ea98 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
@@ -13,6 +13,8 @@
document.body.classList.remove('is-dragging');
};
+ gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
+
gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
let defaultSortOptions = {
forceFallback: true,
@@ -20,7 +22,8 @@
fallbackOnBody: true,
ghostClass: 'is-ghost',
filter: '.has-tooltip',
- scrollSensitivity: 100,
+ delay: gl.issueBoards.touchEnabled ? 100 : 0,
+ scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
scrollSpeed: 20,
onStart: gl.issueBoards.onStart,
onEnd: gl.issueBoards.onEnd
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 2d1cb547f95..38f7a08fec2 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -105,8 +105,8 @@
.board {
display: -webkit-flex;
display: flex;
- min-width: calc(100vw - 15px);
- max-width: calc(100vw - 15px);
+ min-width: calc(85vw - 15px);
+ max-width: calc(85vw - 15px);
margin-bottom: 25px;
padding-right: ($gl-padding / 2);
padding-left: ($gl-padding / 2);
@@ -158,14 +158,6 @@
padding: $gl-padding;
font-size: 1em;
border-bottom: 1px solid $border-color;
-
- .board-mobile-handle {
- position: relative;
- left: 0;
- top: 1px;
- margin-top: 0;
- margin-right: 5px;
- }
}
.board-search-container {
@@ -268,11 +260,7 @@
list-style: none;
&.user-can-drag {
- padding-left: ($gl-padding * 2);
-
- @media (min-width: $screen-sm-min) {
- padding-left: $gl-padding;
- }
+ padding-left: $gl-padding;
}
&:not(:last-child) {
@@ -293,17 +281,6 @@
}
}
-.board-mobile-handle {
- position: absolute;
- left: 10px;
- top: 50%;
- margin-top: (-15px / 2);
-
- @media (min-width: $screen-sm-min) {
- display: none;
- }
-}
-
.card-title {
margin: 0;
font-size: 1em;
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index f8ebf397ee2..de53a298f84 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -11,7 +11,6 @@
.board-inner
%header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
%h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" }
- = icon("align-justify", class: "board-mobile-handle js-board-drag-handle", "v-if" => "(!disabled && !list.preset)")
{{ list.title }}
%span.pull-right{ "v-if" => "list.type !== 'blank'" }
{{ list.issues.length }}
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index b20c23f6b8e..e8b60b54d80 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -9,7 +9,6 @@
"track-by" => "id" }
%li.card{ ":class" => "{ 'user-can-drag': !disabled }",
":index" => "index" }
- = icon("align-justify", class: "board-mobile-handle js-card-drag-handle", "v-if" => "!disabled")
%h4.card-title
= icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
%a{ ":href" => "issueLinkBase + '/' + issue.id",