Add inline editing to issues on mobile

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

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,56 +72,52 @@
           Preview
         </a>
       </li>
-      <li class="pull-right">
-        <div class="toolbar-group">
-          <toolbar-button
-            tag="**"
-            button-title="Add bold text"
-            icon="bold" />
-          <toolbar-button
-            tag="*"
-            button-title="Add italic text"
-            icon="italic" />
-          <toolbar-button
-            tag="> "
-            :prepend="true"
-            button-title="Insert a quote"
-            icon="quote" />
-          <toolbar-button
-            tag="`"
-            tag-block="```"
-            button-title="Insert code"
-            icon="code" />
-          <toolbar-button
-            tag="* "
-            :prepend="true"
-            button-title="Add a bullet list"
-            icon="list-bulleted" />
-          <toolbar-button
-            tag="1. "
-            :prepend="true"
-            button-title="Add a numbered list"
-            icon="list-numbered" />
-          <toolbar-button
-            tag="* [ ] "
-            :prepend="true"
-            button-title="Add a task list"
-            icon="task-done" />
-        </div>
-        <div class="toolbar-group">
-          <button
-            v-tooltip
-            aria-label="Go full screen"
-            class="toolbar-btn js-zen-enter"
-            data-container="body"
-            tabindex="-1"
-            title="Go full screen"
-            type="button">
-            <icon
-              name="screen-full">
-            </icon>
-          </button>
-        </div>
+      <li class="md-header-toolbar">
+        <toolbar-button
+          tag="**"
+          button-title="Add bold text"
+          icon="bold" />
+        <toolbar-button
+          tag="*"
+          button-title="Add italic text"
+          icon="italic" />
+        <toolbar-button
+          tag="> "
+          :prepend="true"
+          button-title="Insert a quote"
+          icon="quote" />
+        <toolbar-button
+          tag="`"
+          tag-block="```"
+          button-title="Insert code"
+          icon="code" />
+        <toolbar-button
+          tag="* "
+          :prepend="true"
+          button-title="Add a bullet list"
+          icon="list-bulleted" />
+        <toolbar-button
+          tag="1. "
+          :prepend="true"
+          button-title="Add a numbered list"
+          icon="list-numbered" />
+        <toolbar-button
+          tag="* [ ] "
+          :prepend="true"
+          button-title="Add a task list"
+          icon="task-done" />
+        <button
+          v-tooltip
+          aria-label="Go full screen"
+          class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
+          data-container="body"
+          tabindex="-1"
+          title="Go full screen"
+          type="button">
+          <icon
+            name="screen-full">
+          </icon>
+        </button>
       </li>
     </ul>
   </div>

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"

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;
@@ -126,16 +149,6 @@
   }
 }
 
-.toolbar-group {
-  float: left;
-  margin-right: -5px;
-  margin-left: $gl-padding;
-
-  &:first-child {
-    margin-left: 0;
-  }
-}
-
 .toolbar-btn {
   float: left;
   padding: 0 7px;
@@ -158,6 +171,16 @@
   }
 }
 
+.toolbar-fullscreen-btn {
+  margin-left: $gl-padding;
+  margin-right: -5px;
+
+  @media(max-width: $screen-xs-max) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 .atwho-view {
   overflow-y: auto;
   overflow-x: hidden;

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],

app/views/projects/_md_preview.html.haml

@@ -10,25 +10,23 @@
 .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
-        .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" })
-          = markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })
-          = markdown_toolbar_button({ icon: "code", data: { "md-tag" => "`", "md-block" => "```" }, title: "Insert code" })
-          = markdown_toolbar_button({ icon: "list-bulleted", data: { "md-tag" => "* ", "md-prepend" => true }, title: "Add a bullet list" })
-          = markdown_toolbar_button({ icon: "list-numbered", data: { "md-tag" => "1. ", "md-prepend" => true }, title: "Add a numbered list" })
-          = markdown_toolbar_button({ icon: "task-done", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: "Add a task list" })
-        .toolbar-group
-          %button.toolbar-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, aria: { label: "Go full screen" }, title: "Go full screen", data: { container: "body" } }
-            = sprite_icon("screen-full")
+      %li.md-header-toolbar
+        = markdown_toolbar_button({ icon: "bold", data: { "md-tag" => "**" }, title: "Add bold text" })
+        = markdown_toolbar_button({ icon: "italic", data: { "md-tag" => "*" }, title: "Add italic text" })
+        = markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })
+        = markdown_toolbar_button({ icon: "code", data: { "md-tag" => "`", "md-block" => "```" }, title: "Insert code" })
+        = markdown_toolbar_button({ icon: "list-bulleted", data: { "md-tag" => "* ", "md-prepend" => true }, title: "Add a bullet list" })
+        = markdown_toolbar_button({ icon: "list-numbered", data: { "md-tag" => "1. ", "md-prepend" => true }, title: "Add a numbered list" })
+        = markdown_toolbar_button({ icon: "task-done", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: "Add a task list" })
+        %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, aria: { label: "Go full screen" }, title: "Go full screen", data: { container: "body" } }
+          = sprite_icon("screen-full")
 
   .md-write-holder
     = yield

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

changelogs/unreleased/39497-inline-edit-issue-on-mobile.yml

+---
+title: Add inline editing to issues on mobile
+merge_request: 15438
+author:
+type: changed