Commit aa5bfb91 authored by Marcel van Remmerden's avatar Marcel van Remmerden Committed by Annabel Dunstone Gray

Add hover and focus to "Attach a file"

parent 9209736a
...@@ -33,37 +33,36 @@ export default { ...@@ -33,37 +33,36 @@ export default {
<div class="comment-toolbar clearfix"> <div class="comment-toolbar clearfix">
<div class="toolbar-text"> <div class="toolbar-text">
<template v-if="!hasQuickActionsDocsPath && markdownDocsPath"> <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
<gl-link :href="markdownDocsPath" target="_blank" tabindex="-1"> <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1"
Markdown is supported >Markdown is supported</gl-link
</gl-link> >
</template> </template>
<template v-if="hasQuickActionsDocsPath && markdownDocsPath"> <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
<gl-link :href="markdownDocsPath" target="_blank" tabindex="-1"> Markdown </gl-link> <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">Markdown</gl-link> and
and <gl-link :href="quickActionsDocsPath" target="_blank" tabindex="-1">quick actions</gl-link>
<gl-link :href="quickActionsDocsPath" target="_blank" tabindex="-1">
quick actions
</gl-link>
are supported are supported
</template> </template>
</div> </div>
<span v-if="canAttachFile" class="uploading-container"> <span v-if="canAttachFile" class="uploading-container">
<span class="uploading-progress-container hide"> <span class="uploading-progress-container hide">
<i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i> <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i>
<span class="attaching-file-message"></span> <span class="uploading-progress">0%</span> <span class="attaching-file-message"></span>
<span class="uploading-progress">0%</span>
<span class="uploading-spinner"> <span class="uploading-spinner">
<i class="fa fa-spinner fa-spin toolbar-button-icon" aria-hidden="true"> </i> <i class="fa fa-spinner fa-spin toolbar-button-icon" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="uploading-error-container hide"> <span class="uploading-error-container hide">
<span class="uploading-error-icon"> <span class="uploading-error-icon">
<i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i> <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i>
</span> </span>
<span class="uploading-error-message"></span> <span class="uploading-error-message"></span>
<button class="retry-uploading-link" type="button">Try again</button> or <button class="retry-uploading-link" type="button">Try again</button> or
<button class="attach-new-file markdown-selector" type="button">attach a new file</button> <button class="attach-new-file markdown-selector" type="button">attach a new file</button>
</span> </span>
<button class="markdown-selector button-attach-file" tabindex="-1" type="button"> <button class="markdown-selector button-attach-file btn-link" tabindex="-1" type="button">
<i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"> </i> Attach a file <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i
><span class="text-attach-file">Attach a file</span>
</button> </button>
<button class="btn btn-default btn-sm hide button-cancel-uploading-files" type="button"> <button class="btn btn-default btn-sm hide button-cancel-uploading-files" type="button">
Cancel Cancel
......
...@@ -334,7 +334,7 @@ table { ...@@ -334,7 +334,7 @@ table {
.toolbar-button-icon { .toolbar-button-icon {
position: relative; position: relative;
top: 1px; top: 1px;
margin-right: 3px; margin-right: $gl-padding-4;
color: inherit; color: inherit;
font-size: 16px; font-size: 16px;
} }
...@@ -461,6 +461,15 @@ table { ...@@ -461,6 +461,15 @@ table {
border: 0; border: 0;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
&:hover,
&:focus {
text-decoration: none;
.text-attach-file {
text-decoration: underline;
}
}
} }
.markdown-selector { .markdown-selector {
......
...@@ -28,8 +28,9 @@ ...@@ -28,8 +28,9 @@
or or
%button.attach-new-file.markdown-selector{ type: 'button' }= _("attach a new file") %button.attach-new-file.markdown-selector{ type: 'button' }= _("attach a new file")
%button.markdown-selector.button-attach-file{ type: 'button', tabindex: '-1' } %button.markdown-selector.button-attach-file.btn-link{ type: 'button', tabindex: '-1' }
= icon('file-image-o', class: 'toolbar-button-icon') = icon('file-image-o', class: 'toolbar-button-icon')
%span.text-attach-file<>
= _("Attach a file") = _("Attach a file")
%button.btn.btn-default.btn-sm.hide.button-cancel-uploading-files{ type: 'button' }= _("Cancel") %button.btn.btn-default.btn-sm.hide.button-cancel-uploading-files{ type: 'button' }= _("Cancel")
---
title: Add hover and focus to Attach a file
merge_request: 28682
author: Marcel van Remmerden
type: fixed
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