[Rt-commit] rt branch 5.0/configure-dashboard-column-width created. rt-5.0.5-35-gaa2642b6fe
BPS Git Server
git at git.bestpractical.com
Thu Nov 2 19:20:36 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 aa2642b6fe42758a0fdab87748940719bddbc684 (commit)
- Log -----------------------------------------------------------------
commit aa2642b6fe42758a0fdab87748940719bddbc684
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 897cb9cade..c8bd131962 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 048527213a..7718e61918 100644
--- a/lib/RT/Interface/Web.pm
+++ b/lib/RT/Interface/Web.pm
@@ -4967,7 +4967,11 @@ sub UpdateDashboard {
"panes" => {
"body" => [],
"sidebar" => []
- }
+ },
+ "width" => {
+ body => $args->{body_width},
+ sidebar => $args->{sidebar_width},
+ },
};
foreach my $arg (qw{ body sidebar }) {
@@ -5044,7 +5048,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 3986c60991..98d5245fb7 100644
--- a/share/html/Dashboards/Queries.html
+++ b/share/html/Dashboards/Queries.html
@@ -51,10 +51,13 @@
<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 => 1,
+ body_width => $Dashboard->Width->{ body },
+ sidebar_width => $Dashboard->Width->{ sidebar },
&>
<& /Elements/Submit, Name => "UpdateSearches", Label => loc('Save') &>
</form>
diff --git a/share/html/Dashboards/Render.html b/share/html/Dashboards/Render.html
index 76f2b72dc0..371124161d 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>
% }
@@ -150,6 +150,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/Elements/MyRT b/share/html/Elements/MyRT
index 4cc8eb92ba..d066b0fe06 100644
--- a/share/html/Elements/MyRT
+++ b/share/html/Elements/MyRT
@@ -48,12 +48,12 @@
% $m->callback( ARGSRef => \%ARGS, CallbackName => 'BeforeTable' );
<div class="myrt row">
-<div class="<% 'boxcontainer col-md-' . ( $sidebar ? '8' : '12' ) %>">
+<div class="<% 'boxcontainer col-md-' . ( $sidebar ? $body_width : '12' ) %>">
% $show_cb->($_) foreach @$body;
</div>
% if ( $sidebar ) {
-<div class="boxcontainer col-md-4">
+<div class="boxcontainer col-md-<% $sidebar_width %>">
% $show_cb->($_) foreach @$sidebar;
</div>
% }
@@ -61,6 +61,8 @@
</div>
% $m->callback( ARGSRef => \%ARGS, CallbackName => 'AfterTable' );
<%INIT>
+my $body_width = 8;
+my $sidebar_width = 4;
my %allowed_components = map {$_ => 1} @{RT->Config->Get('HomepageComponents')};
@@ -95,6 +97,8 @@ unless ( $Portlets ) {
}
}
$Portlets = $dashboard->Panes;
+ $body_width = $dashboard->Width->{body} // 8;
+ $sidebar_width = $dashboard->Width->{sidebar} // 4;
}
$m->callback( CallbackName => 'MassagePortlets', Portlets => $Portlets );
diff --git a/share/html/Widgets/SearchSelection b/share/html/Widgets/SearchSelection
index 266ecab2b0..0bcab3015a 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 width-slider-wrapper">
+ <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"><% loc("[_1] Width:", ucfirst $pane) %></span>
+ </div>
+ <input type="number" min="0" max="12" step="1" class="form-control" name="<% $pane %>_width" id="<% $pane %>-width" />
+ <div class="input-group-prepend">
+ <span class="input-group-text"><% loc('/ 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/dashboards.css b/share/static/css/elevator-light/dashboards.css
index 731c36cd03..00c5821c7c 100644
--- a/share/static/css/elevator-light/dashboards.css
+++ b/share/static/css/elevator-light/dashboards.css
@@ -5,3 +5,27 @@ table.dashboard {
#body>table.dashboard {
margin-top: inherit
}
+
+/* Dashboard sliders */
+.ui-slider-handle {
+ padding-top: 15px;
+ padding-bottom: 5px;
+}
+
+.width-slider {
+ margin-top: 10px;
+ padding-top: 15px;
+ padding-bottom 15px;
+}
+
+.selectionbox-js .width-slider-wrapper .input-group > .input-group-prepend > .input-group-text {
+ margin-top: 15px;
+ background-color: #fff;
+ border: none;
+}
+
+.selectionbox-js .width-slider-wrapper .form-group > .input-group > .form-control {
+ margin-top: 15px;
+ border-radius: .25rem !important;
+ width: 50px;
+}
-----------------------------------------------------------------------
hooks/post-receive
--
rt
More information about the rt-commit
mailing list