Add inline editing to issues on mobile39497-inline-edit-issue-on-mobile

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/39497

7 files changed, 41 insertions, 9 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 70f5fc1d664..09a17780c2a 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -50,7 +50,9 @@
 <template>
   <div class="md-header">
     <ul class="nav-links clearfix">
-      <li :class="{ active: !previewMarkdown }">
+      <li
+        class="md-header-tab"
+        :class="{ active: !previewMarkdown }">
         <a
           class="js-write-link"
           href="#md-write-holder"
@@ -59,7 +61,9 @@
           Write
         </a>
       </li>
-      <li :class="{ active: previewMarkdown }">
+      <li
+        class="md-header-tab"
+        :class="{ active: previewMarkdown }">
         <a
           class="js-preview-link"
           href="#md-preview-holder"
@@ -68,7 +72,7 @@
           Preview
         </a>
       </li>
-      <li class="pull-right">
+      <li class="md-header-toolbar">
         <div class="toolbar-group">
           <toolbar-button
             tag="**"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index b930fb116a3..e3e41f8f0ca 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -40,7 +40,7 @@
   <button
     v-tooltip
     type="button"
-    class="toolbar-btn js-md hidden-xs"
+    class="toolbar-btn js-md"
     tabindex="-1"
     data-container="body"
     :data-md-tag="tag"
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index cd6f94fb354..11d327dc4e0 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -57,6 +57,7 @@
 .md-header {
   .nav-links {
     a {
+      width: 100%;
       padding-top: 0;
       line-height: 19px;
 
@@ -72,6 +73,28 @@
   }
 }
 
+.md-header-tab {
+  @media(max-width: $screen-xs-max) {
+    flex: 1;
+    width: 100%;
+    border-bottom: 1px solid $border-color;
+    text-align: center;
+  }
+}
+
+.md-header-toolbar {
+  margin-left: auto;
+
+  @media(max-width: $screen-xs-max) {
+    flex: none;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding-top: $gl-padding-top;
+    padding-bottom: $gl-padding-top;
+  }
+}
+
 .referenced-users {
   color: $gl-text-color;
   padding-top: 10px;
diff --git a/app/helpers/markup_helper.rb b/app/helpers/markup_helper.rb
index 2c85d7d7720..59f3c54d30c 100644
--- a/app/helpers/markup_helper.rb
+++ b/app/helpers/markup_helper.rb
@@ -221,7 +221,7 @@ module MarkupHelper
     data = options[:data].merge({ container: 'body' })
     content_tag :button,
       type: 'button',
-      class: 'toolbar-btn js-md has-tooltip hidden-xs',
+      class: 'toolbar-btn js-md has-tooltip',
       tabindex: -1,
       data: data,
       title: options[:title],
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index f8a2ea18989..c1e953bff63 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -10,14 +10,14 @@
 .md-area
   .md-header
     %ul.nav-links.clearfix
-      %li.active
+      %li.md-header-tab.active
         %a.js-md-write-button{ href: "#md-write-holder", tabindex: -1 }
           Write
-      %li
+      %li.md-header-tab
         %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
           Preview
 
-      %li.pull-right
+      %li.md-header-toolbar
         .toolbar-group
           = markdown_toolbar_button({ icon: "bold", data: { "md-tag" => "**" }, title: "Add bold text" })
           = markdown_toolbar_button({ icon: "italic", data: { "md-tag" => "*" }, title: "Add italic text" })
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index b9fec8af4d7..0ab248ecb97 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -40,7 +40,7 @@
       .dropdown-menu.dropdown-menu-align-right.hidden-lg
         %ul
           - if can_update_issue
-            %li= link_to 'Edit', edit_project_issue_path(@project, @issue)
+            %li= link_to 'Edit', edit_project_issue_path(@project, @issue), class: 'issuable-edit'
           - unless current_user == @issue.author
             %li= link_to 'Report abuse', new_abuse_report_path(user_id: @issue.author.id, ref_url: issue_url(@issue))
           - if can_update_issue
diff --git a/changelogs/unreleased/39497-inline-edit-issue-on-mobile.yml b/changelogs/unreleased/39497-inline-edit-issue-on-mobile.yml
new file mode 100644
index 00000000000..fc7c024f95a
--- /dev/null
+++ b/changelogs/unreleased/39497-inline-edit-issue-on-mobile.yml
@@ -0,0 +1,5 @@
+---
+title: Add inline editing to issues on mobile
+merge_request: 15438
+author:
+type: changed