diff --git a/app/assets/javascripts/admin/templates/customize-themes-show.hbs b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
index 2fed8ebdf29..6b02429d77d 100644
--- a/app/assets/javascripts/admin/templates/customize-themes-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
@@ -36,11 +36,11 @@
{{i18n "admin.customize.theme.color_scheme"}}
{{i18n "admin.customize.theme.color_scheme_select"}}
- {{d-select-box content=colorSchemes
- textKey="name"
- filterable=true
- value=colorSchemeId
- icon="paint-brush"}}
+
{{select-box content=colorSchemes
+ textKey="name"
+ filterable=true
+ value=colorSchemeId
+ icon="paint-brush"}}
{{#if colorSchemeChanged}}
{{d-button action="changeScheme" class="btn-primary btn-small submit-edit" icon="check"}}
{{d-button action="cancelChangeScheme" class="btn-small cancel-edit" icon="times"}}
diff --git a/app/assets/javascripts/discourse/components/category-select-box.js.es6 b/app/assets/javascripts/discourse/components/category-select-box.js.es6
new file mode 100644
index 00000000000..d411e2e8a09
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/category-select-box.js.es6
@@ -0,0 +1,107 @@
+import SelectBoxComponent from "discourse/components/select-box";
+import { categoryBadgeHTML } from 'discourse/helpers/category-link';
+import { observes, on } from 'ember-addons/ember-computed-decorators';
+import PermissionType from 'discourse/models/permission-type';
+import Category from 'discourse/models/category';
+
+export default SelectBoxComponent.extend({
+ classNames: ["category-select-box"],
+
+ textKey: "name",
+
+ filterable: true,
+
+ castInteger: true,
+
+ width: '100%',
+
+ @on("willInsertElement")
+ @observes("selectedContent")
+ _setHeaderText: function() {
+ let headerText;
+
+ if (Ember.isNone(this.get("selectedContent"))) {
+ if (this.siteSettings.allow_uncategorized_topics) {
+ headerText = Ember.get(Category.findUncategorized(), this.get("textKey"));
+ } else {
+ headerText = I18n.t("category.choose");
+ }
+ } else {
+ headerText = this.get("selectedContent.text");
+ }
+
+ this.set("headerText", headerText);
+ },
+
+ // original method is kept for compatibility
+ selectBoxRowTemplate: function() {
+ return (rowComponent) => this.rowContentTemplate(rowComponent.get("content"));
+ }.property(),
+
+ @observes("scopedCategoryId", "categories")
+ _scopeCategories() {
+ let scopedCategoryId = this.get("scopedCategoryId");
+ const categories = this.get("categories");
+
+ // Always scope to the parent of a category, if present
+ if (scopedCategoryId) {
+ const scopedCat = Category.findById(scopedCategoryId);
+ scopedCategoryId = scopedCat.get("parent_category_id") || scopedCat.get("id");
+ }
+
+ const excludeCategoryId = this.get("excludeCategoryId");
+
+ const filteredCategories = categories.filter(c => {
+ const categoryId = c.get("id");
+ if (scopedCategoryId && categoryId !== scopedCategoryId && c.get("parent_category_id") !== scopedCategoryId) { return false; }
+ if (excludeCategoryId === categoryId) { return false; }
+ return c.get("permission") === PermissionType.FULL;
+ });
+
+ this.set("content", filteredCategories);
+ },
+
+ @on("init")
+ @observes("site.sortedCategories")
+ _updateCategories() {
+ if (!this.get("categories")) {
+ const categories = Discourse.SiteSettings.fixed_category_positions_on_create ?
+ Category.list() :
+ Category.listByActivity();
+ this.set("categories", categories);
+ }
+ },
+
+ rowContentTemplate(item) {
+ let category;
+ let result = '
';
+
+ // If we have no id, but text with the uncategorized name, we can use that badge.
+ if (Ember.isEmpty(item.id)) {
+ const uncat = Category.findUncategorized();
+ if (uncat && uncat.get("name") === item.text) {
+ category = uncat;
+ }
+ } else {
+ category = Category.findById(parseInt(item.id,10));
+ }
+
+ if (!category) return item.text;
+ result += categoryBadgeHTML(category, {link: false, allowUncategorized: true, hideParent: true});
+ const parentCategoryId = category.get("parent_category_id");
+
+ if (parentCategoryId) {
+ result += categoryBadgeHTML(Category.findById(parentCategoryId), {link: false}) + " " + result;
+ }
+
+ result += ` × ${category.get("topic_count")}
`;
+
+ const description = category.get("description");
+ // TODO wtf how can this be null?;
+ if (description && description !== 'null') {
+ result += `${description.substr(0, 200)}${description.length > 200 ? '…' : ''}
`;
+ }
+
+ return result;
+ }
+});
diff --git a/app/assets/javascripts/discourse/components/d-select-box.js.es6 b/app/assets/javascripts/discourse/components/d-select-box.js.es6
deleted file mode 100644
index 6f222715e6b..00000000000
--- a/app/assets/javascripts/discourse/components/d-select-box.js.es6
+++ /dev/null
@@ -1,7 +0,0 @@
-import SelectBoxComponent from "discourse/components/select-box";
-
-export default SelectBoxComponent.extend({
- layoutName: "components/select-box",
-
- classNames: "discourse"
-});
diff --git a/app/assets/javascripts/discourse/components/select-box.js.es6 b/app/assets/javascripts/discourse/components/select-box.js.es6
index a56d23aeb3d..b6761cbdee8 100644
--- a/app/assets/javascripts/discourse/components/select-box.js.es6
+++ b/app/assets/javascripts/discourse/components/select-box.js.es6
@@ -1,17 +1,18 @@
import { on, observes } from "ember-addons/ember-computed-decorators";
+import { iconHTML } from 'discourse-common/lib/icon-library';
export default Ember.Component.extend({
+ layoutName: "components/select-box",
+
classNames: "select-box",
+ width: 220,
+
classNameBindings: ["expanded:is-expanded"],
- attributeBindings: ['componentStyle:style'],
- componentStyle: function() {
- return Ember.String.htmlSafe(`width: ${this.get("maxWidth")}px`);
- }.property("maxWidth"),
-
expanded: false,
focused: false,
+ tabindex: 0,
caretUpIcon: "caret-up",
caretDownIcon: "caret-down",
@@ -19,6 +20,7 @@ export default Ember.Component.extend({
icon: null,
value: null,
+ selectedContent: null,
noContentText: I18n.t("select_box.no_content"),
lastHoveredId: null,
@@ -43,6 +45,31 @@ export default Ember.Component.extend({
renderBody: false,
+ castInteger: false,
+
+ filterFunction: function() {
+ return (selectBox) => {
+ const filter = selectBox.get("filter").toLowerCase();
+ return _.filter(selectBox.get("content"), (content) => {
+ return content[selectBox.get("textKey")].toLowerCase().indexOf(filter) > -1;
+ });
+ };
+ },
+
+ selectBoxRowTemplate: function() {
+ return (rowComponent) => {
+ let template = "";
+
+ if (rowComponent.get("content.icon")) {
+ template += iconHTML(Handlebars.escapeExpression(rowComponent.get("content.icon")));
+ }
+
+ template += `${Handlebars.escapeExpression(rowComponent.get("text"))}
`;
+
+ return template;
+ };
+ }.property(),
+
init() {
this._super();
@@ -52,8 +79,7 @@ export default Ember.Component.extend({
this.setProperties({
componentId: this.elementId,
- filteredContent: [],
- selectedContent: {}
+ filteredContent: []
});
},
@@ -71,9 +97,7 @@ export default Ember.Component.extend({
if (Ember.isEmpty(this.get("filter"))) {
this.set("filteredContent", this._remapContent(this.get("content")));
} else {
- const filtered = _.filter(this.get("content"), (content) => {
- return content[this.get("textKey")].toLowerCase().indexOf(this.get("filter")) > -1;
- });
+ const filtered = this.filterFunction()(this);
this.set("filteredContent", this._remapContent(filtered));
}
},
@@ -95,18 +119,26 @@ export default Ember.Component.extend({
$(document).off("keydown.select-box");
this.$(".select-box-offscreen").off("focusin.select-box");
this.$(".select-box-offscreen").off("focusout.select-box");
+ this.$(".select-box-offscreen").off("keydown.select-box");
+ $(window).off("resize.select-box");
},
@on("didRender")
_configureSelectBoxDOM: function() {
+ this.$().css("width", this.get("width"));
+ this.$(".select-box-header").css("height", this.$().height());
+ this.$(".select-box-filter").css("height", this.$().height());
+
if (this.get("expanded")) {
- this.$(".select-box-body").css('width', this.get("maxWidth"));
- this.$(".select-box-filter .filter-query").focus();
+ this.$(".select-box-body").css('width', this.$().width());
this.$(".select-box-collection").css("max-height", this.get("maxCollectionHeight"));
this._bindTab();
- this._applyDirection();
- this._positionSelectBoxWrapper();
+
+ Ember.run.schedule('afterRender', () => {
+ this._applyDirection();
+ this._positionSelectBoxWrapper();
+ });
} else {
$(document).off("keydown.select-box");
this.$(".select-box-wrapper").hide();
@@ -124,7 +156,10 @@ export default Ember.Component.extend({
this.set("filteredContent", this._remapContent(this.get("content")));
this._setSelectedContent(this.get("content"));
- this.set("headerText", this.get("defaultHeaderText") || this.get("selectedContent.text"));
+
+ if (Ember.isNone(this.get("headerText"))) {
+ this.set("headerText", this.get("selectedContent.text"));
+ }
},
@on("didInsertElement")
@@ -143,9 +178,27 @@ export default Ember.Component.extend({
this.set("focused", true);
});
+ this.$(".select-box-offscreen").on("keydown.select-box", (event) => {
+ const keyCode = event.keyCode || event.which;
+
+ if(keyCode === 13 || keyCode === 40) {
+ this.setProperties({expanded: true, focused: false});
+ return false;
+ }
+
+ if(keyCode === 27) {
+ this.$(".select-box-offscreen").blur();
+ return false;
+ }
+ });
+
this.$(".select-box-offscreen").on("focusout.select-box", () => {
this.set("focused", false);
});
+
+ $(window).on("resize.select-box", () => {
+ this.set("expanded", false);
+ });
},
actions: {
@@ -158,6 +211,10 @@ export default Ember.Component.extend({
},
onSelectRow(id) {
+ if(this.get("castInteger") === true) {
+ id = parseInt(id, 10);
+ }
+
this.setProperties({
value: id,
expanded: false
@@ -184,8 +241,13 @@ export default Ember.Component.extend({
},
_normalizeContent(content) {
+ let id = content[this.get("idKey")];
+ if(this.get("castInteger") === true) {
+ id = parseInt(id, 10);
+ }
+
return {
- id: content[this.get("idKey")],
+ id,
text: content[this.get("textKey")],
icon: content[this.get("iconKey")]
};
@@ -204,7 +266,7 @@ export default Ember.Component.extend({
const headerHeight = this.$(".select-box-header").outerHeight();
this.$(".select-box-wrapper").css({
- width: this.get("maxWidth"),
+ width: this.$().width(),
display: "block",
height: headerHeight + this.$(".select-box-body").outerHeight()
});
diff --git a/app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6 b/app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6
index ceabb3c0d8c..e6b30b66798 100644
--- a/app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6
+++ b/app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6
@@ -1,3 +1,5 @@
+import { on, observes } from 'ember-addons/ember-computed-decorators';
+
export default Ember.Component.extend({
classNames: "select-box-row",
@@ -9,6 +11,14 @@ export default Ember.Component.extend({
lastHoveredId: null,
+ @on("init")
+ @observes("content", "lastHoveredId", "selectedId", "selectBoxRowTemplate")
+ _updateTemplate: function() {
+ this.set("isHighlighted", this._isHighlighted());
+ this.set("text", this.get("content.text"));
+ this.set("template", this.get("selectBoxRowTemplate")(this));
+ },
+
mouseEnter() {
this.sendAction("onHover", this.get("content.id"));
},
diff --git a/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6 b/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6
index 92d811f9b48..3021f1b58b9 100644
--- a/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6
@@ -1,13 +1,16 @@
import { observes } from 'ember-addons/ember-computed-decorators';
-import DiscourseSelectBoxComponent from "discourse/components/d-select-box";
+import SelectBoxComponent from "discourse/components/select-box";
+
+export default SelectBoxComponent.extend({
+ textKey: "name",
+
+ headerText: I18n.t("topic.controls"),
+
+ maxCollectionHeight: 300,
-export default DiscourseSelectBoxComponent.extend({
init() {
this._super();
- this.set("textKey", "name");
- this.set("defaultHeaderText", I18n.t("topic.controls"));
- this.set("maxCollectionHeight", 300);
this._createContent();
},
diff --git a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
index 89bc99ea605..204bb5411dd 100644
--- a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
+++ b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
@@ -99,7 +99,7 @@ function positioningWorkaround($fixedElement) {
fixedElement.style.top = '0px';
- composingTopic = $('#reply-control select.category-combobox').length > 0;
+ composingTopic = $('#reply-control .category-select-box').length > 0;
const height = calcHeight(composingTopic);
diff --git a/app/assets/javascripts/discourse/templates/components/select-box.hbs b/app/assets/javascripts/discourse/templates/components/select-box.hbs
index 495b473273a..ac6e74e2b9b 100644
--- a/app/assets/javascripts/discourse/templates/components/select-box.hbs
+++ b/app/assets/javascripts/discourse/templates/components/select-box.hbs
@@ -4,6 +4,7 @@
aria-haspopup="true"
role="button"
aria-labelledby="select-box-input-{{componentId}}"
+ tabindex={{tabindex}}
/>
{{component selectBoxHeaderComponent
@@ -29,6 +30,7 @@
{{component selectBoxCollectionComponent
filteredContent=filteredContent
selectBoxRowComponent=selectBoxRowComponent
+ selectBoxRowTemplate=selectBoxRowTemplate
lastHoveredId=lastHoveredId
onSelectRow=(action "onSelectRow")
onHoverRow=(action "onHoverRow")
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs
index b973147bb84..0c124ad1da4 100644
--- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs
+++ b/app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs
@@ -2,6 +2,7 @@
{{#each filteredContent as |content|}}
{{component selectBoxRowComponent
content=content
+ selectBoxRowTemplate=selectBoxRowTemplate
lastHoveredId=lastHoveredId
onSelect=onSelectRow
onHover=onHoverRow
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs
index 23984daac8b..269abe97461 100644
--- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs
+++ b/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs
@@ -1,14 +1,10 @@
-
- {{input
- tabindex="-1"
- class="filter-query"
- placeholder=filterPlaceholder
- key-up=onFilterChange
- }}
+{{input
+ tabindex="-1"
+ class="filter-query"
+ placeholder=filterPlaceholder
+ key-up=onFilterChange
+}}
- {{#if filterIcon}}
-
- {{d-icon filterIcon}}
-
- {{/if}}
-
- {{content.text}}
-
+{{{template}}}
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 4127463df84..7cfba0916b9 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -72,7 +72,7 @@
{{#if model.showCategoryChooser}}
- {{category-chooser valueAttribute="id" value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
+ {{category-select-box valueAttribute="id" value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
{{popup-input-tip validation=categoryValidation}}
{{#if model.archetype.hasOptions}}
diff --git a/app/assets/stylesheets/common/components/category-select-box.scss b/app/assets/stylesheets/common/components/category-select-box.scss
new file mode 100644
index 00000000000..55d8ba553f7
--- /dev/null
+++ b/app/assets/stylesheets/common/components/category-select-box.scss
@@ -0,0 +1,34 @@
+.category-select-box.select-box {
+ height: 34px;
+
+ .select-box-row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ line-height: 14px;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+
+ .topic-count {
+ font-size: 11px;
+ color: $primary;
+ }
+
+ .category-status {
+ -webkit-box-flex: 0;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ }
+
+ .category-desc {
+ -webkit-box-flex: 0;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ color: $primary;
+ font-size: 0.857em;
+ line-height: 16px;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/common/components/select-box.scss b/app/assets/stylesheets/common/components/select-box.scss
index 8e298408d8d..c2439630b9c 100644
--- a/app/assets/stylesheets/common/components/select-box.scss
+++ b/app/assets/stylesheets/common/components/select-box.scss
@@ -1,21 +1,53 @@
.select-box {
border-radius: 3px;
- box-sizing: border-box;
- display: inline-block;
- flex-direction: column;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
position: relative;
z-index: 998;
+ height: 34px;
&.is-expanded {
z-index: 999;
+ .select-box-wrapper {
+ border: 1px solid $tertiary;
+ border-radius: 3px;
+ -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
+ box-shadow: $tertiary 0px 0px 6px 0px;
+ }
+
.select-box-body {
+ border-radius: 3px 3px 0 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: column;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
left: 0;
position: absolute;
top: 0;
}
+
+ .collection, {
+ border-radius: 0 0 3px 3px;
+ }
+ }
+
+ &.is-highlighted {
+ .select-box-header {
+ border: 1px solid $tertiary;
+ -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
+ box-shadow: $tertiary 0px 0px 6px 0px;
+ }
}
&.is-reversed {
@@ -37,35 +69,52 @@
.select-box-header {
background: $secondary;
- border: 1px solid transparent;
- box-sizing: border-box;
+ border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+ border-radius: 3px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
cursor: pointer;
- height: 32px;
outline: none;
+
+ &.is-focused {
+ border: 1px solid $tertiary;
+ border-radius: 3px;
+ -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
+ box-shadow: $tertiary 0px 0px 6px 0px;
+ }
}
.select-box-body {
display: none;
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
.select-box-row {
cursor: pointer;
outline: none;
padding: 5px;
- height: 28px;
- min-height: 28px;
- line-height: 28px;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- align-items: center;
- justify-content: flex-start;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
}
.select-box-collection {
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex: 1;
- flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
background: $secondary;
overflow-x: hidden;
overflow-y: auto;
@@ -86,7 +135,8 @@
left: 0;
background: none;
display: none;
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
pointer-events: none;
border: 1px solid transparent;
}
@@ -95,17 +145,28 @@
.select-box .select-box-header {
.wrapper {
height: inherit;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
}
.current-selection {
text-align: left;
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@@ -128,7 +189,9 @@
}
.select-box .select-box-collection {
- flex: 0 1 auto;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
.collection {
padding: 0;
@@ -144,8 +207,6 @@
cursor: pointer;
border-radius: 5px;
background: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
- -webkit-transition: color .2s ease;
- transition: color .2s ease;
}
&::-webkit-scrollbar-track {
@@ -155,6 +216,9 @@
}
.select-box .select-box-row {
+ margin: 5px;
+ min-height: 1px;
+
.d-icon {
margin-right: 5px;
}
@@ -171,26 +235,30 @@
}
.select-box .select-box-filter {
- .wrapper {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: 5px 10px;
- }
+ background: $secondary;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 0 10px;
input, input:focus {
margin: 0;
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
outline: none;
border: 0;
- box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
width: 100%;
padding: 5px 0;
}
-
- .icon {
- margin-right: 5px;
- }
}
.select-box .select-box-offscreen, .select-box .select-box-offscreen:focus {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 94b26386cf6..5e4ba87cb33 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -162,7 +162,7 @@
padding-left: 7px;
}
.control-row {
- margin: 0 0 0 5px;
+ margin: 0 5px 0 5px;
}
.saving-text {
display: none;
@@ -221,14 +221,9 @@
.contents {
input#reply-title {
padding: 7px 10px;
- margin: 6px 10px 3px 0;
+ margin-bottom: 0;
color: $primary;
-
- }
- input#reply-title {
width: 400px;
- color: $primary;
-
}
.wmd-controls {
transition: top 0.3s ease;
@@ -242,34 +237,13 @@
min-width: 1280px;
.form-element {
position: relative;
- display: inline-block;
- .select2-container {
- width: 400px;
- margin-top: 5px;
- a {
- padding-top: 4px;
- height: 28px;
- }
- b {
- margin-top: 4px;
- }
- }
- .category-combobox {
+ display: flex;
+
+
+ .category-input {
width: 430px;
@include medium-width { width: 285px; }
@include small-width { width: 220px; }
-
- .select2-drop {
- left: -9000px;
- width: 428px;
- @include medium-width { width: 283px; }
- @include small-width { width: 218px; }
- }
- .select2-search input {
- width: 378px;
- @include medium-width { width: 233px; }
- @include small-width { width: 168px; }
- }
}
}
.edit-reason-input {
@@ -286,7 +260,7 @@
}
#reply-title {
color: $primary;
- margin-right: 10px;
+ margin-right: 5px;
float: left;
&:disabled {
background-color: $primary-low;
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 1256f823e29..11d5543eb98 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -19,7 +19,7 @@ input {
padding: 4px;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
- border: 1px solid $primary-low;
+ border: 1px solid $primary-low;
}
input[type=radio], input[type=checkbox] {
box-shadow: none;
@@ -38,7 +38,7 @@ input[type=radio], input[type=checkbox] {
width: 100%;
z-index: 1039;
height: 0;
- background-color: $primary-low;
+ background-color: $primary-low;
bottom: 0;
font-size: 1em;
position: fixed;
@@ -58,7 +58,7 @@ input[type=radio], input[type=checkbox] {
line-height: 30px;
}
.control-row {
- margin: 0 0 0 5px;
+ margin: 0 5px 0 5px;
.reply-to {
overflow: hidden;
max-width: 80%;
@@ -88,7 +88,7 @@ input[type=radio], input[type=checkbox] {
&.draft {
height: 35px !important;
cursor: pointer;
- border-top: 1px solid $primary-low;
+ border-top: 1px solid $primary-low;
.draft-text {
display: block;
position: absolute;
@@ -122,10 +122,17 @@ input[type=radio], input[type=checkbox] {
input#reply-title {
padding: 5px;
margin-top: 6px;
- width: 99%;
+ width: 100%;
box-sizing: border-box;
border: 1px solid $secondary;
}
+ .category-input {
+ margin-top: 3px;
+
+ .category-select-box {
+ height: 28px;
+ }
+ }
.wmd-controls {
transition: top 0.3s ease;
top: 110px;
@@ -134,20 +141,7 @@ input[type=radio], input[type=checkbox] {
}
.contents {
padding: 8px 5px 0 5px;
- .form-element {
- .select2-container {
- width: 99%;
- margin-top: 6px;
- a {
- padding-top: 4px;
- height: 28px;
- }
- b {
- margin-top: 4px;
- }
- }
- }
.edit-reason-input, .display-edit-reason {
display: none;
}
@@ -194,12 +188,6 @@ input[type=radio], input[type=checkbox] {
}
}
}
- .category-input {
- // hack, select2 is using inline styles
- .select2-container {
- width: 99% !important;
- }
- }
.popup-tip .close {
padding: 0 2px 2px 8px; // so my fingers can touch the little x
}
diff --git a/test/javascripts/acceptance/topic-test.js.es6 b/test/javascripts/acceptance/topic-test.js.es6
index 581ef00cd38..ac53c41dd75 100644
--- a/test/javascripts/acceptance/topic-test.js.es6
+++ b/test/javascripts/acceptance/topic-test.js.es6
@@ -99,7 +99,7 @@ QUnit.test("Reply as new topic", assert => {
"it fills composer with the ring string"
);
assert.equal(
- find('.category-combobox').select2('data').text, "feature",
+ find('.category-select-box .select-box-header .current-selection').html().trim(), "feature",
"it fills category selector with the right category"
);
});
diff --git a/test/javascripts/components/select-box-test.js.es6 b/test/javascripts/components/select-box-test.js.es6
index d0d7abe3098..874a6a79473 100644
--- a/test/javascripts/components/select-box-test.js.es6
+++ b/test/javascripts/components/select-box-test.js.es6
@@ -33,7 +33,7 @@ componentTest('accepts a value by reference', {
andThen(() => {
assert.equal(
- this.$(".select-box-row.is-highlighted .text").html().trim(), "robin",
+ find(".select-box-row.is-highlighted .text").html().trim(), "robin",
"it highlights the row corresponding to the value"
);
});
@@ -79,7 +79,7 @@ componentTest('no default icon', {
template: '{{select-box}}',
test(assert) {
- assert.equal(this.$(".select-box-header .icon").length, 0, "it doesn’t have an icon if not specified");
+ assert.equal(find(".select-box-header .icon").length, 0, "it doesn’t have an icon if not specified");
}
});
@@ -87,7 +87,7 @@ componentTest('customisable icon', {
template: '{{select-box icon="shower"}}',
test(assert) {
- assert.equal(this.$(".select-box-header .icon").html().trim(), "", "it has a the correct icon");
+ assert.equal(find(".select-box-header .icon").html().trim(), "", "it has a the correct icon");
}
});
@@ -98,7 +98,7 @@ componentTest('default search icon', {
click(".select-box-header");
andThen(() => {
- assert.equal(find(".select-box-filter .filter-icon").html().trim(), "", "it has a the correct icon");
+ assert.equal(find(".select-box-filter .d-icon-search").length, 1, "it has a the correct icon");
});
}
});
@@ -122,7 +122,7 @@ componentTest('custom search icon', {
click(".select-box-header");
andThen(() => {
- assert.equal(find(".select-box-filter .filter-icon").html().trim(), "", "it has a the correct icon");
+ assert.equal(find(".select-box-filter .d-icon-shower").length, 1, "it has a the correct icon");
});
}
});
@@ -145,13 +145,13 @@ componentTest('select-box is expandable', {
click(".select-box-header");
andThen(() => {
- assert.equal(this.$(".select-box").hasClass("is-expanded"), true);
+ assert.equal(find(".select-box").hasClass("is-expanded"), true);
});
click(".select-box-header");
andThen(() => {
- assert.equal(this.$(".select-box").hasClass("is-expanded"), false);
+ assert.equal(find(".select-box").hasClass("is-expanded"), false);
});
}
});
@@ -165,10 +165,10 @@ componentTest('accepts custom id/text keys', {
},
test(assert) {
- click(this.$(".select-box-header"));
+ click(".select-box-header");
andThen(() => {
- assert.equal(this.$(".select-box-row.is-highlighted .text").html().trim(), "robin");
+ assert.equal(find(".select-box-row.is-highlighted .text").html().trim(), "robin");
});
}
});
@@ -181,12 +181,12 @@ componentTest('doesn’t render collection content before first expand', {
},
test(assert) {
- assert.equal(this.$(".select-box-body .collection").length, 0);
+ assert.equal(find(".select-box-body .collection").length, 0);
- click(this.$(".select-box-header"));
+ click(".select-box-header");
andThen(() => {
- assert.equal(this.$(".select-box-body .collection").length, 1);
+ assert.equal(find(".select-box-body .collection").length, 1);
});
}
});
@@ -199,42 +199,76 @@ componentTest('persists filter state when expandind/collapsing', {
},
test(assert) {
- click(this.$(".select-box-header"));
+ click(".select-box-header");
fillIn('.filter-query', 'rob');
triggerEvent('.filter-query', 'keyup');
andThen(() => {
- assert.equal(this.$(".select-box-row").length, 1);
+ assert.equal(find(".select-box-row").length, 1);
});
- click(this.$(".select-box-header"));
+ click(".select-box-header");
andThen(() => {
- assert.equal(this.$().hasClass("is-expanded"), false);
+ assert.equal(find(".select-box").hasClass("is-expanded"), false);
});
- click(this.$(".select-box-header"));
+ click(".select-box-header");
andThen(() => {
- assert.equal(this.$(".select-box-row").length, 1);
+ assert.equal(find(".select-box-row").length, 1);
});
}
});
componentTest('supports options to limit size', {
- template: '{{select-box maxWidth=100 maxCollectionHeight=20 content=content}}',
+ template: '{{select-box width=50 maxCollectionHeight=20 content=content}}',
beforeEach() {
this.set("content", [{ id: 1, text: "robin" }]);
},
test(assert) {
- assert.equal(this.$(".select-box-header").outerWidth(), 100, "it limits the width");
-
- click(this.$(".select-box-header"));
+ click(".select-box-header");
andThen(() => {
- assert.equal(this.$(".select-box-body").height(), 20, "it limits the height");
+ assert.equal(find(".select-box-body").height(), 20, "it limits the height");
+ assert.equal(find(".select-box").width(), 50, "it limits the width");
+ });
+ }
+});
+
+componentTest('supports custom row template', {
+ template: '{{select-box content=content selectBoxRowTemplate=selectBoxRowTemplate}}',
+
+ beforeEach() {
+ this.set("content", [{ id: 1, text: "robin" }]);
+ this.set("selectBoxRowTemplate", (rowComponent) => {
+ return `${rowComponent.get("text")}`;
+ });
+ },
+
+ test(assert) {
+ click(".select-box-header");
+
+ andThen(() => {
+ assert.equal(find(".select-box-row").html().trim(), "robin");
+ });
+ }
+});
+
+componentTest('supports converting select value to integer', {
+ template: '{{select-box value=2 content=content castInteger=true}}',
+
+ beforeEach() {
+ this.set("content", [{ id: "1", text: "robin"}, {id: "2", text: "régis" }]);
+ },
+
+ test(assert) {
+ click(".select-box-header");
+
+ andThen(() => {
+ assert.equal(find(".select-box-row.is-highlighted .text").text(), "régis");
});
}
});