summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/assets/javascripts/blob_edit/edit_blob.js43
-rw-r--r--app/assets/stylesheets/pages/editor.scss1
-rw-r--r--app/helpers/appearances_helper.rb5
-rw-r--r--app/views/projects/blob/_editor.html.haml4
-rw-r--r--app/views/shared/icons/_icon_no_wrap.svg.erb3
-rw-r--r--app/views/shared/icons/_icon_soft_wrap.svg.erb3
-rw-r--r--spec/features/projects/files/edit_file_soft_wrap_spec.rb67
7 files changed, 124 insertions, 2 deletions
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index b846bab0424..8f4a2c7ae84 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -22,6 +22,7 @@
// submitted textarea
})(this));
this.initModePanesAndLinks();
+ this.initSoftWrap();
new BlobLicenseSelectors({
editor: this.editor
});
@@ -50,6 +51,7 @@
this.$editModePanes.hide();
currentPane.fadeIn(200);
if (paneId === "#preview") {
+ this.$toggleButton.hide();
return $.post(currentLink.data("preview-url"), {
content: this.editor.getValue()
}, function(response) {
@@ -57,10 +59,51 @@
return currentPane.syntaxHighlight();
});
} else {
+ this.$toggleButton.show();
return this.editor.focus();
}
};
+ EditBlob.prototype.initSoftWrap = function() {
+ this.isExplicitySelected = false
+ this.$filePathInput = $('#file_path, #file_name');
+ this.$toggleButton = $('.soft-wrap-toggle');
+ this.$toggleText = $('span', this.$toggleButton);
+ this.$noWrapIcon = $('.no-wrap-icon', this.$toggleButton);
+ this.$softWrapIcon = $('.soft-wrap-icon', this.$toggleButton);
+ this.checkFilePathIsCode();
+ this.$filePathInput.on('keyup', _.debounce(this.checkFilePathIsCode.bind(this), 300));
+ this.$toggleButton.on('click', this.clickSoftWrapButton.bind(this));
+ };
+
+ EditBlob.prototype.toggleSoftWrap = function(forceToggle) {
+ if (_.isBoolean(forceToggle)) {
+ this.isSoftWrapped = forceToggle;
+ } else {
+ this.isSoftWrapped = !this.isSoftWrapped;
+ }
+ if(this.isSoftWrapped) {
+ this.$toggleText.text('No wrap');
+ this.$noWrapIcon.removeClass('hidden');
+ this.$softWrapIcon.addClass('hidden');
+ } else {
+ this.$toggleText.text('Soft wrap');
+ this.$softWrapIcon.removeClass('hidden');
+ this.$noWrapIcon.addClass('hidden');
+ }
+ this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
+ };
+
+ EditBlob.prototype.checkFilePathIsCode = function() {
+ var isNotCode = /^(.*?\.(txt|md)|[^.]*?)$/i.test(this.$filePathInput.val());
+ if (!this.isExplicitySelected) this.toggleSoftWrap(isNotCode);
+ };
+
+ EditBlob.prototype.clickSoftWrapButton = function() {
+ if (!this.isExplicitySelected) this.isExplicitySelected = true;
+ this.toggleSoftWrap();
+ };
+
return EditBlob;
})();
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 1aa4e06d975..ffd6089c100 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -59,6 +59,7 @@
}
.encoding-selector,
+ .soft-wrap-toggle,
.license-selector,
.gitignore-selector,
.gitlab-ci-yml-selector {
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index de13e7a1fc2..1e8ddb9d423 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -31,9 +31,10 @@ module AppearancesHelper
end
end
- def custom_icon(icon_name, size: 16)
+ def custom_icon(icon_name, opts = {})
+ opts[:size] = 16 unless opts[:size]
# We can't simply do the below, because there are some .erb SVGs.
# File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
- render "shared/icons/#{icon_name}.svg", size: size
+ render "shared/icons/#{icon_name}.svg", opts
end
end
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 0237e152b54..f225b1be59e 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -21,6 +21,10 @@
= dropdown_tag("Choose a .gitignore template", options: { toggle_class: 'js-gitignore-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
.gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.hidden
= dropdown_tag("Choose a GitLab CI Yaml template", options: { toggle_class: 'js-gitlab-ci-yml-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
+ = button_tag class: 'soft-wrap-toggle btn', type: 'button' do
+ = custom_icon('icon_soft_wrap', klass: 'soft-wrap-icon')
+ = custom_icon('icon_no_wrap', klass: 'no-wrap-icon hidden')
+ %span Soft wrap
.encoding-selector
= select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
diff --git a/app/views/shared/icons/_icon_no_wrap.svg.erb b/app/views/shared/icons/_icon_no_wrap.svg.erb
new file mode 100644
index 00000000000..e4c44091ddd
--- /dev/null
+++ b/app/views/shared/icons/_icon_no_wrap.svg.erb
@@ -0,0 +1,3 @@
+<svg class="<%= klass %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="m6 11h-4.509c-.263 0-.491.226-.491.505v.991c0 .291.22.505.491.505h4.509v.679c0 .301.194.413.454.236l2.355-1.607c.251-.171.259-.442 0-.619l-2.355-1.607c-.251-.171-.454-.07-.454.236v.681m-5-7.495c0-.279.22-.505.498-.505h13c.275 0 .498.214.498.505v.991c0 .279-.22.505-.498.505h-13c-.275 0-.498-.214-.498-.505v-.991m10 8c0-.279.215-.505.49-.505h3.02c.271 0 .49.214.49.505v.991c0 .279-.215.505-.49.505h-3.02c-.271 0-.49-.214-.49-.505v-.991m-10-4c0-.279.22-.505.498-.505h13c.275 0 .498.214.498.505v.991c0 .279-.22.505-.498.505h-13c-.275 0-.498-.214-.498-.505v-.991"/>
+</svg>
diff --git a/app/views/shared/icons/_icon_soft_wrap.svg.erb b/app/views/shared/icons/_icon_soft_wrap.svg.erb
new file mode 100644
index 00000000000..d9613b0c3d7
--- /dev/null
+++ b/app/views/shared/icons/_icon_soft_wrap.svg.erb
@@ -0,0 +1,3 @@
+<svg class="<%= klass %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="m12 11h-2v-.681c0-.307-.203-.407-.454-.236l-2.355 1.607c-.259.177-.251.448 0 .619l2.355 1.607c.259.177.454.065.454-.236v-.679h2c0 0 0 0 0 0 1.657 0 3-1.343 3-3 0-.828-.336-1.578-.879-2.121-.543-.543-1.293-.879-2.121-.879-.001 0-.002 0-.002 0h-10.497c-.271 0-.5.226-.5.505v.991c0 .291.224.505.5.505h10.497c.001 0 .002 0 .002 0 .552 0 1 .448 1 1 0 .276-.112.526-.293.707-.181.181-.431.293-.707.293m-11-7.495c0-.279.22-.505.498-.505h13c.275 0 .498.214.498.505v.991c0 .279-.22.505-.498.505h-13c-.275 0-.498-.214-.498-.505v-.991m0 8c0-.279.215-.505.49-.505h3.02c.271 0 .49.214.49.505v.991c0 .279-.215.505-.49.505h-3.02c-.271 0-.49-.214-.49-.505v-.991"/>
+</svg>
diff --git a/spec/features/projects/files/edit_file_soft_wrap_spec.rb b/spec/features/projects/files/edit_file_soft_wrap_spec.rb
new file mode 100644
index 00000000000..7ad90b4a89c
--- /dev/null
+++ b/spec/features/projects/files/edit_file_soft_wrap_spec.rb
@@ -0,0 +1,67 @@
+require 'spec_helper'
+
+feature 'User uses soft wrap whilst editing file', feature: true, js: true do
+ before do
+ user = create(:user)
+ project = create(:project)
+ project.team << [user, :master]
+ login_as user
+ visit namespace_project_new_blob_path(project.namespace, project, 'master', file_name: 'test_file-name')
+ editor = find('.file-editor.code')
+ editor.click
+ editor.send_keys 'Touch water with paw then recoil in horror chase dog then
+ run away chase the pig around the house eat owner\'s food, and knock
+ dish off table head butt cant eat out of my own dish. Cat is love, cat
+ is life rub face on everything poop on grasses so meow. Playing with
+ balls of wool flee in terror at cucumber discovered on floor run in
+ circles tuxedo cats always looking dapper, but attack dog, run away
+ and pretend to be victim so all of a sudden cat goes crazy, yet chase
+ laser. Make muffins sit in window and stare ooo, a bird! yum lick yarn
+ hanging out of own butt jump off balcony, onto stranger\'s head yet
+ chase laser. Purr for no reason stare at ceiling hola te quiero.'.squish
+ end
+
+ let(:toggle_button) { find('.soft-wrap-toggle') }
+
+ scenario 'user clicks the "No wrap" button and then "Soft wrap" button' do
+ wrapped_content_width = get_content_width
+ toggle_button.click
+ expect(toggle_button).to have_content 'Soft wrap'
+ unwrapped_content_width = get_content_width
+ expect(unwrapped_content_width).to be > wrapped_content_width
+
+ toggle_button.click
+ expect(toggle_button).to have_content 'No wrap'
+ expect(get_content_width).to be < unwrapped_content_width
+ end
+
+ scenario 'user adds a ".js" extension and then changes to a ".md" extension' do
+ wrapped_content_width = get_content_width
+
+ fill_in 'file_name', with: 'test_file-name.js'
+ expect(toggle_button).to have_content 'Soft wrap'
+ unwrapped_content_width = get_content_width
+ expect(unwrapped_content_width).to be > wrapped_content_width
+
+ fill_in 'file_name', with: 'test_file-name.md'
+ expect(toggle_button).to have_content 'No wrap'
+ expect(get_content_width).to be < unwrapped_content_width
+ end
+
+ scenario 'user clicks "No wrap" and then changes to a ".md" extension' do
+ wrapped_content_width = get_content_width
+
+ toggle_button.click
+ expect(toggle_button).to have_content 'Soft wrap'
+ unwrapped_content_width = get_content_width
+ expect(unwrapped_content_width).to be > wrapped_content_width
+
+ fill_in 'file_name', with: 'test_file-name.md'
+ expect(toggle_button).to have_content 'Soft wrap'
+ expect(unwrapped_content_width).to be == get_content_width
+ end
+
+ def get_content_width
+ find('.ace_content')[:style].slice!(/width: \d+/).slice!(/\d+/)
+ end
+end
View Lorry Controller Status