inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Css and added new File list version

Browse Source
This commit is contained in:
mauriziovitale84
2016-04-08 10:07:46 +01:00
parent c7597bb1ec
commit 7a6389e611
6 changed files with 131 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo-shell-ng2/bower.json
View File

@@ -28,6 +28,9 @@
"paper-badge": "~1.1.1", "paper-badge": "~1.1.1",
"iron-ajax": "~1.2.0", "iron-ajax": "~1.2.0",
"paper-icon-button": "~1.0.7", "paper-icon-button": "~1.0.7",
"paper-toolbar": "~1.1.4" "paper-toolbar": "~1.1.4",
"iron-signals": "~1.0.3",
"paper-item": "~1.1.4",
"paper-dropdown-menu": "~1.1.3"
} }
} }

2
demo-shell-ng2/webcomponents/alfresco-file-list/README.md
View File

@@ -1,6 +1,6 @@
# <alfresco-file-list> # <alfresco-file-list>
> Alfresco files and Folders viewver list > Alfresco files and Folders viewver list
## Demo ## Demo

5
demo-shell-ng2/webcomponents/alfresco-file-list/bower.json
View File

@@ -24,9 +24,6 @@
"iron-icons": "PolymerElements/iron-icons#^1.1.3", "iron-icons": "PolymerElements/iron-icons#^1.1.3",
"app-layout": "PolymerLabs/app-layout#^0.0.14", "app-layout": "PolymerLabs/app-layout#^0.0.14",
"paper-menu": "PolymerElements/paper-menu#^1.2.2", "paper-menu": "PolymerElements/paper-menu#^1.2.2",
"paper-item": "PolymerElements/paper-item#^1.1.4", "paper-item": "PolymerElements/paper-item#^1.1.4"
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.1.3",
"paper-listbox": "PolymerElements/paper-listbox#^1.1.2",
"paper-tabs": "PolymerElements/paper-tabs#^1.5.0"
} }
} }

19
demo-shell-ng2/webcomponents/alfresco-file-list/index-demo.html Normal file
View File

@@ -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>

106
demo-shell-ng2/webcomponents/alfresco-file-list/src/alfresco-file-list.html
View File

@@ -7,6 +7,9 @@
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.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/iron-icon/iron-icon.html">
<link rel="import" href="../../../bower_components/paper-badge/paper-badge.html"> <link rel="import" href="../../../bower_components/paper-badge/paper-badge.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../../bower_components/iron-signals/iron-signals.html">
<style> <style>
.pad { .pad {
@@ -52,11 +55,14 @@
top: calc(50% - 8px); top: calc(50% - 8px);
} }
ul { list-style-type: none; overflow: hidden; width:800px; margin:10px} ul { list-style-type: none; overflow: hidden; margin:10px}
ul li div.text{ float:left; width: 400px;text-align: left;height: 55px } ul li div.text{ float:left; text-align: left;height: 55px }
ul li div.folder-container{ float:left; width: 70px;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} ul li:hover { background: #eeeeee; height: 55px}
.file{
width: 52px;
height: 52px;
}
.folder { .folder {
height: 52px; height: 52px;
box-sizing: border-box; box-sizing: border-box;
@@ -74,6 +80,14 @@
font-family: sans-serif; font-family: sans-serif;
} }
.pull-right{
float: right;
}
.iron-list ul{
padding: 0px;
}
paper-dropdown-menu.custom { paper-dropdown-menu.custom {
overflow: visible; overflow: visible;
--paper-input-container-label: { --paper-input-container-label: {
@@ -100,12 +114,19 @@
<dom-module id="alfresco-file-list"> <dom-module id="alfresco-file-list">
<template> <template>
<!-- Main List for the items --> <!-- Main List for the items -->
<iron-list id="itemsList" items="{{data}}" selected-items="{{selectedItems}}" selection-enabled multi-selection> <iron-list id="itemsList" items="{{data}}" selected-items="{{selectedItems}}" selection-enabled>
<template> <template>
<div> <div>
<ul tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]"> <ul tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]">
<li> <li>
<div class="folder-container"><img class="folder" src="img/folder.svg"></div> <div class="folder-container" on-click="goToFolder">
<template is="dom-if" if="{{item.isFolder}}">
<img class="folder" src="img/folder.svg">
</template>
<template is="dom-if" if="{{!item.isFolder}}">
<img class="file" src="{{thumbBaseUrl()}}{{item.contentUrl}}">
</template>
</div>
<div class="text"> <div class="text">
<div class="pad"> <div class="pad">
<div class="primary"> <div class="primary">
@@ -120,7 +141,7 @@
</div> </div>
</div> </div>
<div lass="dropdowm menu"> <div lass="dropdowm menu">
<paper-dropdown-menu class="custom" label="Actions" no-label-float> <paper-dropdown-menu class="custom pull-right" label="Actions" no-label-float>
<paper-listbox class="dropdown-content"> <paper-listbox class="dropdown-content">
<paper-item>Download as Zip</paper-item> <paper-item>Download as Zip</paper-item>
<paper-item>View Details</paper-item> <paper-item>View Details</paper-item>
@@ -140,26 +161,61 @@
</template> </template>
<script> <script>
Polymer({ HTMLImports.whenReady(function() {
is: "alfresco-file-list", Polymer({
ready: function() { is: "alfresco-file-list",
this.url ="http://192.168.99.100:8080/alfresco/service/slingshot/doclib/doclist/all/site/swsdp/documentLibrary";
function error () { host: 'http://192.168.99.100:8080',
console.log("error");
baseUrl: function(){
return this.host + '/alfresco/service/slingshot/doclib/doclist/all/site/';
},
properties: {
showSelection: {
type: Boolean,
value: true,
observer: '_showSelectionChanged'
}
},
goToFolder: function(event) {
var slug= event.model.item.location.site + '/' + event.model.item.location.container + '/' + event.model.item.fileName
console.log('click folder'+ this.baseUrl());
this.fetchFolderFolder(slug);
},
ready: function() {
var initialFolder = 'swsdp/documentLibrary';
this.fetchFolderFolder(initialFolder);
var self = this;
if(document.querySelector("#alfresco-app")) {
document.querySelector("#alfresco-app").uploadedSignal = function (e, detail, sender) {
self.fetchFolderFolder(initialFolder);
};
}
},
fetchFolderFolder: function(slug) {
function error () {
console.log("error");
}
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", (XMLHttpRequestProgressEvent)=>{
this.data =JSON.parse(XMLHttpRequestProgressEvent.currentTarget.response).items;
});
xhr.addEventListener("error", error);
xhr.open("GET", (this.baseUrl() + slug));
xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'));
xhr.send();
},
thumbBaseUrl: function () {
return this.host + '/share/proxy/alfresco/';
} }
var xhr = new XMLHttpRequest(); });
xhr.addEventListener("load", (XMLHttpRequestProgressEvent)=>{
this.data =JSON.parse(XMLHttpRequestProgressEvent.currentTarget.response).items;
});
xhr.addEventListener("error", error);
xhr.open("GET", this.url);
xhr.withCredentials = true;
xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'));
xhr.send();
}
}); });
</script> </script>
</dom-module> </dom-module>

31
demo-shell-ng2/webcomponents/file-upload/file-upload.html
View File

@@ -17,13 +17,26 @@ Example:
<link rel="import" href="../../bower_components/paper-button/paper-button.html"> <link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html"> <link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-signals/iron-signals.html">
<dom-module id="file-upload"> <dom-module id="file-upload">
<style type="text/css"> <style type="text/css">
:host { :host {
display: inline-block; width: 100%;
display: inline-block;
}
.file-upload-0 paper-button#button.file-upload{
float:left;
}
.file{
width: 100%;
}
.name{
width: 100%;
} }
.enabled { .enabled {
@@ -38,6 +51,7 @@ Example:
} }
#UploadBorder{ #UploadBorder{
width: 80%;
vertical-align: middle; vertical-align: middle;
color: #555; color: #555;
padding: 20px; padding: 20px;
@@ -53,6 +67,7 @@ Example:
} }
paper-button#button { paper-button#button {
font: 13px/1.231 Open Sans,arial,helvetica,clean,sans-serif;
margin-bottom: 20px; margin-bottom: 20px;
@apply(--file-upload-button); @apply(--file-upload-button);
} }
@@ -99,7 +114,7 @@ Example:
paper-button#button { paper-button#button {
margin-bottom: 20px; margin-bottom: 20px;
background-color: aquamarine; background-color: rgba(255, 152, 0, 0.75);
} }
</style> </style>
@@ -201,7 +216,7 @@ Example:
*/ */
droptext: { droptext: {
type: String, type: String,
value: "Drop Files Here" value: ""
}, },
/** /**
@@ -327,7 +342,9 @@ Example:
if (this.droppable === 'true') { if (this.droppable === 'true') {
this._showDropText(); this._showDropText();
this.setupDrop(); this.setupDrop();
} else { this._hideDropText(); } } else {
this._hideDropText();
}
}, },
/** /**
@@ -494,6 +511,9 @@ Example:
if (xhr.status === 200) { if (xhr.status === 200) {
self.fire("success", {xhr: xhr}); self.fire("success", {xhr: xhr});
self.set(prefix + ".complete", true); self.set(prefix + ".complete", true);
if(document.querySelector("#alfresco-app")) {
document.querySelector('#alfresco-app').fire('iron-signal', {name: "uploaded", data: "uploaded!"});
}
} else { } else {
self.set(prefix + ".error", true); self.set(prefix + ".error", true);
self.set(prefix + ".complete", false); self.set(prefix + ".complete", false);
@@ -505,5 +525,4 @@ Example:
xhr.send(formData); xhr.send(formData);
} }
}); });
</script> </script>