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

Merge pull request #249 from Alfresco/dev-mvitale-225

Browse Source 
Fix test responsiveness upload component #225
This commit is contained in:
Mario Romano
2016-06-21 16:38:12 -07:00
committed by GitHub
parent 821970ecf7 833c433646
commit 2b8ba662c9
6 changed files with 75 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ng2-components/ng2-alfresco-upload/demo/index.html
View File

@@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alfresco Angular 2 Upload - Demo</title>
<base href="./">

54
ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.css
View File

@@ -6,7 +6,8 @@
display: none !important;
}
.file-dialog {
:host .file-dialog {
width: 800px;
display: none;
-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
box-shadow: -2px -1px 8px 3px rgba(0, 0, 0, .2);
@@ -27,7 +28,7 @@
position: fixed;
}
.file-dialog .header {
:host .file-dialog .header {
background-color: rgb(31,188,210);
border: 1px transparent solid;
border-bottom: 1px solid #c7c7c7;
@@ -45,13 +46,13 @@
padding: 0px 10px 0px 10px;
}
.file-dialog .header .title {
:host .file-dialog .header .title {
float: left;
min-width: 200px;
min-width: 150px;
color: white;
}
.file-dialog .header .buttons {
:host .file-dialog .header .buttons {
float: right;
padding: 10px 10px 10px 10px;
text-align: center;
@@ -60,7 +61,7 @@
opacity: 0.5;
}
.file-dialog .header .close-button {
:host .file-dialog .header .close-button {
cursor: pointer;
float: left;
height: 35px;
@@ -71,12 +72,12 @@
border: 1px solid transparent;
}
.file-dialog .header .close-button:hover {
:host .file-dialog .header .close-button:hover {
border: 1px solid white;
opacity: 1.0;
}
.file-dialog .header .minimize-button {
:host .file-dialog .header .minimize-button {
cursor: pointer;
float: left;
height: 35px;
@@ -109,7 +110,7 @@
opacity: 1.0;
}
.file-dialog .body-dialog {
:host .file-dialog .body-dialog {
float: left;
height: 100%;
margin-top: -4px;
@@ -118,4 +119,39 @@
border-left: 1px solid #C0C0C0;
max-height: 200px;
overflow-y: auto;
width: 99.6%;
}
:host .mdl-data-table th {
text-align: left;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
.file-dialog {
width: 280px;
}
}
@media only screen and (min-width: 360px) and (max-width: 640px) {
.file-dialog {
width: 315px;
}
}
@media only screen and (min-width: 375px) and (max-width: 667px) {
.file-dialog {
width: 325px;
}
}
@media only screen and (min-width: 411px) and (max-width: 731px) {
.file-dialog {
width: 365px;
}
}
@media only screen and (min-width: 435px) and (max-width: 773px) {
.content-layout {
height: 420px
}
}

4
ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.html
View File

@@ -1,4 +1,4 @@
<div *ngIf="filesUploadingList" class="file-dialog" [ngClass]="{show: isDialogActive}">
<div class="file-dialog" [ngClass]="{show: isDialogActive}">
<div class="header">
<div class="title">
<span id="total-upload-completed">{{totalCompleted}}</span> {{'FILE_UPLOAD.MESSAGES.COMPLETED' | translate}}
@@ -14,7 +14,7 @@
</div>
</div>
</div>
<div class="body-dialog" [ngClass]="{hide: _isDialogMinimized}">
<div class="body-dialog" *ngIf="filesUploadingList" [ngClass]="{hide: _isDialogMinimized}">
<alfresco-file-uploading-list [filesUploadingList]="filesUploadingList"></alfresco-file-uploading-list>
</div>
</div>

24
ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css
View File

@@ -37,13 +37,31 @@
text-align: right;
}
.truncate {
width: 300px;
:host .truncate {
margin-left: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mdl-progress{
:host .mdl-progress{
width: 300px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
.truncate {
width: 60px;
}
.mdl-progress {
width: 60px;
}
}
@media only screen and (min-width: 360px) and (max-width: 640px) {
.truncate {
max-width: 80px;
}
.mdl-progress {
max-width: 80px;
}
}

4
ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html
View File

@@ -7,7 +7,7 @@
<tr>
<th>{{'FILE_UPLOAD.FILE_INFO.NAME' | translate}}</th>
<th>{{'FILE_UPLOAD.FILE_INFO.PROGRESS' | translate}}</th>
<th>{{'FILE_UPLOAD.FILE_INFO.SIZE' | translate}}</th>
<th class="mdl-cell--hide-phone">{{'FILE_UPLOAD.FILE_INFO.SIZE' | translate}}</th>
<th>{{'FILE_UPLOAD.FILE_INFO.ACTION' | translate}}</th>
</tr>
<tr *ngFor="let file of filesUploadingList">
@@ -20,7 +20,7 @@
<div class="auxbar bar bar3" style="width: 0%;"></div>
</div>
</td>
<td class="mdl-data-table__cell--non-numeric">{{file.size}}</td>
<td class="mdl-data-table__cell--non-numeric mdl-cell--hide-phone">{{file.size}}</td>
<td>
<span *ngIf="file.done && !file.abort"><i data-automation-id="done_icon" class="material-icons">done</i></span>
<span *ngIf="file.uploading" (click)="abort(file.id)" class="cursor" ><i data-automation-id="abort_cancel_upload"