From 0f0067288da550c5bd29a3d384eaacc4cbb575ac Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Fri, 28 Sep 2018 16:01:01 +0300
Subject: [PATCH 1/7] Add link component to markdown header component
---
.../vue_shared/components/markdown/header.vue | 9 +++++----
changelogs/unreleased/add-gl-link-to-markdown-header.yml | 5 +++++
2 files changed, 10 insertions(+), 4 deletions(-)
create mode 100644 changelogs/unreleased/add-gl-link-to-markdown-header.yml
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 704adf7864ffaf10..9690a48c83c18a1b 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,4 +1,5 @@
<script>
+<<<<<<< HEAD
import $ from 'jquery';
import tooltip from '../../directives/tooltip';
import toolbarButton from './toolbar_button.vue';
@@ -68,27 +69,27 @@ export default {
:class="{ active: !previewMarkdown }"
class="md-header-tab"
>
- <a
+ <gl-link
class="js-write-link"
href="#md-write-holder"
tabindex="-1"
@click.prevent="writeMarkdownTab($event)"
>
Write
- </a>
+ </gl-link>
</li>
<li
:class="{ active: previewMarkdown }"
class="md-header-tab"
>
- <a
+ <gl-link
class="js-preview-link js-md-preview-button"
href="#md-preview-holder"
tabindex="-1"
@click.prevent="previewMarkdownTab($event)"
>
Preview
- </a>
+ </gl-link>
</li>
<li
:class="{ active: !previewMarkdown }"
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 0000000000000000..13982f3700f73c97
--- /dev/null
+++ b/changelogs/unreleased/add-gl-link-to-markdown-header.yml
@@ -0,0 +1,5 @@
+---
+title: Add link component to markdown header component
+merge_request: 21988
+author: George Tsiolis
+type: other
--
GitLab
From 6e65cd48f3092f0a0a50218b84690629bbb421e1 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Tue, 2 Oct 2018 01:19:59 +0300
Subject: [PATCH 2/7] Change markdown header tab anchor links to buttons
---
.../vue_shared/components/markdown/header.vue | 21 +++++++--------
.../stylesheets/framework/markdown_area.scss | 27 +++++++++++++++++++
app/views/projects/_md_preview.html.haml | 4 +--
.../add-gl-link-to-markdown-header.yml | 2 +-
.../components/markdown/header_spec.js | 2 +-
5 files changed, 41 insertions(+), 15 deletions(-)
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 9690a48c83c18a1b..a4a2948805733891 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,17 +1,16 @@
<script>
-<<<<<<< HEAD
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: {
@@ -69,27 +68,27 @@ export default {
:class="{ active: !previewMarkdown }"
class="md-header-tab"
>
- <gl-link
+ <button
class="js-write-link"
href="#md-write-holder"
tabindex="-1"
@click.prevent="writeMarkdownTab($event)"
>
Write
- </gl-link>
+ </button>
</li>
<li
:class="{ active: previewMarkdown }"
class="md-header-tab"
>
- <gl-link
+ <button
class="js-preview-link js-md-preview-button"
href="#md-preview-holder"
tabindex="-1"
@click.prevent="previewMarkdownTab($event)"
>
Preview
- </gl-link>
+ </button>
</li>
<li
:class="{ active: !previewMarkdown }"
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 44211ff0e6cce32e..b05bc77683aa0ff1 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -70,6 +70,33 @@
padding-top: 10px;
}
}
+
+ li.md-header-tab {
+ button {
+ width: 100%;
+ font-size: 14px;
+ line-height: 19px;
+ color: $gl-text-color-secondary;
+ padding: $gl-btn-padding;
+ padding-top: 0;
+ border: 0;
+ border-bottom: 2px solid transparent;
+
+ &:hover {
+ color: $black;
+ border-color: $gray-darkest;
+ }
+ }
+
+ &.active{
+ button {
+ font-weight: 600;
+ color: $black;
+ border-bottom: 2px solid $theme-gray-800;
+ }
+ }
+
+ }
}
}
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index f398d97028b1b8ef..59bc3007a3c04136 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{ href: "#md-write-holder", tabindex: -1 }
Write
%li.md-header-tab
- %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
+ %button.js-md-preview-button{ href: "#md-preview-holder", 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
index 13982f3700f73c97..b8fe66ab52a6eeaf 100644
--- a/changelogs/unreleased/add-gl-link-to-markdown-header.yml
+++ b/changelogs/unreleased/add-gl-link-to-markdown-header.yml
@@ -1,5 +1,5 @@
---
-title: Add link component to markdown header component
+title: Change markdown header tab anchor links to buttons
merge_request: 21988
author: George Tsiolis
type: other
diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js
index 6c4bc3602c124e58..59613faa49ffa9ea 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();
--
GitLab
From 6250595e3413c20fad95bbc6afad6d4edc44ebca Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Tue, 2 Oct 2018 13:22:07 +0300
Subject: [PATCH 3/7] Update specs for markdown header tab buttons
---
.../vue_shared/components/markdown/header.vue | 8 +++---
.../stylesheets/framework/markdown_area.scss | 27 -------------------
.../secondary_navigation_elements.scss | 14 ++++++++--
app/views/projects/_md_preview.html.haml | 4 +--
spec/features/groups/milestone_spec.rb | 6 ++---
.../issues/user_creates_issue_spec.rb | 6 ++---
spec/features/issues/user_edits_issue_spec.rb | 4 +--
.../user_views_open_merge_request_spec.rb | 6 ++---
.../commit/comments/user_adds_comment_spec.rb | 10 +++----
.../commit/user_comments_on_commit_spec.rb | 6 ++---
10 files changed, 37 insertions(+), 54 deletions(-)
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index a4a2948805733891..3ddb39730c4a8a25 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -70,9 +70,9 @@ export default {
>
<button
class="js-write-link"
- href="#md-write-holder"
tabindex="-1"
- @click.prevent="writeMarkdownTab($event)"
+ type="button"
+ @click="writeMarkdownTab($event)"
>
Write
</button>
@@ -83,9 +83,9 @@ export default {
>
<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
</button>
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index b05bc77683aa0ff1..44211ff0e6cce32e 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -70,33 +70,6 @@
padding-top: 10px;
}
}
-
- li.md-header-tab {
- button {
- width: 100%;
- font-size: 14px;
- line-height: 19px;
- color: $gl-text-color-secondary;
- padding: $gl-btn-padding;
- padding-top: 0;
- border: 0;
- border-bottom: 2px solid transparent;
-
- &:hover {
- color: $black;
- border-color: $gray-darkest;
- }
- }
-
- &.active{
- button {
- font-weight: 600;
- color: $black;
- border-bottom: 2px solid $theme-gray-800;
- }
- }
-
- }
}
}
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 710dd46bcf4616ea..c6e3aeb80184700e 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -11,12 +11,13 @@
li {
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 +34,12 @@
}
}
+ button {
+ padding-top: 0;
+ }
+
&.active a,
+ &.active button,
a.active {
color: $black;
font-weight: $gl-font-weight-bold;
@@ -42,6 +48,10 @@
color: $black;
}
}
+
+ &.md-header-tab.active button {
+ border-bottom: 2px solid $theme-gray-800;
+ }
}
}
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index 59bc3007a3c04136..0f709c65d0e67559 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
- %button.js-md-write-button{ href: "#md-write-holder", tabindex: -1 }
+ %button.js-md-write-button{ tabindex: -1 }
Write
%li.md-header-tab
- %button.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/spec/features/groups/milestone_spec.rb b/spec/features/groups/milestone_spec.rb
index 80df0618a6a4c732..e8ca6a6714fa4b62 100644
--- a/spec/features/groups/milestone_spec.rb
+++ b/spec/features/groups/milestone_spec.rb
@@ -23,17 +23,17 @@
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 5e8662100c537250..687a6f1eafc5ba58 100644
--- a/spec/features/issues/user_creates_issue_spec.rb
+++ b/spec/features/issues/user_creates_issue_spec.rb
@@ -47,15 +47,15 @@
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 1d9c3abc20feb92b..60b88ef4bdf4a001 100644
--- a/spec/features/issues/user_edits_issue_spec.rb
+++ b/spec/features/issues/user_edits_issue_spec.rb
@@ -17,9 +17,9 @@
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 6ac495aa03d9f493..71022c6bb0832730 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 @@
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 @@
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 6397df086a702bd6..29442a58ea4a15f2 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 @@
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 @@
# 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 6397a8ad8454845e..73ce8d2b996bb7ca 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 @@
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
--
GitLab
From a1ec1af31be0a588dd529380e28a8f47c7320aa6 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Mon, 8 Oct 2018 15:11:24 +0300
Subject: [PATCH 4/7] Restore markdown header tab layout
---
.../framework/secondary_navigation_elements.scss | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index c6e3aeb80184700e..dfacccb83752da0d 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -8,12 +8,13 @@
height: auto;
border-bottom: 1px solid $border-color;
- li {
+ li:not(.md-header-toolbar) {
display: flex;
a,
button {
padding: $gl-btn-padding;
+ padding-bottom: 11px;
font-size: 14px;
line-height: 28px;
color: $gl-text-color-secondary;
@@ -49,6 +50,10 @@
}
}
+ &.md-header-tab button {
+ line-height: 19px;
+ }
+
&.md-header-tab.active button {
border-bottom: 2px solid $theme-gray-800;
}
--
GitLab
From 139e58c7c1ea1393783553943a605d13624ad16b Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Tue, 16 Oct 2018 23:45:38 +0300
Subject: [PATCH 5/7] Restore theme based border for md header tabs
---
app/assets/stylesheets/framework/gitlab_theme.scss | 1 +
.../stylesheets/framework/secondary_navigation_elements.scss | 4 ----
2 files changed, 1 insertion(+), 4 deletions(-)
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 50ebc6d0dd12cb69..b8bb9e1e07b7675e 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/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index dfacccb83752da0d..78eed832e9cfa187 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -53,10 +53,6 @@
&.md-header-tab button {
line-height: 19px;
}
-
- &.md-header-tab.active button {
- border-bottom: 2px solid $theme-gray-800;
- }
}
}
--
GitLab
From 1b837e7a5371582cb15ad109d953df89bc41ec29 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Tue, 16 Oct 2018 23:58:50 +0300
Subject: [PATCH 6/7] Add flex direction in md header tabs
---
app/assets/stylesheets/framework/markdown_area.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 44211ff0e6cce32e..841eb6204987d2f7 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -76,6 +76,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;
--
GitLab
From 97d2a9a651e0d65b3729918ccc645cd81bed61a8 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Fri, 19 Oct 2018 13:27:51 +0300
Subject: [PATCH 7/7] Update specs for markdown header tab buttons s in epics
---
ee/spec/features/epics/update_epic_spec.rb | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/ee/spec/features/epics/update_epic_spec.rb b/ee/spec/features/epics/update_epic_spec.rb
index 40f55fe170dcabd1..1790e1dc54678f56 100644
--- a/ee/spec/features/epics/update_epic_spec.rb
+++ b/ee/spec/features/epics/update_epic_spec.rb
@@ -47,7 +47,7 @@
fill_in 'issue-description', with: 'New epic description'
page.within('.detail-page-description') do
- click_link('Preview')
+ click_button('Preview')
expect(find('.md-preview')).to have_content('New epic description')
end
@@ -97,7 +97,7 @@
expect(page.find_field("issue-description").value).to have_content('banana_sample')
page.within('.detail-page-description') do
- click_link('Preview')
+ click_button('Preview')
wait_for_requests
within('.md-preview') do
--
GitLab