TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More restyling, add checkbox and autocomplete to DataGrid class

This commit is contained in:
Sam Georges 2014-06-21 13:54:28 +10:00
parent 0833cfcbba
commit 45ff725668
3 changed files with 168 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
modules/backend/formwidgets/DataGrid.php
View File

@ -73,7 +73,10 @@ class DataGrid extends FormWidgetBase
foreach ($this->columns as $key => $column) {
$item = [];
$item['data'] = $key;
$item['readOnly'] = isset($column['readOnly']) && $column['readOnly'];
if (isset($column['readOnly']))
$item['readOnly'] = $column['readOnly'];
$item = $this->evalColumnType($column, $item);
$definitions[] = $item;
}
@ -94,6 +97,16 @@ class DataGrid extends FormWidgetBase
$item['type'] = 'numeric';
$item['format'] = '$0,0.00';
break;
case 'checkbox':
$item['type'] = 'checkbox';
break;
case 'autocomplete':
$item['type'] = 'autocomplete';
if (isset($column['source'])) $item['source'] = $column['source'];
if (isset($column['strict'])) $item['strict'] = $column['strict'];
break;
}
return $item;
@ -104,9 +117,9 @@ class DataGrid extends FormWidgetBase
*/
public function loadAssets()
{
$this->addCss('vendor/handsontable/jquery.handsontable.full.css', 'core');
$this->addCss('vendor/handsontable/jquery.handsontable.css', 'core');
$this->addCss('css/datagrid.css', 'core');
$this->addJs('vendor/handsontable/jquery.handsontable.full.js', 'core');
$this->addJs('vendor/handsontable/jquery.handsontable.js', 'core');
$this->addJs('js/datagrid.js', 'core');
}

108
modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.css vendored
View File

@ -15,9 +15,6 @@
*/
.handsontable {
position: relative;
font-family: Arial, Helvetica, sans-serif;
line-height: 14px;
font-size: 13px;
}
.handsontable .relative {
position: relative;
@ -60,17 +57,20 @@
.handsontable td {
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
height: 22px;
height: 28px;
empty-cells: show;
line-height: 21px;
line-height: 27px;
padding: 0 4px 0 4px;
background-color: #FFF;
font-size: 12px;
font-size: 13px;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
}
.handsontable th {
font-size: 12px;
}
.handsontable td.htInvalid {
-webkit-transition: background 0.75s ease;
transition: background 0.75s ease;
@ -84,8 +84,8 @@
.handsontable th:first-child.htNoFrame,
.handsontable th.htNoFrame {
border-left-width: 0;
background-color: white;
border-color: #FFF;
background-color: transparent;
border-color: transparent;
}
.handsontable th:first-child,
.handsontable td:first-child,
@ -121,6 +121,9 @@
.handsontable th .small {
font-size: 12px;
}
.handsontable tbody th:last-of-type {
border-right: 1px solid #e2e2e2 !important;
}
.handsontable th.active {
/*background-color: #CCC;*/
color: #666;
@ -181,6 +184,52 @@
text-decoration: underline;
cursor: pointer;
}
.handsontable.htRemoveRow th.htRemoveRow {
text-align: center;
}
.handsontable.htRemoveRow th.htRemoveRow .btn {
background-color: #BBB;
border-radius: 9px;
padding: 0 6px 0 6px;
color: #FFF;
cursor: pointer;
font-size: 11px;
font-weight: bold;
display: none;
margin: 0 auto;
width: 10px;
}
.handsontable.htRemoveRow th.htRemoveRow .btn:hover {
background-color: #777;
}
.handsontable.htControlPanel {
position: relative;
width: auto;
}
.handsontable.htControlPanel col:first-child {
width: 1px;
}
.handsontable.htControlPanel th.htControlPanel .close {
background: transparent;
line-height: 28px;
position: absolute;
right: 5px;
}
.handsontable.htControlPanel th.htControlPanel .btn {
background-color: #BBB;
border-radius: 9px;
padding: 0 6px 0 6px;
color: #FFF;
cursor: pointer;
font-size: 11px;
font-weight: bold;
display: none;
margin: 0 auto;
width: 10px;
}
.handsontable.htControlPanel th.htControlPanel .btn:hover {
background-color: #777;
}
.handsontable .wtBorder {
position: absolute;
font-size: 0;
@ -201,15 +250,12 @@
font-style: italic;
color: #777;
}
.handsontable .htCheckboxRendererInput.noValue {
/*opacity: 0.5;*/
}
.handsontable .htCheckboxRendererInput.custom-checkbox label {
margin: 0;
}
.handsontable .htCheckboxRendererInput.custom-checkbox label:before {
bottom: -4px;
left: 5px;
left: -9px;
}
.handsontable .htNumeric {
text-align: right;
@ -223,7 +269,7 @@
top: 0;
right: 0;
font-size: 10px;
color: #EEE;
color: rgba(0, 0, 0, 0.07);
cursor: default;
width: 16px;
text-align: center;
@ -233,7 +279,6 @@
}
.handsontable .autocomplete {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
font-size: 13px;
z-index: 10;
@ -297,13 +342,13 @@
outline-width: 0;
margin: 0;
padding: 1px 4px 0 2px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
line-height: 1.8em;
font-size: 13px;
resize: none;
display: inline-block;
font-size: 13px;
color: #000;
border-radius: 0;
text-indent: 1px;
}
.handsontableInputHolder {
position: absolute;
@ -312,32 +357,3 @@
width: 1px;
height: 1px;
}
/**
* Handsontable RemoveRow extension. See `demo/buttons.html` for example usage
*/
.handsontable.htRemoveRow th.htRemoveRow {
text-align: center;
}
.handsontable.htRemoveRow th.htRemoveRow .btn {
background-color: #BBB;
border-radius: 9px;
padding: 0 6px 0 6px;
color: #FFF;
cursor: pointer;
font-size: 11px;
font-weight: bold;
display: none;
margin: 0 auto;
width: 10px;
}
.handsontable.htRemoveRow th.htRemoveRow .btn:hover {
background-color: #777;
}

110
modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.less vendored
View File

@ -18,11 +18,11 @@
@color-handsontable-active-cell: #4da7e8;
@color-handsontable-border: #e2e2e2;
@handsontable-cell-height: 28px;
@handsontable-font-size: 13px;
.handsontable {
position: relative;
font-family: Arial, Helvetica, sans-serif;
line-height: 14px;
font-size: 13px;
.relative {
position: relative;
@ -67,18 +67,22 @@
td {
border-right: 1px solid @color-handsontable-border;
border-bottom: 1px solid @color-handsontable-border;
height: 22px;
height: @handsontable-cell-height;
empty-cells: show;
line-height: 21px;
line-height: @handsontable-cell-height - 1px;
padding: 0 4px 0 4px;
background-color: #FFF;
font-size: 12px;
font-size: @handsontable-font-size;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
}
th {
font-size: @handsontable-font-size - 1px;
}
td.htInvalid {
-webkit-transition: background 0.75s ease;
transition: background 0.75s ease;
@ -93,8 +97,8 @@
th:first-child.htNoFrame,
th.htNoFrame {
border-left-width: 0;
background-color: white;
border-color: #FFF;
background-color: transparent;
border-color: transparent;
}
th:first-child,
@ -136,6 +140,12 @@
.small { font-size: 12px; }
}
tbody {
th:last-of-type {
border-right: 1px solid @color-handsontable-border !important;
}
}
th.active {
/*background-color: #CCC;*/
color: #666;
@ -208,6 +218,65 @@
cursor: pointer;
}
&.htRemoveRow th.htRemoveRow {
text-align: center;
}
&.htRemoveRow th.htRemoveRow .btn {
background-color: #BBB;
border-radius: 9px;
padding: 0 6px 0 6px;
color: #FFF;
cursor: pointer;
font-size: 11px;
font-weight: bold;
display: none;
margin: 0 auto;
width: 10px;
}
&.htRemoveRow th.htRemoveRow .btn:hover {
background-color: #777;
}
//
// Custom CP
//
&.htControlPanel {
position: relative;
width: auto;
col:first-child {
width: 1px;
}
th.htControlPanel {
.close {
background: transparent;
line-height: @handsontable-cell-height;
position: absolute;
right: 5px;
}
}
}
&.htControlPanel th.htControlPanel .btn {
background-color: #BBB;
border-radius: 9px;
padding: 0 6px 0 6px;
color: #FFF;
cursor: pointer;
font-size: 11px;
font-weight: bold;
display: none;
margin: 0 auto;
width: 10px;
}
&.htControlPanel th.htControlPanel .btn:hover {
background-color: #777;
}
//
// Border line
//
@ -248,13 +317,16 @@
//
.htCheckboxRendererInput {
&.noValue { /*opacity: 0.5;*/ }
&.custom-checkbox label {
margin: 0;
//&.noValue { opacity: 0.5; }
&.custom-checkbox {
//text-align: center;
label {
margin: 0;
&:before {
bottom: -4px;
left: 5px;
&:before {
bottom: -4px;
left: -9px;
}
}
}
}
@ -280,7 +352,7 @@
top: 0;
right: 0;
font-size: 10px;
color: #EEE;
color: rgba(0,0,0,.07);
cursor: default;
width: 16px;
text-align: center;
@ -293,7 +365,6 @@
.autocomplete {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
font-size: 13px;
z-index: 10;
@ -370,14 +441,13 @@
outline-width: 0;
margin: 0;
padding: 1px 4px 0 2px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
font-size: 13px;
line-height: 1.8em;
font-size: @handsontable-font-size;
resize: none;
display: inline-block;
font-size: 13px;
color: #000;
border-radius: 0;
text-indent: 1px;
}
.handsontableInputHolder {