diff --git a/README b/README index 664c23a..e128130 100644 --- a/README +++ b/README @@ -3,27 +3,26 @@ Datagridle is a rapidly-deployable, feature-rich and customizable open-source da Please send bug reports and feature requests by email to adam@photosynth.ca, or on our Github repo at https://github.com/Photosynthesis/Datagridle +####Features -###Ultra-rapid development: create a full-featured DB interface with just a few lines of code. -Using just the table name and DB info, Datagridle can create a feature-packed DB backend interface for use in custom applications and modules. +-Fast: set up a database content editing grid with a few lines of code +-Multi-table capable +-Define save, edit, and display callbacks for arbitrary customization +-WYSIWYG editor +-Heuristic setup based on database table features +-12 pre-defined field types including calendar date picker and select boxes populated from other database tables +-Unique url string prefixes allow painless embedding in other aplications +-Use template display types with data placeholders to display images, hyperlinks, and more in the grid +-Specify style information for edit and display of individual fields +-Specify edit, add, and delete privileges +-Users can hide columns in the grid display for convenient browsing +-Sort, search, and pagination -###Super embeddable -Datagridle is designed to be seamlessly embedded into other applications. It uses unique GET prefixes for URL variables to eliminate conflicts within an application, and preserves all existing URL variables. This makes it a breeze to integrate into existing applications, plugins, or modules. HTML headers can be turned on or off, enabling either stand-alone or embedded operation. -###Highly customizable -Define callback functions for display, editing, or saving for any specific field -Allow or deny editing, adding, or deleting records with permissions settings -Use template display types with data placeholders to display images, hyperlinks, and more in the grid -Specify style information for edit and display of individual fields -Built-in TinyMCE wysiwyg content editor -Advanced form fields such as calendar date selector and multiple checkbox +####Sample usage -###Multi-table capable -Parent and child table relationships can be defined to allow editing of child records through a pop-out sub-grid, and population of descriptive fields from a parent table into foreign key fields. +include('datagrid.class.php'); -###Comes with standard features too -Compact search, pagination and sorting functions give your users control of the grid. +$grid = new datagrid('pages'); -###Caveats -Your application must take care of user control and authentication. -Datagridle has not been tested on very large data sets, and has not been optimized for this. If you use it for editing a large table (> 10,000 records) please let us know, and report any performance issues. \ No newline at end of file +echo $grid->grid(); diff --git a/README.md b/README.md index 9f8450b..7d6e34b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,33 @@ -datagridle -========== +###Readme +Datagridle is a rapidly-deployable, feature-rich and customizable open-source database content editing system. It is built to be embedded as an admin interface in other applications, or used as a stand-alone database editor. -An ultra-rapid PHP/MySQL database content editing interface. +Please send bug reports and feature requests by email to adam@photosynth.ca, or on our Github repo at https://github.com/Photosynthesis/Datagridle + +####Features + +- Fast: set up a database content editing grid with a few lines of code +- Multi-table capable +- Define save, edit, and display callbacks for arbitrary customization +- WYSIWYG editor +- Heuristic setup based on database table features +- 12 pre-defined field types including calendar date picker and select boxes populated from other database tables +- Unique url string prefixes allow painless embedding in other aplications +- Use template display types with data placeholders to display images, hyperlinks, and more in the grid +- Specify style information for edit and display of individual fields +- Specify edit, add, and delete privileges +- Users can hide columns in the grid display for convenient browsing +- Sort, search, and pagination + + +####Sample usage +``` +include('datagrid.class.php'); + +$grid = new datagrid('pages'); + +echo $grid->grid(); +``` + +#### Documentation + +Full documentation can be found [here.](http://photosynth.ca/code/datagridle/docs) diff --git a/css/datagrid.css b/css/datagrid.css index 6d2d42f..bcc2de7 100644 --- a/css/datagrid.css +++ b/css/datagrid.css @@ -1,8 +1,9 @@ /* CSS for non table-specific stuff */ body{ - font-family: arial; - color:color: #449977; + font-family: Ubuntu, helvetica; + color: #333; + font-size: 18px; } @@ -47,64 +48,74 @@ button.query{ } #dg_edit_buttons input{ - margin:2px; - padding: 1px; - border: 1px solid #999999; + margin: 3px; + padding-right:5px; + border: none; float: left; + background: none; + cursor: pointer; } input.update{ - background-color: #ffffff; + font-size: 1.6em !important; + color:#117; } input.delete{ - background-color: #eeccbb; + color:#711; + } input.copy{ - background-color: #bbffbb; - padding-top: -2px; - font-family: arial; - line-height: 12px; - padding: 0px; + color:#161; } input.update:hover{ - background-color: #aabbee; + color: #39f; } input.delete:hover{ - background-color: red; + color:red; } input.copy:hover{ - background-color: #449944; + color:#0d0; } /* Table display styles */ td.dataheader, td.dataheadersort{ padding: 0px; + border-collapse: collapse; } + +.add_button{ + padding-left: 0 !important; +} + a.dataheader, a.dataheadersort{ padding: 1px 3px 1px 3px; font-weight: bold; display:block; - font-family: arial; + font-family: Ubuntu, hevetica, arial; text-decoration: none; text-align: center; + border-left:1px solid #ddd; } a.dataheader{ - color: #556699; - background-color:#EBEADB; - border-bottom: 2px solid #dd9933; + color: #666; + background-color:#eee; + border-bottom: 2px solid #888; + padding:5px; + } a.dataheader:hover{ - background-color:#cBcAdB; + background-color:#777; color: #ffffff; } a.dataheadersort{ - border-bottom: 2px solid red; - background-color:#EBEADB; - color: #000000; + border-bottom: 2px solid #dd4814; + background-color:#888; + color: #ffffff; + padding: 5px; } span.dataheader{ padding: 1px 3px 1px 3px; @@ -116,6 +127,7 @@ span.dataheader{ text-align: center; background-color:#EBEADB; border-bottom: 2px solid #dd9933; + border-collapse: collapse; } span.help{ cursor: help; @@ -124,28 +136,36 @@ span.help{ table.datatable{ background-color: #ffffff; font-size: 13px; + border-collapse: collapse; } td.datafield{ padding: 3 8 3 8px; + border:1px solid #ddd; + margin:0; } .datafield2{ - background-color: #faf5ed; + background-color: #eee; } + tr.datafield1:hover, tr.datafield2:hover{ background-color: #caf5cd; border: 1px solid black; } .hidefield{ - font-family: arial; - margin-top: 1px; + font-family: Ubuntu, helvetica, arial; display: block; - background-color: #ccddee; + background-color: #bbb; + color:#fff; + border-collapse: collapse; + padding: 2px; font-weight:bold; font-size: 11px; text-align: center; text-decoration: none; + border-right: 1px solid #ddd; + /*box-shadow: 0px 5px 5px 0px gray;*/ } @@ -221,18 +241,33 @@ input.query, select.query{ background-color:#eeeeee; } -input.dg_add{ - background-color:#ccffcc; - border: 1px solid #999999; - margin: 0px; - float:none +.dg_add { + height: 45px; + width: 100%; + border-collapse: collapse; + background: #3e779d; + background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); + background: -moz-linear-gradient(top, #ccc, #999); + padding: 5px 10px; + border-radius: 2px; + border:none; + text-shadow: rgba(255,255,255,.4) 0 1px 0; + color: black; + font-size: 14px; + text-decoration: none; + vertical-align: middle; +} +.dg_add:hover { + border-top-color: #28597a; + background: #888; + color:white; + box-shadow: 0 0 5px 2px #666 inset; +} +.dg_add:active { + border-top-color: #1b435e; + background: #1b435e; + outline: 0; } - -button.dg_add:hover{ - background-color: #44cc88; - margin: 0px; -} - .querybox{ margin-top: 20px; background-color: #fcfcfc; @@ -291,3 +326,57 @@ button.dg_add:hover{ #close_window_button: hover{ } + + +/* THE ICON FONT */ + +@charset "UTF-8"; + +@font-face { + font-family: "custom-icons"; + src:url("/common/libraries/Datagridle/fonts/custom-icons.eot"); + src:url("/common/libraries/Datagridle/fonts/custom-icons.eot?#iefix") format("embedded-opentype"), + url("/common/libraries/Datagridle/fonts/custom-icons.ttf") format("truetype"), + url("/common/libraries/Datagridle/fonts/custom-icons.svg#custom-icons") format("svg"), + url("/common/libraries/Datagridle/fonts/custom-icons.woff") format("woff"); + font-weight: normal; + font-style: normal; + +} + + +[class^="icon-"], +[class*=" icon-"], +.icon { + font-family: "custom-icons"; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none !important; + speak: none; + display: inline-block; + text-decoration: none; + width: 1em; + font-size: 1.5em; + line-height: 1em; + -webkit-font-smoothing: antialiased; +} + + +/* +.icon-edit:before { + content: "a"; +} + +.icon-delete:before { + content: "b"; +} + +.icon-new:before { + content: "c"; +} + +.icon-search:before { + content: "d"; +} +*/ \ No newline at end of file diff --git a/datagrid.class.php b/datagrid.class.php index 34b40a9..f2948a0 100644 --- a/datagrid.class.php +++ b/datagrid.class.php @@ -932,7 +932,7 @@ private function make_grid(){ $trend = ' '; - $out .= '
'; + $out .= '"; + target_url->get($this->GET_pfx()."hide_field=$fid")."\">» hide «"; }else{ $columnhead = " "; } $out .= $columnhead; @@ -1142,7 +1142,7 @@ function edit_form($id){ $out .= $this->target_url->get_hidden_inputs(); $out .= " GET_pfx()."action\" value=\"copy\" /> - + $keyinput "; @@ -1154,7 +1154,7 @@ function edit_form($id){ $out .= $this->target_url->get_hidden_inputs(); $out .= " GET_pfx()."action\" value=\"edit\" /> - + $keyinput "; @@ -1166,7 +1166,7 @@ function edit_form($id){ $out .= " GET_pfx()."action\" value=\"delete\" /> $keyinput - + "; } @@ -1176,11 +1176,11 @@ function edit_form($id){ function start_row($keyval,$oddrow){ if($oddrow == 1){ - $bg = 'f4efdd'; + $bg = 'fdfdfd'; }else{ - $bg = 'faf5ed'; + $bg = 'f8f8f8'; } - return "rowcount."\" bgcolor=\"#$bg\" onClick=\"highlightRow('".$this->rowcount."','#$bg')\">"; + return "rowcount."\" cellspacing=\"0\" bgcolor=\"#$bg\" onClick=\"highlightRow('".$this->rowcount."','#$bg')\">"; } diff --git a/dg_paths.php b/dg_paths.php index 236813d..6b3c3f7 100644 --- a/dg_paths.php +++ b/dg_paths.php @@ -3,9 +3,9 @@ // Use absolute paths for client-side files (CSS and JS) to enable grids at different levels of client side depth $this->paths = array( - css_path => '/common/libraries/datagrid/css/', - js_path => '/common/libraries/datagrid/js/', - tiny_mce_path => '/common/libraries/datagrid/js/tiny_mce/', + css_path => '/common/libraries/Datagridle/css/', + js_path => '/common/libraries/Datagridle/js/', + tiny_mce_path => '/common/libraries/Datagridle/js/tiny_mce/', classes_path => '../../../' ); diff --git a/fonts/custom-icons.eot b/fonts/custom-icons.eot new file mode 100644 index 0000000..4d885e0 Binary files /dev/null and b/fonts/custom-icons.eot differ diff --git a/fonts/custom-icons.svg b/fonts/custom-icons.svg new file mode 100644 index 0000000..1048d31 --- /dev/null +++ b/fonts/custom-icons.svg @@ -0,0 +1,14 @@ + + + +This SVG font generated by Fontastic.me + + + + + + + + + + \ No newline at end of file diff --git a/fonts/custom-icons.ttf b/fonts/custom-icons.ttf new file mode 100644 index 0000000..f93e7a3 Binary files /dev/null and b/fonts/custom-icons.ttf differ diff --git a/fonts/custom-icons.woff b/fonts/custom-icons.woff new file mode 100644 index 0000000..8049f7f Binary files /dev/null and b/fonts/custom-icons.woff differ diff --git a/js/datagrid.js b/js/datagrid.js index 8ec5384..501ee6f 100644 --- a/js/datagrid.js +++ b/js/datagrid.js @@ -27,11 +27,17 @@ function submitform(){ } function highlightRow(row_id,default_color){ - var hlbg = '#aaddaa'; + var hlbg = '#aaa'; + var light = '#fff'; + var dark = '#333'; + if (document.getElementById(row_id).bgColor == hlbg){ document.getElementById(row_id).bgColor = default_color; + document.getElementById(row_id).style.color = dark; + }else{ document.getElementById(row_id).bgColor = hlbg; + document.getElementById(row_id).style.color = light; } }
'; if(strpos($this->settings['privileges'],'add') !== false){ $out .= $this->add_button(); @@ -961,12 +961,12 @@ private function make_grid(){ if($fieldattribs['type'] != 'derivative'){ $columnhead = " target_url->get($this->GET_pfx()."sorttable=$table&".$this->GET_pfx()."sortfield=$field&".$this->GET_pfx()."sorttype=$new_sort")."\">$fieldattribs[title] - target_url->get($this->GET_pfx()."hide_field=$fid")."\">>hide< $fieldattribs[title] - target_url->get().$this->GET_pfx()."hide_field=$fid\">>hide< + target_url->get().$this->GET_pfx()."hide_field=$fid\">» hide «