diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-06-10 00:07:47 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2016-06-10 00:07:47 +0300 |
commit | 5fcb0919220c7b2ebe73c8dbece38ecf3472ed5d (patch) | |
tree | 1ef501134b4f903e08af51cd7ada44e6adc18212 | |
parent | 600078cccf994ad6e4f9d5cd5192ac2b4da89856 (diff) | |
parent | cdcca06b143c85e48196993a29ee73f746463dc9 (diff) |
Merge branch 'dz-improve-ui-consistency-2' into 'master'
Improve ui consistency. Part 2
* Use responsive top-area on project branches and tags pages
* Use default button size in the content list controls
* Improve button margin for btn-grouped css class
For https://gitlab.com/gitlab-org/gitlab-ce/issues/18324
See merge request !4536
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 42 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/lists.scss | 12 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 4 | ||||
-rw-r--r-- | app/views/groups/group_members/_group_member.html.haml | 2 | ||||
-rw-r--r-- | app/views/projects/branches/index.html.haml | 43 | ||||
-rw-r--r-- | app/views/projects/builds/index.html.haml | 1 | ||||
-rw-r--r-- | app/views/projects/milestones/index.html.haml | 1 | ||||
-rw-r--r-- | app/views/projects/milestones/show.html.haml | 2 | ||||
-rw-r--r-- | app/views/projects/pipelines/index.html.haml | 2 | ||||
-rw-r--r-- | app/views/projects/project_members/_project_member.html.haml | 2 | ||||
-rw-r--r-- | app/views/projects/tags/_download.html.haml | 7 | ||||
-rw-r--r-- | app/views/projects/tags/_tag.html.haml | 4 | ||||
-rw-r--r-- | app/views/projects/tags/index.html.haml | 10 | ||||
-rw-r--r-- | app/views/projects/wikis/_main_links.html.haml | 6 | ||||
-rw-r--r-- | app/views/projects/wikis/_nav.html.haml | 1 | ||||
-rw-r--r-- | app/views/shared/groups/_group.html.haml | 6 | ||||
-rw-r--r-- | app/views/shared/milestones/_milestone.html.haml | 8 |
17 files changed, 71 insertions, 82 deletions
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 625200cbcad..1e3083cce55 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -79,6 +79,23 @@ @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active); } +@mixin btn-with-margin { + margin-left: $btn-side-margin; + float: left; + + &.inline { + float: none; + } + + &.btn-sm { + margin-left: $btn-sm-side-margin; + } + + &.btn-xs { + margin-left: $btn-xs-side-margin; + } +} + .btn { @include btn-default; @include btn-white; @@ -142,24 +159,7 @@ } &.btn-grouped { - margin-right: $btn-side-margin; - float: left; - - &.inline { - float: none; - } - - &:last-child { - margin-right: 0; - } - - &.btn-sm { - margin-right: $btn-sm-side-margin; - } - - &.btn-xs { - margin-right: $btn-xs-side-margin; - } + @include btn-with-margin; } &.disabled { @@ -203,11 +203,7 @@ .btn-group { &.btn-grouped { - margin-right: 7px; - float: left; - &:last-child { - margin-right: 0; - } + @include btn-with-margin; } } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 96e7aa4fb15..b34ec16cdba 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -137,8 +137,16 @@ ul.content-list { padding-top: 1px; float: right; - .btn { - padding: 10px 14px; + > .btn, + > .btn-group { + margin-right: $gl-padding-top; + display: inline-block; + margin-top: 4px; + margin-bottom: 4px; + + &:last-child { + margin-right: 0; + } } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 5de30d67b0a..99e3df119ed 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -80,8 +80,8 @@ $provider-btn-not-active-color: #4688f1; $link-underline-blue: #4a8bee; $layout-link-gray: #7e7c7c; $todo-alert-blue: #428bca; -$btn-side-margin: 7px; -$btn-sm-side-margin: 5px; +$btn-side-margin: 10px; +$btn-sm-side-margin: 7px; $btn-xs-side-margin: 5px; /* diff --git a/app/views/groups/group_members/_group_member.html.haml b/app/views/groups/group_members/_group_member.html.haml index 271700e6db4..6bb542e658d 100644 --- a/app/views/groups/group_members/_group_member.html.haml +++ b/app/views/groups/group_members/_group_member.html.haml @@ -34,7 +34,7 @@ %strong.member-access-level= member.human_access - if show_controls - if can?(current_user, :update_group_member, member) - = button_tag class: "btn-xs btn js-toggle-button", + = button_tag class: "btn-xs btn btn-grouped inline js-toggle-button", title: 'Edit access level', type: 'button' do = icon('pencil') diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml index 0d59c3884cd..e0367c40272 100644 --- a/app/views/projects/branches/index.html.haml +++ b/app/views/projects/branches/index.html.haml @@ -3,31 +3,30 @@ = render "projects/commits/head" %div{ class: (container_class) } - .row-content-block.second-block.content-component-block - .pull-right - - if can? current_user, :push_code, @project + .top-area + .nav-text + Protected branches can be managed in project settings + + - if can? current_user, :push_code, @project + .nav-controls = link_to new_namespace_project_branch_path(@project.namespace, @project), class: 'btn btn-create' do - = icon('plus') New branch - - .dropdown.inline - %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'} - %span.light - - if @sort.present? - = @sort.humanize - - else - Name - %b.caret - %ul.dropdown-menu.dropdown-menu-align-right - %li - = link_to namespace_project_branches_path(sort: nil) do + .dropdown.inline + %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'} + %span.light + - if @sort.present? + = @sort.humanize + - else Name - = link_to namespace_project_branches_path(sort: 'recently_updated') do - = sort_title_recently_updated - = link_to namespace_project_branches_path(sort: 'last_updated') do - = sort_title_oldest_updated - .oneline - Protected branches can be managed in project settings + %b.caret + %ul.dropdown-menu.dropdown-menu-align-right + %li + = link_to namespace_project_branches_path(sort: nil) do + Name + = link_to namespace_project_branches_path(sort: 'recently_updated') do + = sort_title_recently_updated + = link_to namespace_project_branches_path(sort: 'last_updated') do + = sort_title_oldest_updated - unless @branches.empty? %ul.content-list.all-branches - @branches.each do |branch| diff --git a/app/views/projects/builds/index.html.haml b/app/views/projects/builds/index.html.haml index 55d2ac89ebc..181547316aa 100644 --- a/app/views/projects/builds/index.html.haml +++ b/app/views/projects/builds/index.html.haml @@ -34,7 +34,6 @@ = link_to 'Get started with Builds', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info' = link_to ci_lint_path, class: 'btn btn-default' do - = icon('wrench') %span CI Lint %ul.content-list diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml index e6133b22f96..60a5b83434e 100644 --- a/app/views/projects/milestones/index.html.haml +++ b/app/views/projects/milestones/index.html.haml @@ -6,7 +6,6 @@ .nav-controls - if can?(current_user, :admin_milestone, @project) = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: "btn btn-new", title: "New Milestone" do - = icon('plus') New Milestone .milestones diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml index 19944e3e023..0b0e2bd6868 100644 --- a/app/views/projects/milestones/show.html.haml +++ b/app/views/projects/milestones/show.html.haml @@ -23,11 +23,9 @@ = link_to 'Reopen Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-nr btn-grouped" = link_to edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-grouped btn-nr" do - = icon('pencil-square-o') Edit = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-danger" do - = icon('trash-o') Delete .detail-page-description.milestone-detail diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml index a78450e09d4..b70693eeb62 100644 --- a/app/views/projects/pipelines/index.html.haml +++ b/app/views/projects/pipelines/index.html.haml @@ -28,14 +28,12 @@ .nav-controls - if can? current_user, :create_pipeline, @project = link_to new_namespace_project_pipeline_path(@project.namespace, @project), class: 'btn btn-create' do - = icon('plus') New pipeline - unless @repository.gitlab_ci_yml = link_to 'Get started with Pipelines', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info' = link_to ci_lint_path, class: 'btn btn-default' do - = icon('wrench') %span CI Lint %ul.content-list.pipelines diff --git a/app/views/projects/project_members/_project_member.html.haml b/app/views/projects/project_members/_project_member.html.haml index 1e53b8e37da..268f140d7db 100644 --- a/app/views/projects/project_members/_project_member.html.haml +++ b/app/views/projects/project_members/_project_member.html.haml @@ -32,7 +32,7 @@ .pull-right %strong= member.human_access - if can?(current_user, :update_project_member, member) - = button_tag class: "btn-xs btn js-toggle-button", + = button_tag class: "btn-xs btn-grouped inline btn js-toggle-button", title: 'Edit access level', type: 'button' do = icon('pencil') diff --git a/app/views/projects/tags/_download.html.haml b/app/views/projects/tags/_download.html.haml index 093d1d1bb0f..8a11dbfa9f4 100644 --- a/app/views/projects/tags/_download.html.haml +++ b/app/views/projects/tags/_download.html.haml @@ -1,7 +1,6 @@ -%span.btn-group.btn-grouped +%span.btn-group = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'zip'), class: 'btn btn-default', rel: 'nofollow' do - %i.fa.fa-download - %span source code + %span Source code %a.btn.btn-default.dropdown-toggle{ 'data-toggle' => 'dropdown' } %span.caret %span.sr-only @@ -9,9 +8,7 @@ %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' } %li = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'zip'), rel: 'nofollow' do - %i.fa.fa-download %span Download zip %li = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.gz'), rel: 'nofollow' do - %i.fa.fa-download %span Download tar.gz diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml index dbc35c16feb..844e1055810 100644 --- a/app/views/projects/tags/_tag.html.haml +++ b/app/views/projects/tags/_tag.html.haml @@ -15,11 +15,11 @@ = render 'projects/tags/download', ref: tag.name, project: @project - if can?(current_user, :push_code, @project) - = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn-grouped btn has-tooltip', title: "Edit release notes" do + = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn has-tooltip', title: "Edit release notes" do = icon("pencil") - if can?(current_user, :admin_project, @project) - = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-grouped btn-xs btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do + = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do = icon("trash-o") - if commit diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml index 9ff805a8989..2779084fe38 100644 --- a/app/views/projects/tags/index.html.haml +++ b/app/views/projects/tags/index.html.haml @@ -3,14 +3,14 @@ = render "projects/commits/head" %div{ class: (container_class) } - .row-content-block.second-block.content-component-block + .top-area + .nav-text + Tags give the ability to mark specific points in history as being important + - if can? current_user, :push_code, @project - .pull-right + .nav-controls = link_to new_namespace_project_tag_path(@project.namespace, @project), class: 'btn btn-create new-tag-btn' do - = icon('plus') New tag - .oneline - Tags give the ability to mark specific points in history as being important .tags - unless @tags.empty? diff --git a/app/views/projects/wikis/_main_links.html.haml b/app/views/projects/wikis/_main_links.html.haml index 2b91b7e8f65..4faa547769b 100644 --- a/app/views/projects/wikis/_main_links.html.haml +++ b/app/views/projects/wikis/_main_links.html.haml @@ -1,11 +1,9 @@ - if (@page && @page.persisted?) - = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn btn-grouped" do + = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do Page History - if can?(current_user, :create_wiki, @project) - = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn btn-grouped" do - %i.fa.fa-pencil-square-o + = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn" do Edit - if can?(current_user, :admin_wiki, @project) = link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-remove" do - = icon('trash') Delete diff --git a/app/views/projects/wikis/_nav.html.haml b/app/views/projects/wikis/_nav.html.haml index a722fbc5352..988fe024e28 100644 --- a/app/views/projects/wikis/_nav.html.haml +++ b/app/views/projects/wikis/_nav.html.haml @@ -13,7 +13,6 @@ .nav-controls - if can?(current_user, :create_wiki, @project) = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do - = icon('plus') New Page = render 'projects/wikis/new' diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml index 40c6eb9be45..a25365a94f2 100644 --- a/app/views/shared/groups/_group.html.haml +++ b/app/views/shared/groups/_group.html.haml @@ -6,10 +6,10 @@ - if group_member .controls.hidden-xs - if can?(current_user, :admin_group, group) - = link_to edit_group_path(group), class: "btn-sm btn btn-grouped" do - %i.fa.fa-cogs + = link_to edit_group_path(group), class: "btn" do + = icon('cogs') - = 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", title: 'Leave this group' do = icon('sign-out') .stats diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml index 6b25745c554..acc3ccf4dcf 100644 --- a/app/views/shared/milestones/_milestone.html.haml +++ b/app/views/shared/milestones/_milestone.html.haml @@ -35,11 +35,9 @@ .col-sm-6= render('shared/milestone_expired', milestone: milestone) .col-sm-6 - if can?(current_user, :admin_milestone, milestone.project) and milestone.active? - = link_to edit_namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), class: "btn btn-xs" do - = icon('pencil-square-o') + = link_to edit_namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), class: "btn btn-xs btn-grouped" do Edit \ - = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close" - = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove" do - = icon('trash-o') + = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close btn-grouped" + = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove btn-grouped" do Delete |