[Rt-commit] rt branch 5.0/configure-dashboard-column-width created. rt-5.0.3-401-g719bcfeac9
BPS Git Server
git at git.bestpractical.com
Fri Apr 21 14:52:34 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 719bcfeac9e7a812770649d5e9be8a88e0eebe5a (commit)
- Log -----------------------------------------------------------------
commit 719bcfeac9e7a812770649d5e9be8a88e0eebe5a
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 363d12a955..feb26ff2fa 100644
--- a/lib/RT/Interface/Web.pm
+++ b/lib/RT/Interface/Web.pm
@@ -4915,7 +4915,11 @@ sub UpdateDashboard {
"panes" => {
"body" => [],
"sidebar" => []
- }
+ },
+ "width" => {
+ body => $args->{body_width},
+ sidebar => $args->{sidebar_width},
+ },
};
foreach my $arg (qw{ body sidebar }) {
@@ -4992,7 +4996,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 73e4f23a92..d433b29ac0 100644
--- a/share/html/Dashboards/Queries.html
+++ b/share/html/Dashboards/Queries.html
@@ -51,14 +51,19 @@
<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 $req_uri = RT::Interface::Web::RequestENV('REQUEST_URI');
+my $dashboard_setup = $req_uri =~ m{^/Dashboards/Queries.html|/Admin/Global/SelfServiceHomePage.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 06b03ca26e..758ec130ac 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/Elements/MyRT b/share/html/Elements/MyRT
index f4df16448d..bf6f72b63b 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 787ebd7693..4428b68539 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"><% 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..7c15ddc3bc 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;
+}
+
+.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