osr-plastic/osr-discourse-src
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Introduces select-kit

Browse Source 
* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:

```
computeValue()
computeContent()
mutateValue()
```
This commit is contained in:
Joffrey JAFFEUX
2017-11-21 11:53:09 +01:00
committed by GitHub
parent edc4b30f82
commit 39f3dbd945
191 changed files with 3160 additions and 2788 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/javascripts/acceptance/admin-flags-test.js.es6
+12 -12
View File
@@ -16,11 +16,11 @@ QUnit.test("flagged posts - agree", assert => {
visit("/admin/flags/active");
andThen(() => {
expandSelectBoxKit('.agree-flag');
expandSelectKit('.agree-flag');
});
andThen(() => {
selectBoxKitSelectRow('confirm-agree-keep', { selector: '.agree-flag'});
selectKitSelectRow('confirm-agree-keep', { selector: '.agree-flag'});
});
andThen(() => {
@@ -32,11 +32,11 @@ QUnit.test("flagged posts - agree + hide", assert => {
visit("/admin/flags/active");
andThen(() => {
expandSelectBoxKit('.agree-flag');
expandSelectKit('.agree-flag');
});
andThen(() => {
selectBoxKitSelectRow('confirm-agree-hide', { selector: '.agree-flag'});
selectKitSelectRow('confirm-agree-hide', { selector: '.agree-flag'});
});
andThen(() => {
@@ -48,11 +48,11 @@ QUnit.test("flagged posts - agree + deleteSpammer", assert => {
visit("/admin/flags/active");
andThen(() => {
expandSelectBoxKit('.agree-flag');
expandSelectKit('.agree-flag');
});
andThen(() => {
selectBoxKitSelectRow('delete-spammer', { selector: '.agree-flag'});
selectKitSelectRow('delete-spammer', { selector: '.agree-flag'});
});
click('.confirm-delete');
@@ -82,11 +82,11 @@ QUnit.test("flagged posts - delete + defer", assert => {
visit("/admin/flags/active");
andThen(() => {
expandSelectBoxKit('.delete-flag');
expandSelectKit('.delete-flag');
});
andThen(() => {
selectBoxKitSelectRow('delete-defer', { selector: '.delete-flag'});
selectKitSelectRow('delete-defer', { selector: '.delete-flag'});
});
andThen(() => {
@@ -98,11 +98,11 @@ QUnit.test("flagged posts - delete + agree", assert => {
visit("/admin/flags/active");
andThen(() => {
expandSelectBoxKit('.delete-flag');
expandSelectKit('.delete-flag');
});
andThen(() => {
selectBoxKitSelectRow('delete-agree', { selector: '.delete-flag'});
selectKitSelectRow('delete-agree', { selector: '.delete-flag'});
});
andThen(() => {
@@ -114,11 +114,11 @@ QUnit.test("flagged posts - delete + deleteSpammer", assert => {
visit("/admin/flags/active");
andThen(() => {
expandSelectBoxKit('.delete-flag');
expandSelectKit('.delete-flag');
});
andThen(() => {
selectBoxKitSelectRow('delete-spammer', { selector: '.delete-flag'});
selectKitSelectRow('delete-spammer', { selector: '.delete-flag'});
});
click('.confirm-delete');
test/javascripts/acceptance/admin-suspend-user-test.js.es6
+2 -2
View File
@@ -44,8 +44,8 @@ QUnit.test("suspend, then unsuspend a user", assert => {
andThen(() => {
assert.equal(find('.perform-suspend[disabled]').length, 1, 'disabled by default');
expandSelectBoxKit('.suspend-until .combobox');
selectBoxKitSelectRow('tomorrow', { selector: '.suspend-until .combobox'});
expandSelectKit('.suspend-until .combobox');
selectKitSelectRow('tomorrow', { selector: '.suspend-until .combobox'});
});
fillIn('.suspend-reason', "for breaking the rules");
test/javascripts/acceptance/category-chooser-test.js.es6
+3 -3
View File
@@ -11,10 +11,10 @@ QUnit.test("does not display uncategorized if not allowed", assert => {
visit("/");
click('#create-topic');
('.category-chooser');
expandSelectKit('.category-chooser');
andThen(() => {
assert.ok(selectBox('.category-chooser').rowByIndex(0).name() !== 'uncategorized');
assert.ok(selectKit('.category-chooser').rowByIndex(0).name() !== 'uncategorized');
});
});
@@ -22,6 +22,6 @@ QUnit.test("prefill category when category_id is set", assert => {
visit("/new-topic?category_id=1");
andThen(() => {
assert.equal(selectBox('.category-chooser').header.name(), 'bug');
assert.equal(selectKit('.category-chooser').header.name(), 'bug');
});
});
test/javascripts/acceptance/category-edit-test.js.es6
+2 -2
View File
@@ -75,9 +75,9 @@ QUnit.test("Subcategory list settings", assert => {
click('.edit-category-general');
expandSelectBoxKit('.edit-category-tab-general .category-chooser');
expandSelectKit('.edit-category-tab-general .category-chooser');
selectBoxKitSelectRow(3, {selector: '.edit-category-tab-general .category-chooser'});
selectKitSelectRow(3, {selector: '.edit-category-tab-general .category-chooser'});
click('.edit-category-settings');
andThen(() => {
test/javascripts/acceptance/composer-test.js.es6
+2 -2
View File
@@ -264,7 +264,7 @@ QUnit.test("Composer can toggle between reply and createTopic", assert => {
click('.topic-post:eq(0) button.reply');
click('button.options');
click('.popup-menu .d-icon-eye-slash');
click('.popup-menu .d-eye-slash');
andThen(() => {
assert.ok(
find('.composer-fields .whisper').text().indexOf(I18n.t("composer.whisper")) > 0,
@@ -286,7 +286,7 @@ QUnit.test("Composer can toggle between reply and createTopic", assert => {
});
click('button.options');
click('.popup-menu .d-icon-eye-slash');
click('.popup-menu .d-eye-slash');
andThen(() => {
assert.ok(
find('.composer-fields .whisper').text().indexOf(I18n.t("composer.unlist")) > 0,
test/javascripts/acceptance/search-full-test.js.es6
+16 -16
View File
@@ -136,10 +136,10 @@ QUnit.test("update category through advanced search ui", assert => {
visit("/search");
fillIn('.search input.full-page-search', 'none');
click('.search-advanced-btn');
fillIn('.search-advanced-options .category-selector', 'faq');
click('.search-advanced-options .category-selector');
keyEvent('.search-advanced-options .category-selector', 'keydown', 8);
keyEvent('.search-advanced-options .category-selector', 'keydown', 9);
expandSelectKit('.search-advanced-options .category-chooser');
selectKitFillInFilter('faq', { selector: '.search-advanced-options .category-chooser' });
selectKitSelectRow(4, { selector: '.search-advanced-options .category-chooser' });
andThen(() => {
assert.ok(exists('.search-advanced-options .badge-category:contains("faq")'), 'has "faq" populated');
@@ -257,12 +257,12 @@ QUnit.test("update in filter through advanced search ui", assert => {
fillIn('.search input.full-page-search', 'none');
click('.search-advanced-btn');
expandSelectBoxKit('.search-advanced-options .select-box-kit#in');
selectBoxKitSelectRow('bookmarks', { selector: '.search-advanced-options .select-box-kit#in' });
fillIn('.search-advanced-options .select-box-kit#in', 'bookmarks');
expandSelectKit('.search-advanced-options .select-kit#in');
selectKitSelectRow('bookmarks', { selector: '.search-advanced-options .select-kit#in' });
fillIn('.search-advanced-options .select-kit#in', 'bookmarks');
andThen(() => {
assert.ok(exists(selectBox('.search-advanced-options .select-box-kit#in').rowByName("I\'ve bookmarked").el), 'has "I\'ve bookmarked" populated');
assert.ok(exists(selectKit('.search-advanced-options .select-kit#in').rowByName("I\'ve bookmarked").el), 'has "I\'ve bookmarked" populated');
assert.equal(find('.search input.full-page-search').val(), "none in:bookmarks", 'has updated search term to "none in:bookmarks"');
});
});
@@ -271,12 +271,12 @@ QUnit.test("update status through advanced search ui", assert => {
visit("/search");
fillIn('.search input.full-page-search', 'none');
click('.search-advanced-btn');
expandSelectBoxKit('.search-advanced-options .select-box-kit#status');
selectBoxKitSelectRow('closed', { selector: '.search-advanced-options .select-box-kit#status' });
fillIn('.search-advanced-options .select-box-kit#status', 'closed');
expandSelectKit('.search-advanced-options .select-kit#status');
selectKitSelectRow('closed', { selector: '.search-advanced-options .select-kit#status' });
fillIn('.search-advanced-options .select-kit#status', 'closed');
andThen(() => {
assert.ok(exists(selectBox('.search-advanced-options .select-box-kit#status').rowByName("are closed").el), 'has "are closed" populated');
assert.ok(exists(selectKit('.search-advanced-options .select-kit#status').rowByName("are closed").el), 'has "are closed" populated');
assert.equal(find('.search input.full-page-search').val(), "none status:closed", 'has updated search term to "none status:closed"');
});
});
@@ -286,12 +286,12 @@ QUnit.test("update post time through advanced search ui", assert => {
fillIn('.search input.full-page-search', 'none');
click('.search-advanced-btn');
fillIn('#search-post-date', '2016-10-05');
expandSelectBoxKit('.search-advanced-options .select-box-kit#postTime');
selectBoxKitSelectRow('after', { selector: '.search-advanced-options .select-box-kit#postTime' });
fillIn('.search-advanced-options .select-box-kit#postTime', 'after');
expandSelectKit('.search-advanced-options .select-kit#postTime');
selectKitSelectRow('after', { selector: '.search-advanced-options .select-kit#postTime' });
fillIn('.search-advanced-options .select-kit#postTime', 'after');
andThen(() => {
assert.ok(exists(selectBox('.search-advanced-options .select-box-kit#postTime').rowByName("after").el), 'has "after" populated');
assert.ok(exists(selectKit('.search-advanced-options .select-kit#postTime').rowByName("after").el), 'has "after" populated');
assert.equal(find('.search-advanced-options #search-post-date').val(), "2016-10-05", 'has "2016-10-05" populated');
assert.equal(find('.search input.full-page-search').val(), "none after:2016-10-05", 'has updated search term to "none after:2016-10-05"');
});
test/javascripts/acceptance/search-test.js.es6
+22 -22
View File
@@ -89,20 +89,20 @@ QUnit.test("Search with context", assert => {
QUnit.test("Right filters are shown to anonymous users", assert => {
visit("/search?expanded=true");
expandSelectBoxKit(".select-box-kit#in");
expandSelectKit(".select-kit#in");
andThen(() => {
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=first]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=pinned]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=unpinned]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=wiki]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=images]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=first]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=pinned]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=unpinned]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=wiki]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=images]'));
assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=unseen]'));
assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=posted]'));
assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=watching]'));
assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=tracking]'));
assert.notOk(exists('.select-box-kit#in .select-box-kit-row[data-value=bookmarks]'));
assert.notOk(exists('.select-kit#in .select-kit-row[data-value=unseen]'));
assert.notOk(exists('.select-kit#in .select-kit-row[data-value=posted]'));
assert.notOk(exists('.select-kit#in .select-kit-row[data-value=watching]'));
assert.notOk(exists('.select-kit#in .select-kit-row[data-value=tracking]'));
assert.notOk(exists('.select-kit#in .select-kit-row[data-value=bookmarks]'));
assert.notOk(exists('.search-advanced-options .in-likes'));
assert.notOk(exists('.search-advanced-options .in-private'));
@@ -115,20 +115,20 @@ QUnit.test("Right filters are shown to logged-in users", assert => {
Discourse.reset();
visit("/search?expanded=true");
expandSelectBoxKit(".select-box-kit#in");
expandSelectKit(".select-kit#in");
andThen(() => {
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=first]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=pinned]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=unpinned]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=wiki]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=images]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=first]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=pinned]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=unpinned]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=wiki]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=images]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=unseen]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=posted]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=watching]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=tracking]'));
assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=bookmarks]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=unseen]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=posted]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=watching]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=tracking]'));
assert.ok(exists('.select-kit#in .select-kit-row[data-value=bookmarks]'));
assert.ok(exists('.search-advanced-options .in-likes'));
assert.ok(exists('.search-advanced-options .in-private'));
test/javascripts/acceptance/topic-notifications-button-test.js.es6
+3 -3
View File
@@ -28,12 +28,12 @@ QUnit.test("Updating topic notification level", assert => {
);
});
expandSelectBoxKit(notificationOptions);
selectBoxKitSelectRow("3", { selector: notificationOptions});
expandSelectKit(notificationOptions);
selectKitSelectRow("3", { selector: notificationOptions});
andThen(() => {
assert.equal(
selectBox(notificationOptions).selectedRow.name(),
selectKit(notificationOptions).selectedRow.name(),
"watching",
"it should display the right notification level"
);
test/javascripts/acceptance/topic-test.js.es6
+6 -6
View File
@@ -33,7 +33,7 @@ QUnit.test("Share Popup", assert => {
QUnit.test("Showing and hiding the edit controls", assert => {
visit("/t/internationalization-localization/280");
click('#topic-title .d-icon-pencil');
click('#topic-title .d-pencil');
andThen(() => {
assert.ok(exists('#edit-title'), 'it shows the editing controls');
@@ -49,13 +49,13 @@ QUnit.test("Showing and hiding the edit controls", assert => {
QUnit.test("Updating the topic title and category", assert => {
visit("/t/internationalization-localization/280");
click('#topic-title .d-icon-pencil');
click('#topic-title .d-pencil');
fillIn('#edit-title', 'this is the new title');
expandSelectBoxKit('.title-wrapper .category-chooser');
expandSelectKit('.title-wrapper .category-chooser');
selectBoxKitSelectRow(4, {selector: '.title-wrapper .category-chooser'});
selectKitSelectRow(4, {selector: '.title-wrapper .category-chooser'});
click('#topic-title .submit-edit');
@@ -103,7 +103,7 @@ QUnit.test("Reply as new topic", assert => {
"it fills composer with the ring string"
);
assert.equal(
selectBox('.category-chooser').header.name(), "feature",
selectKit('.category-chooser').header.name(), "feature",
"it fills category selector with the right category"
);
});
@@ -164,7 +164,7 @@ QUnit.test("Visit topic routes", assert => {
QUnit.test("Updating the topic title with emojis", assert => {
visit("/t/internationalization-localization/280");
click('#topic-title .d-icon-pencil');
click('#topic-title .d-pencil');
fillIn('#edit-title', 'emojis title :bike: :blonde_woman:t6:');