diff --git a/app/assets/javascripts/admin/templates/customize-themes-show.hbs b/app/assets/javascripts/admin/templates/customize-themes-show.hbs index 6b02429d77d..2fed8ebdf29 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"}}

-

{{select-box content=colorSchemes - textKey="name" - filterable=true - value=colorSchemeId - icon="paint-brush"}} +

{{d-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 deleted file mode 100644 index d411e2e8a09..00000000000 --- a/app/assets/javascripts/discourse/components/category-select-box.js.es6 +++ /dev/null @@ -1,107 +0,0 @@ -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 new file mode 100644 index 00000000000..6f222715e6b --- /dev/null +++ b/app/assets/javascripts/discourse/components/d-select-box.js.es6 @@ -0,0 +1,7 @@ +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 b6761cbdee8..a56d23aeb3d 100644 --- a/app/assets/javascripts/discourse/components/select-box.js.es6 +++ b/app/assets/javascripts/discourse/components/select-box.js.es6 @@ -1,18 +1,17 @@ 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", @@ -20,7 +19,6 @@ export default Ember.Component.extend({ icon: null, value: null, - selectedContent: null, noContentText: I18n.t("select_box.no_content"), lastHoveredId: null, @@ -45,31 +43,6 @@ 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(); @@ -79,7 +52,8 @@ export default Ember.Component.extend({ this.setProperties({ componentId: this.elementId, - filteredContent: [] + filteredContent: [], + selectedContent: {} }); }, @@ -97,7 +71,9 @@ export default Ember.Component.extend({ if (Ember.isEmpty(this.get("filter"))) { this.set("filteredContent", this._remapContent(this.get("content"))); } else { - const filtered = this.filterFunction()(this); + const filtered = _.filter(this.get("content"), (content) => { + return content[this.get("textKey")].toLowerCase().indexOf(this.get("filter")) > -1; + }); this.set("filteredContent", this._remapContent(filtered)); } }, @@ -119,26 +95,18 @@ 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.$().width()); + this.$(".select-box-body").css('width', this.get("maxWidth")); + this.$(".select-box-filter .filter-query").focus(); this.$(".select-box-collection").css("max-height", this.get("maxCollectionHeight")); this._bindTab(); - - Ember.run.schedule('afterRender', () => { - this._applyDirection(); - this._positionSelectBoxWrapper(); - }); + this._applyDirection(); + this._positionSelectBoxWrapper(); } else { $(document).off("keydown.select-box"); this.$(".select-box-wrapper").hide(); @@ -156,10 +124,7 @@ export default Ember.Component.extend({ this.set("filteredContent", this._remapContent(this.get("content"))); this._setSelectedContent(this.get("content")); - - if (Ember.isNone(this.get("headerText"))) { - this.set("headerText", this.get("selectedContent.text")); - } + this.set("headerText", this.get("defaultHeaderText") || this.get("selectedContent.text")); }, @on("didInsertElement") @@ -178,27 +143,9 @@ 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: { @@ -211,10 +158,6 @@ export default Ember.Component.extend({ }, onSelectRow(id) { - if(this.get("castInteger") === true) { - id = parseInt(id, 10); - } - this.setProperties({ value: id, expanded: false @@ -241,13 +184,8 @@ export default Ember.Component.extend({ }, _normalizeContent(content) { - let id = content[this.get("idKey")]; - if(this.get("castInteger") === true) { - id = parseInt(id, 10); - } - return { - id, + id: content[this.get("idKey")], text: content[this.get("textKey")], icon: content[this.get("iconKey")] }; @@ -266,7 +204,7 @@ export default Ember.Component.extend({ const headerHeight = this.$(".select-box-header").outerHeight(); this.$(".select-box-wrapper").css({ - width: this.$().width(), + width: this.get("maxWidth"), 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 e6b30b66798..ceabb3c0d8c 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,5 +1,3 @@ -import { on, observes } from 'ember-addons/ember-computed-decorators'; - export default Ember.Component.extend({ classNames: "select-box-row", @@ -11,14 +9,6 @@ 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 3021f1b58b9..92d811f9b48 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,16 +1,13 @@ import { observes } from 'ember-addons/ember-computed-decorators'; -import SelectBoxComponent from "discourse/components/select-box"; - -export default SelectBoxComponent.extend({ - textKey: "name", - - headerText: I18n.t("topic.controls"), - - maxCollectionHeight: 300, +import DiscourseSelectBoxComponent from "discourse/components/d-select-box"; +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 204bb5411dd..89bc99ea605 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 .category-select-box').length > 0; + composingTopic = $('#reply-control select.category-combobox').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 ac6e74e2b9b..495b473273a 100644 --- a/app/assets/javascripts/discourse/templates/components/select-box.hbs +++ b/app/assets/javascripts/discourse/templates/components/select-box.hbs @@ -4,7 +4,6 @@ aria-haspopup="true" role="button" aria-labelledby="select-box-input-{{componentId}}" - tabindex={{tabindex}} /> {{component selectBoxHeaderComponent @@ -30,7 +29,6 @@ {{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 0c124ad1da4..b973147bb84 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,7 +2,6 @@ {{#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 269abe97461..23984daac8b 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,10 +1,14 @@ -{{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}} + {{#if filterIcon}} +
+ {{d-icon filterIcon}} +
+ {{/if}} +
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs index fc329967e56..64626ef6cb7 100644 --- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs +++ b/app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs @@ -1 +1,7 @@ -{{{template}}} +{{#if content.icon}} + {{d-icon content.icon}} +{{/if}} + +

+ {{content.text}} +

diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs index 7cfba0916b9..4127463df84 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-select-box valueAttribute="id" value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}} + {{category-chooser 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 deleted file mode 100644 index 55d8ba553f7..00000000000 --- a/app/assets/stylesheets/common/components/category-select-box.scss +++ /dev/null @@ -1,34 +0,0 @@ -.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 c2439630b9c..8e298408d8d 100644 --- a/app/assets/stylesheets/common/components/select-box.scss +++ b/app/assets/stylesheets/common/components/select-box.scss @@ -1,53 +1,21 @@ .select-box { border-radius: 3px; - -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; + box-sizing: border-box; + display: inline-block; + 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; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - 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 { @@ -69,52 +37,35 @@ .select-box-header { background: $secondary; - border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); - border-radius: 3px; - -webkit-box-sizing: border-box; - box-sizing: border-box; + border: 1px solid transparent; + 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; - -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } .select-box-row { cursor: pointer; outline: none; padding: 5px; - display: -webkit-box; - display: -ms-flexbox; + height: 28px; + min-height: 28px; + line-height: 28px; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + align-items: center; + justify-content: flex-start; } .select-box-collection { - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -ms-flexbox; + box-sizing: border-box; display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex: 1; + flex-direction: column; background: $secondary; overflow-x: hidden; overflow-y: auto; @@ -135,8 +86,7 @@ left: 0; background: none; display: none; - -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; pointer-events: none; border: 1px solid transparent; } @@ -145,28 +95,17 @@ .select-box .select-box-header { .wrapper { height: inherit; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -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; + flex-direction: row; + align-items: center; + justify-content: space-between; padding-left: 10px; padding-right: 10px; } .current-selection { text-align: left; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; + flex: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -189,9 +128,7 @@ } .select-box .select-box-collection { - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; + flex: 0 1 auto; .collection { padding: 0; @@ -207,6 +144,8 @@ 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 { @@ -216,9 +155,6 @@ } .select-box .select-box-row { - margin: 5px; - min-height: 1px; - .d-icon { margin-right: 5px; } @@ -235,30 +171,26 @@ } .select-box .select-box-filter { - 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; + .wrapper { + display: flex; + align-items: center; + justify-content: space-between; + margin: 5px 10px; + } input, input:focus { margin: 0; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; + flex: 1; outline: none; border: 0; - -webkit-box-shadow: none; - 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 5e4ba87cb33..94b26386cf6 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 5px 0 5px; + margin: 0 0 0 5px; } .saving-text { display: none; @@ -221,9 +221,14 @@ .contents { input#reply-title { padding: 7px 10px; - margin-bottom: 0; + margin: 6px 10px 3px 0; color: $primary; + + } + input#reply-title { width: 400px; + color: $primary; + } .wmd-controls { transition: top 0.3s ease; @@ -237,13 +242,34 @@ min-width: 1280px; .form-element { position: relative; - display: flex; - - - .category-input { + display: inline-block; + .select2-container { + width: 400px; + margin-top: 5px; + a { + padding-top: 4px; + height: 28px; + } + b { + margin-top: 4px; + } + } + .category-combobox { 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 { @@ -260,7 +286,7 @@ } #reply-title { color: $primary; - margin-right: 5px; + margin-right: 10px; float: left; &:disabled { background-color: $primary-low; diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index 11d5543eb98..1256f823e29 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 5px 0 5px; + margin: 0 0 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,17 +122,10 @@ input[type=radio], input[type=checkbox] { input#reply-title { padding: 5px; margin-top: 6px; - width: 100%; + width: 99%; 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; @@ -141,7 +134,20 @@ 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; } @@ -188,6 +194,12 @@ 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 ac53c41dd75..581ef00cd38 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-select-box .select-box-header .current-selection').html().trim(), "feature", + find('.category-combobox').select2('data').text, "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 874a6a79473..d0d7abe3098 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( - find(".select-box-row.is-highlighted .text").html().trim(), "robin", + this.$(".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(find(".select-box-header .icon").length, 0, "it doesn’t have an icon if not specified"); + assert.equal(this.$(".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(find(".select-box-header .icon").html().trim(), "", "it has a the correct icon"); + assert.equal(this.$(".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 .d-icon-search").length, 1, "it has a the correct icon"); + assert.equal(find(".select-box-filter .filter-icon").html().trim(), "", "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 .d-icon-shower").length, 1, "it has a the correct icon"); + assert.equal(find(".select-box-filter .filter-icon").html().trim(), "", "it has a the correct icon"); }); } }); @@ -145,13 +145,13 @@ componentTest('select-box is expandable', { click(".select-box-header"); andThen(() => { - assert.equal(find(".select-box").hasClass("is-expanded"), true); + assert.equal(this.$(".select-box").hasClass("is-expanded"), true); }); click(".select-box-header"); andThen(() => { - assert.equal(find(".select-box").hasClass("is-expanded"), false); + assert.equal(this.$(".select-box").hasClass("is-expanded"), false); }); } }); @@ -165,10 +165,10 @@ componentTest('accepts custom id/text keys', { }, test(assert) { - click(".select-box-header"); + click(this.$(".select-box-header")); andThen(() => { - assert.equal(find(".select-box-row.is-highlighted .text").html().trim(), "robin"); + assert.equal(this.$(".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(find(".select-box-body .collection").length, 0); + assert.equal(this.$(".select-box-body .collection").length, 0); - click(".select-box-header"); + click(this.$(".select-box-header")); andThen(() => { - assert.equal(find(".select-box-body .collection").length, 1); + assert.equal(this.$(".select-box-body .collection").length, 1); }); } }); @@ -199,76 +199,42 @@ componentTest('persists filter state when expandind/collapsing', { }, test(assert) { - click(".select-box-header"); + click(this.$(".select-box-header")); fillIn('.filter-query', 'rob'); triggerEvent('.filter-query', 'keyup'); andThen(() => { - assert.equal(find(".select-box-row").length, 1); + assert.equal(this.$(".select-box-row").length, 1); }); - click(".select-box-header"); + click(this.$(".select-box-header")); andThen(() => { - assert.equal(find(".select-box").hasClass("is-expanded"), false); + assert.equal(this.$().hasClass("is-expanded"), false); }); - click(".select-box-header"); + click(this.$(".select-box-header")); andThen(() => { - assert.equal(find(".select-box-row").length, 1); + assert.equal(this.$(".select-box-row").length, 1); }); } }); componentTest('supports options to limit size', { - template: '{{select-box width=50 maxCollectionHeight=20 content=content}}', + template: '{{select-box maxWidth=100 maxCollectionHeight=20 content=content}}', beforeEach() { this.set("content", [{ id: 1, text: "robin" }]); }, test(assert) { - click(".select-box-header"); + assert.equal(this.$(".select-box-header").outerWidth(), 100, "it limits the width"); + + click(this.$(".select-box-header")); andThen(() => { - 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"); + assert.equal(this.$(".select-box-body").height(), 20, "it limits the height"); }); } });