diff --git a/jsapp/js/app.es6 b/jsapp/js/app.es6 index d39b8fa678..c1e530ebd2 100644 --- a/jsapp/js/app.es6 +++ b/jsapp/js/app.es6 @@ -8,6 +8,7 @@ import $ from 'jquery'; window.jQuery = $; window.$ = $; require('jquery-ui/ui/widgets/sortable'); +require('jquery-ui/ui/widgets/resizable'); import React from 'react'; import ReactDOM from 'react-dom'; diff --git a/jsapp/scss/main.scss b/jsapp/scss/main.scss index 49cbb662f7..16bda0f38b 100644 --- a/jsapp/scss/main.scss +++ b/jsapp/scss/main.scss @@ -6,6 +6,7 @@ @import "~select2/select2.css"; @import "~react-table/react-table.css"; @import "~alertifyjs/build/css/alertify.css"; +@import "~jquery-ui/themes/base/all.css"; @import "./libs/alertify.overrides"; @import "./libs/react-select.overrides"; diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card.scss b/jsapp/scss/stylesheets/partials/form_builder/_card.scss index b99c432711..2e97712c6f 100644 --- a/jsapp/scss/stylesheets/partials/form_builder/_card.scss +++ b/jsapp/scss/stylesheets/partials/form_builder/_card.scss @@ -59,8 +59,25 @@ font-size: 15px; } } + + .ui-resizable-handle { + color: $cool-gray; + + &:hover { + border-top: 1px solid darken($cool-gray, 20%); + } + } } + .card__header-name { + text-align: right; + padding-bottom: 10px; + color: $cool-gray; + + &:focus { + color: $black; + } + } .card__header-title { color: $cool-gray; @@ -306,11 +323,14 @@ $cardIndicatorIconWidth: 21px; &.card__buttons__button--blue { color:$linkColor; } - // &.card__buttons__button--add { - // bottom: 22%; - // } + &.card__buttons__button--delete { + top: 32px; + } &.card__buttons__button--copy { - bottom: 26%; + top: 45px; + } + &.card__buttons__button--add { + top: 68px; } &.card__buttons__button--activated { // trying to transition this into %activated-card-button diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card_settings.scss b/jsapp/scss/stylesheets/partials/form_builder/_card_settings.scss index 53ee9d34f7..5fc49dd8c3 100644 --- a/jsapp/scss/stylesheets/partials/form_builder/_card_settings.scss +++ b/jsapp/scss/stylesheets/partials/form_builder/_card_settings.scss @@ -122,7 +122,8 @@ } } - input[type="text"] { + input[type="text"], + textarea { width: 85%; padding: 2px; font-size: 13px; @@ -142,7 +143,8 @@ color: $cool-red; input.text, - select { + select, + textarea { border-color: $cool-red; } } diff --git a/jsapp/scss/stylesheets/partials/form_builder/_misc.scss b/jsapp/scss/stylesheets/partials/form_builder/_misc.scss index 52af9eecc2..75e6fd8075 100644 --- a/jsapp/scss/stylesheets/partials/form_builder/_misc.scss +++ b/jsapp/scss/stylesheets/partials/form_builder/_misc.scss @@ -22,6 +22,7 @@ // inputs in edit-in-place .card__text input, +.card__text textarea, .editable-wrapper input { font-family: $font; border: none; @@ -29,11 +30,15 @@ margin: 0px; font-weight: 600; display: inline; - height: auto !important; font-size: 13px; width: 100%; } +.card__text input, +.editable-wrapper input { + height: auto !important; +} + code input[type="text"] { border: none; padding: 0px; diff --git a/jsapp/xlform/src/view.row.coffee b/jsapp/xlform/src/view.row.coffee index 08289cf4da..4aa072aeb7 100644 --- a/jsapp/xlform/src/view.row.coffee +++ b/jsapp/xlform/src/view.row.coffee @@ -268,6 +268,7 @@ module.exports = do -> @ _renderRow: -> @$el.html $viewTemplates.$$render('row.xlfRowView', @surveyView) + @$name = @$('.card__header-name') @$label = @$('.card__header-title') @$hint = @$('.card__header-hint') @$card = @$('.card') @@ -295,6 +296,9 @@ module.exports = do -> @is_expanded = true @listView = new $viewChoices.ListView(model: cl, rowView: @).render() + if @model.getValue('name')? + @$name.html(@model.getValue('name')) + @cardSettingsWrap = @$('.card__settings').eq(0) @defaultRowDetailParent = @cardSettingsWrap.find('.card__settings__fields--question-options').eq(0) for [key, val] in @model.attributesArray() when key in ['label', 'hint', 'type'] diff --git a/jsapp/xlform/src/view.row.templates.coffee b/jsapp/xlform/src/view.row.templates.coffee index 8fbe66cd1c..875e766feb 100644 --- a/jsapp/xlform/src/view.row.templates.coffee +++ b/jsapp/xlform/src/view.row.templates.coffee @@ -62,7 +62,8 @@ module.exports = do ->
- +
+
diff --git a/jsapp/xlform/src/view.rowDetail.coffee b/jsapp/xlform/src/view.rowDetail.coffee index 6c954fe2e9..7dc431075d 100644 --- a/jsapp/xlform/src/view.rowDetail.coffee +++ b/jsapp/xlform/src/view.rowDetail.coffee @@ -70,7 +70,7 @@ module.exports = do -> # the model's value is reflected in the element and changes # to the element are reflected in the model (with transformFn # applied) - el = opts.el || @$('input').get(0) + el = opts.el || @$('input').get(0) || @$('textarea').get(0) $el = $(el) transformFn = opts.transformFn || false @@ -128,7 +128,7 @@ module.exports = do -> @_insertInDOM rowView.defaultRowDetailParent makeFieldCheckCondition: (opts={}) -> - el = opts.el || @$('input').get(0) + el = opts.el || @$('input').get(0) || @$('textarea').get(0) $el = $(el) fieldClass = opts.fieldClass || 'input-error' message = opts.message || "This field is required" @@ -165,7 +165,7 @@ module.exports = do -> showOrHideCondition() removeFieldCheckCondition: (opts={}) -> - el = opts.el || @$('input').get(0) + el = opts.el || @$('input').get(0) || @$('textarea').get(0) $el = $(el) fieldClass = opts.fieldClass || 'input-error' @@ -189,6 +189,14 @@ module.exports = do -> else @field """""", cid, key_label + textarea: (cid, key, key_label = key, input_class = '', placeholder_text='', max_length = '') -> + if placeholder_text is not '' + placeholder_text = _t(placeholder_text) + if max_length is '' + @field """