Change markdown header tab anchor links to buttons
This commit is contained in:
parent
cdfc2378e5
commit
1af6ddffed
|
@ -1,16 +1,16 @@
|
|||
<script>
|
||||
import $ from 'jquery';
|
||||
import tooltip from '../../directives/tooltip';
|
||||
import toolbarButton from './toolbar_button.vue';
|
||||
import icon from '../icon.vue';
|
||||
import Tooltip from '../../directives/tooltip';
|
||||
import ToolbarButton from './toolbar_button.vue';
|
||||
import Icon from '../icon.vue';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
tooltip,
|
||||
Tooltip,
|
||||
},
|
||||
components: {
|
||||
toolbarButton,
|
||||
icon,
|
||||
ToolbarButton,
|
||||
Icon,
|
||||
},
|
||||
props: {
|
||||
previewMarkdown: {
|
||||
|
@ -68,27 +68,27 @@ export default {
|
|||
:class="{ active: !previewMarkdown }"
|
||||
class="md-header-tab"
|
||||
>
|
||||
<a
|
||||
<button
|
||||
class="js-write-link"
|
||||
href="#md-write-holder"
|
||||
tabindex="-1"
|
||||
@click.prevent="writeMarkdownTab($event)"
|
||||
type="button"
|
||||
@click="writeMarkdownTab($event)"
|
||||
>
|
||||
Write
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
:class="{ active: previewMarkdown }"
|
||||
class="md-header-tab"
|
||||
>
|
||||
<a
|
||||
<button
|
||||
class="js-preview-link js-md-preview-button"
|
||||
href="#md-preview-holder"
|
||||
tabindex="-1"
|
||||
@click.prevent="previewMarkdownTab($event)"
|
||||
type="button"
|
||||
@click="previewMarkdownTab($event)"
|
||||
>
|
||||
Preview
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
:class="{ active: !previewMarkdown }"
|
||||
|
|
|
@ -161,6 +161,7 @@
|
|||
|
||||
.nav-links li {
|
||||
&.active a,
|
||||
&.md-header-tab.active button,
|
||||
a.active {
|
||||
border-bottom: 2px solid $active-tab-border;
|
||||
|
||||
|
|
|
@ -72,6 +72,7 @@
|
|||
.md-header-tab {
|
||||
@include media-breakpoint-down(xs) {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $border-color;
|
||||
text-align: center;
|
||||
|
|
|
@ -8,15 +8,17 @@
|
|||
height: auto;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
li {
|
||||
li:not(.md-header-toolbar) {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
a,
|
||||
button {
|
||||
padding: $gl-btn-padding;
|
||||
padding-bottom: 11px;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: $gl-text-color-secondary;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
|
||||
|
@ -33,7 +35,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.active a,
|
||||
&.active button,
|
||||
a.active {
|
||||
color: $black;
|
||||
font-weight: $gl-font-weight-bold;
|
||||
|
@ -42,6 +49,10 @@
|
|||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-header-tab button {
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -11,10 +11,10 @@
|
|||
.md-header
|
||||
%ul.nav.nav-tabs.nav-links.clearfix
|
||||
%li.md-header-tab.active
|
||||
%a.js-md-write-button{ href: "#md-write-holder", tabindex: -1 }
|
||||
%button.js-md-write-button{ tabindex: -1 }
|
||||
Write
|
||||
%li.md-header-tab
|
||||
%a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
|
||||
%button.js-md-preview-button{ tabindex: -1 }
|
||||
Preview
|
||||
|
||||
%li.md-header-toolbar.active
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Change markdown header tab anchor links to buttons
|
||||
merge_request: 21988
|
||||
author: George Tsiolis
|
||||
type: other
|
|
@ -23,17 +23,17 @@ describe 'Group milestones' do
|
|||
|
||||
description.native.send_keys('')
|
||||
|
||||
click_link('Preview')
|
||||
click_button('Preview')
|
||||
|
||||
preview = find('.js-md-preview')
|
||||
|
||||
expect(preview).to have_content('Nothing to preview.')
|
||||
|
||||
click_link('Write')
|
||||
click_button('Write')
|
||||
|
||||
description.native.send_keys(':+1: Nice')
|
||||
|
||||
click_link('Preview')
|
||||
click_button('Preview')
|
||||
|
||||
expect(preview).to have_css('gl-emoji')
|
||||
expect(find('#milestone_description', visible: false)).not_to be_visible
|
||||
|
|
|
@ -47,15 +47,15 @@ describe "User creates issue" do
|
|||
textarea = first(".gfm-form textarea")
|
||||
|
||||
page.within(form) do
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
|
||||
preview = find(".js-md-preview") # this element is findable only when the "Preview" link is clicked.
|
||||
|
||||
expect(preview).to have_content("Nothing to preview.")
|
||||
|
||||
click_link("Write")
|
||||
click_button("Write")
|
||||
fill_in("Description", with: "Bug fixed :smile:")
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
|
||||
expect(preview).to have_css("gl-emoji")
|
||||
expect(textarea).not_to be_visible
|
||||
|
|
|
@ -17,9 +17,9 @@ describe "User edits issue", :js do
|
|||
|
||||
page.within(form) do
|
||||
fill_in("Description", with: "Bug fixed :smile:")
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
end
|
||||
|
||||
expect(form).to have_link("Write")
|
||||
expect(form).to have_button("Write")
|
||||
end
|
||||
end
|
||||
|
|
|
@ -41,7 +41,7 @@ describe 'User views an open merge request' do
|
|||
find('.gfm-form').fill_in(:merge_request_description, with: '')
|
||||
|
||||
page.within('.gfm-form') do
|
||||
click_link('Preview')
|
||||
click_button('Preview')
|
||||
|
||||
expect(find('.js-md-preview')).to have_content('Nothing to preview.')
|
||||
end
|
||||
|
@ -51,12 +51,12 @@ describe 'User views an open merge request' do
|
|||
find('.gfm-form').fill_in(:merge_request_description, with: ':+1: Nice')
|
||||
|
||||
page.within('.gfm-form') do
|
||||
click_link('Preview')
|
||||
click_button('Preview')
|
||||
|
||||
expect(find('.js-md-preview')).to have_css('gl-emoji')
|
||||
end
|
||||
|
||||
expect(find('.gfm-form')).to have_css('.js-md-preview').and have_link('Write')
|
||||
expect(find('.gfm-form')).to have_css('.js-md-preview').and have_button('Write')
|
||||
expect(find('#merge_request_description', visible: false)).not_to be_visible
|
||||
end
|
||||
end
|
||||
|
|
|
@ -28,19 +28,19 @@ describe "User adds a comment on a commit", :js do
|
|||
fill_in("note[note]", with: "#{comment_text} #{emoji}")
|
||||
|
||||
# Check on `Preview` tab
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
|
||||
expect(find(".js-md-preview")).to have_content(comment_text).and have_css("gl-emoji")
|
||||
expect(page).not_to have_css(".js-note-text")
|
||||
|
||||
# Check on the `Write` tab
|
||||
click_link("Write")
|
||||
click_button("Write")
|
||||
|
||||
expect(page).to have_field("note[note]", with: "#{comment_text} #{emoji}")
|
||||
|
||||
# Submit comment from the `Preview` tab to get rid of a separate `it` block
|
||||
# which would specially tests if everything gets cleared from the note form.
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
click_button("Comment")
|
||||
end
|
||||
|
||||
|
@ -88,13 +88,13 @@ describe "User adds a comment on a commit", :js do
|
|||
|
||||
# Test Preview feature for both forms.
|
||||
page.within("form[data-line-code='#{sample_commit.line_code}']") do
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
end
|
||||
|
||||
page.within("form[data-line-code='#{sample_commit.del_line_code}']") do
|
||||
fill_in("note[note]", with: another_comment_text)
|
||||
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
end
|
||||
|
||||
expect(page).to have_css(".js-md-preview", visible: true, count: 2)
|
||||
|
|
|
@ -25,19 +25,19 @@ describe "User comments on commit", :js do
|
|||
fill_in("note[note]", with: "#{comment_text} #{emoji_code}")
|
||||
|
||||
# Check on `Preview` tab
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
|
||||
expect(find(".js-md-preview")).to have_content(comment_text).and have_css("gl-emoji")
|
||||
expect(page).not_to have_css(".js-note-text")
|
||||
|
||||
# Check on `Write` tab
|
||||
click_link("Write")
|
||||
click_button("Write")
|
||||
|
||||
expect(page).to have_field("note[note]", with: "#{comment_text} #{emoji_code}")
|
||||
|
||||
# Submit comment from the `Preview` tab to get rid of a separate `it` block
|
||||
# which would specially tests if everything gets cleared from the note form.
|
||||
click_link("Preview")
|
||||
click_button("Preview")
|
||||
click_button("Comment")
|
||||
end
|
||||
|
||||
|
|
|
@ -76,7 +76,7 @@ describe('Markdown field header component', () => {
|
|||
});
|
||||
|
||||
it('blurs preview link after click', done => {
|
||||
const link = vm.$el.querySelector('li:nth-child(2) a');
|
||||
const link = vm.$el.querySelector('li:nth-child(2) button');
|
||||
spyOn(HTMLElement.prototype, 'blur');
|
||||
|
||||
link.click();
|
||||
|
|
Loading…
Reference in New Issue