web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add pathname collapse for long path in drive

Browse Source
This commit is contained in:
ClemDee
2019-06-05 10:36:58 +02:00
parent 4017dd7db9
commit 0c66c19466
2 changed files with 114 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
www/drive/app-drive.less
View File

@@ -861,37 +861,58 @@
width: auto;
overflow: hidden;
white-space: nowrap;
display: flex;
flex-flow: row-reverse;
flex-shrink: 1;
min-width: 50px;
max-width: 100%;
text-align: left;
.cp-app-drive-path-element {
display: inline-block;
height: @variables_bar-height;
line-height: @variables_bar-height;
font-size: @colortheme_app-font-size;
padding: 0 5px;
border: 0;
background: darken(@colortheme_drive-bg, 7%);
color: @colortheme_drive-color;
box-sizing: border-box;
transition: all 0.15s;
&.cp-app-drive-path-separator {
color: #ccc;
}
&:hover {
&:not(.cp-app-drive-path-separator) {
background-color: darken(@colortheme_drive-bg, 15%);
text-decoration: underline;
cursor: pointer;
display: flex;
flex-direction: row;
.cp-app-drive-path-inner {
display: flex;
flex-flow: row-reverse;
flex-grow: 1;
.cp-app-drive-path-element {
display: inline-block;
flex-shrink: 0;
max-width: 100%;
height: @variables_bar-height;
line-height: @variables_bar-height;
font-size: @colortheme_app-font-size;
padding: 0 5px;
border: 0;
background: darken(@colortheme_drive-bg, 7%);
color: @colortheme_drive-color;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.15s;
&:first-child {
flex-shrink: 1;
}
& ~ .cp-app-drive-path-element {
background-color: darken(@colortheme_drive-bg, 15%);
&.cp-app-drive-path-separator {
color: #ccc;
}
& ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) {
text-decoration: underline;
&.cp-app-drive-path-collapse {
position: relative;
}
&:hover {
&:not(.cp-app-drive-path-separator) {
background-color: darken(@colortheme_drive-bg, 15%);
text-decoration: underline;
cursor: pointer;
}
& ~ .cp-app-drive-path-element {
background-color: darken(@colortheme_drive-bg, 15%);
}
& ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) {
text-decoration: underline;
}
}
}
}