Fixes #3499: Broken UI - Create Reporting profile

This commit is contained in:
Bola Ahmed Buari 2021-05-07 14:25:31 +00:00 committed by Thorsten Eckel
parent fb1df924ae
commit 37d7528221
11 changed files with 84 additions and 39 deletions

View file

@ -257,9 +257,9 @@ class App.UiElement.postmaster_set
attributeConfig = elements[groupAndAttribute] attributeConfig = elements[groupAndAttribute]
if !attributeConfig || !attributeConfig.operator if !attributeConfig || !attributeConfig.operator
elementRow.find('.js-operator').addClass('hide') elementRow.find('.js-operator').parent().addClass('hide')
else else
elementRow.find('.js-operator').removeClass('hide') elementRow.find('.js-operator').parent().removeClass('hide')
if attributeConfig && attributeConfig.operator if attributeConfig && attributeConfig.operator
for operator in attributeConfig.operator for operator in attributeConfig.operator
operatorName = App.i18n.translateInline(operator) operatorName = App.i18n.translateInline(operator)

View file

@ -214,9 +214,9 @@ class App.UiElement.ticket_perform_action
selection = $("<select class=\"form-control\" name=\"#{name}\"></select>") selection = $("<select class=\"form-control\" name=\"#{name}\"></select>")
attributeConfig = elements[groupAndAttribute] attributeConfig = elements[groupAndAttribute]
if !attributeConfig || !attributeConfig.operator if !attributeConfig || !attributeConfig.operator
elementRow.find('.js-operator').addClass('hide') elementRow.find('.js-operator').parent().addClass('hide')
else else
elementRow.find('.js-operator').removeClass('hide') elementRow.find('.js-operator').parent().removeClass('hide')
if attributeConfig && attributeConfig.operator if attributeConfig && attributeConfig.operator
for operator in attributeConfig.operator for operator in attributeConfig.operator
operatorName = App.i18n.translateInline(operator) operatorName = App.i18n.translateInline(operator)
@ -261,12 +261,12 @@ class App.UiElement.ticket_perform_action
attribute.tag = 'autocompletion_ajax' attribute.tag = 'autocompletion_ajax'
if !preCondition if !preCondition
elementRow.find('.js-preCondition select').html('') elementRow.find('.js-preCondition select').html('')
elementRow.find('.js-preCondition').addClass('hide') elementRow.find('.js-preCondition').closest('.controls').addClass('hide')
toggleValue() toggleValue()
@buildValue(elementFull, elementRow, groupAndAttribute, elements, meta, attribute) @buildValue(elementFull, elementRow, groupAndAttribute, elements, meta, attribute)
return return
elementRow.find('.js-preCondition').removeClass('hide') elementRow.find('.js-preCondition').closest('.controls').removeClass('hide')
name = "#{attribute.name}::#{groupAndAttribute}::pre_condition" name = "#{attribute.name}::#{groupAndAttribute}::pre_condition"
selection = $("<select class=\"form-control\" name=\"#{name}\" ></select>") selection = $("<select class=\"form-control\" name=\"#{name}\" ></select>")
@ -289,7 +289,7 @@ class App.UiElement.ticket_perform_action
if key is meta.pre_condition if key is meta.pre_condition
selected = 'selected="selected"' selected = 'selected="selected"'
selection.append("<option value=\"#{key}\" #{selected}>#{App.i18n.translateInline(value)}</option>") selection.append("<option value=\"#{key}\" #{selected}>#{App.i18n.translateInline(value)}</option>")
elementRow.find('.js-preCondition').removeClass('hide') elementRow.find('.js-preCondition').closest('.controls').removeClass('hide')
elementRow.find('.js-preCondition select').replaceWith(selection) elementRow.find('.js-preCondition select').replaceWith(selection)
elementRow.find('.js-preCondition select').bind('change', (e) -> elementRow.find('.js-preCondition select').bind('change', (e) ->
@ -322,6 +322,8 @@ class App.UiElement.ticket_perform_action
if config.tag is 'checkbox' if config.tag is 'checkbox'
config.tag = 'select' config.tag = 'select'
tagSearch = "#{config.tag}_search" tagSearch = "#{config.tag}_search"
if config.tag is 'datetime'
config.validationContainer = 'self'
if App.UiElement[tagSearch] if App.UiElement[tagSearch]
item = App.UiElement[tagSearch].render(config, {}) item = App.UiElement[tagSearch].render(config, {})
else else

View file

@ -369,12 +369,12 @@ class App.UiElement.ticket_selector
attribute.tag = 'autocompletion_ajax' attribute.tag = 'autocompletion_ajax'
if !preCondition if !preCondition
elementRow.find('.js-preCondition select').html('') elementRow.find('.js-preCondition select').html('')
elementRow.find('.js-preCondition').addClass('hide') elementRow.find('.js-preCondition').closest('.controls').addClass('hide')
toggleValue() toggleValue()
@buildValue(elementFull, elementRow, groupAndAttribute, elements, meta, attribute) @buildValue(elementFull, elementRow, groupAndAttribute, elements, meta, attribute)
return return
elementRow.find('.js-preCondition').removeClass('hide') elementRow.find('.js-preCondition').closest('.controls').removeClass('hide')
name = "#{attribute.name}::#{groupAndAttribute}::pre_condition" name = "#{attribute.name}::#{groupAndAttribute}::pre_condition"
selection = $("<select class=\"form-control\" name=\"#{name}\" ></select>") selection = $("<select class=\"form-control\" name=\"#{name}\" ></select>")
@ -395,7 +395,7 @@ class App.UiElement.ticket_selector
if key is meta.pre_condition if key is meta.pre_condition
selected = 'selected="selected"' selected = 'selected="selected"'
selection.append("<option value=\"#{key}\" #{selected}>#{App.i18n.translateInline(value)}</option>") selection.append("<option value=\"#{key}\" #{selected}>#{App.i18n.translateInline(value)}</option>")
elementRow.find('.js-preCondition').removeClass('hide') elementRow.find('.js-preCondition').closest('.controls').removeClass('hide')
elementRow.find('.js-preCondition select').replaceWith(selection) elementRow.find('.js-preCondition select').replaceWith(selection)
elementRow.find('.js-preCondition select').bind('change', (e) -> elementRow.find('.js-preCondition select').bind('change', (e) ->
@ -436,6 +436,8 @@ class App.UiElement.ticket_selector
config.guess = false config.guess = false
if config.tag is 'checkbox' if config.tag is 'checkbox'
config.tag = 'select' config.tag = 'select'
if config.tag is 'datetime'
config.validationContainer = 'self'
tagSearch = "#{config.tag}_search" tagSearch = "#{config.tag}_search"
if App.UiElement[tagSearch] if App.UiElement[tagSearch]
item = App.UiElement[tagSearch].render(config, {}) item = App.UiElement[tagSearch].render(config, {})
@ -450,7 +452,7 @@ class App.UiElement.ticket_selector
elementRow.find('.js-value').removeClass('hide').html(item) elementRow.find('.js-value').removeClass('hide').html(item)
if meta.operator is 'has changed' if meta.operator is 'has changed'
elementRow.find('.js-value').addClass('hide') elementRow.find('.js-value').addClass('hide')
elementRow.find('.js-preCondition').addClass('hide') elementRow.find('.js-preCondition').closest('.controls').addClass('hide')
else else
elementRow.find('.js-value').removeClass('hide') elementRow.find('.js-value').removeClass('hide')

View file

@ -25,6 +25,7 @@ class ReportProfile extends App.ControllerSubContent
{ name: 'New Profile', 'data-type': 'new', class: 'primary' } { name: 'New Profile', 'data-type': 'new', class: 'primary' }
] ]
container: @el.closest('.content') container: @el.closest('.content')
veryLarge: true
) )
show: (params) => show: (params) =>

View file

@ -12,7 +12,7 @@
<%- @Icon('arrow-down') %> <%- @Icon('arrow-down') %>
</div> </div>
</div> </div>
<div class="controls js-value"></div> <div class="controls js-value horizontal-filter-value"></div>
</div> </div>
<div class="filter-controls"> <div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="<%- @T('Remote') %>"> <div class="filter-control filter-control-remove js-remove" title="<%- @T('Remote') %>">

View file

@ -11,7 +11,7 @@
<%- @Icon('arrow-down') %> <%- @Icon('arrow-down') %>
</div> </div>
</div> </div>
<div class="controls js-value"></div> <div class="controls js-value horizontal-filter-value"></div>
</div> </div>
<div class="filter-controls"> <div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="<%- @T('Remote') %>"> <div class="filter-control filter-control-remove js-remove" title="<%- @T('Remote') %>">

View file

@ -1,15 +1,15 @@
<div class="flex horizontal"> <div class="flex horizontal">
<div class="controls"> <div class="controls half-space-right min-fit-content">
<div class="u-positionOrigin js-operator"> <div class="u-positionOrigin js-operator">
<select></select> <select></select>
<%- @Icon('arrow-down', 'dropdown-arrow') %> <%- @Icon('arrow-down', 'dropdown-arrow') %>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls half-space-right">
<div class="u-positionOrigin js-preCondition"> <div class="u-positionOrigin js-preCondition">
<select></select> <select></select>
<%- @Icon('arrow-down', 'dropdown-arrow') %> <%- @Icon('arrow-down', 'dropdown-arrow') %>
</div> </div>
</div> </div>
<div class="controls js-value horizontal"></div> <div class="controls js-value horizontal horizontal-filter-value"></div>
</div> </div>

View file

@ -5,7 +5,7 @@
<%- @Icon('arrow-down', 'dropdown-arrow') %> <%- @Icon('arrow-down', 'dropdown-arrow') %>
</div> </div>
</div> </div>
<div class="js-setAttribute"></div> <div class="controls js-setAttribute horizontal"></div>
<div class="horizontal-filter-group js-setNotification flex"></div> <div class="horizontal-filter-group js-setNotification flex"></div>
<div class="horizontal-filter-group js-setArticle flex"></div> <div class="horizontal-filter-group js-setArticle flex"></div>
</div> </div>

View file

@ -1,11 +1,11 @@
<div class="horizontal-filter js-filterElement"> <div class="horizontal-filter js-filterElement">
<div class="horizontal-filter-body"> <div class="horizontal-filter-body">
<div class="controls"> <div class="controls min-fit-content">
<div class="u-positionOrigin js-attributeSelector"> <div class="u-positionOrigin js-attributeSelector">
<%- @Icon('arrow-down', 'dropdown-arrow') %> <%- @Icon('arrow-down', 'dropdown-arrow') %>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls min-fit-content">
<div class="u-positionOrigin js-operator"> <div class="u-positionOrigin js-operator">
<select></select> <select></select>
<%- @Icon('arrow-down', 'dropdown-arrow') %> <%- @Icon('arrow-down', 'dropdown-arrow') %>

View file

@ -1,4 +1,5 @@
<div class="controls u-positionOrigin js-valueRangeSelector"></div> <div class="controls u-positionOrigin js-valueRangeSelector"></div>
<div class="half-spacer"></div>
<div class="controls u-positionOrigin"> <div class="controls u-positionOrigin">
<select class="form-control js-range" name="<%= @attribute.name %>::range"> <select class="form-control js-range" name="<%= @attribute.name %>::range">
<% for key, value of @ranges: %> <% for key, value of @ranges: %>

View file

@ -2120,6 +2120,7 @@ input.timeframe,
input.time { input.time {
box-sizing: content-box; box-sizing: content-box;
padding: 0 6px; padding: 0 6px;
height: 39px;
line-height: 42px; line-height: 42px;
flex-shrink: 0; flex-shrink: 0;
@ -9727,25 +9728,13 @@ label + .wizard-buttonList {
border-top: none; border-top: none;
} }
.controls,
input {
@include bidi-style(margin-right, 5px, margin-left, 0);
}
.controls-label {
margin-left: 0;
margin-right: 5px;
@include rtl(margin-left, 5px);
@include rtl(margin-right, 0);
}
select, select,
input { input {
border-color: hsl(198,19%,86%); border-color: hsl(198,19%,86%);
} }
input[type=text] { input[type=text] {
width: auto; width: 100%;
} }
input[data-item=time] { input[data-item=time] {
@ -9755,11 +9744,40 @@ label + .wizard-buttonList {
.horizontal-filter-body { .horizontal-filter-body {
display: flex; display: flex;
flex-wrap: nowrap;
flex: 1; flex: 1;
min-width: 100px;
.controls:not(.js-value) { @include phone {
flex-shrink: 0; display: block;
margin-right: 5px;
}
> .controls,
> input {
@include bidi-style(margin-right, 5px, margin-left, 0);
@include phone {
margin: 0 0 5px !important;
}
> .controls-label {
margin-left: 0;
margin-right: 5px;
@include rtl(margin-left, 5px);
@include rtl(margin-right, 0);
}
.horizontal-filter-value {
max-width: 100%;
}
}
> .controls > .controls {
max-width: 100%;
+ .controls {
@include bidi-style(margin-left, 5px, margin-right, 0);
}
} }
} }
@ -9776,12 +9794,21 @@ label + .wizard-buttonList {
} }
.horizontal-filter-value { .horizontal-filter-value {
flex-shrink: 0; max-width: 60%;
flex-grow: 1;
@include phone {
max-width: 100%;
}
// lower the min-width of url input fields (normally 400px) so that it fits in // lower the min-width of url input fields (normally 400px) so that it fits in
input[type=url] { input[type=url] {
min-width: 200px; min-width: 200px;
} }
.dropdown:only-child {
flex-grow: 1;
}
} }
.output-input { .output-input {
@ -12350,6 +12377,18 @@ body.fit {
@include bidi-style(margin-right, 10px, margin-left, 0); @include bidi-style(margin-right, 10px, margin-left, 0);
} }
.half-space-left {
@include bidi-style(margin-left, 5px, margin-right, 0);
}
.half-space-right {
@include bidi-style(margin-right, 5px, margin-left, 0);
}
.min-fit-content {
min-width: fit-content;
}
.align-center { .align-center {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;