file list web component

.gitignore

@@ -0,0 +1,3 @@
+/.idea
+*.log
+node_modules

web-components/alfresco-file-list/.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 4
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

web-components/alfresco-file-list/.gitignore

@@ -0,0 +1,2 @@
+bower_components/
+node_modules/

web-components/alfresco-file-list/Gruntfile.js

@@ -0,0 +1,42 @@
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+        'connect': {
+            demo: {
+                options: {
+                    open: true,
+                    keepalive: true
+                }
+            }
+        },
+        'gh-pages': {
+            options: {
+                clone: 'bower_components/alfresco-file-list'
+            },
+            src: [
+                'bower_components/**/*',
+                '!bower_components/alfresco-file-list/**/*',
+                'demo/*', 'src/*', 'index-demo.html'
+            ]
+        },
+        'replace': {
+            example: {
+                src: ['src/*'],
+                dest: 'dist/',
+                replacements: [{
+                    from: 'bower_components',
+                    to: '..'
+                }]
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-connect');
+    grunt.loadNpmTasks('grunt-gh-pages');
+    grunt.loadNpmTasks('grunt-text-replace');
+
+    grunt.registerTask('build',  ['replace']);
+    grunt.registerTask('deploy', ['gh-pages']);
+    grunt.registerTask('server', ['connect']);
+
+};

web-components/alfresco-file-list/README.md

@@ -0,0 +1,105 @@
+# <alfresco-file-list>
+
+> Alfresco files and Folders viewver list 
+
+## Demo
+
+[Check it live!](http://eromano.github.io/alfresco-file-list)
+
+## Install
+
+Install the component using [Bower](http://bower.io/):
+
+```sh
+$ bower install alfresco-file-list --save
+```
+
+Or [download as ZIP](https://github.com/eromano/alfresco-file-list/archive/master.zip).
+
+## Usage
+
+1. Import Web Components' polyfill:
+
+    ```html
+    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
+    ```
+
+2. Import Custom Element:
+
+    ```html
+    <link rel="import" href="bower_components/alfresco-file-list/dist/alfresco-file-list.html">
+    ```
+
+3. Start using it!
+
+    ```html
+    <alfresco-file-list></alfresco-file-list>
+    ```
+
+## Options
+
+Attribute     | Options     | Default      | Description
+---           | ---         | ---          | ---
+`foo`         | *string*    | `bar`        | Lorem ipsum dolor.
+
+## Methods
+
+Method        | Parameters   | Returns     | Description
+---           | ---          | ---         | ---
+`unicorn()`   | None.        | Nothing.    | Magic stuff appears.
+
+## Events
+
+Event         | Description
+---           | ---
+`onsomething` | Triggers when something happens.
+
+## Development
+
+In order to run it locally you'll need to fetch some dependencies and a basic server setup.
+
+* Install [Bower](http://bower.io/) & [Grunt](http://gruntjs.com/):
+
+    ```sh
+    $ [sudo] npm install -g bower grunt-cli
+    ```
+
+* Install local dependencies:
+
+    ```sh
+    $ bower install && npm install
+    ```
+
+* To test your project, start the development server and open `http://localhost:8000`.
+
+    ```sh
+    $ grunt server
+    ```
+
+* To build the distribution files before releasing a new version.
+
+    ```sh
+    $ grunt build
+    ```
+
+* To provide a live demo, send everything to `gh-pages` branch.
+
+    ```sh
+    $ grunt deploy
+    ```
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+## History
+
+For detailed changelog, check [Releases](https://github.com/eromano/alfresco-file-list/releases).
+
+## License
+
+[MIT License](http://opensource.org/licenses/MIT)

web-components/alfresco-file-list/bower.json

@@ -0,0 +1,29 @@
+{
+  "name": "alfresco-file-list",
+  "version": "0.0.0",
+  "description": "Alfresco files and Folders viewver list ",
+  "license": "MIT",
+  "main": "dist/alfresco-file-list.html",
+  "keywords": [
+    "polymer",
+    "web-components"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.4.0",
+    "iron-list": "PolymerElements/iron-list#^1.2.8",
+    "iron-ajax": "PolymerElements/iron-ajax#^1.2.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
+    "paper-styles": "PolymerElements/paper-styles#^1.1.4",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.7",
+    "paper-badge": "PolymerElements/paper-badge#^1.1.1",
+    "iron-icons": "PolymerElements/iron-icons#^1.1.3",
+    "app-layout": "PolymerLabs/app-layout#^0.0.14",
+    "paper-menu": "PolymerElements/paper-menu#^1.2.2",
+    "paper-item": "PolymerElements/paper-item#^1.1.4"
+  }
+}

web-components/alfresco-file-list/index-demo.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>&lt;alfresco-file-list&gt;</title>
+
+    <!-- Importing Web Component's Polyfill -->
+    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
+
+    <!-- Importing Custom Elements -->
+    <link rel="import" href="src/alfresco-file-list.html">
+</head>
+<body>
+<div style="height: 900px">
+    <!-- Using Custom Elements -->
+    <alfresco-file-list></alfresco-file-list>
+</div>
+</body>
+</html>

web-components/alfresco-file-list/package.json

@@ -0,0 +1,10 @@
+{
+    "private": true,
+    "devDependencies": {
+        "grunt": "~0.4.1",
+        "grunt-cli": "~0.1.9",
+        "grunt-contrib-connect": "~0.9.0",
+        "grunt-gh-pages": "~0.9.1",
+        "grunt-text-replace": "~0.4.0"
+    }
+}

web-components/alfresco-file-list/src/alfresco-file-list.html

@@ -0,0 +1,172 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
+<link rel="import" href="../bower_components/iron-list/iron-list.html">
+<link rel="import" href="../bower_components/paper-styles/color.html">
+<link rel="import" href="../bower_components/paper-styles/typography.html">
+<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../bower_components/paper-badge/paper-badge.html">
+
+<style>
+
+    app-toolbar {
+        background: var(--paper-pink-500);
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+        color: white;
+        z-index: 1;
+        color: white;
+        --paper-toolbar-title: {
+            font-size: 16px;
+            line-height: 16px;
+            font-weight: bold;
+            margin-left: 0;
+        };
+    }
+    app-toolbar paper-icon-button {
+        --paper-icon-button-ink-color: white;
+    }
+    #itemsList,
+    #selectedItemsList {
+        @apply(--layout-flex);
+    }
+    .item {
+        @apply(--layout-horizontal);
+        cursor: pointer;
+        padding: 16px 22px;
+        border-bottom: 1px solid #DDD;
+    }
+    .item:focus,
+    .item.selected:focus {
+        outline: 0;
+        background-color: #ddd;
+    }
+    .item.selected .star {
+        color: var(--paper-blue-600);
+    }
+    .item.selected {
+        background-color: var(--google-grey-300);
+        border-bottom: 1px solid #ccc;
+    }
+
+    .pad {
+        @apply(--layout-flex);
+        @apply(--layout-vertical);
+        padding: 0 16px;
+    }
+
+    .dim {
+        color: gray;
+    }
+    .star {
+        width: 24px;
+        height: 24px;
+    }
+    paper-badge {
+        -webkit-transition: all 0.1s;
+        transition: all 0.1s;
+        opacity: 1;
+        margin-top: 5px;
+    }
+    paper-badge[label="0"] {
+        opacity: 0;
+    }
+    #starredView {
+        width: 200px;
+        border-left: 1px solid #ddd;
+    }
+    paper-item {
+        white-space: nowrap;
+        cursor: pointer;
+        position: relative;
+    }
+    paper-item:hover::after {
+        content: "－";
+        width: 16px;
+        height: 16px;
+        display: block;
+        border-radius: 50% 50%;
+        background-color: var(--google-red-300);
+        margin-left: 10px;
+        line-height: 16px;
+        text-align: center;
+        color: white;
+        font-weight: bold;
+        text-decoration: none;
+        position: absolute;
+        right: 15px;
+        top: calc(50% - 8px);
+    }
+    .noSelection {
+        color: #999;
+        margin-left: 10px;
+        line-height: 50px;
+    }
+
+    #starredView {
+        @apply(--layout-vertical);
+    }
+
+    ul { list-style-type: none; overflow: hidden; width:800px; margin:10px}
+    ul li div.text{ float:left; width: 400px;text-align: left;height: 55px }
+    ul li div.folder-container{ float:left; width: 70px;text-align: left ;height: 55px}
+    ul li:hover { background: #eeeeee; height: 55px}
+
+    .folder {
+        height: 52px;
+        box-sizing: border-box;
+    }
+
+    .primary {
+        font-size: 16px;
+        line-height: 20px;
+        font-family: sans-serif;
+    }
+    .secondary {
+        font-size: 12px;
+        line-height: 20px;
+        color: gray;
+        font-family: sans-serif;
+    }
+</style>
+
+
+<dom-module id="alfresco-file-list">
+    <template>
+        <iron-ajax url="files.json" last-response="{{data}}" auto></iron-ajax>
+
+        <!-- Main List for the items -->
+        <iron-list id="itemsList" items="[[data.items]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
+            <template>
+                <div>
+                    <ul tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]">
+                        <li>
+                            <div class="folder-container"><img class="folder" src="img/folder.svg"></div>
+                            <div class="text">
+                                <div class="pad">
+                                    <div class="primary">
+                                        [[item.displayName]]
+                                    </div>
+                                    <div class="secondary dim">
+                                        [[item.node.properties.cm:description]]
+                                    </div>
+                                    <div class="secondary dim">
+                                        Modified [[item.node.properties.cm:modified.iso8601]] by [[item.node.properties.cm:modifier.displayName]]
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <div class="border"></div>
+                </div>
+            </template>
+        </iron-list>
+
+    </template>
+
+    <script>
+        Polymer({
+            is: "alfresco-file-list"
+        });
+    </script>
+</dom-module>

web-components/alfresco-file-list/src/img/folder.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" width="64" height="64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0C79BF;}
+</style>
+<g>
+	<path class="st0" d="M0,27.9v29.9c0,1.4,1.1,2.5,2.5,2.5h59.1c1.4,0,2.5-1.1,2.5-2.5V27.9H0z"/>
+	<path class="st0" d="M0,23.7h64V13.5c0-1.4-1.1-2.5-2.5-2.5H30l-6.2-6.5C23.3,4,22.7,3.7,22,3.7H0V23.7z"/>
+</g>
+</svg>