From 7c59f45d10a791e790f55821ca501d9cdeddbabf Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 4 Oct 2016 15:27:02 +0100
Subject: [PATCH] Added markup for sidebar
---
.../javascripts/boards/boards_bundle.js.es6 | 4 +-
.../boards/components/board_card.js.es6 | 4 ++
.../boards/components/board_sidebar.js.es6 | 25 ++++++++++++
.../boards/stores/boards_store.js.es6 | 4 +-
.../boards/components/_card.html.haml | 3 +-
.../boards/components/_sidebar.html.haml | 40 +++++++++++++++++++
app/views/projects/boards/show.html.haml | 10 +++--
7 files changed, 83 insertions(+), 7 deletions(-)
create mode 100644 app/assets/javascripts/boards/components/board_sidebar.js.es6
create mode 100644 app/views/projects/boards/components/_sidebar.html.haml
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 91c12570e09..b3a2386bbf3 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -6,6 +6,7 @@
//= require_tree ./services
//= require_tree ./mixins
//= require ./components/board
+//= require ./components/board_sidebar
//= require ./components/new_list_dropdown
//= require ./vue_resource_interceptor
@@ -22,7 +23,8 @@ $(() => {
gl.IssueBoardsApp = new Vue({
el: $boardApp,
components: {
- 'board': gl.issueBoards.Board
+ 'board': gl.issueBoards.Board,
+ 'board-sidebar': gl.issueBoards.BoardSidebar
},
data: {
state: Store.state,
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 4a7cfeaeab2..1bd0b19b6da 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -37,6 +37,10 @@
$('.labels-filter .dropdown-toggle-text').text(labelToggleText);
Store.updateFiltersUrl();
+ },
+ showIssue () {
+ Store.state.detailIssue = this.issue;
+ console.log(Store.state.detailIssue);
}
}
});
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
new file mode 100644
index 00000000000..e26c8209b69
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -0,0 +1,25 @@
+(() => {
+ const Store = gl.issueBoards.BoardsStore;
+
+ window.gl = window.gl || {};
+ window.gl.issueBoards = window.gl.issueBoards || {};
+
+ gl.issueBoards.BoardSidebar = Vue.extend({
+ data() {
+ return {
+ issue: Store.state.detailIssue
+ };
+ },
+ ready: function () {
+ console.log(this.issue);
+ },
+ watch: {
+ issue: {
+ handler () {
+ console.log('a');
+ },
+ deep: true
+ }
+ }
+ });
+})();
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index bd07ee0c161..126e3f49fc8 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -4,7 +4,9 @@
gl.issueBoards.BoardsStore = {
disabled: false,
- state: {},
+ state: {
+ detailIssue: {}
+ },
moving: {
issue: {},
list: {}
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index d8f16022407..71f64d7827c 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -8,7 +8,8 @@
":disabled" => "disabled",
"track-by" => "id" }
%li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id }",
- ":index" => "index" }
+ ":index" => "index",
+ "@click" => "showIssue" }
%h4.card-title
= icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
%a{ ":href" => "issueLinkBase + '/' + issue.id",
diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
new file mode 100644
index 00000000000..6cec833d6dc
--- /dev/null
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -0,0 +1,40 @@
+%board-sidebar{ "inline-template" => true }
+ %aside.right-sidebar.right-sidebar-expanded{ "v-if" => "showSidebar" }
+ .issuable-sidebar
+ .block.issuable-sidebar-header
+ %span.issuable-header-text.hide-collapsed.pull-left
+ %strong Test
+ %br/
+ %span #13
+ %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", aria: { label: "Toggle sidebar" } }
+ = icon("times")
+ .block.assignee
+ .title.hide-collapsed
+ Assignee
+ = icon("spinner spin", class: "block-loading")
+ = link_to "Edit", "#", class: "edit-link pull-right"
+ .value.hide-collapsed
+ %span.assign-yourself.no-value
+ No assignee
+ \-
+ %a.js-assign-yourself{ href: "#" }
+ assign yourself
+ .block.milestone
+ .title.hide-collapsed
+ Milestone
+ = icon("spinner spin", class: "block-loading")
+ .value.hide-collapsed
+ %span.no-value
+ None
+ .block.due_date
+ .title.hide-collapsed
+ Due date
+ = icon("spinner spin", class: "block-loading")
+ .value.hide-collapsed
+ %span.no-value No due date
+ .block.labels
+ .title.hide-collapsed
+ Labels
+ = icon("spinner spin", class: "block-loading")
+ .value.issuable-show-labels.hide-collapsed
+ %span.no-value None
diff --git a/app/views/projects/boards/show.html.haml b/app/views/projects/boards/show.html.haml
index edbbd3f3d2a..10b495363a6 100644
--- a/app/views/projects/boards/show.html.haml
+++ b/app/views/projects/boards/show.html.haml
@@ -10,10 +10,12 @@
= render 'shared/issuable/filter', type: :boards
-.boards-list#board-app{ "v-cloak" => true,
+#board-app{ "v-cloak" => true,
"data-endpoint" => "#{namespace_project_board_path(@project.namespace, @project)}",
"data-disabled" => "#{!can?(current_user, :admin_list, @project)}",
"data-issue-link-base" => "#{namespace_project_issues_path(@project.namespace, @project)}" }
- .boards-app-loading.text-center{ "v-if" => "loading" }
- = icon("spinner spin")
- = render "projects/boards/components/board"
+ .boards-list
+ .boards-app-loading.text-center{ "v-if" => "loading" }
+ = icon("spinner spin")
+ = render "projects/boards/components/board"
+ = render "projects/boards/components/sidebar"
--
GitLab