Fixes #3499: Broken UI - Create Reporting profile

app/assets/javascripts/app/controllers/_ui_element/postmaster_set.coffee

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

app/assets/javascripts/app/controllers/_ui_element/ticket_perform_action.coffee

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

app/assets/javascripts/app/controllers/_ui_element/ticket_selector.coffee

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

app/assets/javascripts/app/controllers/report_profile.coffee

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

app/assets/javascripts/app/views/generic/postmaster_match.jst.eco

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

app/assets/javascripts/app/views/generic/postmaster_set_row.jst.eco

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

app/assets/javascripts/app/views/generic/ticket_perform_action/attribute_selector.jst.eco

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

app/assets/javascripts/app/views/generic/ticket_perform_action/row.jst.eco

@@ -5,7 +5,7 @@
         <%- @Icon('arrow-down', 'dropdown-arrow') %>
       </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-setArticle flex"></div>
   </div>
@@ -17,4 +17,4 @@
       <%- @Icon('plus-small') %>
     </div>
   </div>
-</div>
+</div>

app/assets/javascripts/app/views/generic/ticket_selector_row.jst.eco

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

app/assets/javascripts/app/views/generic/time_range.jst.eco

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

app/assets/stylesheets/zammad.scss

@@ -2120,6 +2120,7 @@ input.timeframe,
 input.time {
   box-sizing: content-box;
   padding: 0 6px;
+  height: 39px;
   line-height: 42px;
   flex-shrink: 0;
 
@@ -9727,25 +9728,13 @@ label + .wizard-buttonList {
     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,
   input {
     border-color: hsl(198,19%,86%);
   }
 
   input[type=text] {
-    width: auto;
+    width: 100%;
   }
 
   input[data-item=time] {
@@ -9755,11 +9744,40 @@ label + .wizard-buttonList {
 
 .horizontal-filter-body {
   display: flex;
-  flex-wrap: nowrap;
   flex: 1;
+  min-width: 100px;
 
-  .controls:not(.js-value) {
-    flex-shrink: 0;
+  @include phone {
+    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 {
-  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
   input[type=url] {
     min-width: 200px;
   }
+
+  .dropdown:only-child {
+    flex-grow: 1;
+  }
 }
 
 .output-input {
@@ -12350,6 +12377,18 @@ body.fit {
   @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 {
   margin-left: auto;
   margin-right: auto;