Commit d506b3f9 authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'improve-groups-list' into 'master'

Improve UI consistency between projects and groups lists

* add group description to the list
* move new group button to top nav
* move projects/users count icons to the right

Fixes #3939 
Signed-off-by: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

See merge request !2677
parents 259c0d02 754538b9
...@@ -26,6 +26,7 @@ v 8.5.0 (unreleased) ...@@ -26,6 +26,7 @@ v 8.5.0 (unreleased)
- Deprecate API "merge_request/:merge_request_id/...". Use "merge_requests/:merge_request_id/..." instead - Deprecate API "merge_request/:merge_request_id/...". Use "merge_requests/:merge_request_id/..." instead
- Mark inline difference between old and new paths when a file is renamed - Mark inline difference between old and new paths when a file is renamed
- Support Akismet spam checking for creation of issues via API (Stan Hu) - Support Akismet spam checking for creation of issues via API (Stan Hu)
- Improve UI consistency between projects and groups lists
v 8.4.3 v 8.4.3
- Increase lfs_objects size column to 8-byte integer to allow files larger - Increase lfs_objects size column to 8-byte integer to allow files larger
......
...@@ -82,8 +82,7 @@ ...@@ -82,8 +82,7 @@
&.btn-success, &.btn-success,
&.btn-new, &.btn-new,
&.btn-create, &.btn-create,
&.btn-save, &.btn-save {
&.btn-green {
@include btn-green; @include btn-green;
} }
...@@ -159,7 +158,6 @@ ...@@ -159,7 +158,6 @@
.input-group-btn { .input-group-btn {
.btn { .btn {
@include btn-gray;
@include btn-middle; @include btn-middle;
&:hover { &:hover {
...@@ -186,8 +184,4 @@ ...@@ -186,8 +184,4 @@
border: 1px solid #c6cacf !important; border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important; background-color: #e4e7ed !important;
} }
.btn-green {
@include btn-green
}
} }
...@@ -37,3 +37,89 @@ ...@@ -37,3 +37,89 @@
} }
} }
} }
.top-area {
@include clearfix;
border-bottom: 1px solid #EEE;
.nav-text {
padding-top: 16px;
padding-bottom: 11px;
display: inline-block;
width: 50%;
line-height: 28px;
/* Small devices (phones, tablets, 768px and lower) */
@media (max-width: $screen-sm-min) {
width: 100%;
}
}
.nav-links {
display: inline-block;
width: 50%;
margin-bottom: 0px;
border-bottom: none;
/* Small devices (phones, tablets, 768px and lower) */
@media (max-width: $screen-sm-min) {
width: 100%;
}
}
.nav-controls {
width: 50%;
display: inline-block;
float: right;
text-align: right;
padding: 11px 0;
margin-bottom: 0px;
> .dropdown {
margin-right: 10px;
display: inline-block;
}
> .btn {
display: inline-block;
}
input {
height: 34px;
display: inline-block;
position: relative;
top: 1px;
margin-right: 10px;
/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { width: 200px; }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { width: 250px; }
&.input-short {
/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { width: 170px; }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { width: 210px; }
}
}
/* Hide on extra small devices (phones) */
@media (max-width: $screen-xs-max) {
display: none;
}
/* Small devices (tablets, 768px and lower) */
@media (max-width: $screen-sm-max) {
width: 100%;
text-align: left;
input {
width: 300px;
}
}
}
}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
input[type='search'] { input[type='search'] {
width: 225px; width: 225px;
vertical-align: bottom; vertical-align: bottom;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
width: 100px; width: 100px;
vertical-align: bottom; vertical-align: bottom;
...@@ -21,3 +21,21 @@ ...@@ -21,3 +21,21 @@
height: 42px; height: 42px;
} }
} }
.group-row {
&.no-description {
.group-name {
line-height: 44px;
}
}
.stats {
float: right;
line-height: 44px;
color: $gl-gray;
span {
margin-right: 15px;
}
}
}
...@@ -281,36 +281,6 @@ ...@@ -281,36 +281,6 @@
margin-top: -1px; margin-top: -1px;
} }
.top-area {
border-bottom: 1px solid #EEE;
ul.nav-links {
display: inline-block;
width: 50%;
margin-bottom: 0px;
border-bottom: none;
}
.projects-search-form {
width: 50%;
display: inline-block;
float: right;
padding-top: 11px;
text-align: right;
.btn-green {
margin-left: 10px;
float: right;
}
}
@media (max-width: $screen-xs-max) {
.projects-search-form {
padding-top: 15px;
}
}
}
.fork-namespaces { .fork-namespaces {
.fork-thumbnail { .fork-thumbnail {
text-align: center; text-align: center;
...@@ -386,22 +356,6 @@ pre.light-well { ...@@ -386,22 +356,6 @@ pre.light-well {
border-color: #f1f1f1; border-color: #f1f1f1;
} }
.projects-search-form {
padding: $gl-padding 0;
padding-bottom: 0;
margin-bottom: 0px;
input {
display: inline-block;
width: calc(100% - 151px);
}
.btn {
display: inline-block;
width: 135px;
}
}
.git-empty { .git-empty {
margin: 0 7px 0 7px; margin: 0 7px 0 7px;
...@@ -559,52 +513,12 @@ pre.light-well { ...@@ -559,52 +513,12 @@ pre.light-well {
} }
} }
.cannot-be-merged, .cannot-be-merged,
.cannot-be-merged:hover { .cannot-be-merged:hover {
color: #E62958; color: #E62958;
margin-top: 2px; margin-top: 2px;
} }
/*
* Forks list rendered on Project's forks page
*/
.forks-top-block {
padding: 16px 0;
}
.projects-search-form {
.dropdown-toggle.btn {
margin-top: -3px;
}
&.fork-search-form {
margin: 0;
margin-top: -$gl-padding;
padding-bottom: 0;
input {
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { width: 180px; }
/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { width: 350px; }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { width: 400px; }
}
.sort-forks {
width: 160px;
}
.fork-link {
float: right;
margin-left: $gl-padding;
}
}
}
.private-forks-notice .private-fork-icon { .private-forks-notice .private-fork-icon {
i:nth-child(1) { i:nth-child(1) {
color: #2AA056; color: #2AA056;
......
%ul.nav-links .top-area
= nav_link(page: dashboard_groups_path) do %ul.nav-links
= link_to dashboard_groups_path, title: 'Your groups', data: {placement: 'right'} do = nav_link(page: dashboard_groups_path) do
Your Groups = link_to dashboard_groups_path, title: 'Your groups' do
= nav_link(page: explore_groups_path) do Your Groups
= link_to explore_groups_path, title: 'Explore groups', data: {placement: 'bottom'} do = nav_link(page: explore_groups_path) do
Explore Groups = link_to explore_groups_path, title: 'Explore groups' do
Explore Groups
- if current_user.can_create_group?
.nav-controls
= link_to new_group_path, class: "btn btn-new" do
= icon('plus')
New Group
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
= nav_link(page: starred_dashboard_projects_path) do = nav_link(page: starred_dashboard_projects_path) do
= link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do
Starred Projects Starred Projects
= nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path], html_options: { class: 'hidden-xs' }) do = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
= link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do
Explore Projects Explore Projects
.projects-search-form .nav-controls
= search_field_tag :filter_projects, nil, placeholder: 'Filter by name...', class: 'projects-list-filter form-control hidden-xs', spellcheck: false = search_field_tag :filter_projects, nil, placeholder: 'Filter by name...', class: 'projects-list-filter form-control hidden-xs', spellcheck: false
- if current_user.can_create_project? - if current_user.can_create_project?
= link_to new_project_path, class: 'btn btn-green' do = link_to new_project_path, class: 'btn btn-new' do
%i.fa.fa-plus = icon('plus')
New Project New Project
...@@ -2,15 +2,6 @@ ...@@ -2,15 +2,6 @@
- header_title "Groups", dashboard_groups_path - header_title "Groups", dashboard_groups_path
= render 'dashboard/groups_head' = render 'dashboard/groups_head'
.gray-content-block
- if current_user.can_create_group?
%span.pull-right.hidden-xs
= link_to new_group_path, class: "btn btn-new" do
%i.fa.fa-plus
New Group
.oneline
Group members have access to all group projects.
%ul.content-list %ul.content-list
- @group_members.each do |group_member| - @group_members.each do |group_member|
- group = group_member.group - group = group_member.group
......
.projects-list-holder .projects-list-holder.prepend-top-default
.projects-search-form .input-group
.input-group = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false
= search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false - if can? current_user, :create_projects, @group
- if can? current_user, :create_projects, @group %span.input-group-btn
%span.input-group-btn = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-new' do
= link_to new_project_path(namespace_id: @group.id), class: 'btn btn-green' do = icon('plus')
%i.fa.fa-plus New Project
New Project
= render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false, skip_namespace: true = render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false, skip_namespace: true
.gray-content-block.top-block.clearfix.white.forks-top-block .top-area
.pull-left .nav-text
- public_count = @public_forks.size - public_count = @public_forks.size
- protected_count = @protected_forks.size - protected_count = @protected_forks.size
- full_count_title = "#{public_count} public and #{protected_count} private" - full_count_title = "#{public_count} public and #{protected_count} private"
== #{pluralize(@all_forks.size, 'fork')}: #{full_count_title} == #{pluralize(@all_forks.size, 'fork')}: #{full_count_title}
.pull-right .nav-controls
.projects-search-form.fork-search-form = search_field_tag :filter_projects, nil, placeholder: 'Search forks', class: 'projects-list-filter form-control input-short',
= search_field_tag :filter_projects, nil, placeholder: 'Search forks', class: 'projects-list-filter form-control', spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
.dropdown.inline.prepend-left-10 .dropdown
%button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'} %button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'}
%span.light sort: %span.light sort:
- if @sort.present? - if @sort.present?
= sort_options_hash[@sort] = sort_options_hash[@sort]
- else - else
= sort_title_recently_created
%b.caret
%ul.dropdown-menu.dropdown-menu-align-right
%li
- excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
= link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do
= sort_title_recently_created = sort_title_recently_created
%b.caret = link_to page_filter_path(sort: sort_value_oldest_created, without: excluded_filters) do
%ul.dropdown-menu.dropdown-menu-align-right = sort_title_oldest_created
%li = link_to page_filter_path(sort: sort_value_recently_updated, without: excluded_filters) do
- excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id] = sort_title_recently_updated
= link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do = link_to page_filter_path(sort: sort_value_oldest_updated, without: excluded_filters) do
= sort_title_recently_created = sort_title_oldest_updated
= link_to page_filter_path(sort: sort_value_oldest_created, without: excluded_filters) do
= sort_title_oldest_created
= link_to page_filter_path(sort: sort_value_recently_updated, without: excluded_filters) do
= sort_title_recently_updated
= link_to page_filter_path(sort: sort_value_oldest_updated, without: excluded_filters) do
= sort_title_oldest_updated
.fork-link.inline - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
- if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2 = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'btn btn-new' do
= link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'pull-right btn btn-new' do = icon('code-fork fw')
= icon('code-fork fw') Fork
Fork - else
- else = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn btn-new' do
= link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'pull-right btn btn-new' do = icon('code-fork fw')
= icon('code-fork fw') Fork
Fork
.projects-list-holder .projects-list-holder
......
- group_member = local_assigns[:group_member] - group_member = local_assigns[:group_member]
%li - css_class = '' unless local_assigns[:css_class]
- css_class += " no-description" if group.description.blank?
%li.group-row{ class: css_class }
- if group_member - if group_member
.controls.hidden-xs .controls.hidden-xs
- if can?(current_user, :admin_group, group) - if can?(current_user, :admin_group, group)
...@@ -9,6 +12,15 @@ ...@@ -9,6 +12,15 @@
= link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do = link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do
%i.fa.fa-sign-out %i.fa.fa-sign-out
.stats
%span
= icon('home')
= number_with_delimiter(group.projects.count)
%span
= icon('users')
= number_with_delimiter(group.users.count)
= image_tag group_icon(group), class: "avatar s46 hidden-xs" = image_tag group_icon(group), class: "avatar s46 hidden-xs"
= link_to group, class: 'group-name' do = link_to group, class: 'group-name' do
%span.item-title= group.name %span.item-title= group.name
...@@ -17,5 +29,6 @@ ...@@ -17,5 +29,6 @@
as as
%span #{group_member.human_access} %span #{group_member.human_access}
%div.light - if group.description.present?
#{pluralize(group.projects.count, "project")}, #{pluralize(group.users.count, "user")} .light
= markdown(group.description, pipeline: :description)
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment