[NEW] Webdav File Picker (#14879)
Utkarsh Barsaiyan
7 years ago
committed by
Guilherme Gazzo
parent
7db998274b
commit
37527c05c4
@ -0,0 +1,258 @@ |
||||
.webdav { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
height: 60vh; |
||||
|
||||
padding: 0; |
||||
|
||||
& &__file-icon, |
||||
& &__file-name, |
||||
& &__file-date { |
||||
overflow: hidden; |
||||
|
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
& &__file-name, |
||||
& &__file-size, |
||||
& &__file-date { |
||||
min-width: 80px; |
||||
} |
||||
|
||||
& &__file-icon { |
||||
width: 36px; |
||||
} |
||||
|
||||
.file-picker-loading .loading-animation > .bounce { |
||||
background-color: #444444; |
||||
} |
||||
|
||||
.current-folder-path { |
||||
display: flex; |
||||
flex-direction: row; |
||||
|
||||
height: 25px; |
||||
|
||||
.webdav_parent_folder { |
||||
padding: 0 5px; |
||||
|
||||
cursor: pointer; |
||||
|
||||
border-radius: 5px; |
||||
background-color: #e0e0e0; |
||||
} |
||||
} |
||||
|
||||
.webdav-table-header { |
||||
margin-bottom: 12px; |
||||
|
||||
font-size: 16px; |
||||
|
||||
i { |
||||
color: #5b5b5b; |
||||
} |
||||
|
||||
.webdav-path-breadcrumb { |
||||
|
||||
float: left; |
||||
overflow: hidden; |
||||
|
||||
list-style: none; |
||||
|
||||
.webdav-breadcrumb-item { |
||||
display: block; |
||||
float: left; |
||||
|
||||
padding: 3px 0; |
||||
|
||||
.webdav-breadcrumb-folder { |
||||
padding: 3px; |
||||
|
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
border-radius: 5px; |
||||
background: #f1f3f4; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.listOrGridMode { |
||||
float: right; |
||||
|
||||
margin-right: 5px; |
||||
padding: 3px; |
||||
|
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
border-radius: 5px; |
||||
background: #f1f3f4; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rc-table-content { |
||||
display: flex; |
||||
overflow-x: auto; |
||||
flex-direction: column; |
||||
flex: 1 1 100%; |
||||
|
||||
border-top: 1px solid rgba(216, 216, 216, 0.4); |
||||
|
||||
& tr { |
||||
color: #444444; |
||||
} |
||||
|
||||
& .js-sort { |
||||
cursor: pointer; |
||||
|
||||
&.is-sorting .table-fake-th .rc-icon { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
& .table-fake-th { |
||||
color: #444444; |
||||
|
||||
&:hover .rc-icon { |
||||
opacity: 1; |
||||
} |
||||
|
||||
& .rc-icon { |
||||
transition: opacity 0.3s; |
||||
|
||||
opacity: 0; |
||||
|
||||
font-size: 1rem; |
||||
} |
||||
|
||||
& #webdav-go-back .rc-icon { |
||||
cursor: pointer; |
||||
|
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
& .table-tr-dummy { |
||||
height: 10px; |
||||
} |
||||
|
||||
& .center-cell { |
||||
text-align: center; |
||||
} |
||||
|
||||
.webdav-grid-header { |
||||
|
||||
padding: 0.5rem 0; |
||||
|
||||
color: #444444; |
||||
border-bottom: 1px solid rgba(216, 216, 216, 0.4); |
||||
|
||||
font-size: 0.75rem; |
||||
font-weight: 500; |
||||
line-height: 1rem; |
||||
|
||||
#webdav-go-back { |
||||
float: left; |
||||
|
||||
.rc-icon { |
||||
cursor: pointer; |
||||
|
||||
opacity: 1; |
||||
|
||||
font-size: 1rem; |
||||
} |
||||
} |
||||
|
||||
.select-sort { |
||||
float: right; |
||||
|
||||
height: auto; |
||||
|
||||
border: none; |
||||
|
||||
.webdav-sort-direction { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.rc-select__element { |
||||
width: 120px; |
||||
padding: 0 5px; |
||||
|
||||
cursor: pointer; |
||||
|
||||
color: #444444; |
||||
|
||||
font-family: inherit; |
||||
font-size: 0.75rem; |
||||
font-weight: 500; |
||||
line-height: 1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.webdav-grid { |
||||
display: grid; |
||||
|
||||
margin: 15px 0; |
||||
|
||||
text-align: center; |
||||
grid-gap: 15px 0; |
||||
grid-template-columns: 190px 190px 190px; |
||||
|
||||
.grid-file-avatar { |
||||
color: #5d5d5d; |
||||
|
||||
font-size: 64px; |
||||
} |
||||
|
||||
.grid-item { |
||||
overflow: hidden; |
||||
|
||||
padding: 0.5rem 0; |
||||
|
||||
cursor: pointer; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
|
||||
color: #444444; |
||||
|
||||
font-size: 0.9rem; |
||||
|
||||
font-weight: 500; |
||||
line-height: 1rem; |
||||
|
||||
&:hover { |
||||
border-radius: 5px; |
||||
background: #f1f3f4; |
||||
} |
||||
} |
||||
|
||||
.grid-empty { |
||||
color: #444444; |
||||
|
||||
font-size: 0.9rem; |
||||
font-weight: 500; |
||||
line-height: 1rem; |
||||
grid-column: span 3; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (width <= 980px) { |
||||
.webdav { |
||||
height: 60vh; |
||||
|
||||
.rc-table-content { |
||||
& th:not(:first-child), |
||||
& td:not(:first-child) { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,35 +1,122 @@ |
||||
<template name="webdavFilePicker"> |
||||
<div class="webdav-container"> |
||||
<ul class="attachments"> |
||||
{{#if $neq webdavCurrentFolder '/'}} |
||||
<li class="attachments__item" id="webdav-go-back"> |
||||
<div class="attachments__thumb attachments__file"> |
||||
{{>icon icon='back'}} |
||||
</div> |
||||
<div class="webdav"> |
||||
<div class="webdav-table-header"> |
||||
<ul class="webdav-path-breadcrumb"> |
||||
<li class="webdav-breadcrumb-item"> |
||||
<span class="webdav-breadcrumb-folder" data-index="-1"> |
||||
<i class="icon-home"></i> |
||||
</span> |
||||
<i class="icon-angle-right"></i> |
||||
</li> |
||||
{{/if}} |
||||
{{#each parentFolder in parentFolders}} |
||||
<li class="webdav-breadcrumb-item"> |
||||
<span class="webdav-breadcrumb-folder" data-index="{{@index}}"> |
||||
{{ parentFolder }} |
||||
</span> |
||||
<i class="icon-angle-right"></i> |
||||
</li> |
||||
{{/each}} |
||||
</ul> |
||||
<div class="listOrGridMode"> |
||||
<i class="icon-{{#if listMode}}th{{else}}list{{/if}}"></i> |
||||
</div> |
||||
</div> |
||||
<div class="rc-table-content"> |
||||
{{#if isLoading}} |
||||
<div class="file-picker-loading"> |
||||
{{> loading}} |
||||
</div> |
||||
{{else}} |
||||
{{#each webdavNodes}} |
||||
<li class="attachments__item webdav_{{this.type}}"> |
||||
{{#with iconType}} |
||||
<div class="attachments__thumb attachments__file--{{type}}"> |
||||
{{>icon icon=icon}} |
||||
<div class="attachments__type">{{extension}}</div> |
||||
{{#if listMode}} |
||||
{{#table onSort=onTableSort}} |
||||
<thead> |
||||
<tr> |
||||
<th class="webdav__file-icon"> |
||||
<div class="table-fake-th"> |
||||
<span id="webdav-go-back"> |
||||
{{#if $neq webdavCurrentFolder '/'}} |
||||
{{>icon icon='back'}} |
||||
{{/if}} |
||||
</span> |
||||
</div> |
||||
</th> |
||||
<th class="webdav__file-name js-sort {{#if sortBy 'name'}}is-sorting{{/if}}" data-sort="name"> |
||||
<div class="table-fake-th"><span>Name</span>{{> icon icon=(sortIcon 'name')}}</div> |
||||
</th> |
||||
<th class="webdav__file-size js-sort {{#if sortBy 'size'}}is-sorting{{/if}}" data-sort="size"> |
||||
<div class="table-fake-th"><span>Size</span>{{> icon icon=(sortIcon 'size')}}</div> |
||||
</th> |
||||
<th class="webdav__file-date js-sort {{#if sortBy 'date'}}is-sorting{{/if}}" data-sort="date"> |
||||
<div class="table-fake-th"><span>Date Modified</span>{{> icon icon=(sortIcon 'date')}}</div> |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{{#each webdavNodes}} |
||||
<tr class="webdav_{{this.type}}" data-name="{{this.basename}}"> |
||||
<td> |
||||
<div class="table-file-avatar-wrapper"> |
||||
{{#with iconType}} |
||||
<div class="table-file-avatar"> |
||||
{{>icon icon=icon}} |
||||
</div> |
||||
{{/with}} |
||||
</div> |
||||
</td> |
||||
<td>{{this.basename}}</td> |
||||
<td>{{getSize}}</td> |
||||
<td class="table-column-date">{{getDate}}</td> |
||||
</tr> |
||||
{{else}} |
||||
<tr class="table-no-click"> |
||||
<td colspan="4" class="center-cell"> |
||||
There is nothing here! |
||||
</td> |
||||
</tr> |
||||
{{/each}} |
||||
</tbody> |
||||
{{/table}} |
||||
{{else}} |
||||
<div class="webdav-grid-header"> |
||||
<div id="webdav-go-back"> |
||||
{{#if $neq webdavCurrentFolder '/'}} |
||||
{{>icon icon='back'}} |
||||
{{/if}} |
||||
</div> |
||||
<div class="rc-select select-sort"> |
||||
<span class="webdav-sort-direction"> |
||||
{{> icon icon=(sortIcon getSortBy)}} |
||||
</span> |
||||
<select id="webdav-select-sort" class="required rc-select__element"> |
||||
<option value="name" selected="{{sortBy 'name'}}" dir="auto">Name</option> |
||||
<option value="size" selected="{{sortBy 'size'}}" dir="auto">Size</option> |
||||
<option value="date" selected="{{sortBy 'date'}}" dir="auto">Date Modified</option> |
||||
</select> |
||||
{{> icon block="rc-select__arrow" icon="arrow-down"}} |
||||
</div> |
||||
</div> |
||||
<div class="webdav-grid"> |
||||
{{#each webdavNodes}} |
||||
<div class="webdav_{{this.type}} grid-item" data-name="{{this.basename}}"> |
||||
<div> |
||||
<div class="grid-file-avatar-wrapper"> |
||||
{{#with iconType}} |
||||
<div class="grid-file-avatar"> |
||||
{{>icon icon=icon}} |
||||
</div> |
||||
{{/with}} |
||||
</div> |
||||
</div> |
||||
<div>{{this.basename}}</div> |
||||
</div> |
||||
{{/with}} |
||||
<a title="{{this.basename}}" target="_blank" class="attachments__item"> |
||||
<div class="attachments__content"> |
||||
<div class="attachments__name">{{this.basename}}</div> |
||||
<div class="attachments__details">{{this.lastmod}}</div> |
||||
{{else}} |
||||
<div class="grid-empty"> |
||||
There is nothing here! |
||||
</div> |
||||
</a> |
||||
</li> |
||||
{{/each}} |
||||
{{/each}} |
||||
</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
Loading…
Reference in new issue