summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGeorge Tsiolis <tsiolis.g@gmail.com>2018-10-19 11:35:33 +0000
committerAnnabel Dunstone Gray <annabel.m.gray@gmail.com>2018-10-19 11:35:33 +0000
commit1af6ddffed5028b9e1f63e2d5760982a7b2ca473 (patch)
tree162d4ca9bf20993d99c692cf40b75c9d26d0069f
parentcdfc2378e5e30ac87479ef839dbc20f3bdaf1af0 (diff)
downloadgitlab-ce-1af6ddffed5028b9e1f63e2d5760982a7b2ca473.tar.gz
Change markdown header tab anchor links to buttons
-rw-r--r--app/assets/javascripts/vue_shared/components/markdown/header.vue28
-rw-r--r--app/assets/stylesheets/framework/gitlab_theme.scss1
-rw-r--r--app/assets/stylesheets/framework/markdown_area.scss1
-rw-r--r--app/assets/stylesheets/framework/secondary_navigation_elements.scss15
-rw-r--r--app/views/projects/_md_preview.html.haml4
-rw-r--r--changelogs/unreleased/add-gl-link-to-markdown-header.yml5
-rw-r--r--spec/features/groups/milestone_spec.rb6
-rw-r--r--spec/features/issues/user_creates_issue_spec.rb6
-rw-r--r--spec/features/issues/user_edits_issue_spec.rb4
-rw-r--r--spec/features/merge_request/user_views_open_merge_request_spec.rb6
-rw-r--r--spec/features/projects/commit/comments/user_adds_comment_spec.rb10
-rw-r--r--spec/features/projects/commit/user_comments_on_commit_spec.rb6
-rw-r--r--spec/javascripts/vue_shared/components/markdown/header_spec.js2
13 files changed, 56 insertions, 38 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 704adf7864f..3ddb39730c4 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -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 }"
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 50ebc6d0dd1..b8bb9e1e07b 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -161,6 +161,7 @@
.nav-links li {
&.active a,
+ &.md-header-tab.active button,
a.active {
border-bottom: 2px solid $active-tab-border;
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 554e2b6720a..3142f94b192 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -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;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 8bab8cf36b1..bf6f66d30ff 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -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;
+ }
}
}
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index f398d97028b..0f709c65d0e 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -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
diff --git a/changelogs/unreleased/add-gl-link-to-markdown-header.yml b/changelogs/unreleased/add-gl-link-to-markdown-header.yml
new file mode 100644
index 00000000000..b8fe66ab52a
--- /dev/null
+++ b/changelogs/unreleased/add-gl-link-to-markdown-header.yml
@@ -0,0 +1,5 @@
+---
+title: Change markdown header tab anchor links to buttons
+merge_request: 21988
+author: George Tsiolis
+type: other
diff --git a/spec/features/groups/milestone_spec.rb b/spec/features/groups/milestone_spec.rb
index 80df0618a6a..e8ca6a6714f 100644
--- a/spec/features/groups/milestone_spec.rb
+++ b/spec/features/groups/milestone_spec.rb
@@ -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
diff --git a/spec/features/issues/user_creates_issue_spec.rb b/spec/features/issues/user_creates_issue_spec.rb
index 5e8662100c5..687a6f1eafc 100644
--- a/spec/features/issues/user_creates_issue_spec.rb
+++ b/spec/features/issues/user_creates_issue_spec.rb
@@ -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
diff --git a/spec/features/issues/user_edits_issue_spec.rb b/spec/features/issues/user_edits_issue_spec.rb
index 1d9c3abc20f..60b88ef4bdf 100644
--- a/spec/features/issues/user_edits_issue_spec.rb
+++ b/spec/features/issues/user_edits_issue_spec.rb
@@ -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
diff --git a/spec/features/merge_request/user_views_open_merge_request_spec.rb b/spec/features/merge_request/user_views_open_merge_request_spec.rb
index 6ac495aa03d..71022c6bb08 100644
--- a/spec/features/merge_request/user_views_open_merge_request_spec.rb
+++ b/spec/features/merge_request/user_views_open_merge_request_spec.rb
@@ -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
diff --git a/spec/features/projects/commit/comments/user_adds_comment_spec.rb b/spec/features/projects/commit/comments/user_adds_comment_spec.rb
index 6397df086a7..29442a58ea4 100644
--- a/spec/features/projects/commit/comments/user_adds_comment_spec.rb
+++ b/spec/features/projects/commit/comments/user_adds_comment_spec.rb
@@ -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)
diff --git a/spec/features/projects/commit/user_comments_on_commit_spec.rb b/spec/features/projects/commit/user_comments_on_commit_spec.rb
index 6397a8ad845..73ce8d2b996 100644
--- a/spec/features/projects/commit/user_comments_on_commit_spec.rb
+++ b/spec/features/projects/commit/user_comments_on_commit_spec.rb
@@ -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
diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js
index 6c4bc3602c1..59613faa49f 100644
--- a/spec/javascripts/vue_shared/components/markdown/header_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js
@@ -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();