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

web/satellite: make hiding bucket guide user friendly

Browse Source 
This change makes actions to hide the bucket guide much clearer by using only one "OK" action button.

see: https://github.com/storj/storj/issues/5094

Change-Id: I3de8c1e21a5ec5dbcd91e69c1579fac7f46d39ca
This commit is contained in:
Wilfred Asomani 2022-08-24 11:00:49 +00:00 committed by Storj Robot
parent 794a4cc365
commit b60c3ea0a1
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/satellite/src/components/objects/BucketItem.vue
View File

@ -18,12 +18,11 @@
<p class="bucket-item__functional__dropdown__item__label">Delete Bucket</p>
</div>
</div>
<div v-if="shouldShowGuide" class="bucket-item__functional__message">
<div v-if="shouldShowGuide" class="bucket-item__functional__message" @click.stop>
<p class="bucket-item__functional__message__title">Upload</p>
<p class="bucket-item__functional__message__content">To upload files, open an existing bucket or create a new one.</p>
<div class="bucket-item__functional__message__actions">
<a class="bucket-item__functional__message__actions__secondary" @click.stop="hideGuidePermanently">I understand, don’t show this again.</a>
<div class="bucket-item__functional__message__actions__primary" @click.stop="hideGuide">
<div class="bucket-item__functional__message__actions__primary" @click.stop="hideGuidePermanently">
<p class="bucket-item__functional__message__actions__primary__label">OK</p>
</div>
</div>
@ -93,10 +92,6 @@ export default class BucketItem extends Resizable {
return { info: [ this.itemData.name, `Created ${this.formattedDate}` ] };
}
public hideGuide(): void {
this.isGuideShown = false;
}
/*
* Permanently hide the upload guide
* */
@ -180,10 +175,11 @@ export default class BucketItem extends Resizable {
&__message {
position: absolute;
top: 80%;
width: 25rem;
display: flex;
flex-direction: column;
align-items: start;
top: 80%;
transform: translateX(-100%);
background-color: #0149ff;
text-align: center;
@ -192,6 +188,14 @@ export default class BucketItem extends Resizable {
padding: 20px;
z-index: 1001;
@media screen and (max-width: 320px) {
transform: translateX(-80%);
}
@media screen and (max-width: 375px) and (min-width: 350px) {
transform: translateX(-88%);
}
&:after {
content: '';
position: absolute;
@ -201,6 +205,10 @@ export default class BucketItem extends Resizable {
border-style: solid;
border-color: #0149ff transparent transparent;
transform: rotate(180deg);
@media screen and (max-width: 550px) {
left: 45%;
}
}
&__title {
@ -224,7 +232,7 @@ export default class BucketItem extends Resizable {
&__actions {
display: flex;
justify-content: space-between;
justify-content: end;
align-items: center;
width: 100%;
@ -241,14 +249,6 @@ export default class BucketItem extends Resizable {
color: #0149ff;
}
}
&__secondary {
font-weight: 400;
font-size: 12px;
line-height: 18px;
text-decoration: underline !important;
color: white;
}
}
}
}