inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-26 17:24:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-770] Long file names break the application (#98)

Browse Source
This commit is contained in:
Cilibiu Bogdan 2017-11-29 22:34:25 +02:00 committed by Denys Vuika
parent 441a1e2173
commit deaed1b81a
9 changed files with 53 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/favorites/favorites.component.html
View File

@ -104,12 +104,9 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis__name"
key="name"
class="app-name-column"
title="APP.DOCUMENT_LIST.COLUMNS.NAME">
<ng-template let-value="value" let-context>
<span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
</ng-template>
</data-column>
<data-column
@ -135,13 +132,14 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis"
key="modifiedByUser.displayName"
title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
</data-column>
</data-columns>
</adf-document-list>
<adf-pagination
<adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>

6
src/app/components/files/files.component.html
View File

@ -110,12 +110,9 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis__name"
key="name"
class="app-name-column"
title="APP.DOCUMENT_LIST.COLUMNS.NAME">
<ng-template let-value="value" let-context>
<span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
</ng-template>
</data-column>
<data-column
@ -135,6 +132,7 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis"
key="modifiedByUser.displayName"
title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
</data-column>

12
src/app/components/libraries/libraries.component.html
View File

@ -37,14 +37,9 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis__name"
key="title"
title="APP.DOCUMENT_LIST.COLUMNS.TITLE"
class="app-name-column">
<ng-template let-context>
<span title="{{ makeLibraryTooltip(context.row.obj.entry) }}">
{{ makeLibraryTitle(context.row.obj.entry) }}
</span>
</ng-template>
title="APP.DOCUMENT_LIST.COLUMNS.TITLE">
</data-column>
<data-column
@ -64,7 +59,8 @@
</data-column>
</data-columns>
</adf-document-list>
<adf-pagination
<adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>

7
src/app/components/recent-files/recent-files.component.html
View File

@ -98,12 +98,9 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis__name"
key="name"
class="app-name-column"
title="APP.DOCUMENT_LIST.COLUMNS.NAME">
<ng-template let-value="value" let-context>
<span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
</ng-template>
</data-column>
<data-column
@ -130,7 +127,7 @@
</data-columns>
</adf-document-list>
<adf-pagination
<adf-pagination [ngClass]="{'no-border' : documentList.isEmpty()}"
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>

9
src/app/components/shared-files/shared-files.component.html
View File

@ -96,12 +96,9 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis__name"
key="name"
class="app-name-column"
title="APP.DOCUMENT_LIST.COLUMNS.NAME">
<ng-template let-value="value" let-context>
<span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
</ng-template>
</data-column>
<data-column
@ -127,18 +124,20 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis"
key="modifiedByUser.displayName"
title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
</data-column>
<data-column
class="adf-data-table-cell--ellipsis"
key="sharedByUser.displayName"
title="APP.DOCUMENT_LIST.COLUMNS.SHARED_BY">
</data-column>
</data-columns>
</adf-document-list>
<adf-pagination
<adf-pagination [ngClass]="{ 'no-border' :documentList.isEmpty()}"
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>

5
src/app/components/sidenav/sidenav.component.scss
View File

@ -40,10 +40,9 @@ $sidenav-menu-item--icon-size: 24px;
list-style-type: none;
&__item {
padding: $sidenav-menu-item--v-padding 0;
&-link {
padding:
$sidenav-menu-item--v-padding
$sidenav-menu-item--h-padding;
padding-left: $sidenav-menu-item--h-padding + 16px + 24px;
position: relative;

8
src/app/components/trashcan/trashcan.component.html
View File

@ -56,12 +56,9 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis__name"
key="name"
class="app-name-column"
title="APP.DOCUMENT_LIST.COLUMNS.NAME">
<ng-template let-value="value" let-context>
<span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
</ng-template>
</data-column>
<data-column
@ -87,6 +84,7 @@
</data-column>
<data-column
class="adf-data-table-cell--ellipsis"
key="archivedByUser.displayName"
title="APP.DOCUMENT_LIST.COLUMNS.DELETED_BY">
</data-column>
@ -94,7 +92,7 @@
</data-columns>
</adf-document-list>
<adf-pagination
<adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>

4
src/app/ui/_layout.scss
View File

@ -40,6 +40,10 @@ $app-inner-layout--footer-height: 48px;
}
.inner-layout {
.no-border {
border: unset
}
display: flex;
flex: 1;
flex-direction: column;

85
src/app/ui/overrides/_alfresco-document-list.scss
View File

@ -7,80 +7,28 @@ adf-document-list {
overflow: auto;
& > adf-datatable {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
height: 100%;
}
}
.adf-data-table {
border: none !important;
.sr-only {
display: none;
}
th, td {
color: $alfresco-secondary-text-color;
}
th.adf-data-table-cell--text:nth-child(n+3) {
text-align: center;
}
th, tr, td {
color: $alfresco-secondary-text-color;
&:focus {
outline: none !important;
}
}
// TODO: Remove tr background-color once it gets to ADF
tbody tr {
&:hover, &:focus {
background-color: $alfresco-app-color--hue-1;
}
}
tr {
&.is-selected {
&.is-selected, &.is-selected:hover {
background-color: $alfresco-app-color--hue-1;
&:hover {
background-color: $alfresco-app-color--hue-1;
}
.image-table-cell {
position: relative;
&:before {
content: "\E876"; /* "done" */
font-family: "Material Icons";
font-size: 24px;
line-height: 32px;
text-align: center;
color: white;
position: absolute;
width: 32px;
height: 32px;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -14px;
border-radius: 100%;
background: #00bcd4;
}
}
}
.app-name-column {
width: 100%;
.cell-container {
max-width: 45vw;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
@ -109,6 +57,31 @@ adf-document-list {
.adf-no-content-container {
border: none !important;
}
.adf-data-table-cell--ellipsis {
width: 100%;
}
.adf-data-table-cell--ellipsis__name {
width: 85%;
}
.adf-data-table-cell--ellipsis .cell-value,
.adf-data-table-cell--ellipsis__name .cell-value {
display: flex;
align-items: center;
}
.adf-data-table-cell--ellipsis .adf-datatable-cell,
.adf-data-table-cell--ellipsis__name .adf-datatable-cell {
white-space: nowrap;
display: block;
position: absolute;
max-width: calc(100% - 2em);
overflow: hidden;
text-overflow: ellipsis;
}
}
.empty-list {