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",
"iron-ajax": "~1.2.0",
"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"
}
}

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

@@ -24,9 +24,6 @@
"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",
"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"
"paper-item": "PolymerElements/paper-item#^1.1.4"
}
}

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>

76
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/iron-icon/iron-icon.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>
.pad {
@@ -52,11 +55,14 @@
top: calc(50% - 8px);
}
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 { list-style-type: none; overflow: hidden; margin:10px}
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:hover { background: #eeeeee; height: 55px}
.file{
width: 52px;
height: 52px;
}
.folder {
height: 52px;
box-sizing: border-box;
@@ -74,6 +80,14 @@
font-family: sans-serif;
}
.pull-right{
float: right;
}
.iron-list ul{
padding: 0px;
}
paper-dropdown-menu.custom {
overflow: visible;
--paper-input-container-label: {
@@ -100,12 +114,19 @@
<dom-module id="alfresco-file-list">
<template>
<!-- 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>
<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="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="pad">
<div class="primary">
@@ -120,7 +141,7 @@
</div>
</div>
<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-item>Download as Zip</paper-item>
<paper-item>View Details</paper-item>
@@ -140,10 +161,42 @@
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: "alfresco-file-list",
host: 'http://192.168.99.100:8080',
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() {
this.url ="http://192.168.99.100:8080/alfresco/service/slingshot/doclib/doclist/all/site/swsdp/documentLibrary";
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");
}
@@ -154,12 +207,15 @@
xhr.addEventListener("error", error);
xhr.open("GET", this.url);
xhr.withCredentials = true;
xhr.open("GET", (this.baseUrl() + slug));
xhr.setRequestHeader("Authorization", 'Basic ' + btoa('admin:admin'));
xhr.send();
}
},
thumbBaseUrl: function () {
return this.host + '/share/proxy/alfresco/';
}
});
});
</script>
</dom-module>

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

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