JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: fix file dropdown

Browse Source 
This changes the icon, and text of the "Details" dropdown item to
"Preview". It also fixes text alignment in the dropdown menu.

Issue: https://github.com/storj/storj/issues/5643

Change-Id: Ib7ab3bc6fd98b9319ec3c3af5644aee6d1942335
This commit is contained in:
Wilfred Asomani 2023-03-10 14:11:41 +00:00 committed by Storj Robot
parent 7e2d98988b
commit fafa6658a9
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/satellite/src/components/browser/FileEntry.vue
View File

@ -19,8 +19,8 @@
<dots-icon v-else /> <dots-icon v-else />
<div v-if="dropdownOpen" class="file-entry__functional__dropdown"> <div v-if="dropdownOpen" class="file-entry__functional__dropdown">
<div class="file-entry__functional__dropdown__item" @click.stop="openModal"> <div class="file-entry__functional__dropdown__item" @click.stop="openModal">
<details-icon /> <preview-icon />
<p class="file-entry__functional__dropdown__item__label">Details</p> <p class="file-entry__functional__dropdown__item__label">Preview</p>
</div> </div>
<div class="file-entry__functional__dropdown__item" @click.stop="download"> <div class="file-entry__functional__dropdown__item" @click.stop="download">
@ -109,7 +109,6 @@ import { computed, ref } from 'vue';
import prettyBytes from 'pretty-bytes'; import prettyBytes from 'pretty-bytes';
import type { BrowserFile } from '@/types/browser'; import type { BrowserFile } from '@/types/browser';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks'; import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps'; import { MODALS } from '@/utils/constants/appStatePopUps';
@ -117,9 +116,9 @@ import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import TableItem from '@/components/common/TableItem.vue'; import TableItem from '@/components/common/TableItem.vue';
import PreviewIcon from '@/../static/images/objects/preview.svg';
import DeleteIcon from '@/../static/images/objects/delete.svg'; import DeleteIcon from '@/../static/images/objects/delete.svg';
import ShareIcon from '@/../static/images/objects/share.svg'; import ShareIcon from '@/../static/images/objects/share.svg';
import DetailsIcon from '@/../static/images/objects/details.svg';
import DownloadIcon from '@/../static/images/objects/download.svg'; import DownloadIcon from '@/../static/images/objects/download.svg';
import DotsIcon from '@/../static/images/objects/dots.svg'; import DotsIcon from '@/../static/images/objects/dots.svg';
import CloseIcon from '@/../static/images/common/closeCross.svg'; import CloseIcon from '@/../static/images/common/closeCross.svg';
@ -504,6 +503,10 @@ function cancelDeletion(): void {
padding: 20px 25px; padding: 20px 25px;
width: calc(100% - 50px); width: calc(100% - 50px);
& > svg {
width: 20px;
}
.dropdown-item.action.p-3.action { .dropdown-item.action.p-3.action {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
} }

5
web/satellite/static/images/objects/preview.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9579 14.786C12.597 14.786 13.1151 14.2679 13.1151 13.6288C13.1151 12.9898 12.597 12.4717 11.9579 12.4717C11.3189 12.4717 10.8008 12.9898 10.8008 13.6288C10.8008 14.2679 11.3189 14.786 11.9579 14.786Z" fill="#56606D"/>
<path d="M16.4563 13.3272C16.0988 12.4165 15.4819 11.6307 14.6821 11.0672C13.8823 10.5037 12.9347 10.1873 11.9567 10.1572C10.9788 10.1873 10.0312 10.5037 9.23136 11.0672C8.43153 11.6307 7.81464 12.4165 7.45715 13.3272L7.32812 13.6287L7.45715 13.9301C7.81464 14.8409 8.43153 15.6267 9.23136 16.1902C10.0312 16.7537 10.9788 17.0701 11.9567 17.1001C12.9347 17.0701 13.8823 16.7537 14.6821 16.1902C15.4819 15.6267 16.0988 14.8409 16.4563 13.9301L16.5853 13.6287L16.4563 13.3272ZM11.9567 15.943C11.499 15.943 11.0516 15.8072 10.671 15.5529C10.2904 15.2987 9.99376 14.9372 9.81859 14.5143C9.64343 14.0914 9.5976 13.6261 9.68689 13.1772C9.77619 12.7283 9.99661 12.3159 10.3203 11.9922C10.6439 11.6686 11.0563 11.4481 11.5052 11.3588C11.9542 11.2695 12.4195 11.3154 12.8424 11.4905C13.2653 11.6657 13.6267 11.9623 13.881 12.3429C14.1353 12.7235 14.271 13.171 14.271 13.6287C14.2703 14.2422 14.0262 14.8304 13.5923 15.2643C13.1585 15.6981 12.5703 15.9422 11.9567 15.943Z" fill="#56606D"/>
<path d="M6.17067 15.9431H3.85637V2.05725H8.48497V5.5287C8.48589 5.83532 8.60809 6.12911 8.8249 6.34592C9.04171 6.56273 9.33551 6.68494 9.64212 6.68585H13.1136V9.00015H14.2707V5.5287C14.2728 5.45266 14.2583 5.37709 14.2283 5.30717C14.1984 5.23725 14.1536 5.17466 14.0972 5.1237L10.0471 1.07367C9.99619 1.01717 9.9336 0.972392 9.86368 0.942426C9.79376 0.91246 9.71817 0.898019 9.64212 0.900099H3.85637C3.54976 0.901015 3.25596 1.02322 3.03915 1.24003C2.82234 1.45684 2.70013 1.75064 2.69922 2.05725V15.9431C2.70013 16.2497 2.82234 16.5435 3.03915 16.7603C3.25596 16.9771 3.54976 17.0993 3.85637 17.1002H6.17067V15.9431ZM9.64212 2.28868L12.8821 5.5287H9.64212V2.28868Z" fill="#56606D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB