NO-JIRA visually separate the controls in groups

The "filter" toolbar above many pages has all controls without spacing.
This PR inserts a little bit of spacing to make the groups of controls
more obvious.

Spacing is applied 3 times:

 - at the start of the row to separate it from the left margin
 - at "sort order" to separate the "filter" group from the "ordering"
group
 - at "columns" to separate it from "reset"

Since the "looking glass" being an icon, no extra spacing was needed
there.

Note: I tried to use "1em" as spacing, but that did not work, so this PR
uses "10px".
This commit is contained in:
Erwin Dondorp 2021-03-12 12:00:20 +01:00 committed by Justin Bertram
parent a47733826a
commit 6d379d1aa7
1 changed files with 3 additions and 3 deletions

View File

@ -25,7 +25,7 @@ var Artemis;
<form class="toolbar-pf-actions"> <form class="toolbar-pf-actions">
<div class="form-group toolbar-pf-filter"> <div class="form-group toolbar-pf-filter">
<div class="input-group"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn" style="padding-left: 10px">
<button id="filter.values.field" type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$ctrl.filter.text.fieldText}} <span class="caret"></span></button> <button id="filter.values.field" type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$ctrl.filter.text.fieldText}} <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li ng-repeat="option in $ctrl.filter.fieldOptions" <li ng-repeat="option in $ctrl.filter.fieldOptions"
@ -40,7 +40,7 @@ var Artemis;
</ul> </ul>
</div> </div>
<input type="text" class="form-control" ng-model="$ctrl.filter.values.value" placeholder="Value" autocomplete="off" id="filterInput"> <input type="text" class="form-control" ng-model="$ctrl.filter.values.value" placeholder="Value" autocomplete="off" id="filterInput">
<div class="input-group-btn"> <div class="input-group-btn" style="padding-left: 10px">
<button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$ctrl.filter.text.sortOrderText}}<span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$ctrl.filter.text.sortOrderText}}<span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li ng-repeat="option in $ctrl.filter.sortOptions" <li ng-repeat="option in $ctrl.filter.sortOptions"
@ -66,7 +66,7 @@ var Artemis;
ng-click="$ctrl.reset()">Reset ng-click="$ctrl.reset()">Reset
</button> </button>
</div> </div>
<div class="input-group-btn"> <div class="input-group-btn" style="padding-left: 10px">
<button class="btn btn-default primary-action ng-binding ng-scope" <button class="btn btn-default primary-action ng-binding ng-scope"
type="button" type="button"
title="" title=""