Skip to content

G
gitlab-ce
Commit 6c4f2802 authored by Eric Eastwood's avatar Eric Eastwood
Browse files
Options

Add inline editing to issues on mobile 

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/39497
parent 0f5faea4
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 79 deletions
app/assets/javascripts/vue_shared/components/markdown/header.vue
View file @ 6c4f2802
...@@ -50,7 +50,9 @@ ...@@ -50,7 +50,9 @@
<template> <template>
<div class="md-header"> <div class="md-header">
<ul class="nav-links clearfix"> <ul class="nav-links clearfix">
<li :class="{ active: !previewMarkdown }"> <li
class="md-header-tab"
:class="{ active: !previewMarkdown }">
<a <a
class="js-write-link" class="js-write-link"
href="#md-write-holder" href="#md-write-holder"
...@@ -59,7 +61,9 @@ ...@@ -59,7 +61,9 @@
Write Write
</a> </a>
</li> </li>
<li :class="{ active: previewMarkdown }"> <li
class="md-header-tab"
:class="{ active: previewMarkdown }">
<a <a
class="js-preview-link" class="js-preview-link"
href="#md-preview-holder" href="#md-preview-holder"
...@@ -68,56 +72,52 @@ ...@@ -68,56 +72,52 @@
Preview Preview
</a> </a>
</li> </li>
<li class="pull-right"> <li class="md-header-toolbar">
<div class="toolbar-group"> <toolbar-button
<toolbar-button tag="**"
tag="**" button-title="Add bold text"
button-title="Add bold text" icon="bold" />
icon="bold" /> <toolbar-button
<toolbar-button tag="*"
tag="*" button-title="Add italic text"
button-title="Add italic text" icon="italic" />
icon="italic" /> <toolbar-button
<toolbar-button tag="> "
tag="> " :prepend="true"
:prepend="true" button-title="Insert a quote"
button-title="Insert a quote" icon="quote" />
icon="quote" /> <toolbar-button
<toolbar-button tag="`"
tag="`" tag-block="```"
tag-block="```" button-title="Insert code"
button-title="Insert code" icon="code" />
icon="code" /> <toolbar-button
<toolbar-button tag="* "
tag="* " :prepend="true"
:prepend="true" button-title="Add a bullet list"
button-title="Add a bullet list" icon="list-bulleted" />
icon="list-bulleted" /> <toolbar-button
<toolbar-button tag="1. "
tag="1. " :prepend="true"
:prepend="true" button-title="Add a numbered list"
button-title="Add a numbered list" icon="list-numbered" />
icon="list-numbered" /> <toolbar-button
<toolbar-button tag="* [ ] "
tag="* [ ] " :prepend="true"
:prepend="true" button-title="Add a task list"
button-title="Add a task list" icon="task-done" />
icon="task-done" /> <button
</div> v-tooltip
<div class="toolbar-group"> aria-label="Go full screen"
<button class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
v-tooltip data-container="body"
aria-label="Go full screen" tabindex="-1"
class="toolbar-btn js-zen-enter" title="Go full screen"
data-container="body" type="button">
tabindex="-1" <icon
title="Go full screen" name="screen-full">
type="button"> </icon>
<icon </button>
name="screen-full">
</icon>
</button>
</div>
</li> </li>
</ul> </ul>
</div> </div>
......
app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
View file @ 6c4f2802
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<button <button
v-tooltip v-tooltip
type="button" type="button"
class="toolbar-btn js-md hidden-xs" class="toolbar-btn js-md"
tabindex="-1" tabindex="-1"
data-container="body" data-container="body"
:data-md-tag="tag" :data-md-tag="tag"
......
app/assets/stylesheets/framework/markdown_area.scss
View file @ 6c4f2802
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
.md-header { .md-header {
.nav-links { .nav-links {
a { a {
width: 100%;
padding-top: 0; padding-top: 0;
line-height: 19px; line-height: 19px;
...@@ -72,6 +73,28 @@ ...@@ -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 { .referenced-users {
color: $gl-text-color; color: $gl-text-color;
padding-top: 10px; padding-top: 10px;
...@@ -126,16 +149,6 @@ ...@@ -126,16 +149,6 @@
} }
} }
.toolbar-group {
float: left;
margin-right: -5px;
margin-left: $gl-padding;
&:first-child {
margin-left: 0;
}
}
.toolbar-btn { .toolbar-btn {
float: left; float: left;
padding: 0 7px; padding: 0 7px;
...@@ -158,6 +171,16 @@ ...@@ -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 { .atwho-view {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
......
app/helpers/markup_helper.rb
View file @ 6c4f2802
...@@ -221,7 +221,7 @@ module MarkupHelper ...@@ -221,7 +221,7 @@ module MarkupHelper
data = options[:data].merge({ container: 'body' }) data = options[:data].merge({ container: 'body' })
content_tag :button, content_tag :button,
type: 'button', type: 'button',
class: 'toolbar-btn js-md has-tooltip hidden-xs', class: 'toolbar-btn js-md has-tooltip',
tabindex: -1, tabindex: -1,
data: data, data: data,
title: options[:title], title: options[:title],
......
app/views/projects/_md_preview.html.haml
View file @ 6c4f2802
...@@ -10,25 +10,23 @@ ...@@ -10,25 +10,23 @@
.md-area .md-area
.md-header .md-header
%ul.nav-links.clearfix %ul.nav-links.clearfix
%li.active %li.md-header-tab.active
%a.js-md-write-button{ href: "#md-write-holder", tabindex: -1 } %a.js-md-write-button{ href: "#md-write-holder", tabindex: -1 }
Write Write
%li %li.md-header-tab
%a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 } %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
Preview 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: "bold", data: { "md-tag" => "**" }, title: "Add bold text" }) = markdown_toolbar_button({ icon: "italic", data: { "md-tag" => "*" }, title: "Add italic 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: "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: "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-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: "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" })
= 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" } }
.toolbar-group = sprite_icon("screen-full")
%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")
.md-write-holder .md-write-holder
= yield = yield
......
app/views/projects/issues/show.html.haml
View file @ 6c4f2802
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
.dropdown-menu.dropdown-menu-align-right.hidden-lg .dropdown-menu.dropdown-menu-align-right.hidden-lg
%ul %ul
- if can_update_issue - 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 - unless current_user == @issue.author
%li= link_to 'Report abuse', new_abuse_report_path(user_id: @issue.author.id, ref_url: issue_url(@issue)) %li= link_to 'Report abuse', new_abuse_report_path(user_id: @issue.author.id, ref_url: issue_url(@issue))
- if can_update_issue - if can_update_issue
......
changelogs/unreleased/39497-inline-edit-issue-on-mobile.yml 0 → 100644
View file @ 6c4f2802
---
title: Add inline editing to issues on mobile
merge_request: 15438
author:
type: changed
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7