From 6cf76d652d0ae0b77b1250a81aa24e3ce164ccbc Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 4 Dec 2017 11:00:52 +0000 Subject: [PATCH] Add underline hover state to all links --- app/assets/stylesheets/framework/common.scss | 1 - app/assets/stylesheets/framework/gfm.scss | 1 - app/assets/stylesheets/framework/wells.scss | 5 +++++ app/assets/stylesheets/pages/issuable.scss | 13 ++++++++++++- app/assets/stylesheets/pages/notes.scss | 9 ++++++++- app/assets/stylesheets/pages/profile.scss | 2 +- app/assets/stylesheets/pages/projects.scss | 1 + app/assets/stylesheets/pages/wiki.scss | 6 +++++- app/helpers/commits_helper.rb | 4 ++-- app/views/projects/_readme.html.haml | 2 +- .../projects/artifacts/_tree_directory.html.haml | 4 ++-- app/views/projects/artifacts/_tree_file.html.haml | 8 ++++---- app/views/projects/branches/_branch.html.haml | 3 +-- app/views/projects/commits/_commit.html.haml | 2 +- app/views/projects/empty.html.haml | 6 +++--- .../protected_branches/shared/_index.html.haml | 2 +- .../projects/protected_tags/shared/_index.html.haml | 2 +- app/views/projects/tree/_blob_item.html.haml | 4 ++-- app/views/projects/tree/_tree_item.html.haml | 4 ++-- app/views/projects/wikis/_sidebar.html.haml | 5 ++--- app/views/shared/_label.html.haml | 4 ++-- app/views/shared/notes/_note.html.haml | 3 +-- app/views/users/show.html.haml | 4 ++-- doc/development/doc_styleguide.md | 6 ------ 24 files changed, 59 insertions(+), 42 deletions(-) diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index cb1aad90a9c..a42fab50db5 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -39,7 +39,6 @@ color: $brand-info; } -.underlined-link { text-decoration: underline; } .hint { font-style: italic; color: $hint-color; } .light { color: $common-gray; } diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss index 34a35734acc..5621505996d 100644 --- a/app/assets/stylesheets/framework/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -14,6 +14,5 @@ &:hover { background-color: $user-mention-bg-hover; - text-decoration: none; } } diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 68824ff8418..735fc4babd7 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -20,6 +20,11 @@ .ref-name { font-size: 12px; + + &:hover { + text-decoration: underline; + color: $gl-text-color; + } } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 63c51747f92..b33825a506e 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -110,6 +110,10 @@ padding: 6px 10px; border-radius: $label-border-radius; } + + &:hover .color-label { + text-decoration: underline; + } } &.has-labels { @@ -174,6 +178,14 @@ color: $gray-darkest; } } + + &.assignee { + .author_link:hover { + .author { + text-decoration: underline; + } + } + } } .block-first { @@ -468,7 +480,6 @@ a:not(.btn-retry) { &:hover { color: $md-link-color; - text-decoration: none; .avatar { border-color: rgba($avatar-border, .2); diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4fe182c9fce..a6009ab328e 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -208,7 +208,6 @@ ul.notes { a { color: $gl-link-color; - text-decoration: none; } p { @@ -395,6 +394,10 @@ ul.notes { &:focus, &:hover { text-decoration: none; + + .note-header-author-name { + text-decoration: underline; + } } } @@ -461,6 +464,10 @@ ul.notes { .system-note-message { white-space: normal; } + + a:hover { + text-decoration: underline; + } } /** diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 28dc71dc641..ac745019319 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -73,7 +73,7 @@ .profile-link-holder { display: inline; - a { + a:not(.text-link) { text-decoration: none; } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 2dc0c288a6d..4c1e6d46242 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -811,6 +811,7 @@ a.deploy-project-label { &:hover, &:focus { color: $gl-text-color; + text-decoration: underline; } } } diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index e150f96f3fa..d8fec583121 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -124,7 +124,11 @@ &:hover, &.active { - color: $black; + text-decoration: none; + + span { + text-decoration: underline; + } } } diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb index f9a666fa1e6..f68e2cd3afa 100644 --- a/app/helpers/commits_helper.rb +++ b/app/helpers/commits_helper.rb @@ -63,7 +63,7 @@ module CommitsHelper # Returns a link formatted as a commit branch link def commit_branch_link(url, text) link_to(url, class: 'label label-gray ref-name branch-link') do - icon('code-fork') + " #{text}" + icon('code-fork', class: 'append-right-5') + "#{text}" end end @@ -77,7 +77,7 @@ module CommitsHelper # Returns a link formatted as a commit tag link def commit_tag_link(url, text) link_to(url, class: 'label label-gray ref-name') do - icon('tag') + " #{text}" + icon('tag', class: 'append-right-5') + "#{text}" end end diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml index 44aa9eb3826..32901d30b96 100644 --- a/app/views/projects/_readme.html.haml +++ b/app/views/projects/_readme.html.haml @@ -19,5 +19,5 @@ distributed with computer software, forming part of its documentation. %p We recommend you to - = link_to "add a README", add_special_file_path(@project, file_name: 'README.md'), class: 'underlined-link' + = link_to "add a README", add_special_file_path(@project, file_name: 'README.md') file to the repository and GitLab will render it here instead of this message. diff --git a/app/views/projects/artifacts/_tree_directory.html.haml b/app/views/projects/artifacts/_tree_directory.html.haml index 03be6f15313..1a9ce8d0508 100644 --- a/app/views/projects/artifacts/_tree_directory.html.haml +++ b/app/views/projects/artifacts/_tree_directory.html.haml @@ -3,6 +3,6 @@ %tr.tree-item{ 'data-link' => path_to_directory } %td.tree-item-file-name = tree_icon('folder', '755', directory.name) - = link_to path_to_directory do - %span.str-truncated= directory.name + = link_to path_to_directory, class: 'str-truncated' do + %span= directory.name %td diff --git a/app/views/projects/artifacts/_tree_file.html.haml b/app/views/projects/artifacts/_tree_file.html.haml index a97ddb3c377..cfb91568061 100644 --- a/app/views/projects/artifacts/_tree_file.html.haml +++ b/app/views/projects/artifacts/_tree_file.html.haml @@ -6,12 +6,12 @@ %td.tree-item-file-name = tree_icon('file', blob.mode, blob.name) - if external_link - = link_to path_to_file, class: 'tree-item-file-external-link js-artifact-tree-tooltip', + = link_to path_to_file, class: 'tree-item-file-external-link js-artifact-tree-tooltip str-truncated', target: '_blank', rel: 'noopener noreferrer', title: _('Opens in a new window') do - %span.str-truncated>= blob.name + %span>= blob.name = icon('external-link', class: 'js-artifact-tree-external-icon') - else - = link_to path_to_file do - %span.str-truncated= blob.name + = link_to path_to_file, class: 'str-truncated' do + %span= blob.name %td = number_to_human_size(blob.size, precision: 2) diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml index 6e02ae6c9cc..573050e597d 100644 --- a/app/views/projects/branches/_branch.html.haml +++ b/app/views/projects/branches/_branch.html.haml @@ -8,8 +8,7 @@ %li{ class: "js-branch-#{branch.name}" } %div = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do - = icon('code-fork') - = branch.name + = icon('code-fork', class: 'append-right-5') + "#{branch.name}"   - if branch.name == @repository.root_ref %span.label.label-primary default diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index a66177f20e9..1b91a94a9f8 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -41,6 +41,6 @@ - if commit.status(ref) = render_commit_status(commit, ref: ref) - = link_to commit.short_id, project_commit_path(project, commit), class: "commit-sha btn btn-transparent" + = link_to commit.short_id, project_commit_path(project, commit), class: "commit-sha btn btn-transparent btn-link" = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard")) = link_to_browse_code(project, commit) diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml index af564b93dc3..58e89a481a9 100644 --- a/app/views/projects/empty.html.haml +++ b/app/views/projects/empty.html.haml @@ -14,12 +14,12 @@ %p Otherwise you can start with adding a = succeed ',' do - = link_to "README", add_special_file_path(@project, file_name: 'README.md'), class: 'underlined-link' + = link_to "README", add_special_file_path(@project, file_name: 'README.md') a = succeed ',' do - = link_to "LICENSE", add_special_file_path(@project, file_name: 'LICENSE'), class: 'underlined-link' + = link_to "LICENSE", add_special_file_path(@project, file_name: 'LICENSE') or a - = link_to '.gitignore', add_special_file_path(@project, file_name: '.gitignore'), class: 'underlined-link' + = link_to '.gitignore', add_special_file_path(@project, file_name: '.gitignore') to this project. %p You will need to be owner or have the master permission level for the initial push, as the master branch is automatically protected. diff --git a/app/views/projects/protected_branches/shared/_index.html.haml b/app/views/projects/protected_branches/shared/_index.html.haml index ba7d98228c3..e662b877fbb 100644 --- a/app/views/projects/protected_branches/shared/_index.html.haml +++ b/app/views/projects/protected_branches/shared/_index.html.haml @@ -16,7 +16,7 @@ %li prevent pushes from everybody except Masters %li prevent anyone from force pushing to the branch %li prevent anyone from deleting the branch - %p Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}. + %p Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches")} and #{link_to "project permissions", help_page_path("user/permissions")}. - if can? current_user, :admin_project, @project = content_for :create_protected_branch diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml index e764a37bbd7..24baf1cfc89 100644 --- a/app/views/projects/protected_tags/shared/_index.html.haml +++ b/app/views/projects/protected_tags/shared/_index.html.haml @@ -16,7 +16,7 @@ %li Prevent anyone from updating the tag %li Prevent anyone from deleting the tag - %p Read more about #{link_to "protected tags", help_page_path("user/project/protected_tags"), class: "underlined-link"}. + %p Read more about #{link_to "protected tags", help_page_path("user/project/protected_tags")}. - if can? current_user, :admin_project, @project = yield :create_protected_tag diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml index fd8175e1e01..c51af901699 100644 --- a/app/views/projects/tree/_blob_item.html.haml +++ b/app/views/projects/tree/_blob_item.html.haml @@ -2,8 +2,8 @@ %td.tree-item-file-name = tree_icon(type, blob_item.mode, blob_item.name) - file_name = blob_item.name - = link_to project_blob_path(@project, tree_join(@id || @commit.id, blob_item.name)), title: file_name do - %span.str-truncated= file_name + = link_to project_blob_path(@project, tree_join(@id || @commit.id, blob_item.name)), class: 'str-truncated', title: file_name do + %span= file_name %td.hidden-xs.tree-commit %td.tree-time-ago.cgray.text-right = render 'projects/tree/spinner' diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml index 56197382a70..af3816fc9f4 100644 --- a/app/views/projects/tree/_tree_item.html.haml +++ b/app/views/projects/tree/_tree_item.html.haml @@ -2,8 +2,8 @@ %td.tree-item-file-name = tree_icon(type, tree_item.mode, tree_item.name) - path = flatten_tree(@path, tree_item) - = link_to project_tree_path(@project, tree_join(@id || @commit.id, path)), title: path do - %span.str-truncated= path + = link_to project_tree_path(@project, tree_join(@id || @commit.id, path)), class: 'str-truncated', title: path do + %span= path %td.hidden-xs.tree-commit %td.tree-time-ago.text-right = render 'projects/tree/spinner' diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml index 5b781294d68..2c7551c6f8c 100644 --- a/app/views/projects/wikis/_sidebar.html.haml +++ b/app/views/projects/wikis/_sidebar.html.haml @@ -6,9 +6,8 @@ - git_access_url = project_wikis_git_access_path(@project) = link_to git_access_url, class: active_nav_link?(path: 'wikis#git_access') ? 'active' : '' do - = succeed ' ' do - = icon('cloud-download') - = _("Clone repository") + = icon('cloud-download', class: 'append-right-5') + %span= _("Clone repository") .blocks-container .block.block-first diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml index 23a418ad640..3fcc33044e9 100644 --- a/app/views/shared/_label.html.haml +++ b/app/views/shared/_label.html.haml @@ -38,9 +38,9 @@ = link_to 'Delete', destroy_label_path(label), title: 'Delete', method: :delete, data: {confirm: 'Remove this label? Are you sure?'} .pull-right.hidden-xs.hidden-sm.hidden-md - = link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action') do + = link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action btn-link') do view merge requests - = link_to_label(label, subject: subject, css_class: 'btn btn-transparent btn-action') do + = link_to_label(label, subject: subject, css_class: 'btn btn-transparent btn-action btn-link') do view open issues - if current_user diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml index b6085fd3af0..c978d9e4821 100644 --- a/app/views/shared/notes/_note.html.haml +++ b/app/views/shared/notes/_note.html.haml @@ -31,8 +31,7 @@ .note-header .note-header-info %a{ href: user_path(note.author) } - %span.note-header-author-name - = sanitize(note.author.name) + %span.note-header-author-name= sanitize(note.author.name) %span.note-headline-light = note.author.to_reference %span.note-headline-light diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index cc59f8660fd..4f4e81c705f 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -51,7 +51,7 @@ .cover-desc - unless @user.public_email.blank? .profile-link-holder.middle-dot-divider - = link_to @user.public_email, "mailto:#{@user.public_email}" + = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'text-link' - unless @user.skype.blank? .profile-link-holder.middle-dot-divider = link_to "skype:#{@user.skype}", title: "Skype" do @@ -66,7 +66,7 @@ = icon('twitter-square') - unless @user.website_url.blank? .profile-link-holder.middle-dot-divider - = link_to @user.short_website_url, @user.full_website_url + = link_to @user.short_website_url, @user.full_website_url, class: 'text-link' - unless @user.location.blank? .profile-link-holder.middle-dot-divider = icon('map-marker') diff --git a/doc/development/doc_styleguide.md b/doc/development/doc_styleguide.md index aaa7032cadb..db13e0e6249 100644 --- a/doc/development/doc_styleguide.md +++ b/doc/development/doc_styleguide.md @@ -170,12 +170,6 @@ You can combine one or more of the following: = link_to 'Help page', help_page_path('user/permissions'), class: 'btn btn-info' ``` -1. **Underlining a link.** - - ```haml - = link_to 'Help page', help_page_path('user/permissions'), class: 'underlined-link' - ``` - 1. **Using links inline of some text.** ```haml