mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
file list web component
This commit is contained in:
Eugenio Romano
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/.idea
|
||||
*.log
|
||||
node_modules
|
||||
19
web-components/alfresco-file-list/.editorconfig
Normal file
19
web-components/alfresco-file-list/.editorconfig
Normal file
@@ -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
|
||||
2
web-components/alfresco-file-list/.gitignore
vendored
Normal file
2
web-components/alfresco-file-list/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
bower_components/
|
||||
node_modules/
|
||||
42
web-components/alfresco-file-list/Gruntfile.js
Normal file
42
web-components/alfresco-file-list/Gruntfile.js
Normal file
@@ -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']);
|
||||
|
||||
};
|
||||
105
web-components/alfresco-file-list/README.md
Normal file
105
web-components/alfresco-file-list/README.md
Normal file
@@ -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)
|
||||
29
web-components/alfresco-file-list/bower.json
Normal file
29
web-components/alfresco-file-list/bower.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
19
web-components/alfresco-file-list/index-demo.html
Normal file
19
web-components/alfresco-file-list/index-demo.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><alfresco-file-list></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>
|
||||
10
web-components/alfresco-file-list/package.json
Normal file
10
web-components/alfresco-file-list/package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
172
web-components/alfresco-file-list/src/alfresco-file-list.html
Normal file
172
web-components/alfresco-file-list/src/alfresco-file-list.html
Normal file
@@ -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>
|
||||
11002
web-components/alfresco-file-list/src/contacts.json
Executable file
11002
web-components/alfresco-file-list/src/contacts.json
Executable file
File diff suppressed because it is too large
Load Diff
1715
web-components/alfresco-file-list/src/files.json
Normal file
1715
web-components/alfresco-file-list/src/files.json
Normal file
File diff suppressed because it is too large
Load Diff
12
web-components/alfresco-file-list/src/img/folder.svg
Normal file
12
web-components/alfresco-file-list/src/img/folder.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 639 B |
Reference in New Issue
Block a user