Merge pull request #238 from creative-commoners/pulls/3.1/fix-searchbutton

FIX Update GridFieldAddExistinSearchButton and dialog to use Bootstrap classes
2024-10-22 17:05:39 +02:00 · 2018-01-26 16:31:31 +00:00 · 2018-01-26 16:31:31 +00:00 · 64b6fd04f3
commit 64b6fd04f3
parent 4955b9c4b9 eb9093a3ac
7 changed files with 100 additions and 81 deletions
--- a/css/GridFieldExtensions.css
+++ b/css/GridFieldExtensions.css
@ -14,7 +14,7 @@
 }

 .add-existing-search-dialog .add-existing-search-form .field label {
-  padding-bottom: 4px;
+  padding: 4px 0;
 }

 .add-existing-search-dialog .add-existing-search-form .Actions {
@ -22,38 +22,12 @@
  padding: 0;
 }

-.add-existing-search-dialog .add-existing-search-items li a {
-  background: #FFF;
-  border: solid #CCC;
-  border-right-width: 1px;
-  border-bottom-width: 1px;
-  border-left-width: 1px;
-  display: block;
-  padding: 6px;
+.add-existing-search-dialog .list-group-item {
+  min-height: 32px;
 }

-.add-existing-search-dialog .add-existing-search-items li:first-child a {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  border-top-width: 1px;
-}
-
-.add-existing-search-dialog .add-existing-search-items li:last-child a {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.add-existing-search-dialog .add-existing-search-items li a:hover {
-  background: #F4F4F4;
-}
-
-.add-existing-search-dialog .add-existing-search-pagination li {
-  background: #FFF;
-  display: block;
-  float: left;
-  margin-right: 2px;
+.add-existing-search-dialog .btn-toolbar {
  margin-top: 12px;
-  padding: 6px;
 }

 /**
--- a/javascript/GridFieldExtensions.js
+++ b/javascript/GridFieldExtensions.js
@ -44,6 +44,15 @@
 			}
 		});

+		// Allow the list item to be clickable as well as the anchor
+    $('.add-existing-search-dialog .add-existing-search-items .list-group-item-action').entwine({
+      onclick: function() {
+        if (this.children('a').length > 0) {
+          this.children('a').first().trigger('click');
+        }
+      }
+    });
+
 		$(".add-existing-search-dialog .add-existing-search-items a").entwine({
 			onclick: function() {
 				var link = this.closest(".add-existing-search-items").data("add-link");
--- a/lang/en.yml
+++ b/lang/en.yml
@ -0,0 +1,14 @@
+en:
+  GridFieldExtensions:
+    ADD: Add
+    ADDEXISTING: 'Add Existing'
+    BACK: Back
+    CURRENT: (current)
+    NOITEMS: 'There are no items.'
+    Next: Next
+    PREVIOUS: Previous
+    RESULTS: Results
+    SEARCH: Search
+    SELECTTYPETOCREATE: '(Select type to create)'
+  Symbiote\GridFieldExtensions\GridFieldConfigurablePaginator:
+    SHOW: Show
--- a/src/GridFieldAddExistingSearchButton.php
+++ b/src/GridFieldAddExistingSearchButton.php
@ -91,14 +91,15 @@ class GridFieldAddExistingSearchButton implements GridField_HTMLProvider, GridFi
    {
        GridFieldExtensions::include_requirements();

-        $data = new ArrayData(array(
+        $data = ArrayData::create([
            'Title' => $this->getTitle(),
-            'Link'  => $grid->Link('add-existing-search')
-        ));
+            'Classes' => 'action btn btn-primary font-icon-search add-existing-search',
+            'Link' => $grid->Link('add-existing-search'),
+        ]);

-        return array(
-            $this->fragment => $data->renderWith('Symbiote\\GridFieldExtensions\\GridFieldAddExistingSearchButton'),
-        );
+        return [
+            $this->fragment => $data->renderWith(__CLASS__),
+        ];
    }

    public function getURLHandlers($grid)
--- a/src/GridFieldAddExistingSearchHandler.php
+++ b/src/GridFieldAddExistingSearchHandler.php
@ -7,8 +7,10 @@ use SilverStripe\Control\RequestHandler;
 use SilverStripe\Forms\FieldList;
 use SilverStripe\Forms\Form;
 use SilverStripe\Forms\FormAction;
+use SilverStripe\Forms\GridField\GridField;
 use SilverStripe\ORM\DataList;
 use SilverStripe\ORM\PaginatedList;
+use SilverStripe\ORM\Search\SearchContext;

 /**
 * Used by {@link GridFieldAddExistingSearchButton} to provide the searching
@ -49,7 +51,7 @@ class GridFieldAddExistingSearchHandler extends RequestHandler

    public function index()
    {
-        return $this->renderWith('Symbiote\\GridFieldExtensions\\GridFieldAddExistingSearchHandler');
+        return $this->renderWith(__CLASS__);
    }

    public function add($request)
@ -73,19 +75,18 @@ class GridFieldAddExistingSearchHandler extends RequestHandler
     */
    public function SearchForm()
    {
-        $form = new Form(
+        $form = Form::create(
            $this,
            'SearchForm',
            $this->context->getFields(),
-            new FieldList(
+            FieldList::create(
                FormAction::create('doSearch', _t('GridFieldExtensions.SEARCH', 'Search'))
                    ->setUseButtonTag(true)
-                    ->addExtraClass('ss-ui-button')
-                    ->setAttribute('data-icon', 'magnifier')
+                    ->addExtraClass('btn btn-primary font-icon-search')
            )
        );

-        $form->addExtraClass('stacked add-existing-search-form');
+        $form->addExtraClass('stacked add-existing-search-form form--no-dividers');
        $form->setFormMethod('GET');

        return $form;
--- a/templates/Symbiote/GridFieldExtensions/GridFieldAddExistingSearchButton.ss
+++ b/templates/Symbiote/GridFieldExtensions/GridFieldAddExistingSearchButton.ss
@ -1,3 +1,3 @@
-<a href="$Link" class="action ss-ui-button ui-button add-existing-search" data-icon="magnifier">
-	$Title
-</a>
+<a href="$Link" class="$Classes">
+    <span class="btn__title">$Title</span>
+</a>
--- a/templates/Symbiote/GridFieldExtensions/GridFieldAddExistingSearchHandler.ss
+++ b/templates/Symbiote/GridFieldExtensions/GridFieldAddExistingSearchHandler.ss
@ -1,36 +1,56 @@
-$SearchForm
-
-<h3><% _t("RESULTS", "Results") %></h3>
-<div class="add-existing-search-results">
-	<% if $Items %>
-		<ul class="add-existing-search-items" data-add-link="$Link('add')">
-			<% loop $Items %>
-				<li class="$EvenOdd"><a href="#" data-id="$ID">$Title</a></li>
-			<% end_loop %>
-		</ul>
-	<% else %>
-		<p><% _t("NOITEMS", "There are no items.") %></p>
-	<% end_if %>
-
-	<% if $Items.MoreThanOnePage %>
-		<ul class="add-existing-search-pagination">
-			<% if $Items.NotFirstPage %>
-				<li><a href="$Items.PrevLink">&laquo;</a></li>
-			<% end_if %>
-
-			<% loop $Items.PaginationSummary(4) %>
-				<% if $CurrentBool %>
-					<li class="current">$PageNum</li>
-				<% else_if $Link %>
-					<li><a href="$Link">$PageNum</a></li>
-				<% else %>
-					<li>&hellip;</li>
-				<% end_if %>
-			<% end_loop %>
-
-			<% if $Items.NotLastPage %>
-				<li><a href="$Items.NextLink">&raquo;</a></li>
-			<%end_if %>
-		</ul>
-	<% end_if %>
-</div>
+$SearchForm
+
+<h3><%t GridFieldExtensions.RESULTS "Results" %></h3>
+<div class="add-existing-search-results">
+	<% if $Items %>
+		<ul class="list-group add-existing-search-items" data-add-link="$Link('add')">
+			<% loop $Items %>
+				<li class="$EvenOdd list-group-item list-group-item-action">
+                    <a href="#" data-id="$ID">$Title</a>
+                </li>
+			<% end_loop %>
+		</ul>
+	<% else %>
+		<p><%t GridFieldExtensions.NOITEMS "There are no items." %></p>
+	<% end_if %>
+
+	<% if $Items.MoreThanOnePage %>
+		<ul class="pagination add-existing-search-pagination">
+			<% if $Items.NotFirstPage %>
+				<li class="page-item">
+                    <a class="page-link" href="$Items.PrevLink">
+                        <span aria-hidden="true">&laquo;</span>
+                        <span class="sr-only"><%t GridFieldExtensions.PREVIOUS "Previous" %></span>
+                    </a>
+                </li>
+			<% end_if %>
+
+			<% loop $Items.PaginationSummary(2) %>
+				<% if $CurrentBool %>
+					<li class="page-item active">
+                        <a class="page-link" href="#">
+                            $PageNum <span class="sr-only"><%t GridFieldExtensions.CURRENT "(current)" %></span>
+                        </a>
+                    </li>
+				<% else_if $Link %>
+                    <li class="page-item">
+                        <a class="page-link" href="$Link">
+                            $PageNum
+                        </a>
+                    </li>
+				<% else %>
+					<li class="page-item disabled">
+                        <a class="page-link" href="#">&hellip;</a>
+                    </li>
+				<% end_if %>
+			<% end_loop %>
+
+			<% if $Items.NotLastPage %>
+                <a class="page-link" href="$Items.NextLink">
+                    <span aria-hidden="true">&raquo;</span>
+                    <span class="sr-only"><%t GridFieldExtensions.Next "Next" %></span>
+                </a>
+			<%end_if %>
+		</ul>
+	<% end_if %>
+</div>