From 62ae3267d20cad9390f4acd5f137bda3ef0bed50 Mon Sep 17 00:00:00 2001 From: Roland Gruber Date: Sat, 27 Oct 2018 14:39:37 +0200 Subject: [PATCH] responsive table head --- lam/graphics/downarrows-black.png | Bin 0 -> 719 bytes lam/graphics/downarrows.png | Bin 0 -> 801 bytes lam/graphics/uparrows-black.png | Bin 0 -> 686 bytes lam/graphics/uparrows.png | Bin 0 -> 764 bytes lam/lib/html.inc | 48 +++++++++++++- lam/lib/lists.inc | 101 +++++++++++++++++++++++++++++- lam/style/responsive/120_lam.css | 10 ++- 7 files changed, 151 insertions(+), 8 deletions(-) create mode 100644 lam/graphics/downarrows-black.png create mode 100644 lam/graphics/downarrows.png create mode 100644 lam/graphics/uparrows-black.png create mode 100644 lam/graphics/uparrows.png diff --git a/lam/graphics/downarrows-black.png b/lam/graphics/downarrows-black.png new file mode 100644 index 0000000000000000000000000000000000000000..644428ad96467689ca5d348b67328cc42418f6df GIT binary patch literal 719 zcmV;=0xClWT3W=RiIYq~N=sYbeLr};_jBK*^B|%juY-ut@Aokn4Bj^yja>ks)zww;FR~lQ@sCoeG^e#rlOzE%!*yLqDd9K{ zgb=xli;K!&FnGYsmYLba5{*LB?k-}g&t zntpMjDEc`)JuQpH;;hyh?RFc+7?H&%B1kF0%uq_9SS-#MV`i9{Pfkv@oo2K7aejXO z9y4!blaeGEnQW~czQX0@CDJrSr_*^|uh+{001giiH_y(_c7za6N`Z)O{DCYHGo#n* z?bYk`cK{$Vf$#gz&d<+(<@0&uayg8Hh#-VOzu*7E%C^75RN z^1I_WDh$Ji)oOL`R$=zmw{dA{>DA)m;@1B(e*xd?bG#kbBdq`c002ovPDHLkV1iV~ BN6r8M literal 0 HcmV?d00001 diff --git a/lam/graphics/downarrows.png b/lam/graphics/downarrows.png new file mode 100644 index 0000000000000000000000000000000000000000..8507145c166a980a91ca9e7892ce9d330f8418b0 GIT binary patch literal 801 zcmV++1K#|JP)2wJr$XzXCxw5hfsDU(i`Ka+GO&b)au@4kCo7>hRQfwMV$=i~4@BKN|# zlR-ZBQm|h)T9Fn)8>~*SiGjp`5MT_}0>)wzgKLaE+VABWx3@nK_nxVZ^;d3|pDYgd zEN^#+BaP`M*f<6Y?m#aplST#}()Z9paKumeVe(x4Le+g(SZgVKxbbX%eWkQ-U_VzY zZQ^zp8^u^_NsSaxxd12YBYJ#N9)wfpSzpn|b*VTd0X8T4Kd-DeO0KII&buf_A(TWa zi4Y+8vm6)n_hoiA?7O;DoB|MoXSbv^32~@Bs!Kl~J32aky&A@~S_fkc-hq2i*#Om- zAsctx^_lteVWgkZU1Ow4tke8%_U%-rFyZI*wiy~pE!T}1=yQqM2~j7((Fro@l5R8! zudf>Edxvsqr~E+PEu^FBmyT{$E{=~KQ^iLaTf80d&9x?pi%eta>I9)Aj_-m=kPjZB zc+ekiCk&4+EZV8r-boc-nZ9!J(;26oA1a33nDu(h@1Z8{XyQ15o&Y=t9r%d847Y@! zF~7>!=ayfuO+N971ZbW)e(F;Ba>?}^Mhh-d3St9xH$E!_(p8`!xYc0or={uWv*J4d zayMZ7(IYR;U0j+U?DfcJ9juff#hnjWA<1-Nwtrl_(M3%BwRcCbabhU8g@eysT3Bfv z9`Fc!i50sS0BHs7@{(=TqgPvJA79%e0N8qM`08eL^>nQ*I6RobaU}*&j>4&IP`g=w zqxJD)Gk@RthX5e_=$W@J&;9y^=P5=CE=WNTw%J_V{0di{x|`o40PqIyd;Y@Q^0fo| zQrw>t>{PbaG`zg?{v-BoR#>}d20-@B-^NGc+H6)y|Cg5kbokyw)Bg%uYyY!zCl^li fyfT0K|Cm1juflU7%yYIX00000NkvXXu0mjf_tto# literal 0 HcmV?d00001 diff --git a/lam/graphics/uparrows-black.png b/lam/graphics/uparrows-black.png new file mode 100644 index 0000000000000000000000000000000000000000..8573bdc2889b084bd2dc92866f77bceb08ea34fb GIT binary patch literal 686 zcmV;f0#W^mP)Pl97#|~Dm%|4xA8U*$Q5E2u`!l57B+T5gjiTw_yz1L1g%z! zi0GB)d2?x+B281&>-DQACns;tMPQ8C@qPbh=`l@HXsuDN*Y7kMjc0%3$1(`R@Rktb zqvv^)=Q)&8$nzYQWuaQF;`sRZC+B>1Z*TA083kb&&e^v8QV2m>>#{nwOUPN zS@w2gW8=aZ0wUV2R4R*FYfNgUC<+XRL(I&~TuYMV^%%j*%F2@<2sVkR%wgOo(O4d{ zv$I=EOG`TdKv5L6=jZ1?6A@XKg*c8;T98trC<<`S!5D*-617?lLI}ih93LGWJ>-t# z+#d`E-6TnR00PeWCD(P8lyaoR7z4*~U|E(G$MN@Wx0@MbE_$AKo%j3w2lRUw=lqip z;)>QV*mgE07*qoM6N<$f_^_NN&o-= literal 0 HcmV?d00001 diff --git a/lam/graphics/uparrows.png b/lam/graphics/uparrows.png new file mode 100644 index 0000000000000000000000000000000000000000..76478479cee7e599ccfc32eba987e11fc9f4c9f4 GIT binary patch literal 764 zcmV1v7?m3ycGs#Rc`7!BCr^z%mHPkjTRST`9l-6BJH;sanq74d$qDY}aH!317 z)QxV;Mi4<16?AKjl(vh~P__S+R#Fq1H0iXNNtm15d(Sy8EEO@9e(-HxULIb)_rp2I z|83Lo`46(MT{`q2k8sYh(xl$_b?}LF@I%em;D&B{s`hr@g_V4AB{BQ@*+Rxwqh@W9 zQh(mp)tleu-o2K5C_v`WxKQv}rr6qfz3P~{z0Br;o=3y!KfZjp1d%z~-rK&bp7Oyu zZp=l5p<%DRq&$bns--(MInAjkJII>)wUZ%}=wC7hHZvANTu@wR7 z7f*I(o0FgV<&s!3AnxhHIqHGs>P*PS{?%zQ_vcp~AK%pf0W{!7b6a}57ZV!cEC3F` zI)t@UYBAIEAp@IAj|UT1zW5g)`TW?Mollnr>s?teU?YRLSFgaKC0Og2n2U(Qn2qHP zLyfO~e-uDG_QR=t zqt{e_ZvMc9sr2ln-^S;RklA!5nV0KUnYbR}jKwOCB_!Rg8ZY#`6EkM&)WzSImntf! z8jG9MPuKlnE2}~^NSR8iA5+itt*+^WF?JCX#)P3EjvX_1Bi7}$JbiAWM!xi'; + $onClick = ''; + if (!empty($this->onClick)) { + $onClick = ' onclick="' . $this->onClick . '"'; + } + echo ''; echo $script; if ($this->transient) { return array(); @@ -2250,6 +2256,15 @@ class htmlInputCheckbox extends htmlElement { return 'tr'; } + /** + * Sets the onclick code. + * + * @param string $code JS code + */ + public function setOnClick($code) { + $this->onClick = $code; + } + } /** @@ -4663,6 +4678,10 @@ class htmlResponsiveTable extends htmlElement { /** highlighted rows */ private $highlighted = array(); + /** CSS class for odd row numbers */ + private $cssOddRow; + /** CSS class for even row numbers */ + private $cssEvenRow; /** * Creates the table. @@ -4689,7 +4708,8 @@ class htmlResponsiveTable extends htmlElement { $classes[] = 'responsive-table'; echo ''; echo ''; - echo ''; + $headClass = empty($this->cssOddRow) ? '' : ' class="' . $this->cssOddRow . '"'; + echo ''; $counter = 0; foreach ($this->titles as $title) { $width = ''; @@ -4706,8 +4726,18 @@ class htmlResponsiveTable extends htmlElement { $counter = 0; foreach ($this->data as $row) { $cssClass = ''; + $cssClasses = array(); if (in_array($counter, $this->highlighted)) { - $cssClass = ' class="bold"'; + $cssClasses[] = 'bold'; + } + if (!empty($this->cssEvenRow) && ($counter % 2 === 0)) { + $cssClasses[] = $this->cssEvenRow; + } + if (!empty($this->cssOddRow) && ($counter % 2 === 1)) { + $cssClasses[] = $this->cssOddRow; + } + if (!empty($cssClasses)) { + $cssClass = ' class="' . implode(' ', $cssClasses) . '"'; } echo ''; for ($i = 0; $i < $titleCount; $i++) { @@ -4728,6 +4758,18 @@ class htmlResponsiveTable extends htmlElement { $this->widths = $widths; } + /** + * Sets the CSS classes for odd and even rows. + * The title row counts as row number -1. + * + * @param string $oddClass class for odd rows + * @param string $evenClass class for even rows + */ + public function setRowClasses($oddClass, $evenClass) { + $this->cssOddRow = $oddClass; + $this->cssEvenRow = $evenClass; + } + } diff --git a/lam/lib/lists.inc b/lam/lib/lists.inc index 141260f5..0003e85c 100644 --- a/lam/lib/lists.inc +++ b/lam/lib/lists.inc @@ -202,6 +202,7 @@ class lamList { $this->listDrawNavigationBar(sizeof($this->entries)); echo ("
\n"); echo "
"; + $this->printAccountTable($this->entries); // account table head $this->listPrintTableHeader(); // account table body @@ -215,6 +216,8 @@ class lamList { // navigation bar $this->listDrawNavigationBar(sizeof($this->entries)); echo ("
\n"); + $accounts = array(); + $this->printAccountTable($accounts); // account table head $this->listPrintTableHeader(); echo "

\n"; @@ -388,11 +391,105 @@ class lamList { protected function getFilterAsTextForURL() { $text = ''; foreach ($this->filters as $attr => $filter) { - $text .= "&filter" . strtolower($attr) . '=' . $filter; + $text .= "&filter" . strtolower($attr) . '=' . $filter; } return $text; } + /** + * Prints the entry list + * + * @param array $info entries + */ + private function printAccountTable(&$info) { + $scope = $this->type->getScope(); + $titles = $this->descArray; + array_unshift($titles, _('Actions')); + $data = array(); + $data[] = $this->getSortingElements(); + $data[] = $this->getFilterElements(); + + $table = new htmlResponsiveTable($titles, $data); + $table->setRowClasses($scope . '-dark', $scope . '-bright'); + $table->setCSSClasses(array($scope . '-border accountlist')); + + parseHtml(null, $table, array(), false, $this->tabindex, $scope); + } + + /** + * Returns the elements to show in sorting row. + * + * @return htmlElement[] elements + */ + private function getSortingElements() { + $filter = $this->getFilterAsTextForURL(); + $sortElements = array(new htmlOutputText(_('Sort sequence'))); + foreach ($this->attrArray as $attributeName) { + $link = "list.php?type=" . $this->type->getId() . "&". + "sort=" . strtolower($attributeName) . $filter . "&norefresh=y"; + $buttons = new htmlGroup(); + if (strtolower($attributeName) == $this->sortColumn) { + if ($this->sortDirection < 0) { + $buttons->addElement(new htmlLink(null, $link . '&sortdirection=1', '../../graphics/downarrows.png')); + $buttons->addElement(new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/uparrows-black.png')); + } + else { + $buttons->addElement(new htmlLink(null, $link . '&sortdirection=1', '../../graphics/downarrows-black.png')); + $buttons->addElement(new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/uparrows.png')); + } + } + else { + $buttons->addElement(new htmlLink(null, $link . '&sortdirection=1', '../../graphics/downarrows.png')); + $buttons->addElement(new htmlLink(null, $link . '&sortdirection=-1', '../../graphics/uparrows.png')); + } + $sortElements[] = $buttons; + } + return $sortElements; + } + + /** + * Returns the elements to show in filter row. + * + * @return htmlElement[] elements + */ + private function getFilterElements() { + $actionElement = new htmlGroup(); + $selectAll = new htmlInputCheckbox('tableSelectAll', false); + $selectAll->setCSSClasses(array('align-middle')); + $selectAll->setOnClick('list_switchAccountSelection();'); + $actionElement->addElement($selectAll); + $actionElement->addElement(new htmlSpacer('1rem', null)); + $actionElement->addElement(new htmlOutputText(_('Filter'))); + $filterButton = new htmlButton('apply_filter', 'filter.png', true); + $filterButton->setTitle(_("Here you can input simple filter expressions (e.g. 'value' or 'v*'). The filter is case-insensitive.")); + $actionElement->addElement($filterButton); + if (sizeof($this->filters) > 0) { + $clearFilterButton = new htmlButton('clear_filter', 'clearFilter.png', true); + $clearFilterButton->setTitle(_('Clear filter')); + $actionElement->addElement($clearFilterButton); + } + + $filterElements = array($actionElement); + $clearFilter = isset($_POST['clear_filter']); + foreach ($this->attrArray as $attributeName) { + $attributeName = strtolower($attributeName); + if ($this->canBeFiltered($attributeName)) { + $value = ""; + if (!$clearFilter && isset($this->filters[$attributeName])) { + $value = $this->filters[$attributeName]; + } + $filterInput = new htmlInputField('filter' . $attributeName, $value); + $filterInput->setCSSClasses(array($this->type->getScope() . '-bright')); + $filterInput->setOnKeyPress("SubmitForm('apply_filter', event);"); + $filterElements[] = $filterInput; + } + else { + $filterElements[] = new htmlOutputText(''); + } + } + return $filterElements; + } + /** * Prints the attribute and filter row at the account table head */ @@ -981,7 +1078,7 @@ class lamList { } // get sort order if (isset($_GET['sortdirection'])) { - $this->sortDirection = $_GET['sortdirection']; + $this->sortDirection = htmlspecialchars($_GET['sortdirection']); } // check search suffix if (isset($_POST['suffix'])) { diff --git a/lam/style/responsive/120_lam.css b/lam/style/responsive/120_lam.css index cac4b3f8..5c207838 100644 --- a/lam/style/responsive/120_lam.css +++ b/lam/style/responsive/120_lam.css @@ -78,11 +78,15 @@ table.responsive-table { margin-top: 1rem; table-layout: fixed; width: 100%; + border-collapse: collapse; } table.responsive-table th { text-align: left; - padding: 0; + padding-bottom: 0.5rem; + padding-top: 0.5rem; + padding-right: 0.3rem; + padding-left: 0.3rem; } table.responsive-table td { @@ -90,8 +94,8 @@ table.responsive-table td { vertical-align: top; padding-bottom: 0.5rem; padding-top: 0.5rem; - padding-right: 0.1rem; - padding-left: 0.1rem; + padding-right: 0.3rem; + padding-left: 0.3rem; word-break: break-all; }