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

web/satellite: redundant scrolls fixed

Browse Source 
Change-Id: I0677c3bd9ca13aaf788261af4edbc4921a3aa633
This commit is contained in:
NikolaiYurchenko 2020-01-22 16:10:35 +02:00 committed by Nikolay Yurchenko
parent 5151dc981c
commit 9414b8eb48
6 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/components/account/AccountArea.vue
View File

@ -32,7 +32,7 @@ export default class AccountArea extends Vue {}
.account-area-container {
padding: 0 65px;
height: 100%;
height: auto;
&__navigation {
position: absolute;

10
web/satellite/src/components/account/referral/ReferralArea.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="referral-container">
<div class="referral-container" :class="{collapsed: isBannerShown}">
<div class="referral-container__title-container">
<p class="referral-container__title-container__text">Refer A Friend And Help Build The</p>
<p class="referral-container__title-container__text">Decentralized Future</p>
@ -46,6 +46,10 @@ export default class ReferralArea extends Vue {
this.$notify.success('Link saved to clipboard');
}
public get isBannerShown(): boolean {
return this.$store.state.paymentsModule.creditCards.length === 0;
}
public get isAvailableLinks(): boolean {
return this.$store.state.referralModule.referralTokens.length !== 0;
}
@ -157,4 +161,8 @@ export default class ReferralArea extends Vue {
}
}
}
.collapsed {
height: auto !important;
}
</style>

15
web/satellite/src/components/apiKeys/ApiKeysArea.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="api-keys-area">
<h1 class="api-keys-area__title">API Keys</h1>
<h1 class="api-keys-area__title" v-if="isTitleShown">API Keys</h1>
<div class="api-keys-area__container">
<ApiKeysCreationPopup
@closePopup="closeNewApiKeyPopup"
@ -93,6 +93,7 @@
<EmptySearchResultIcon class="empty-search-result-area__image"/>
</div>
<EmptyState
:class="{collapsed: isBannerShown}"
:on-button-click="onCreateApiKeyClick"
v-if="isEmptyStateShown"
main-title="Let's create your first API Key"
@ -268,6 +269,14 @@ export default class ApiKeysArea extends Vue {
return this.$store.getters.apiKeys.length === 0;
}
public get isBannerShown(): boolean {
return this.$store.state.paymentsModule.creditCards.length === 0;
}
public get isTitleShown(): boolean {
return !this.isBannerShown && this.isEmpty;
}
public get hasSearchQuery(): boolean {
return this.$store.state.apiKeysModule.cursor.search;
}
@ -481,6 +490,10 @@ export default class ApiKeysArea extends Vue {
}
}
.collapsed {
margin-top: 0 !important;
}
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {

2
web/satellite/src/components/buckets/NoBucketsArea.vue
View File

@ -83,7 +83,7 @@ export default class NoBucketArea extends Vue {}
}
.no-buckets-area {
padding: 40px 180px 120px 180px;
padding: 40px 180px 0 180px;
font-family: 'font_regular', sans-serif;
&__header {

6
web/satellite/tests/unit/apiKeys/ApiKeysArea.spec.ts
View File

@ -5,8 +5,10 @@ import Vuex from 'vuex';
import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
import { PaymentsHttpApi } from '@/api/payments';
import { API_KEYS_MUTATIONS, makeApiKeysModule } from '@/store/modules/apiKeys';
import { makeNotificationsModule } from '@/store/modules/notifications';
import { makePaymentsModule } from '@/store/modules/payments';
import { makeProjectsModule } from '@/store/modules/projects';
import { ApiKey, ApiKeysPage } from '@/types/apiKeys';
import { Project } from '@/types/projects';
@ -28,9 +30,11 @@ const apiKeysApi = new ApiKeysMock();
const apiKeysModule = makeApiKeysModule(apiKeysApi);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const paymentsApi = new PaymentsHttpApi();
const paymentsModule = makePaymentsModule(paymentsApi);
const notificationsModule = makeNotificationsModule();
const { CLEAR, SET_PAGE } = API_KEYS_MUTATIONS;
const store = new Vuex.Store({ modules: { projectsModule, apiKeysModule, notificationsModule }});
const store = new Vuex.Store({ modules: { projectsModule, apiKeysModule, paymentsModule, notificationsModule }});
describe('ApiKeysArea', () => {
const project = new Project('id', 'projectName', 'projectDescription', 'test', 'testOwnerId', true);

10
web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap
View File

@ -2,7 +2,7 @@
exports[`ApiKeysArea renders correctly 1`] = `
<div class="api-keys-area">
<h1 class="api-keys-area__title">API Keys</h1>
<!---->
<div class="api-keys-area__container">
<apikeyscreationpopup-stub></apikeyscreationpopup-stub>
<apikeyscopypopup-stub apikeysecret=""></apikeyscopypopup-stub>
@ -31,14 +31,14 @@ exports[`ApiKeysArea renders correctly 1`] = `
<path d=&quot;M141.606 146.546H143.707C145.522 146.546 147.051 144.922 147.051 143.011C147.051 141.005 145.618 139.477 143.707 139.477H141.606C139.791 139.477 138.262 141.101 138.262 143.011C138.358 145.017 139.791 146.546 141.606 146.546Z&quot; fill=&quot;#8F96AD&quot;/>
<path d=&quot;M154.216 146.546H156.317C158.132 146.546 159.661 144.922 159.661 143.011C159.661 141.005 158.228 139.477 156.317 139.477H154.216C152.401 139.477 150.872 141.101 150.872 143.011C150.968 145.017 152.401 146.546 154.216 146.546Z&quot; fill=&quot;#8F96AD&quot;/>
<path d=&quot;M126.229 158.861C125.787 158.861 125.433 158.861 125.079 158.949C124.372 159.037 123.665 158.598 123.4 157.983C115.091 142.97 99.0028 132.786 80.4398 132.786C63.6447 132.786 48.7943 141.127 40.0431 153.857C39.6011 154.471 38.8056 154.735 38.0984 154.647C35.8885 154.208 33.5903 153.944 31.292 153.944C13.9665 153.857 0 167.553 0 184.585C0 184.585 0 184.585 0 184.672C0 185.638 0.795558 186.428 1.8563 186.428H150.449C151.421 186.428 152.305 185.638 152.305 184.672V184.585C152.305 170.362 140.637 158.861 126.229 158.861Z&quot; fill=&quot;#B0B6C9&quot;/>
</svg>" isbuttonshown="true" onbuttonclick="function () { [native code] }" buttonlabel="Create an API Key"></emptystate-stub>
</svg>" isbuttonshown="true" onbuttonclick="function () { [native code] }" buttonlabel="Create an API Key" class="collapsed"></emptystate-stub>
</div>
</div>
`;
exports[`ApiKeysArea renders empty screen with add key prompt 1`] = `
<div class="api-keys-area">
<h1 class="api-keys-area__title">API Keys</h1>
<!---->
<div class="api-keys-area__container">
<apikeyscreationpopup-stub></apikeyscreationpopup-stub>
<apikeyscopypopup-stub apikeysecret=""></apikeyscopypopup-stub>
@ -70,7 +70,7 @@ exports[`ApiKeysArea renders empty screen with add key prompt 1`] = `
exports[`ApiKeysArea renders empty search state correctly 1`] = `
<div class="api-keys-area">
<h1 class="api-keys-area__title">API Keys</h1>
<!---->
<div class="api-keys-area__container">
<apikeyscreationpopup-stub></apikeyscreationpopup-stub>
<apikeyscopypopup-stub apikeysecret=""></apikeyscopypopup-stub>
@ -99,7 +99,7 @@ exports[`ApiKeysArea renders empty search state correctly 1`] = `
<path d=&quot;M141.606 146.546H143.707C145.522 146.546 147.051 144.922 147.051 143.011C147.051 141.005 145.618 139.477 143.707 139.477H141.606C139.791 139.477 138.262 141.101 138.262 143.011C138.358 145.017 139.791 146.546 141.606 146.546Z&quot; fill=&quot;#8F96AD&quot;/>
<path d=&quot;M154.216 146.546H156.317C158.132 146.546 159.661 144.922 159.661 143.011C159.661 141.005 158.228 139.477 156.317 139.477H154.216C152.401 139.477 150.872 141.101 150.872 143.011C150.968 145.017 152.401 146.546 154.216 146.546Z&quot; fill=&quot;#8F96AD&quot;/>
<path d=&quot;M126.229 158.861C125.787 158.861 125.433 158.861 125.079 158.949C124.372 159.037 123.665 158.598 123.4 157.983C115.091 142.97 99.0028 132.786 80.4398 132.786C63.6447 132.786 48.7943 141.127 40.0431 153.857C39.6011 154.471 38.8056 154.735 38.0984 154.647C35.8885 154.208 33.5903 153.944 31.292 153.944C13.9665 153.857 0 167.553 0 184.585C0 184.585 0 184.585 0 184.672C0 185.638 0.795558 186.428 1.8563 186.428H150.449C151.421 186.428 152.305 185.638 152.305 184.672V184.585C152.305 170.362 140.637 158.861 126.229 158.861Z&quot; fill=&quot;#B0B6C9&quot;/>
</svg>" isbuttonshown="true" onbuttonclick="function () { [native code] }" buttonlabel="Create an API Key"></emptystate-stub>
</svg>" isbuttonshown="true" onbuttonclick="function () { [native code] }" buttonlabel="Create an API Key" class="collapsed"></emptystate-stub>
</div>
</div>
`;