Added blank state to issues

5 files changed, 62 insertions, 31 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 40b5171a8c6..3e0ee4d66bd 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -1,3 +1,19 @@
+.blank-state-welcome {
+  text-align: center;
+  border-bottom: 1px solid $border-color;
+
+  .blank-state-text {
+    margin-bottom: 0;
+  }
+}
+
+.blank-state-welcome-title {
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-size: 24px;
+  font-weight: normal;
+}
+
 .blank-state {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -6,7 +22,15 @@
 
 .blank-state-no-icon {
   padding-top: 40px;
-  padding-bottom: 40px;  
+  padding-bottom: 40px;
+}
+
+.blank-state-icon {
+  padding-bottom: 20px;
+
+  path {
+    fill: #ccc;
+  }
 }
 
 .blank-state-title {
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index f240584ccbf..950f323e383 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -31,7 +31,7 @@ module AppearancesHelper
     end
   end
 
-  def navbar_icon(icon_name)
-    render "shared/icons/#{icon_name}.svg"
+  def navbar_icon(icon_name, size: 16)
+    render "shared/icons/#{icon_name}.svg", size: size
   end
 end
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 7ce4c1e5555..5f06431ffec 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -6,21 +6,37 @@
   - if current_user
     = auto_discovery_link_tag(:atom, namespace_project_issues_url(@project.namespace, @project, :atom, private_token: current_user.private_token), title: "#{@project.name} issues")
 
-%div{ class: container_class }
-  .top-area
-    = render 'shared/issuable/nav', type: :issues
-    .nav-controls
-      - if current_user
-        = link_to namespace_project_issues_path(@project.namespace, @project, :atom, { private_token: current_user.private_token }), class: 'btn append-right-10' do
-          = icon('rss')
-          %span.icon-label
-            Subscribe
-      = render 'shared/issuable/search_form', path: namespace_project_issues_path(@project.namespace, @project)
+%div{ class: (container_class) }
+  - if @project.issues.nil?
+    .top-area
+      = render 'shared/issuable/nav', type: :issues
+      .nav-controls
+        - if current_user
+          = link_to namespace_project_issues_path(@project.namespace, @project, :atom, { private_token: current_user.private_token }), class: 'btn append-right-10' do
+            = icon('rss')
+            %span.icon-label
+              Subscribe
+        = render 'shared/issuable/search_form', path: namespace_project_issues_path(@project.namespace, @project)
+        - if can? current_user, :create_issue, @project
+          = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { assignee_id: @issuable_finder.assignee.try(:id), milestone_id: @issuable_finder.milestones.try(:first).try(:id) }), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do
+            New Issue
+    = render 'shared/issuable/filter', type: :issues
+
+    .issues-holder
+      = render "issues"
+  - else
+    .blank-state.blank-state-welcome
+      %h2.blank-state-welcome-title
+        Welcome to GitLab Issues
+      %p.blank-state-text
+        Code, test, and deploy together
+    .blank-state
+      .blank-state-icon
+        = navbar_icon("issues", size: 50)
+      %h3.blank-state-title
+        You don't have any issues right now.
+      %p.blank-state-text
+        Issues is the best way to track you project progress
       - if can? current_user, :create_issue, @project
         = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { assignee_id: @issuable_finder.assignee.try(:id), milestone_id: @issuable_finder.milestones.try(:first).try(:id) }), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do
           New Issue
-
-  = render 'shared/issuable/filter', type: :issues
-
-  .issues-holder
-    = render "issues"
diff --git a/app/views/shared/icons/_issues.svg b/app/views/shared/icons/_issues.svg
deleted file mode 100644
index 2682c27ade9..00000000000
--- a/app/views/shared/icons/_issues.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
-    <title>Group</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group" fill="#7E7C7C">
-            <path d="M8,0 C3.581,0 0,3.581 0,8 C0,12.419 3.581,16 8,16 C12.419,16 16,12.419 16,8 C16,3.581 12.419,0 8,0 M8,2 C11.308,2 14,4.692 14,8 C14,11.308 11.308,14 8,14 C4.692,14 2,11.308 2,8 C2,4.692 4.692,2 8,2" id="Fill-1"></path>
-            <path d="M7.1597,4 L8.8887,4 L8.8887,8 L7.1107,8 L7.1597,4 Z M7.1597,9.6667 L8.8887,9.6667 L8.8887,11.4447 L7.1107,11.4447 L7.1597,9.6667 Z" id="Combined-Shape"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/app/views/shared/icons/_issues.svg.erb b/app/views/shared/icons/_issues.svg.erb
new file mode 100644
index 00000000000..fa8655b5609
--- /dev/null
+++ b/app/views/shared/icons/_issues.svg.erb
@@ -0,0 +1,4 @@
+<svg width="<%= size %>" height="<%= size %>" viewBox="0 0 16 16" class="gitlab-icon">
+  <path fill="#7E7C7C" d="M8,0 C3.581,0 0,3.581 0,8 C0,12.419 3.581,16 8,16 C12.419,16 16,12.419 16,8 C16,3.581 12.419,0 8,0 M8,2 C11.308,2 14,4.692 14,8 C14,11.308 11.308,14 8,14 C4.692,14 2,11.308 2,8 C2,4.692 4.692,2 8,2"></path>
+  <path fill="#7E7C7C" d="M7.1597,4 L8.8887,4 L8.8887,8 L7.1107,8 L7.1597,4 Z M7.1597,9.6667 L8.8887,9.6667 L8.8887,11.4447 L7.1107,11.4447 L7.1597,9.6667 Z"></path>
+</svg>