Added soft wrap logic and button to editor
Added tests Added awesomeeeeee icons
This commit is contained in:
parent
7d79a94352
commit
ee02856d59
7 changed files with 124 additions and 2 deletions
|
@ -22,6 +22,7 @@
|
||||||
// submitted textarea
|
// submitted textarea
|
||||||
})(this));
|
})(this));
|
||||||
this.initModePanesAndLinks();
|
this.initModePanesAndLinks();
|
||||||
|
this.initSoftWrap();
|
||||||
new BlobLicenseSelectors({
|
new BlobLicenseSelectors({
|
||||||
editor: this.editor
|
editor: this.editor
|
||||||
});
|
});
|
||||||
|
@ -50,6 +51,7 @@
|
||||||
this.$editModePanes.hide();
|
this.$editModePanes.hide();
|
||||||
currentPane.fadeIn(200);
|
currentPane.fadeIn(200);
|
||||||
if (paneId === "#preview") {
|
if (paneId === "#preview") {
|
||||||
|
this.$toggleButton.hide();
|
||||||
return $.post(currentLink.data("preview-url"), {
|
return $.post(currentLink.data("preview-url"), {
|
||||||
content: this.editor.getValue()
|
content: this.editor.getValue()
|
||||||
}, function(response) {
|
}, function(response) {
|
||||||
|
@ -57,10 +59,51 @@
|
||||||
return currentPane.syntaxHighlight();
|
return currentPane.syntaxHighlight();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
this.$toggleButton.show();
|
||||||
return this.editor.focus();
|
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;
|
return EditBlob;
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -59,6 +59,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.encoding-selector,
|
.encoding-selector,
|
||||||
|
.soft-wrap-toggle,
|
||||||
.license-selector,
|
.license-selector,
|
||||||
.gitignore-selector,
|
.gitignore-selector,
|
||||||
.gitlab-ci-yml-selector {
|
.gitlab-ci-yml-selector {
|
||||||
|
|
|
@ -31,9 +31,10 @@ module AppearancesHelper
|
||||||
end
|
end
|
||||||
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.
|
# 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
|
# 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
|
||||||
end
|
end
|
||||||
|
|
|
@ -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 } } )
|
= 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
|
.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 } } )
|
= 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
|
.encoding-selector
|
||||||
= select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
|
= select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
|
||||||
|
|
||||||
|
|
3
app/views/shared/icons/_icon_no_wrap.svg.erb
Normal file
3
app/views/shared/icons/_icon_no_wrap.svg.erb
Normal file
|
@ -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>
|
After Width: | Height: | Size: 682 B |
3
app/views/shared/icons/_icon_soft_wrap.svg.erb
Normal file
3
app/views/shared/icons/_icon_soft_wrap.svg.erb
Normal file
|
@ -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>
|
After Width: | Height: | Size: 769 B |
67
spec/features/projects/files/edit_file_soft_wrap_spec.rb
Normal file
67
spec/features/projects/files/edit_file_soft_wrap_spec.rb
Normal file
|
@ -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
|
Loading…
Reference in a new issue