web/satellite: reworked delete bucket modal
Reworked delete bucket modal: - updated styling - added bucket name label which is supposed to be deleted Issue: https://github.com/storj/storj/issues/5550 Change-Id: I0d254d45a11878c86847020e2f8c172c2dfbec98
This commit is contained in:
Vitalii
parent
2f19636eb3
commit
a7c246badc
@ -7,22 +7,35 @@
|
||||
<div class="modal">
|
||||
<h1 class="modal__title">Are you sure?</h1>
|
||||
<p class="modal__subtitle">
|
||||
Deleting bucket will delete all metadata related to this bucket.
|
||||
The following bucket will be deleted and all of its data.<br>This action cannot be undone.
|
||||
</p>
|
||||
<div class="modal__chip">
|
||||
<DeleteBucketIcon />
|
||||
<p class="modal__chip__label">{{ bucketToDelete }}</p>
|
||||
</div>
|
||||
<VInput
|
||||
class="modal__input"
|
||||
label="Bucket Name"
|
||||
placeholder="Enter bucket name"
|
||||
label="Type the name of the bucket to confirm"
|
||||
placeholder="Bucket Name"
|
||||
:is-loading="isLoading"
|
||||
@setData="onChangeName"
|
||||
/>
|
||||
<VButton
|
||||
label="Confirm Delete Bucket"
|
||||
width="100%"
|
||||
height="48px"
|
||||
:on-press="onDelete"
|
||||
:is-disabled="isLoading || !name"
|
||||
/>
|
||||
<div class="modal__buttons">
|
||||
<VButton
|
||||
label="Cancel"
|
||||
width="100%"
|
||||
height="44px"
|
||||
:is-white="true"
|
||||
:on-press="closeModal"
|
||||
/>
|
||||
<VButton
|
||||
label="Delete Bucket"
|
||||
width="100%"
|
||||
height="48px"
|
||||
:on-press="onDelete"
|
||||
:is-disabled="isLoading || !name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VModal>
|
||||
@ -45,6 +58,8 @@ import VModal from '@/components/common/VModal.vue';
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
import VInput from '@/components/common/VInput.vue';
|
||||
|
||||
import DeleteBucketIcon from '@/../static/images/buckets/deleteBucket.svg';
|
||||
|
||||
const analyticsStore = useAnalyticsStore();
|
||||
const configStore = useConfigStore();
|
||||
const bucketsStore = useBucketsStore();
|
||||
@ -60,9 +75,8 @@ const isLoading = ref<boolean>(false);
|
||||
/**
|
||||
* Returns apiKey from store.
|
||||
*/
|
||||
const apiKey = computed((): string => {
|
||||
return bucketsStore.state.apiKey;
|
||||
});
|
||||
const apiKey = computed<string>(() => bucketsStore.state.apiKey);
|
||||
const bucketToDelete = computed<string>(() => bucketsStore.state.bucketToDelete);
|
||||
|
||||
/**
|
||||
* Holds on delete button click logic.
|
||||
@ -138,6 +152,7 @@ async function onDelete(): Promise<void> {
|
||||
await bucketsStore.deleteBucket(name.value);
|
||||
analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_DELETED);
|
||||
await fetchBuckets();
|
||||
bucketsStore.setBucketToDelete('');
|
||||
} catch (error) {
|
||||
notify.notifyError(error, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
|
||||
return;
|
||||
@ -196,39 +211,67 @@ onMounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal {
|
||||
padding: 45px 70px;
|
||||
padding: 35px;
|
||||
border-radius: 10px;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
background-color: var(--c-white);
|
||||
max-width: 480px;
|
||||
|
||||
@media screen and (width <= 700px) {
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 22px;
|
||||
line-height: 27px;
|
||||
color: #000;
|
||||
margin: 0 0 18px;
|
||||
line-height: 30px;
|
||||
color: var(--c-grey-8);
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.1007px;
|
||||
color: rgb(37 37 37 / 70%);
|
||||
margin: 0 0 24px;
|
||||
color: var(--c-grey-8);
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
margin-bottom: 18px;
|
||||
&__chip {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px 30px;
|
||||
border-radius: 999px;
|
||||
margin-bottom: 24px;
|
||||
background-color: var(--c-grey-2);
|
||||
|
||||
svg {
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-left: 7px;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
color: var(--c-blue-6);
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
column-gap: 15px;
|
||||
|
||||
@media screen and (width <= 550px) {
|
||||
flex-direction: column-reverse;
|
||||
column-gap: unset;
|
||||
row-gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -126,6 +126,7 @@ function closeDropdown(): void {
|
||||
* Holds on delete click logic.
|
||||
*/
|
||||
function onDeleteClick(): void {
|
||||
bucketsStore.setBucketToDelete(props.itemData.name);
|
||||
appStore.updateActiveModal(MODALS.deleteBucket);
|
||||
closeDropdown();
|
||||
}
|
||||
|
||||
@ -50,6 +50,7 @@ export class BucketsState {
|
||||
public fileComponentPath = '';
|
||||
public leaveRoute = '';
|
||||
public enterPassphraseCallback: (() => void) | null = null;
|
||||
public bucketToDelete = '';
|
||||
}
|
||||
|
||||
export const useBucketsStore = defineStore('buckets', () => {
|
||||
@ -270,6 +271,10 @@ export const useBucketsStore = defineStore('buckets', () => {
|
||||
return response.IsTruncated ? maxKeys : response.KeyCount;
|
||||
}
|
||||
|
||||
function setBucketToDelete(bucket: string): void {
|
||||
state.bucketToDelete = bucket;
|
||||
}
|
||||
|
||||
function clearS3Data(): void {
|
||||
state.apiKey = '';
|
||||
state.passphrase = '';
|
||||
@ -291,6 +296,7 @@ export const useBucketsStore = defineStore('buckets', () => {
|
||||
});
|
||||
state.fileComponentBucketName = '';
|
||||
state.leaveRoute = '';
|
||||
state.bucketToDelete = '';
|
||||
}
|
||||
|
||||
function clear(): void {
|
||||
@ -320,6 +326,7 @@ export const useBucketsStore = defineStore('buckets', () => {
|
||||
createBucketWithNoPassphrase,
|
||||
deleteBucket,
|
||||
getObjectsCount,
|
||||
setBucketToDelete,
|
||||
clearS3Data,
|
||||
clear,
|
||||
};
|
||||
|
||||
3
web/satellite/static/images/buckets/deleteBucket.svg
Normal file
3
web/satellite/static/images/buckets/deleteBucket.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.7748 7.66038C18.3965 9.28209 18.4113 11.902 16.8012 13.5121C16.1488 14.1646 15.3306 14.5502 14.4801 14.6702L14.1882 16.3241C14.1668 17.6216 11.5111 18.6708 8.23832 18.6708C4.98514 18.6708 2.34176 17.6342 2.28922 16.3474L2.28873 16.3241L0.0514784 3.64881C0.0262905 3.55917 0.0101765 3.46844 0.00351078 3.37676L0 3.35635L0.00219073 3.35647C0.000732884 3.33107 0 3.30561 0 3.28007C0 1.46854 3.68842 0 8.23832 0C12.7882 0 16.4766 1.46854 16.4766 3.28007C16.4766 3.30561 16.4759 3.33107 16.4744 3.35647L16.4766 3.35635L16.473 3.37813C16.4663 3.46877 16.4504 3.55849 16.4256 3.64714L15.8759 6.76137L16.7748 7.66038ZM14.4021 5.45644C12.8929 6.13349 10.6908 6.56014 8.23832 6.56014C5.78596 6.56014 3.58388 6.13352 2.07471 5.4565L3.69641 14.6459L3.96156 16.053L3.98613 16.0721C4.1248 16.176 4.33942 16.2933 4.61812 16.4062L4.67471 16.4287C5.57304 16.78 6.85312 16.9927 8.23832 16.9927C9.63152 16.9927 10.9181 16.7775 11.8165 16.423C12.1403 16.2952 12.3817 16.161 12.5234 16.0466L12.5349 16.0371L12.7952 14.5619C12.1404 14.3819 11.52 14.0391 10.9984 13.5339L10.9494 13.4858L7.5777 10.114C7.25001 9.78633 7.25001 9.25505 7.5777 8.92736C7.89739 8.60767 8.41087 8.59987 8.74001 8.90397L8.76435 8.92736L12.1361 12.2991C12.4146 12.5776 12.7417 12.7769 13.0891 12.8968L14.4021 5.45644ZM15.5199 8.77869L14.7993 12.8618C15.0968 12.744 15.3749 12.5652 15.6146 12.3255C16.555 11.3851 16.5576 9.85336 15.6224 8.8819L15.5882 8.84703L15.5199 8.77869ZM8.23832 1.67818C6.22507 1.67818 4.35798 1.9926 3.03372 2.51985C2.46469 2.74641 2.04133 2.99591 1.79767 3.22528C1.78214 3.23989 1.76797 3.25382 1.75511 3.26701L1.74286 3.27992L1.765 3.30316L1.79767 3.33487C2.04133 3.56423 2.46469 3.81374 3.03372 4.04029C4.35798 4.56755 6.22507 4.88197 8.23832 4.88197C10.2516 4.88197 12.1187 4.56755 13.4429 4.04029C14.0119 3.81374 14.4353 3.56423 14.679 3.33487C14.6945 3.32025 14.7087 3.30632 14.7215 3.29313L14.7339 3.27992L14.7116 3.25698L14.679 3.22528C14.4353 2.99591 14.0119 2.74641 13.4429 2.51985C12.1187 1.9926 10.2516 1.67818 8.23832 1.67818Z" fill="#091C45"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in New Issue
Block a user