Skip to content

Commit

Permalink
moved brainstorm to google docs; new planning30 doc for minutes
Browse files Browse the repository at this point in the history
  • Loading branch information
@swalters
swalters committed Dec 16, 2013
1 parent 543748f commit 6f9bf59
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 142 deletions.
144 changes: 2 additions & 142 deletions Brainstorm.md
View file
@@ -1,142 +1,2 @@
# Thoughts Moved to https://docs.google.com/document/d/1fk7EwwJUGq3MTXaE6vp29rA4sXgzp5DA_rn_ERcPIz8/edit?usp=sharing

(Please sign-in to google so that we know who changed what for followup questions)
> Don't build the 'everything-in-one' solution first. Build a "you must put the components together yourself" approach
> first. Then create some directives afterwards that simply packages everything together _for_ you.
## Outstanding Problems

* pinned columns performance
* Core performance (multiple grids, grids loading slowly, horizontal scrolling peformance in general)
* Events (many bugs)
* Layout flexibility

# Desired Functionality

* Pinning columns
* Sorting Columns
* Easy-to-customize templates
* Editing
* Grouping
* Searching / filtering (over whole grid, by column)
* Pagination (with hooks for backend retrieval)
* Row / column selection (both by user and programmatically)
* Column resizing (drag separator to resize, double-click to auto-size)
* Mobile/responsive options? (Column
* Swappable templating. [seems like a common request, update/swap template and alter grid look+feel+functionality]

# Browser Support?
* IE9+, latest FF, Opera and Chrome. (Which safari version? jQuery 2.* goes with 5.1)

# Angular Support?
* We should state support up front with each release. Also, one of the things that has come up a lot is issues with unstable releases. We should state whether or not we're going to support unstable angular. Just as a standard.

## Plugins?
* Column reordering
* Row reordering
* Exporting?

# Declaritive HTML

```html
<div ui-grid>
<div ui-grid-header>
<!-- auto-generate column headers if no content supplied? -->
</html>

<!-- ui-grid-repeat auto-generates columns, ui-repeat-virtual handles the actual virtual repeater functionality? -->
<div ui-grid-repeat ui-repeat-virtual="d in data">
<!-- auto-generate columns if no content supplied? -->
</div>

<!-- or perhaps this?? (from ProLoser) -->
<ng-repeat="item in $virtualized" ui-virtualize="items">
<!--
ui-virtualize virtualizes a list of items and hands it to the built-in repeater, if the repeater is performant enough
-->
</div>
```
> We need to do a default rendering anyway, so yes, we would auto-generate column headers and columns.
We'll have the code to do so in order to do some core demo/default implementation- even if we're successful and can get this thing fully customizable.

> rob
## Alternative

```html
<div class="grid">
<div ui-grid-header scrollsync>
<!-- auto-generate column headers if no content supplied? -->
</div>

<div class="grid-body" ui-virtualize="data as $rows" scrollsync ui-pinnable="columns">
<!-- virtualize creates `$rows` that is passed to ng-repeat -->
<div ng-repeat="row in $rows">


<div ng-repeat="column in row">
<!-- ability to define custom columns -->
<!-- ability to virtualize columns too:
<div ng-repeat="column in $columns" ui-virtualize="row as $columns">
-->
</div>

<!-- or pretty much a default template of the above snippet ^^ -->
<ui-grid-row data="row"></ui-grid-row>

</div>
</div>
</div>
```

> I like this. There are lots of use cases we have to account for if we're going with this pattern, but at least as far as the basics I think it's clear.
> Declarative pinning might look something like this?
> rob
```html

<div class="grid">
<!-- probably a new implementation of sortable or just renamed to ui-reorder, etc -->
<div ui-grid-header ui-pinnable="data.columns" ui-sortable="data.columns">
<!-- how to mark-up pinned columns so they align with resepective pinned grid-body below? -->
<div ng-repeat="column in data.columns">
{{ column }}
<!-- Pinning is handled by heading row only, updated $pinnable object reflects changes to body automatically -->
<a ng-click="$pinnable.pin(column, 'left')">Pin</a>
</div>
</div>
<div class="grid-body" ui-virtualize="data.rows as $rows">
<div ng-repeat="row in $rows">
<!-- ui-pinnable creates a subset of columns -->
<div ng-repeat="column in $pinnable.unpinned" ui-editable="row[column]">
{{ row[column] }}
</div>
</div>
</div>
<!-- left and right pin-tables might be auto-generated by cloning the body table in compile phase -->
<div class="grid-body pinned left" ui-virtualize="data as $rows">
<div ng-repeat="row in $rows">
<div ng-repeat="column in $pinnable.left" ui-editable="row[column]">
{{ row[column] }}
</div>
</div>
</div>
<div class="grid-body pinned right" ui-virtualize="data as $rows">
<div ng-repeat="row in $rows">
<div ng-repeat="column in $pinnable.right" ui-editable="row[column]">
{{ row[column] }}
</div>
</div>
</div>
</div>
```


# CSS
```css
.pinned.left {
float: left;
}
.pinned.right {
float: right;
}
```
2 changes: 2 additions & 0 deletions planning30.md
View file
@@ -0,0 +1,2 @@
Meeting minutes
https://docs.google.com/a/singletreetech.com/document/d/1y6Yy0wgLvlOu8UbSnSDFo1QmQvnjapAMYVQj-Td1jB0/edit#

0 comments on commit 6f9bf59

Please sign in to comment.