Added soft wrap logic and button to editor

Added tests

Added awesomeeeeee icons
This commit is contained in:
Luke Bennett 2016-09-02 19:42:42 +01:00 committed by Fatih Acet
parent 7d79a94352
commit ee02856d59
7 changed files with 124 additions and 2 deletions

View file

@ -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;
})();

View file

@ -59,6 +59,7 @@
}
.encoding-selector,
.soft-wrap-toggle,
.license-selector,
.gitignore-selector,
.gitlab-ci-yml-selector {

View file

@ -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

View file

@ -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'

View 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

View 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

View 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