[Rt-commit] rt branch 5.0/configure-dashboard-column-width created. rt-5.0.3-253-g75e5dcb5d6

BPS Git Server git at git.bestpractical.com
Thu Feb 16 19:12:30 UTC 2023


This is an automated email from the git hooks/post-receive script. It was
generated because a ref change was pushed to the repository containing
the project "rt".

The branch, 5.0/configure-dashboard-column-width has been created
        at  75e5dcb5d6f65ddae0899827bad8fb1bd0db4e78 (commit)

- Log -----------------------------------------------------------------
commit 75e5dcb5d6f65ddae0899827bad8fb1bd0db4e78
Author: Jason Crome <jcrome at bestpractical.com>
Date:   Tue Feb 14 16:54:38 2023 -0500

    Create UI for adjusting dashboard column width
    
    Users with accessibility concerns can either tab onto the slider and
    move it with the arrow keys, or tab into one of the width text boxes and
    enter the number of columns manually.
    
    This only appears on the dashboard configuration page, and assumes that
    dashboards will be two columns wide.

diff --git a/lib/RT/Dashboard.pm b/lib/RT/Dashboard.pm
index a2ca8782fe..4d4dc25bf7 100644
--- a/lib/RT/Dashboard.pm
+++ b/lib/RT/Dashboard.pm
@@ -104,7 +104,10 @@ sub SaveAttribute {
     return $object->AddAttribute(
         'Name'        => 'Dashboard',
         'Description' => $args->{'Name'},
-        'Content'     => {Panes => $args->{'Panes'}},
+        'Content'     => {
+            Panes => $args->{'Panes'},
+            Width => $args->{'Width'},
+        },
     );
 }
 
@@ -116,6 +119,7 @@ sub UpdateAttribute {
     if (defined $args->{'Panes'}) {
         ($status, $msg) = $self->{'Attribute'}->SetSubValues(
             Panes => $args->{'Panes'},
+            Width => $args->{'Width'},
         );
     }
 
@@ -178,6 +182,18 @@ sub Portlets {
     return map { @$_ } values %{ $self->Panes };
 }
 
+=head2 Width
+
+Returns a hashref of column widths
+
+=cut
+
+sub Width {
+    my $self = shift;
+    return unless ref($self->{'Attribute'}) eq 'RT::Attribute';
+    return $self->{'Attribute'}->SubValue('Width') || {};
+}
+
 =head2 Dashboards
 
 Returns a list of loaded sub-dashboards
diff --git a/lib/RT/Interface/Web.pm b/lib/RT/Interface/Web.pm
index e5291ce861..51cb6a39e6 100644
--- a/lib/RT/Interface/Web.pm
+++ b/lib/RT/Interface/Web.pm
@@ -4831,7 +4831,11 @@ sub UpdateDashboard {
         "panes"        => {
             "body"    => [],
             "sidebar" => []
-        }
+        },
+        "width" => {
+            body    => $args->{body_width},
+            sidebar => $args->{sidebar_width},
+        },
     };
 
     foreach my $arg (qw{ body sidebar }) {
@@ -4908,7 +4912,7 @@ sub UpdateDashboard {
         $content->{$pane_name} = \@pane;
     }
 
-    return ( $ok, $msg ) = $Dashboard->Update( Panes => $content );
+    return ( $ok, $msg ) = $Dashboard->Update( Panes => $content, Width => $data->{ width } );
 }
 
 =head2 ListOfReports
diff --git a/share/html/Dashboards/Queries.html b/share/html/Dashboards/Queries.html
index cdda5fb22f..19ba83b365 100644
--- a/share/html/Dashboards/Queries.html
+++ b/share/html/Dashboards/Queries.html
@@ -51,14 +51,18 @@
 
 <form method="post" name="UpdateSearches" class="mx-auto max-width-lg">
   <& /Widgets/SearchSelection,
-    pane_name => \%pane_name,
-    sections  => \@sections,
-    selected  => \%selected,
-    filters   => \@filters,
+    pane_name       => \%pane_name,
+    sections        => \@sections,
+    selected        => \%selected,
+    filters         => \@filters,
+    dashboard_setup => $dashboard_setup,
+    body_width      => $Dashboard->Width->{ body },
+    sidebar_width   => $Dashboard->Width->{ sidebar },
   &>
   <& /Elements/Submit, Name => "UpdateSearches", Label => loc('Save') &>
 </form>
 <%INIT>
+my $dashboard_setup = RT::Interface::Web::RequestENV('REQUEST_URI') =~ m{^/Dashboards/Queries.html} ? 1 : 0;
 my @results;
 
 # Don't permit someone to supply "self_service_dashboard=1" on the URL line
diff --git a/share/html/Dashboards/Render.html b/share/html/Dashboards/Render.html
index 187cfd0b80..e88cd839a1 100644
--- a/share/html/Dashboards/Render.html
+++ b/share/html/Dashboards/Render.html
@@ -74,12 +74,12 @@
 
 % my $body = $show_cb->('body');
 % my $sidebar = $show_cb->('sidebar');
-  <div class="col-<% $sidebar =~ /\S/ ? 8 : 12 %>">
+  <div class="col-<% $sidebar =~ /\S/ ? $body_width : 12 %>">
     <% $body |n %>
   </div>
 
 % if ( $sidebar =~ /\S/ ) {
-  <div class="col-4">
+  <div class="col-<% $sidebar_width %>">
     <% $sidebar |n %>
   </div>
 % }
@@ -135,6 +135,10 @@ unless ($ok) {
     Abort(loc("Could not load dashboard [_1]", $id), Code => HTTP::Status::HTTP_NOT_FOUND);
 }
 
+# Pick reasonable defaults
+my $body_width    = $Dashboard->Width->{body}    // 8;
+my $sidebar_width = $Dashboard->Width->{sidebar} // 4;
+
 my $path = '/Dashboards/' . $Dashboard->id . '/' . $Dashboard->Name;
 unless ( $skip_create ) {
     push @results, ProcessQuickCreate( Path => $path, ARGSRef => \%ARGS );
diff --git a/share/html/Widgets/SearchSelection b/share/html/Widgets/SearchSelection
index 787ebd7693..1d5f79ecdf 100644
--- a/share/html/Widgets/SearchSelection
+++ b/share/html/Widgets/SearchSelection
@@ -85,7 +85,58 @@
         </div>
       </div>
     </div>
+%   if ( $dashboard_setup ) {
+    <script>
+      jQuery(window).on('load', function() {
+        var validateWidth = function ( cols ) {
+          if( ! jQuery.isNumeric( cols ) ) { return 0; }
+          if( cols < 0 ) { cols = 0; }
+          if( cols > 12 ) { cols = 12; }
+          return cols;
+        }
 
+        jQuery( "#slider-body-width" ).slider({
+          range: 'min',
+          min: 0,
+          max: 12,
+          value: <% $body_width %>,
+          slide: function( event, ui ) {
+            jQuery( "#body-width" ).val( ui.value );
+            jQuery( "#sidebar-width" ).val( 12 - ui.value );
+            jQuery( "#slider-sidebar-width" ).slider( "value", 12 - ui.value );
+          }
+        });
+        jQuery( "#body-width" ).val( jQuery( "#slider-body-width" ).slider( "value" ) );
+        jQuery( "#body-width" ).change(function() {
+            var cols = validateWidth( jQuery(this).val() );
+            jQuery( this ).val( cols );
+            jQuery( "#slider-body-width" ).slider( "value", cols );
+            jQuery( "#sidebar-width" ).val( 12 - cols );
+            jQuery( "#slider-sidebar-width" ).slider( "value", 12 - cols );
+        });
+
+        jQuery( "#slider-sidebar-width" ).slider({
+          range: 'min',
+          min: 0,
+          max: 12,
+          value: <% $sidebar_width %>,
+          slide: function( event, ui ) {
+            jQuery( "#sidebar-width" ).val( ui.value );
+            jQuery( "#body-width" ).val( 12 - ui.value );
+            jQuery( "#slider-body-width" ).slider( "value", 12 - ui.value );
+          }
+        });
+        jQuery( "#sidebar-width" ).val( jQuery( "#slider-sidebar-width" ).slider( "value" ) );
+        jQuery( "#sidebar-width" ).change(function() {
+            var cols = validateWidth( jQuery(this).val() );
+            jQuery( this ).val( cols );
+            jQuery( "#slider-body-width" ).slider( "value", 12 - cols );
+            jQuery( "#body-width" ).val( 12 - cols );
+            jQuery( "#slider-sidebar-width" ).slider( "value", cols );
+        });
+      });
+    </script>
+%   }
     <div class="col-6">
       <div class="destinations">
 %     for my $pane (sort keys %pane_name) {
@@ -100,6 +151,22 @@
              </ul>
             </div>
           </div>
+%         if ( $dashboard_setup ) {
+          <div class="form-row">
+            <div class="form-group mx-auto">
+              <div id="slider-<% $pane %>-width" class="width-slider"></div>
+              <div class="input-group">
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><% ucfirst $pane %> Width: </span>
+                </div>
+                <input type="number" min="1" max="12" step="1" class="form-control" name="<% $pane %>_width" id="<% $pane %>-width" />
+                <div class="input-group-prepend">
+                  <span class="input-group-text">/ 12 Columns</span>
+                </div>
+              </div>
+            </div>
+          </div>
+%         }
         </div>
 %   }
       </div>
@@ -109,6 +176,19 @@
 
 <%INIT>
 use utf8;
+
+# Defaults needed here so the editor controls can setup properly for dashboards
+# without column widths that are explicitly set.
+my ( $body_width, $sidebar_width );
+if ( $dashboard_setup ) {
+    $body_width    = $ARGS{ body_width } // 8;
+    $sidebar_width = $ARGS{ sidebar_width } // 4;
+} else {
+    # This is some other use of this widget; not for setting up a dashboard
+    $body_width    = 12;
+    $sidebar_width = 0
+}
+
 $m->callback(
     CallbackName => 'Default',
     sections     => \@sections,
@@ -121,4 +201,5 @@ $m->callback(
 @filters
 @sections
 %selected
+$dashboard_setup => 0
 </%ARGS>
diff --git a/share/static/css/elevator-light/forms.css b/share/static/css/elevator-light/forms.css
index 3eca1af77a..4975bc3751 100644
--- a/share/static/css/elevator-light/forms.css
+++ b/share/static/css/elevator-light/forms.css
@@ -539,3 +539,27 @@ div.form-row > div.label > span.prev-icon-helper {
 div.form-row > div.label > span.prev-icon-helper + .icon-helper {
   margin-left: -1em;
 }
+
+/* Dashboard sliders */
+.ui-slider-handle {
+  padding-top: 15px;
+  padding-bottom: 5px;
+}
+
+.width-slider {
+  margin-top: 10px;
+  padding-top: 15px;
+  padding-bottom 15px;
+}
+
+.input-group > .input-group-prepend > .input-group-text {
+  margin-top: 15px;
+  background-color: #fff;
+  border: none;
+}
+
+.form-group > .input-group > .form-control {
+  margin-top: 15px;
+  border-radius: .25rem;
+  width: 50px;
+}

-----------------------------------------------------------------------


hooks/post-receive
-- 
rt


More information about the rt-commit mailing list