Project

General

Profile

Download (15.8 KB)

Feature #39806 » 0001-replaces-query-filters-and-option-tables-with-a-flex.patch

Jens Krämer, 2023-12-11 06:01

View differences:

app/views/gantts/show.html.erb
23 23 
  <fieldset id="options" class="collapsible collapsed">
24 24 
    <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
25 25 
    <div style="display: none;">
26 
      <table>
27 
        <tr>
28 
          <td>
26 
      <div>
29 27 
            <fieldset>
30 28 
              <legend>
31 29 
                <%= l(:field_column_names) %>
32 30 
              </legend>
31 
              <div id="list-definition">
32 
                <div>
33 33 
              <label for="draw_selected_columns">
34 
                <%= check_box 'query', 'draw_selected_columns', :id => 'draw_selected_columns', 'data-enables' => 'span.query-columns select, span.query-columns input' %>
34 
                <%= check_box 'query', 'draw_selected_columns', :id => 'draw_selected_columns', 'data-enables' => '#list-definition .query-columns select, #list-definition .query-columns input' %>
35 35 
                  <%= l(:label_display) %>
36 36 
              </label>
37 
                </div>
38 
                <div>
37 39 
              <%= render_query_columns_selection(@query) %>
40 
                </div>
41 
              </div>
38 42 
            </fieldset>
39 
          </td>
40 
        </tr>
41 
        <tr>
42 
          <td>
43 43 
            <fieldset>
44 44 
              <legend><%= l(:label_related_issues) %></legend>
45 45 
              <label for="draw_relations">
......
53 53 
                <% end %>
54 54 
              </label>
55 55 
            </fieldset>
56 
          </td>
57 
          <td>
58 56 
            <fieldset>
59 57 
              <legend><%= l(:label_gantt_progress_line) %></legend>
60 58 
              <label for="draw_progress_line">
......
62 60 
                <%= l(:label_display) %>
63 61 
              </label>
64 62 
            </fieldset>
65 
          </td>
66 
        </tr>
67 
      </table>
63 
      </div>
68 64 
    </div>
69 65 
  </fieldset>
70 66 
</div>
app/views/queries/_columns.html.erb
2 2 
<% available_tag_id = "available_#{tag_id}" %>
3 3 
<% selected_tag_id = "selected_#{tag_id}" %>
4 4 

  		




  5
  
  
    
<span class="query-columns">

  		




  6
  
  
    
  <span>

  		




  
  5
  
    
<div class="query-columns">

  		




  7
  6
  
    
      <%= label_tag available_tag_id, l(:description_available_columns) %>

  		




  8
  7
  
    
      <%= select_tag 'available_columns',

  		




  9
  8
  
    
              options_for_select(query_available_inline_columns_options(query)),

  		




  10
  9
  
    
              :id => available_tag_id,

  		




  11
  10
  
    
              :multiple => true, :size => 10,

  		




  12
  11
  
    
              :ondblclick => "moveOptions(this.form.#{available_tag_id}, this.form.#{selected_tag_id});" %>

  		




  13
  
  
    
  </span>

  		




  14
  
  
    
  <span class="buttons">

  		




  
  12
  
    
</div>

  		




  
  13
  
    
<div class="buttons">

  		




  15
  14
  
    
      <input type="button" value="&#8594;" class="move-right"

  		




  16
  15
  
    
       onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);" />

  		




  17
  16
  
    
      <input type="button" value="&#8592;" class="move-left"

  		




  18
  17
  
    
       onclick="moveOptions(this.form.<%= selected_tag_id %>, this.form.<%= available_tag_id %>);" />

  		




  19
  
  
    
  </span>

  		




  20
  
  
    
  <span>

  		




  
  18
  
    
</div>

  		




  
  19
  
    
<div class="query-columns">

  		




  21
  20
  
    
      <%= label_tag selected_tag_id, l(:description_selected_columns) %>

  		




  22
  21
  
    
      <%= select_tag tag_name,

  		




  23
  22
  
    
              options_for_select(query_selected_inline_columns_options(query)),

  		




  24
  23
  
    
              :id => selected_tag_id,

  		




  25
  24
  
    
              :multiple => true, :size => 10,

  		




  26
  25
  
    
              :ondblclick => "moveOptions(this.form.#{selected_tag_id}, this.form.#{available_tag_id});" %>

  		




  27
  
  
    
  </span>

  		




  28
  
  
    
  <span class="buttons">

  		




  
  26
  
    
</div>

  		




  
  27
  
    
<div class="buttons">

  		




  29
  28
  
    
      <input type="button" value="&#8648;" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);" />

  		




  30
  29
  
    
      <input type="button" value="&#8593;" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);" />

  		




  31
  30
  
    
      <input type="button" value="&#8595;" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);" />

  		




  32
  31
  
    
      <input type="button" value="&#8650;" onclick="moveOptionBottom(this.form.<%= selected_tag_id %>);" />

  		




  33
  
  
    
  </span>

  		




  34
  
  
    
</span>

  		




  
  32
  
    
</div>

  		




  35
  33
  
    

  		




  36
  34
  
    
<%= javascript_tag do %>

  		




  37
  35
  
    
$(document).ready(function(){

  		












  

    
      app/views/queries/_filters.html.erb
    
  





  14
  14
  
    
});

  		




  15
  15
  
    
<% end %>

  		




  16
  16
  
    

  		




  17
  
  
    
<table id="filters-table">

  		




  18
  
  
    
</table>

  		




  
  17
  
    
<div id="filters-table">

  		




  
  18
  
    
</div>

  		




  19
  19
  
    

  		




  20
  20
  
    
<div class="add-filter">

  		




  21
  21
  
    
<%= label_tag('add_filter_select', l(:label_filter_add)) %>

  		












  

    
      app/views/queries/_query_form.html.erb
    
  





  17
  17
  
    
        <div class="hidden">

  		




  18
  18
  
    
          <% if @query.available_display_types.size > 1 %>

  		




  19
  19
  
    
          <div>

  		




  20
  
  
    
            <span class="field"><label for='display_type'><%= l(:label_display_type) %></label></span>

  		




  
  20
  
    
            <div class="field"><label for='display_type'><%= l(:label_display_type) %></label></div>

  		




  21
  21
  
    
            <%= available_display_types_tags(@query) %>

  		




  22
  22
  
    
          </div>

  		




  23
  23
  
    
          <% end %>

  		




  24
  
  
    
          <table id="list-definition" class="<%= 'hidden' if (@query.display_type != 'list') %>">

  		




  
  24
  
    
          <div id="list-definition" class="<%= 'hidden' if (@query.display_type != 'list') %>">

  		




  25
  25
  
    
          <% if @query.available_columns.any? %>

  		




  26
  
  
    
            <tr>

  		




  27
  
  
    
              <td class="field"><%= l(:field_column_names) %></td>

  		




  28
  
  
    
              <td><%= render_query_columns_selection(@query) %></td>

  		




  29
  
  
    
            </tr>

  		




  
  26
  
    
            <div>

  		




  
  27
  
    
              <div class="field"><%= l(:field_column_names) %></div>

  		




  
  28
  
    
              <%= render_query_columns_selection(@query) %>

  		




  
  29
  
    
            </div>

  		




  30
  30
  
    
          <% end %>

  		




  31
  31
  
    
          <% if @query.groupable_columns.any? %>

  		




  32
  
  
    
            <tr>

  		




  33
  
  
    
              <td class="field"><label for='group_by'><%= l(:field_group_by) %></label></td>

  		




  34
  
  
    
              <td><%= group_by_column_select_tag(@query) %></td>

  		




  35
  
  
    
            </tr>

  		




  
  32
  
    
            <div>

  		




  
  33
  
    
              <div class="field"><label for='group_by'><%= l(:field_group_by) %></label></div>

  		




  
  34
  
    
              <div><%= group_by_column_select_tag(@query) %></div>

  		




  
  35
  
    
            </div>

  		




  36
  36
  
    
          <% end %>

  		




  37
  37
  
    
          <% if @query.available_block_columns.any? %>

  		




  38
  
  
    
            <tr>

  		




  39
  
  
    
              <td class="field"><%= l(:button_show) %></td>

  		




  40
  
  
    
              <td><%= available_block_columns_tags(@query) %></td>

  		




  41
  
  
    
            </tr>

  		




  
  38
  
    
            <div>

  		




  
  39
  
    
              <div class="field"><%= l(:button_show) %></div>

  		




  
  40
  
    
              <div><%= available_block_columns_tags(@query) %></div>

  		




  
  41
  
    
            </div>

  		




  42
  42
  
    
          <% end %>

  		




  43
  43
  
    
          <% if @query.available_totalable_columns.any? %>

  		




  44
  
  
    
            <tr>

  		




  45
  
  
    
              <td><%= l(:label_total_plural) %></td>

  		




  46
  
  
    
              <td><%= available_totalable_columns_tags(@query) %></td>

  		




  47
  
  
    
            </tr>

  		




  
  44
  
    
            <div>

  		




  
  45
  
    
              <div class="field"><%= l(:label_total_plural) %></div>

  		




  
  46
  
    
              <div><%= available_totalable_columns_tags(@query) %></div>

  		




  
  47
  
    
            </div>

  		




  48
  48
  
    
          <% end %>

  		




  49
  
  
    
        </table>

  		




  
  49
  
    
        </div>

  		




  50
  50
  
    
      </div>

  		




  51
  51
  
    
    </fieldset>

  		




  52
  52
  
    
  <% end %>

  		












  

    
      public/javascripts/application.js
    
  





  127
  127
  
    
  $('#add_filter_select').change(function() {

  		




  128
  128
  
    
    addFilter($(this).val(), '', []);

  		




  129
  129
  
    
  });

  		




  130
  
  
    
  $('#filters-table td.field input[type=checkbox]').each(function() {

  		




  
  130
  
    
  $('#filters-table .field input[type=checkbox]').each(function() {

  		




  131
  131
  
    
    toggleFilter($(this).val());

  		




  132
  132
  
    
  });

  		




  133
  
  
    
  $('#filters-table').on('click', 'td.field input[type=checkbox]', function() {

  		




  
  133
  
    
  $('#filters-table').on('click', '.field input[type=checkbox]', function() {

  		




  134
  134
  
    
    toggleFilter($(this).val());

  		




  135
  135
  
    
  });

  		




  136
  136
  
    
  $('#filters-table').on('keypress', 'input[type=text]', function(e) {

  		




  ......




  177
  177
  
    
  var filterValues = filterOptions['values'];

  		




  178
  178
  
    
  var i, select;

  		




  179
  179
  
    

  		




  180
  
  
    
  var tr = $('<tr class="filter">').attr('id', 'tr_'+fieldId).html(

  		




  181
  
  
    
    '<td class="field"><input checked="checked" id="cb_'+fieldId+'" name="f[]" value="'+field+'" type="checkbox"><label for="cb_'+fieldId+'"> '+filterOptions['name']+'</label></td>' +

  		




  182
  
  
    
    '<td class="operator"><select id="operators_'+fieldId+'" name="op['+field+']"></td>' +

  		




  183
  
  
    
    '<td class="values"></td>'

  		




  
  180
  
    
  var tr = $('<div class="filter">').attr('id', 'tr_'+fieldId).html(

  		




  
  181
  
    
    '<div class="field"><input checked="checked" id="cb_'+fieldId+'" name="f[]" value="'+field+'" type="checkbox"><label for="cb_'+fieldId+'"> '+filterOptions['name']+'</label></div>' +

  		




  
  182
  
    
    '<div class="operator"><select id="operators_'+fieldId+'" name="op['+field+']"></select></div>' +

  		




  
  183
  
    
    '<div class="values"></div>'

  		




  184
  184
  
    
  );

  		




  185
  185
  
    
  filterTable.append(tr);

  		




  186
  186
  
    

  		




  187
  
  
    
  select = tr.find('td.operator select');

  		




  
  187
  
    
  select = tr.find('.operator select');

  		




  188
  188
  
    
  for (i = 0; i < operators.length; i++) {

  		




  189
  189
  
    
    var option = $('<option>').val(operators[i]).text(operatorLabels[operators[i]]);

  		




  190
  190
  
    
    if (operators[i] == operator) { option.prop('selected', true); }

  		




  ......




  199
  199
  
    
  case "list_optional_with_history":

  		




  200
  200
  
    
  case "list_status":

  		




  201
  201
  
    
  case "list_subprojects":

  		




  202
  
  
    
    tr.find('td.values').append(

  		




  
  202
  
    
    tr.find('.values').append(

  		




  203
  203
  
    
      '<span style="display:none;"><select class="value" id="values_'+fieldId+'_1" name="v['+field+'][]"></select>' +

  		




  204
  204
  
    
      ' <span class="toggle-multiselect icon-only '+(values.length > 1 ? 'icon-toggle-minus' : 'icon-toggle-plus')+'">&nbsp;</span></span>'

  		




  205
  205
  
    
    );

  		




  206
  
  
    
    select = tr.find('td.values select');

  		




  
  206
  
    
    select = tr.find('.values select');

  		




  207
  207
  
    
    if (values.length > 1) { select.attr('multiple', true); }

  		




  208
  208
  
    
    for (i = 0; i < filterValues.length; i++) {

  		




  209
  209
  
    
      var filterValue = filterValues[i];

  		




  ......




  225
  225
  
    
    break;

  		




  226
  226
  
    
  case "date":

  		




  227
  227
  
    
  case "date_past":

  		




  228
  
  
    
    tr.find('td.values').append(

  		




  
  228
  
    
    tr.find('.values').append(

  		




  229
  229
  
    
      '<span style="display:none;"><input type="date" name="v['+field+'][]" id="values_'+fieldId+'_1" size="10" class="value date_value" /></span>' +

  		




  230
  230
  
    
      ' <span style="display:none;"><input type="date" name="v['+field+'][]" id="values_'+fieldId+'_2" size="10" class="value date_value" /></span>' +

  		




  231
  231
  
    
      ' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="3" class="value" /> '+labelDayPlural+'</span>'

  		




  ......




  237
  237
  
    
  case "string":

  		




  238
  238
  
    
  case "text":

  		




  239
  239
  
    
  case "search":

  		




  240
  
  
    
    tr.find('td.values').append(

  		




  
  240
  
    
    tr.find('.values').append(

  		




  241
  241
  
    
      '<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="30" class="value" /></span>'

  		




  242
  242
  
    
    );

  		




  243
  243
  
    
    $('#values_'+fieldId).val(values[0]);

  		




  244
  244
  
    
    break;

  		




  245
  245
  
    
  case "relation":

  		




  246
  
  
    
    tr.find('td.values').append(

  		




  
  246
  
    
    tr.find('.values').append(

  		




  247
  247
  
    
      '<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="6" class="value" /></span>' +

  		




  248
  248
  
    
      '<span style="display:none;"><select class="value" name="v['+field+'][]" id="values_'+fieldId+'_1"></select></span>'

  		




  249
  249
  
    
    );

  		




  250
  250
  
    
    $('#values_'+fieldId).val(values[0]);

  		




  251
  
  
    
    select = tr.find('td.values select');

  		




  
  251
  
    
    select = tr.find('.values select');

  		




  252
  252
  
    
    for (i = 0; i < filterValues.length; i++) {

  		




  253
  253
  
    
      var filterValue = filterValues[i];

  		




  254
  254
  
    
      var option = $('<option>');

  		




  ......




  260
  260
  
    
  case "integer":

  		




  261
  261
  
    
  case "float":

  		




  262
  262
  
    
  case "tree":

  		




  263
  
  
    
    tr.find('td.values').append(

  		




  
  263
  
    
    tr.find('.values').append(

  		




  264
  264
  
    
      '<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_1" size="14" class="value" /></span>' +

  		




  265
  265
  
    
      ' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_2" size="14" class="value" /></span>'

  		




  266
  266
  
    
    );

  		




  ......




  283
  283
  
    

  		




  284
  284
  
    
function enableValues(field, indexes) {

  		




  285
  285
  
    
  var fieldId = field.replace('.', '_');

  		




  286
  
  
    
  $('#tr_'+fieldId+' td.values .value').each(function(index) {

  		




  
  286
  
    
  $('#tr_'+fieldId+' .values .value').each(function(index) {

  		




  287
  287
  
    
    if ($.inArray(index, indexes) >= 0) {

  		




  288
  288
  
    
      $(this).removeAttr('disabled');

  		




  289
  289
  
    
      $(this).parents('span').first().show();

  		












  

    
      public/stylesheets/application.css
    
  





  428
  428
  
    
  min-width: 1em;

  		




  429
  429
  
    
}

  		




  430
  430
  
    

  		




  431
  
  
    
.query-columns>span {

  		




  432
  
  
    
  display:inline-block;

  		




  433
  
  
    
  height:100%;

  		




  434
  
  
    
  vertical-align: middle;

  		




  
  431
  
    
/* query form - options */

  		




  
  432
  
    
#list-definition {

  		




  
  433
  
    
  margin: 0 15px;

  		




  
  434
  
    
  width: auto !important;

  		




  
  435
  
    
}

  		




  
  436
  
    
#list-definition > div {

  		




  
  437
  
    
  margin: 6px 0;

  		




  
  438
  
    
  display: flex;

  		




  
  439
  
    
  flex-wrap: wrap;

  		




  
  440
  
    
  align-items: center;

  		




  
  441
  
    
  gap: 5px 10px;

  		




  
  442
  
    
}

  		




  
  443
  
    
#list-definition > div .field{

  		




  
  444
  
    
  width: 160px;

  		




  435
  445
  
    
}

  		




  436
  446
  
    
.query-columns label {

  		




  437
  447
  
    
  display:block;

  		




  438
  448
  
    
}

  		




  439
  
  
    
.query-columns .buttons input[type=button] {

  		




  
  449
  
    
#list-definition .buttons input[type=button] {

  		




  440
  450
  
    
  width:35px;

  		




  441
  451
  
    
  display:block;

  		




  442
  452
  
    
}

  		




  ......




  449
  459
  
    
.query-totals .value {font-weight:bold;}

  		




  450
  460
  
    
body.controller-timelog .query-totals {margin-top:initial;}

  		




  451
  461
  
    

  		




  
  462
  
    
body.controller-gantts fieldset#options > div > div {

  		




  
  463
  
    
  display: flex;

  		




  
  464
  
    
  flex-wrap: wrap;

  		




  
  465
  
    
  align-items: flex-start;

  		




  
  466
  
    
  gap: 5px 10px;

  		




  
  467
  
    
}

  		




  
  468
  
    

  		




  452
  469
  
    
td.center {text-align:center;}

  		




  453
  470
  
    

  		




  454
  471
  
    
#watchers select {width: 95%; display: block;}

  		




  ......




  605
  622
  
    
fieldset.collapsible>legend { cursor:pointer; padding-left: 18px; background-position: 4px;}

  		




  606
  623
  
    

  		




  607
  624
  
    
fieldset#date-range p { margin: 2px 0 2px 0; }

  		




  608
  
  
    
fieldset#filters table { border-collapse: collapse; }

  		




  609
  
  
    
fieldset#filters table td { padding: 0; vertical-align: middle; }

  		




  610
  
  
    
fieldset#filters tr.filter { height: 2.1em; }

  		




  611
  
  
    
fieldset#filters td.field { width:230px; }

  		




  612
  
  
    
fieldset#filters td.operator { width:130px; }

  		




  613
  
  
    
fieldset#filters td.operator select {max-width:140px;}

  		




  614
  
  
    
fieldset#filters td.values { white-space:nowrap; }

  		




  615
  
  
    
fieldset#filters td.values select {min-width:130px;}

  		




  616
  
  
    

  		




  617
  
  
    
#filters-table {width:60%; float:left;}

  		




  
  625
  
    

  		




  
  626
  
    
#query_form_content > fieldset {

  		




  
  627
  
    
  min-width: 0;

  		




  
  628
  
    
  width: 100%;

  		




  
  629
  
    
}

  		




  
  630
  
    
#filters-table {

  		




  
  631
  
    
  float:left;

  		




  
  632
  
    
  width: auto;

  		




  
  633
  
    
}

  		




  
  634
  
    
#filters-table .field {

  		




  
  635
  
    
  width: 230px;

  		




  
  636
  
    
}

  		




  
  637
  
    
#filters-table .filter {

  		




  
  638
  
    
  margin: 5px 0 0 0;

  		




  
  639
  
    
  display: flex;

  		




  
  640
  
    
  flex-wrap: wrap;

  		




  
  641
  
    
  gap: 0 10px;

  		




  
  642
  
    
}

  		




  
  643
  
    
#filters-table .filter .operator select {

  		




  
  644
  
    
  width: 120px;

  		




  
  645
  
    
}

  		




  
  646
  
    

  		




  618
  647
  
    
.add-filter {width:35%; float:right; text-align: right; vertical-align: top;}

  		




  619
  648
  
    

  		




  620
  649
  
    
#issue_is_private_wrap {float:right; margin-right:1em;}

  		












  

    
      public/stylesheets/responsive.css
    
  





  878
  878
  
    
  .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}

  		




  879
  879
  
    

  		




  880
  880
  
    
  #login-form {width:100%; margin-top:2em;}

  		




  
  881
  
    

  		




  
  882
  
    
  #filters-table .filter .field, #list-definition > div .field { width: 100%; }

  		




  
  883
  
    
  #filters-table .values { width: auto; max-width: 100%; }

  		




  881
  884
  
    
}

  		















  (3-3/9)