From a08fba63be60dd011f4d1a639d4df8fbacb09d14 Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Sat, 5 Nov 2016 17:28:29 +0000 Subject: Added empty state svg and set up blank conditional Added new spec step Added empty state to dashboard Split empty and filtered empty states Moved empty_state icons into their own folder and DRY up empty state html Fixed failing spec Added to groups page Review changes --- app/assets/stylesheets/framework/blocks.scss | 29 ++++++++++++++++++ app/helpers/groups_helper.rb | 4 +++ app/helpers/projects_helper.rb | 4 +++ app/views/groups/issues.html.haml | 39 +++++++++++++------------ app/views/projects/issues/_issues.html.haml | 3 +- app/views/projects/issues/index.html.haml | 24 +++------------ app/views/shared/_issues.html.haml | 2 +- app/views/shared/empty_states/_issues.html.haml | 22 ++++++++++++++ app/views/shared/empty_states/icons/_issues.svg | 1 + 9 files changed, 87 insertions(+), 41 deletions(-) create mode 100644 app/views/shared/empty_states/_issues.html.haml create mode 100644 app/views/shared/empty_states/icons/_issues.svg (limited to 'app') diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 7e168092522..77ae9e9a6e7 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -254,3 +254,32 @@ .content-block-small { padding: 10px 0; } + +.empty-state { + margin: 100px 0 0; + + .text-content { + max-width: 460px; + margin: 0 auto; + padding: $gl-padding; + } + + .svg-content { + text-align: center; + + svg { + max-width: 425px; + width: 100%; + padding: $gl-padding; + } + } + + @media(max-width: $screen-xs-max) { + margin-top: 50px; + text-align: center; + + .btn { + width: 100%; + } + } +} diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb index ab880ed6de0..75cd9eece5c 100644 --- a/app/helpers/groups_helper.rb +++ b/app/helpers/groups_helper.rb @@ -48,4 +48,8 @@ module GroupsHelper "#{status.humanize} #{projects_lfs_status(group)}" end end + + def group_issues(group) + IssuesFinder.new(current_user, group_id: group.id).execute + end end diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 42c00ec3cd5..c7610c2e817 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -458,4 +458,8 @@ module ProjectsHelper def project_child_container_class(view_path) view_path == "projects/issues/issues" ? "prepend-top-default" : "project-show-#{view_path}" end + + def project_issues(project) + IssuesFinder.new(current_user, project_id: project.id).execute + end end diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml index dc6c1bb69de..324a116a50e 100644 --- a/app/views/groups/issues.html.haml +++ b/app/views/groups/issues.html.haml @@ -3,24 +3,27 @@ - if current_user = auto_discovery_link_tag(:atom, url_for(params.merge(format: :atom, private_token: current_user.private_token)), title: "#{@group.name} issues") -.top-area - = render 'shared/issuable/nav', type: :issues - .nav-controls - - if current_user - = link_to url_for(params.merge(format: :atom, private_token: current_user.private_token)), class: 'btn' do - = icon('rss') - %span.icon-label - Subscribe - = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue" +- if group_issues(@group).exists? + .top-area + = render 'shared/issuable/nav', type: :issues + .nav-controls + - if current_user + = link_to url_for(params.merge(format: :atom, private_token: current_user.private_token)), class: 'btn' do + = icon('rss') + %span.icon-label + Subscribe + = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue" -= render 'shared/issuable/filter', type: :issues + = render 'shared/issuable/filter', type: :issues -.row-content-block.second-block - Only issues from - %strong #{@group.name} - group are listed here. - - if current_user - To see all issues you should visit #{link_to 'dashboard', issues_dashboard_path} page. + .row-content-block.second-block + Only issues from the + %strong #{@group.name} + group are listed here. + - if current_user + To see all issues you should visit #{link_to 'dashboard', issues_dashboard_path} page. -.prepend-top-default - = render 'shared/issues' + .prepend-top-default + = render 'shared/issues' +- else + = render 'shared/empty_states/issues', project_select_button: true diff --git a/app/views/projects/issues/_issues.html.haml b/app/views/projects/issues/_issues.html.haml index a4b752ad86d..34d5a3e1831 100644 --- a/app/views/projects/issues/_issues.html.haml +++ b/app/views/projects/issues/_issues.html.haml @@ -1,8 +1,7 @@ %ul.content-list.issues-list.issuable-list = render partial: "projects/issues/issue", collection: @issues - if @issues.blank? - %li - .nothing-here-block No issues to show + = render 'shared/empty_states/issues' - if @issues.present? = paginate @issues, theme: "gitlab" diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml index c493ff3585b..26f3f0ac292 100644 --- a/app/views/projects/issues/index.html.haml +++ b/app/views/projects/issues/index.html.haml @@ -10,8 +10,8 @@ - if current_user = auto_discovery_link_tag(:atom, url_for(params.merge(format: :atom, private_token: current_user.private_token)), title: "#{@project.name} issues") -%div{ class: (container_class) } - - if @project.issues.any? +- if project_issues(@project).exists? + %div{ class: (container_class) } .top-area = render 'shared/issuable/nav', type: :issues .nav-controls @@ -36,21 +36,5 @@ = render 'issues' - if new_issue_email = render 'issue_by_email', email: new_issue_email - - else - .blank-state.blank-state-welcome - %h2.blank-state-title.blank-state-welcome-title - Welcome to GitLab Issues - %p.blank-state-text - Code, test, and deploy together - .blank-state - .blank-state-icon - = custom_icon("issues", size: 50) - %h3.blank-state-title - You don't have any issues right now. - %p.blank-state-text - Issues are the best way to track your project progress - - if can? current_user, :create_issue, @project - = link_to new_namespace_project_issue_path(@project.namespace, @project), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do - New Issue - - if new_issue_email - = render 'issue_by_email', email: new_issue_email +- else + = render 'shared/empty_states/issues', button_path: new_namespace_project_issue_path(@project.namespace, @project) diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml index a5df502d7b5..baa6d5f8206 100644 --- a/app/views/shared/_issues.html.haml +++ b/app/views/shared/_issues.html.haml @@ -13,4 +13,4 @@ = render 'projects/issues/issue', issue: issue = paginate @issues, theme: "gitlab" - else - .nothing-here-block No issues to show + = render 'shared/empty_states/issues' diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml new file mode 100644 index 00000000000..e939278bc07 --- /dev/null +++ b/app/views/shared/empty_states/_issues.html.haml @@ -0,0 +1,22 @@ +- button_path = local_assigns.fetch(:button_path, false) +- project_select_button = local_assigns.fetch(:project_select_button, false) +- has_button = button_path || project_select_button + +.row.empty-state + .pull-right.col-xs-12{ class: "#{'col-sm-6' if has_button}" } + .svg-content + = render 'shared/empty_states/icons/issues.svg' + .col-xs-12{ class: "#{'col-sm-6' if has_button}" } + .text-content + - if has_button + %h4 + The Issue Tracker is a good place to add things that need to be improved or solved in a project! + %p + An issue can be a bug, a todo or a feature request that needs to be discussed in a project. + Besides, issues are searchable and filterable. + - if project_select_button + = render 'shared/new_project_item_select', path: 'issues/new', label: 'New issue' + - else + = link_to 'New issue', button_path, class: 'btn btn-new', title: 'New issue', id: 'new_issue_link' + - else + %h4.text-center There are no issues to show. diff --git a/app/views/shared/empty_states/icons/_issues.svg b/app/views/shared/empty_states/icons/_issues.svg new file mode 100644 index 00000000000..2e92bf19579 --- /dev/null +++ b/app/views/shared/empty_states/icons/_issues.svg @@ -0,0 +1 @@ + -- cgit v1.2.1