Skip to content

Commit

Permalink
fix(FilePicker): Fix design review comments about column alignment an…
Browse files Browse the repository at this point in the history
…d overflow

Signed-off-by: Ferdinand Thiessen <[email protected]>
  • Loading branch information
susnux committed Aug 10, 2023
1 parent 7f4bb9a commit 1154e4e
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 6 deletions.
4 changes: 2 additions & 2 deletions lib/components/FilePicker/FileList.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ tr.file-picker__row {
padding-inline: 14px 0;
border-bottom: none; // remove lines between elements

// Make "size" and "modified" rows end aligned
&:not(:nth-of-type(2)) {
// Make column "size" end aligned
&.row-size {
text-align: end;
padding-inline: 0 14px; // align with header
}
Expand Down
6 changes: 3 additions & 3 deletions lib/components/FilePicker/FileList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ function onChangeDirectory(dir: Node) {
width: 44px;
}
&.row-name {
width: 150px;
width: 230px;
}
&.row-size {
width: 100px;
Expand All @@ -198,7 +198,7 @@ function onChangeDirectory(dir: Node) {
// >> begin of hacks for table header sorting buttons
// TODO: Remove this hack after ... is available
th:nth-of-type(2) {
th:not(.row-size) {
:deep(.button-vue__wrapper) {
justify-content: start;
flex-direction: row-reverse;
Expand All @@ -207,7 +207,7 @@ function onChangeDirectory(dir: Node) {
padding-inline: 16px 4px;
}
}
th:not(:nth-of-type(2)) :deep(.button-vue__wrapper) {
th.row-size :deep(.button-vue__wrapper) {
justify-content: end;
}
th :deep(.button-vue__wrapper) {
Expand Down
5 changes: 4 additions & 1 deletion lib/components/FilePicker/FileListRow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<td class="row-name" @click="handleClick">
<div class="file-picker__name-container">
<div class="file-picker__file-icon" :style="{ backgroundImage }" />
<div class="file-picker__file-name" v-text="displayName" />
<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
</div>
</td>
<td class="row-size">
Expand Down Expand Up @@ -112,6 +112,9 @@ function handleKeyDown(event: KeyboardEvent) {
&__file-name {
padding-inline-start: 6px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>

0 comments on commit 1154e4e

Please sign in to comment.