Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Regression: WebDAV file picker search functionality and overflow fixing #15027

Merged
merged 2 commits into from
Jul 26, 2019
Merged

Regression: WebDAV file picker search functionality and overflow fixing #15027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2f03fd
Webdav File Picker - Added search functionality
ubarsaiyan Jul 21, 2019
94de16b
improve code to dont use Sessions
ggazzo Jul 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 116 additions & 18 deletions app/webdav/client/webdavFilePicker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,49 +46,146 @@
}

.webdav-table-header {
margin-bottom: 12px;
display: flex;
flex-direction: row;

margin-bottom: 8px;

font-size: 16px;
color: #444444;

font-size: 0.9rem;
font-weight: 500;
line-height: 1rem;
align-items: center;

i {
color: #5b5b5b;

font-size: 16px;
}

.webdav-path-breadcrumb {
display: flex;
overflow-x: auto;

float: left;
overflow: hidden;
white-space: nowrap;
align-items: center;
flex-flow: row nowrap;
-ms-overflow-style: none;

list-style: none;
/* scrollbar-width: none; */

.webdav-breadcrumb-item {
display: block;
float: left;
&::-webkit-scrollbar {
display: none;
}

.webdav-breadcrumb-item {
padding: 3px 0;

&:last-child {
padding-right: 30px;
}

.webdav-breadcrumb-folder {
padding: 3px;
overflow: hidden;

max-width: 100px;
padding: 4px 3px;

cursor: pointer;

&:hover {
transition: all 0.2s ease-in-out;
white-space: nowrap;
text-overflow: ellipsis;

color: inherit;

font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;

&:hover,
&:focus {
max-width: 300px;

border-radius: 5px;
background: #f1f3f4;
}
}
}
}

.listOrGridMode {
float: right;
.webdav-header-spacer {
flex: 1;
}

.webdav-search {
position: relative;

&::before {
position: absolute;
z-index: 5;
top: 0;
left: -40px;

width: 40px;
height: 100%;

content: '';
pointer-events: none;

background: linear-gradient(to right, transparent, white);
}

.webdav-search-input {
width: 36px;
padding: 4px 6px 4px 32px;

cursor: pointer;
transition: width 0.3s ease-in-out;

border: none;
outline: none;

font-family: inherit;
font-size: 0.85rem;
font-weight: 400;

&:focus {
width: 200px;
padding-left: 40px;

cursor: auto;
}
}

.webdav-search-icon {
position: absolute;
z-index: 5;
top: 0;
left: 6px;

padding: 4px 3px;

cursor: pointer;

&:hover,
&:focus {
border-radius: 5px;
background: #f1f3f4;
}
}
}

.list-grid-mode {
margin-right: 5px;
padding: 3px;
padding: 4px 3px;

cursor: pointer;

&:hover {
&:hover,
&:focus {
border-radius: 5px;
background: #f1f3f4;
}
Expand Down Expand Up @@ -130,7 +227,7 @@
font-size: 1rem;
}

& #webdav-go-back .rc-icon {
& .webdav-grid-back-icon .rc-icon {
cursor: pointer;

opacity: 1;
Expand All @@ -156,7 +253,7 @@
font-weight: 500;
line-height: 1rem;

#webdav-go-back {
.webdav-grid-back-icon {
float: left;

.rc-icon {
Expand All @@ -168,7 +265,7 @@
}
}

.select-sort {
.webdav-sort {
float: right;

height: auto;
Expand Down Expand Up @@ -226,7 +323,8 @@
font-weight: 500;
line-height: 1rem;

&:hover {
&:hover,
&:focus {
border-radius: 5px;
background: #f1f3f4;
}
Expand Down
65 changes: 37 additions & 28 deletions app/webdav/client/webdavFilePicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,36 @@
<template name="webdavFilePicker">
<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">
<div class="webdav-path-breadcrumb">
<div class="webdav-breadcrumb-item">
<button class="webdav-breadcrumb-folder js-webdav-breadcrumb-folder" aria-label="Home" data-index="-1">
<i class="icon-home"></i>
</span>
<i class="icon-angle-right"></i>
</li>
</button>
</div>
{{#each parentFolder in parentFolders}}
<li class="webdav-breadcrumb-item">
<span class="webdav-breadcrumb-folder" data-index="{{@index}}">
{{ parentFolder }}
</span>
<div class="webdav-breadcrumb-item">
<i class="icon-angle-right"></i>
</li>
<button class="webdav-breadcrumb-folder js-webdav-breadcrumb-folder" aria-label="{{ parentFolder }}" data-index="{{@index}}">
{{ parentFolder }}
</button>
</div>
{{/each}}
</ul>
<div class="listOrGridMode">
</div>
<div class="webdav-header-spacer"></div>
<div class="webdav-search">
<form class="webdav__search-form js-search-form" role="form">
<span class="webdav-search-icon js-webdav-search-icon rc-tooltip rc-tooltip--down" aria-label="Search">
<i class="icon-search"></i>
</span>
<input
type="text"
class="webdav-search-input js-webdav-search-input"
name="webdav-search-input"
placeholder="Search..."
autocomplete="off">
</form>
</div>
<div class="list-grid-mode js-list-grid-mode rc-tooltip rc-tooltip--down" aria-label="{{#if listMode}}Grid{{else}}List{{/if}} View">
<i class="icon-{{#if listMode}}th{{else}}list{{/if}}"></i>
</div>
</div>
Expand All @@ -33,7 +46,7 @@
<tr>
<th class="webdav__file-icon">
<div class="table-fake-th">
<span id="webdav-go-back">
<span class="webdav-grid-back-icon js-webdav-grid-back-icon">
{{#if $neq webdavCurrentFolder '/'}}
{{>icon icon='back'}}
{{/if}}
Expand All @@ -53,7 +66,7 @@
</thead>
<tbody>
{{#each webdavNodes}}
<tr class="webdav_{{this.type}}" data-name="{{this.basename}}">
<tr class="webdav_{{this.type}} js-webdav_{{this.type}}" data-name="{{this.basename}}">
<td>
<div class="table-file-avatar-wrapper">
{{#with iconType}}
Expand All @@ -63,31 +76,29 @@
{{/with}}
</div>
</td>
<td>{{this.basename}}</td>
<td>{{getName 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>
<td colspan="4" class="center-cell">{{_ "Nothing_found"}}</td>
</tr>
{{/each}}
</tbody>
{{/table}}
{{else}}
<div class="webdav-grid-header">
<div id="webdav-go-back">
<div class="webdav-grid-back-icon js-webdav-grid-back-icon">
{{#if $neq webdavCurrentFolder '/'}}
{{>icon icon='back'}}
{{/if}}
</div>
<div class="rc-select select-sort">
<span class="webdav-sort-direction">
<div class="rc-select webdav-sort">
<span class="webdav-sort-direction js-webdav-sort-direction">
{{> icon icon=(sortIcon getSortBy)}}
</span>
<select id="webdav-select-sort" class="required rc-select__element">
<select class="js-webdav-select-sort 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>
Expand All @@ -97,7 +108,7 @@
</div>
<div class="webdav-grid">
{{#each webdavNodes}}
<div class="webdav_{{this.type}} grid-item" data-name="{{this.basename}}">
<div class="webdav_{{this.type}} js-webdav_{{this.type}} grid-item" data-name="{{this.basename}}">
<div>
<div class="grid-file-avatar-wrapper">
{{#with iconType}}
Expand All @@ -107,12 +118,10 @@
{{/with}}
</div>
</div>
<div>{{this.basename}}</div>
<div>{{getName this.basename}}</div>
</div>
{{else}}
<div class="grid-empty">
There is nothing here!
</div>
<div class="grid-empty">{{_ "Nothing_found"}}</div>
{{/each}}
</div>
{{/if}}
Expand Down
Loading