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

web/satellite: dashboard template simplified, project selection moved to nav bar

Browse Source 
WHAT:
project selection moved to navigation panel

WHY:
preparing for multiple project state

Change-Id: I434c73c25b3fec85fc7226a8400cf280b379b537
This commit is contained in:
VitaliiShpital 2020-08-20 22:38:17 +03:00
parent e5012fcb3d
commit 5729d087b0
27 changed files with 238 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/satellite/src/App.vue
View File

@ -26,10 +26,6 @@ export default class App extends Vue {
private ids: string[] = [
'accountDropdown',
'accountDropdownButton',
'projectDropdown',
'projectDropdownButton',
'sortTeamMemberByDropdown',
'sortTeamMemberByDropdownButton',
'notificationArea',
'paymentSelectButton',
'paymentSelect',

2
web/satellite/src/api/payments.ts
View File

@ -260,7 +260,7 @@ export class PaymentsHttpApi implements PaymentsApi {
* @param userId
* @throws Error
*/
public async getPaywallEnabledStatus(userId: string): Promise<boolean> {
public async getPaywallStatus(userId: string): Promise<boolean> {
const path = `${this.ROOT_PATH}/paywall-enabled/${userId}`;
const response = await this.client.get(path);

1
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -204,7 +204,6 @@ export default class BillingArea extends Vue {
<style scoped lang="scss">
.account-billing-area {
padding-bottom: 55px;
&__title-area {
display: flex;

3
web/satellite/src/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue
View File

@ -4,7 +4,7 @@
<template>
<div class="usage-charges-item-container">
<div class="usage-charges-item-container__summary" @click="toggleDetailedInfo">
<div class="usage-charges-item-container__summary__name-container" >
<div class="usage-charges-item-container__summary__name-container">
<ChargesExpandIcon v-if="isDetailedInfoShown"/>
<ChargesHideIcon v-else/>
<span>{{ projectName }}</span>
@ -204,7 +204,6 @@ export default class UsageAndChargesItem extends Vue {
}
&__amount {
width: 100%;
font-size: 16px;
line-height: 21px;
text-align: right;

2
web/satellite/src/components/apiKeys/NoApiKeysArea.vue
View File

@ -72,7 +72,7 @@ export default class NoApiKeysArea extends Vue {
.no-api-keys-area {
width: auto;
height: calc(100% - 130px);
padding: 65px;
padding: 65px 65px 0 65px;
display: flex;
flex-direction: column;
align-items: center;

2
web/satellite/src/components/header/HeaderArea.vue
View File

@ -7,7 +7,6 @@
import { Component, Vue } from 'vue-property-decorator';
import NewProjectArea from '@/components/header/NewProjectArea.vue';
import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import ProjectCreationSuccessPopup from '@/components/project/ProjectCreationSuccessPopup.vue';
@ -20,7 +19,6 @@ import AccountButton from './AccountButton.vue';
@Component({
components: {
ProjectCreationSuccessPopup,
ProjectSelectionArea,
NewProjectArea,
AccountButton,
NavigationArea,

1
web/satellite/src/components/header/headerArea.html
View File

@ -12,7 +12,6 @@
<NavigationCloseIcon/>
<p class="dashboard-header-container__left-area__close-button__title">Close</p>
</div>
<ProjectSelectionArea class="dashboard-header-container__left-area__project-selection"/>
</div>
<LogoIcon
class="storj-title"

4
web/satellite/src/components/header/headerArea.scss
View File

@ -77,10 +77,6 @@
&__left-area {
&__project-selection {
display: none;
}
&__menu-button {
display: block;
cursor: pointer;

123
web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue → web/satellite/src/components/header/projectSelection/ProjectDropdown.vue
View File

@ -2,25 +2,25 @@
// See LICENSE for copying information.
<template>
<div class="project-selection-choice-container" id="projectDropdown">
<div class="project-selection-overflow-container">
<div class="project-selection-overflow-container__project-choice" @click="closeDropdown">
<div class="project-selection-overflow-container__project-choice__mark-container">
<div class="project-dropdown">
<div class="project-dropdown__wrap">
<div class="project-dropdown__wrap__choice" @click.prevent.stop="closeDropdown">
<div class="project-dropdown__wrap__choice__mark-container">
<ProjectSelectionIcon
class="project-selection-overflow-container__project-choice__mark-container__image"
class="project-dropdown__wrap__choice__mark-container__image"
/>
</div>
<p class="project-selection-overflow-container__project-choice__selected">
<p class="project-dropdown__wrap__choice__selected">
{{ selectedProject.name }}
</p>
</div>
<div
class="project-selection-overflow-container__project-choice"
@click="onProjectSelected(project.id)"
class="project-dropdown__wrap__choice"
@click.prevent.stop="onProjectSelected(project.id)"
v-for="project in projects"
:key="project.id"
>
<p class="project-selection-overflow-container__project-choice__unselected">{{ project.name }}</p>
<p class="project-dropdown__wrap__choice__unselected">{{ project.name }}</p>
</div>
</div>
</div>
@ -36,17 +36,14 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project } from '@/types/projects';
import {
APP_STATE_ACTIONS,
PM_ACTIONS,
} from '@/utils/constants/actionNames';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
@Component({
components: {
ProjectSelectionIcon,
},
})
export default class ProjectSelectionDropdown extends Vue {
export default class ProjectDropdown extends Vue {
private FIRST_PAGE = 1;
/**
@ -107,7 +104,7 @@ export default class ProjectSelectionDropdown extends Vue {
* Closes dropdown.
*/
public closeDropdown(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PROJECTS);
this.$emit('close');
}
}
</script>
@ -120,62 +117,59 @@ export default class ProjectSelectionDropdown extends Vue {
width: 0;
}
.project-selection-choice-container {
.project-dropdown {
position: absolute;
top: 65px;
left: -5px;
background-color: #fff;
z-index: 1120;
left: -3px;
top: 60px;
border: 1px solid #c5cbdb;
box-shadow: 0 8px 34px rgba(161, 173, 185, 0.41);
border-radius: 6px;
}
.project-selection-overflow-container {
position: relative;
min-width: 226px;
width: auto;
overflow-y: scroll;
height: auto;
max-height: 240px;
background-color: #fff;
font-family: 'font_regular', sans-serif;
border-radius: 6px;
&__wrap {
width: auto;
overflow-y: scroll;
height: auto;
min-width: 195px;
max-height: 240px;
background-color: #fff;
border-radius: 6px;
font-family: 'font_regular', sans-serif;
&__project-choice {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 25px;
&__choice {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 25px;
&__selected,
&__unselected {
margin: 12px 0;
font-size: 14px;
line-height: 20px;
color: #7e8b9c;
word-break: break-all;
}
&__selected {
font-family: 'font_bold', sans-serif;
color: #494949;
}
&:hover {
background-color: #f2f2f6;
.project-selection-overflow-container__project-choice__unselected {
color: #354049;
&__selected,
&__unselected {
margin: 12px 0;
font-size: 14px;
line-height: 20px;
color: #7e8b9c;
word-break: break-all;
}
}
&__mark-container {
width: 10px;
margin-right: 12px;
&__selected {
font-family: 'font_bold', sans-serif;
color: #494949;
}
&__image {
object-fit: cover;
&:hover {
background-color: #f2f2f6;
.project-dropdown__wrap__choice__unselected {
color: #354049;
}
}
&__mark-container {
width: 10px;
margin-right: 12px;
&__image {
object-fit: cover;
}
}
}
}
@ -184,11 +178,4 @@ export default class ProjectSelectionDropdown extends Vue {
.arrow {
padding-right: 25px;
}
@media screen and (max-width: 1280px) {
.project-selection-choice-container {
top: 50px;
}
}
</style>

136
web/satellite/src/components/header/projectSelection/ProjectSelectionArea.vue → web/satellite/src/components/header/projectSelection/ProjectSelection.vue
View File

@ -2,17 +2,16 @@
// See LICENSE for copying information.
<template>
<div class="project-selection-container" :class="{ default: !hasProjects }" id="projectDropdownButton">
<p class="project-selection-container__no-projects-text" v-if="!hasProjects">You have no projects</p>
<div class="project-selection" :class="{ default: !hasProjects }">
<p class="project-selection__no-projects-text" v-if="!hasProjects">You have no projects</p>
<div
class="project-selection-toggle-container"
class="project-selection__toggle-container"
:class="{ default: isOnboardingTour }"
@click="toggleSelection"
@click.stop="toggleSelection"
v-if="hasProjects"
>
<p class="project-selection-toggle-container__common" :class="{ default: isOnboardingTour }">Project:</p>
<h1 class="project-selection-toggle-container__name">{{name}}</h1>
<div class="project-selection-toggle-container__expander-area" v-if="!isOnboardingTour">
<h1 class="project-selection__toggle-container__name">{{name}}</h1>
<div class="project-selection__toggle-container__expander-area" v-if="!isOnboardingTour">
<ExpandIcon
v-if="!isDropdownShown"
alt="Arrow down (expand)"
@ -22,8 +21,12 @@
alt="Arrow up (hide)"
/>
</div>
<ProjectDropdown
v-show="isDropdownShown"
@close="closeDropdown"
v-click-outside="closeDropdown"
/>
</div>
<ProjectSelectionDropdown v-if="isDropdownShown"/>
</div>
</template>
@ -36,19 +39,19 @@ import HideIcon from '@/../static/images/common/BlueHide.svg';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project } from '@/types/projects';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import ProjectSelectionDropdown from './ProjectSelectionDropdown.vue';
import ProjectDropdown from './ProjectDropdown.vue';
@Component({
components: {
ProjectSelectionDropdown,
ProjectDropdown,
ExpandIcon,
HideIcon,
},
})
export default class ProjectSelectionArea extends Vue {
export default class ProjectSelection extends Vue {
private isLoading: boolean = false;
public isDropdownShown: boolean = false;
/**
* Fetches projects related information and than toggles selection popup.
@ -66,7 +69,7 @@ export default class ProjectSelectionArea extends Vue {
this.isLoading = false;
}
await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PROJECTS);
this.toggleDropdown();
this.isLoading = false;
}
@ -79,13 +82,6 @@ export default class ProjectSelectionArea extends Vue {
return selectedProject.id ? selectedProject.name : 'Choose project';
}
/**
* Indicates if project selection dropdown should be rendered.
*/
public get isDropdownShown(): boolean {
return this.$store.state.appStateModule.appState.isProjectsDropdownShown;
}
/**
* Indicates if user has projects.
*/
@ -99,14 +95,28 @@ export default class ProjectSelectionArea extends Vue {
public get isOnboardingTour(): boolean {
return this.$route.name === RouteConfig.OnboardingTour.name;
}
/**
* Toggles project dropdown visibility.
*/
public toggleDropdown(): void {
this.isDropdownShown = !this.isDropdownShown;
}
/**
* Closes project dropdown.
*/
public closeDropdown(): void {
this.isDropdownShown = false;
}
}
</script>
<style scoped lang="scss">
.project-selection-container {
position: relative;
.project-selection {
background-color: #fff;
cursor: pointer;
margin-right: 20px;
&__no-projects-text {
font-family: 'font_medium', sans-serif;
@ -116,42 +126,43 @@ export default class ProjectSelectionArea extends Vue {
opacity: 0.7;
cursor: default !important;
}
}
.project-selection-toggle-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 50px;
&__common {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: rgba(56, 75, 101, 0.4);
opacity: 0.7;
cursor: pointer;
margin-right: 5px;
}
&__name {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #354049;
transition: opacity 0.2s ease-in-out;
word-break: break-all;
}
&__expander-area {
margin-left: 12px;
&__toggle-container {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
justify-content: flex-start;
width: 100%;
height: 50px;
&__common {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: rgba(56, 75, 101, 0.4);
opacity: 0.7;
cursor: pointer;
margin-right: 5px;
}
&__name {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #354049;
transition: opacity 0.2s ease-in-out;
word-break: break-all;
}
&__expander-area {
margin-left: 11px;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
}
}
@ -161,17 +172,16 @@ export default class ProjectSelectionArea extends Vue {
@media screen and (max-width: 1280px) {
.project-selection-container {
.project-selection {
margin-right: 30px;
padding-right: 10px;
}
.project-selection-toggle-container {
justify-content: space-between;
margin-left: 10px;
&__toggle-container {
justify-content: space-between;
padding-left: 10px;
&__common {
display: none;
&__common {
display: none;
}
}
}
}

4
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -6,7 +6,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
import ProjectSelection from '@/components/header/projectSelection/ProjectSelection.vue';
import ApiKeysIcon from '@/../static/images/navigation/apiKeys.svg';
import DashboardIcon from '@/../static/images/navigation/dashboard.svg';
@ -21,7 +21,7 @@ import { NavigationLink } from '@/types/navigation';
@Component({
components: {
ProjectSelectionArea,
ProjectSelection,
LogoIcon,
LogoTextIcon,
DocsIcon,

2
web/satellite/src/components/navigation/navigationArea.html
View File

@ -7,8 +7,8 @@
<LogoIcon class="navigation-area__logo__img"/>
<LogoTextIcon class="navigation-area__logo__text"/>
</router-link>
<ProjectSelectionArea class="project-selection-area"/>
<p class="navigation-area__project-title">PROJECT</p>
<ProjectSelection class="project-selection"/>
<router-link
:aria-label="navItem.name"
class="navigation-area__item-container"

25
web/satellite/src/components/navigation/navigationArea.scss
View File

@ -22,14 +22,12 @@ a {
}
.navigation-area {
position: relative;
min-width: 280px;
max-width: 280px;
height: calc(100vh - 140px);
overflow-y: scroll;
left: 0;
overflow-x: hidden;
background-color: #fff;
flex: 1 1 auto;
padding: 20px 0 120px 0;
display: flex;
flex-direction: column;
@ -41,8 +39,8 @@ a {
flex-direction: row;
align-items: center;
cursor: pointer;
margin-bottom: 60px;
margin-left: 60px;
flex: 0 0 auto;
&__img {
width: 54px;
@ -63,13 +61,21 @@ a {
color: #505872;
margin: 0 0 20px 65px;
font-weight: 600;
flex: 0 0 auto;
}
&__project-title {
margin: 40px 0 15px 65px;
padding-top: 20px;
}
&__resources-title {
flex: 0 0 auto;
margin: 35px 0 20px 65px;
}
&__item-container {
flex: 0 0 auto;
height: 52px;
padding-left: 60px;
border-left: 3px solid transparent;
@ -128,8 +134,8 @@ a {
opacity: 0.6;
}
.project-selection-area {
display: none;
.project-selection {
margin: 10px 0 0 65px;
}
@media screen and (max-width: 1280px) {
@ -157,17 +163,14 @@ a {
}
&__project-title {
border-top: 1px solid rgba(169, 181, 193, 0.3);
padding-top: 20px;
margin-top: 5px;
margin-top: 0;
}
&__logo {
display: none;
}
.project-selection-area {
display: block;
.project-selection {
margin-left: 35px;
}
}

2
web/satellite/src/components/project/ProjectDashboard.vue
View File

@ -66,7 +66,7 @@ export default class ProjectDashboard extends Vue {
<style scoped lang="scss">
.dashboard-area {
padding: 40px 30px 80px 30px;
padding: 40px 30px;
font-family: 'font_regular', sans-serif;
&__title-area {

14
web/satellite/src/store/modules/appState.ts
View File

@ -13,7 +13,6 @@ export const appStateModule = {
fetchState: AppState.LOADING,
isAddTeamMembersPopupShown: false,
isNewProjectPopupShown: false,
isProjectsDropdownShown: false,
isAccountDropdownShown: false,
isDeleteProjectPopupShown: false,
isDeleteAccountPopupShown: false,
@ -44,11 +43,6 @@ export const appStateModule = {
state.appState.isSaveApiKeyModalShown = !state.appState.isSaveApiKeyModalShown;
},
// Mutation changing project dropdown visibility
[APP_STATE_MUTATIONS.TOGGLE_PROJECT_DROPDOWN](state: any): void {
state.appState.isProjectsDropdownShown = !state.appState.isProjectsDropdownShown;
},
// Mutation changing account dropdown visibility
[APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN](state: any): void {
state.appState.isAccountDropdownShown = !state.appState.isAccountDropdownShown;
@ -95,7 +89,6 @@ export const appStateModule = {
// Mutation that closes each popup/dropdown
[APP_STATE_MUTATIONS.CLOSE_ALL](state: any): void {
state.appState.isAccountDropdownShown = false;
state.appState.isProjectsDropdownShown = false;
state.appState.isSortProjectMembersByPopupShown = false;
},
[APP_STATE_MUTATIONS.CHANGE_STATE](state: any, newFetchState: AppState): void {
@ -133,13 +126,6 @@ export const appStateModule = {
commit(APP_STATE_MUTATIONS.TOGGLE_SAVE_API_KEY_MODAL);
},
[APP_STATE_ACTIONS.TOGGLE_PROJECTS]: function ({commit, state}: any): void {
if (!state.appState.isProjectsDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_PROJECT_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_ACCOUNT]: function ({commit, state}: any): void {
if (!state.appState.isAccountDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);

8
web/satellite/src/store/modules/payments.ts
View File

@ -153,8 +153,8 @@ export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState>
state.priceSummary = usageItemSummaries.reduce((accumulator, current) => accumulator + current);
},
[SET_PAYWALL_ENABLED_STATUS](state: PaymentsState, paywallEnabledStatus: boolean): void {
state.isPaywallEnabled = paywallEnabledStatus;
[SET_PAYWALL_ENABLED_STATUS](state: PaymentsState, isPaywallEnabled: boolean): void {
state.isPaywallEnabled = isPaywallEnabled;
},
[CLEAR](state: PaymentsState) {
state.balance = new AccountBalance();
@ -238,9 +238,9 @@ export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState>
commit(SET_PRICE_SUMMARY, usageAndCharges);
},
[GET_PAYWALL_ENABLED_STATUS]: async function({commit, rootGetters}: any): Promise<void> {
const paywallEnabledStatus: boolean = await api.getPaywallEnabledStatus(rootGetters.user.id);
const isPaywallEnabled: boolean = await api.getPaywallStatus(rootGetters.user.id);
commit(SET_PAYWALL_ENABLED_STATUS, paywallEnabledStatus);
commit(SET_PAYWALL_ENABLED_STATUS, isPaywallEnabled);
},
},
getters: {

1
web/satellite/src/store/mutationConstants.ts
View File

@ -12,7 +12,6 @@ export const NOTIFICATION_MUTATIONS = {
export const APP_STATE_MUTATIONS = {
TOGGLE_ADD_TEAMMEMBER_POPUP: 'TOGGLE_ADD_TEAMMEMBER_POPUP',
TOGGLE_NEW_PROJECT_POPUP: 'TOGGLE_NEW_PROJECT_POPUP',
TOGGLE_PROJECT_DROPDOWN: 'TOGGLE_PROJECT_DROPDOWN',
TOGGLE_ACCOUNT_DROPDOWN: 'TOGGLE_ACCOUNT_DROPDOWN',
TOGGLE_SAVE_API_KEY_MODAL: 'TOGGLE_SAVE_API_KEY_MODAL',
TOGGLE_DELETE_PROJECT_DROPDOWN: 'TOGGLE_DELETE_PROJECT_DROPDOWN',

2
web/satellite/src/types/payments.ts
View File

@ -76,7 +76,7 @@ export interface PaymentsApi {
* @param userId
* @throws Error
*/
getPaywallEnabledStatus(userId: string): Promise<boolean>;
getPaywallStatus(userId: string): Promise<boolean>;
}
export class AccountBalance {

1
web/satellite/src/utils/constants/actionNames.ts
View File

@ -5,7 +5,6 @@ export const APP_STATE_ACTIONS = {
TOGGLE_TEAM_MEMBERS: 'toggleAddTeamMembersPopup',
TOGGLE_NEW_PROJ : 'toggleNewProjectPopup',
TOGGLE_SAVE_API_KEY_MODAL: 'toggleSaveApiKeyModal',
TOGGLE_PROJECTS: 'toggleProjectsDropdown',
TOGGLE_ACCOUNT: 'toggleAccountDropdown',
TOGGLE_DEL_PROJ: 'toggleDeleteProjectPopup',
TOGGLE_DEL_ACCOUNT: 'toggleDeleteAccountPopup',

114
web/satellite/src/views/DashboardArea.vue
View File

@ -8,11 +8,11 @@
</div>
<NoPaywallInfoBar v-if="isNoPaywallInfoBarShown && !isLoading"/>
<div v-if="!isLoading" class="dashboard-container__wrap">
<NavigationArea class="regular-navigation"/>
<NavigationArea class="dashboard-container__wrap__regular-navigation"/>
<div class="dashboard-container__wrap__column">
<DashboardHeader/>
<div class="dashboard-container__main-area" :class="{ extended: isNoPaywallInfoBarShown }">
<div class="dashboard-container__main-area__bar-area">
<div class="dashboard-container__wrap__column__main-area">
<div class="dashboard-container__wrap__column__main-area__bar-area">
<VInfoBar
v-if="isInfoBarShown"
:first-value="storageRemaining"
@ -24,7 +24,7 @@
link-label="Request Limit Increase ->"
/>
</div>
<div class="dashboard-container__main-area__content">
<div class="dashboard-container__wrap__column__main-area__content">
<router-view/>
</div>
</div>
@ -277,55 +277,6 @@ export default class DashboardArea extends Vue {
</script>
<style scoped lang="scss">
.dashboard-container {
position: fixed;
max-width: 100%;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #f5f6fa;
z-index: 10;
&__wrap {
display: flex;
&__column {
display: flex;
flex-direction: column;
width: 100%;
}
}
&__main-area {
position: relative;
width: 100%;
height: calc(100vh - 50px);
overflow-y: scroll;
display: flex;
flex-direction: column;
&__bar-area {
flex: 0 1 auto;
}
&__content {
flex: 1 1 auto;
}
}
}
.extended {
height: calc(100vh - 90px);
}
@media screen and (max-width: 1280px) {
.regular-navigation {
display: none;
}
}
.loading-overlay {
display: flex;
justify-content: center;
@ -334,8 +285,7 @@ export default class DashboardArea extends Vue {
top: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 100;
bottom: 0;
background-color: rgba(134, 134, 148, 1);
visibility: hidden;
opacity: 0;
@ -343,14 +293,60 @@ export default class DashboardArea extends Vue {
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
.loading-image {
z-index: 200;
}
}
.loading-overlay.active {
visibility: visible;
opacity: 1;
}
.dashboard-container {
position: fixed;
max-width: 100%;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #f5f6fa;
display: flex;
flex-direction: column;
&__wrap {
display: flex;
height: 100%;
&__column {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
&__main-area {
position: relative;
width: 100%;
height: calc(100vh - 50px);
overflow-y: scroll;
display: flex;
flex-direction: column;
&__bar-area {
flex: 0 0 auto;
}
&__content {
flex: 0 0 auto;
}
}
}
}
}
@media screen and (max-width: 1280px) {
.dashboard-container__wrap__regular-navigation {
display: none;
}
}
</style>

28
web/satellite/static/resetPassword/resetPassword.css
View File

@ -212,34 +212,6 @@ input {
z-index: -100;
}
.loading-overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 100;
background-color: rgba(134, 134, 148, 0.7);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.loading-overlay img {
z-index: 200;
}
.loading-overlay.active {
visibility: visible;
opacity: 1;
}
.image {
position: fixed;
right: 0;

6
web/satellite/tests/unit/components/header/ProjectSelectionDropdown.spec.ts → web/satellite/tests/unit/components/header/ProjectDropdown.spec.ts
View File

@ -3,7 +3,7 @@
import Vuex from 'vuex';
import ProjectSelectionDropdown from '@/components/header/projectSelection/ProjectSelectionDropdown.vue';
import ProjectDropdown from '@/components/header/projectSelection/ProjectDropdown.vue';
import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
import { Project } from '@/types/projects';
@ -21,12 +21,12 @@ const project2 = new Project('testId2', 'testName2', '');
const store = new Vuex.Store({ modules: { projectsModule }});
describe('ProjectSelectionDropdown', () => {
describe('ProjectDropdown', () => {
it('renders correctly', () => {
store.commit(PROJECTS_MUTATIONS.SET_PROJECTS, [project1, project2]);
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, project1.id);
const wrapper = shallowMount(ProjectSelectionDropdown, {
const wrapper = shallowMount(ProjectDropdown, {
store,
localVue,
});

19
web/satellite/tests/unit/components/header/__snapshots__/ProjectDropdown.spec.ts.snap Normal file
View File

@ -0,0 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProjectDropdown renders correctly 1`] = `
<div class="project-dropdown">
<div class="project-dropdown__wrap">
<div class="project-dropdown__wrap__choice">
<div class="project-dropdown__wrap__choice__mark-container">
<projectselectionicon-stub class="project-dropdown__wrap__choice__mark-container__image"></projectselectionicon-stub>
</div>
<p class="project-dropdown__wrap__choice__selected">
testName1
</p>
</div>
<div class="project-dropdown__wrap__choice">
<p class="project-dropdown__wrap__choice__unselected">testName2</p>
</div>
</div>
</div>
`;

19
web/satellite/tests/unit/components/header/__snapshots__/ProjectSelectionDropdown.spec.ts.snap
View File

@ -1,19 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProjectSelectionDropdown renders correctly 1`] = `
<div id="projectDropdown" class="project-selection-choice-container">
<div class="project-selection-overflow-container">
<div class="project-selection-overflow-container__project-choice">
<div class="project-selection-overflow-container__project-choice__mark-container">
<projectselectionicon-stub class="project-selection-overflow-container__project-choice__mark-container__image"></projectselectionicon-stub>
</div>
<p class="project-selection-overflow-container__project-choice__selected">
testName1
</p>
</div>
<div class="project-selection-overflow-container__project-choice">
<p class="project-selection-overflow-container__project-choice__unselected">testName2</p>
</div>
</div>
</div>
`;

4
web/satellite/tests/unit/components/navigation/__snapshots__/navigationArea.spec.ts.snap
View File

@ -7,8 +7,8 @@ exports[`NavigationArea snapshot not changed with project 1`] = `
<logoicon-stub class="navigation-area__logo__img"></logoicon-stub>
<logotexticon-stub class="navigation-area__logo__text"></logotexticon-stub>
</router-link-stub>
<projectselectionarea-stub class="project-selection-area"></projectselectionarea-stub>
<p class="navigation-area__project-title">PROJECT</p>
<projectselection-stub class="project-selection"></projectselection-stub>
<router-link-stub to="/project-dashboard" tag="a" event="click" aria-label="Dashboard" class="navigation-area__item-container">
<div class="navigation-area__item-container__link-container">
<anonymous-stub></anonymous-stub>
@ -61,8 +61,8 @@ exports[`NavigationArea snapshot not changed without project 1`] = `
<logoicon-stub class="navigation-area__logo__img"></logoicon-stub>
<logotexticon-stub class="navigation-area__logo__text"></logotexticon-stub>
</router-link-stub>
<projectselectionarea-stub class="project-selection-area"></projectselectionarea-stub>
<p class="navigation-area__project-title">PROJECT</p>
<projectselection-stub class="project-selection"></projectselection-stub>
<router-link-stub to="/project-dashboard" tag="a" event="click" aria-label="Dashboard" class="navigation-area__item-container disabled">
<div class="navigation-area__item-container__link-container">
<anonymous-stub></anonymous-stub>

2
web/satellite/tests/unit/mock/api/payments.ts
View File

@ -50,7 +50,7 @@ export class PaymentsMock implements PaymentsApi {
return Promise.resolve(new TokenDeposit(amount, 'testAddress', 'testLink'));
}
getPaywallEnabledStatus(userId: string): Promise<boolean> {
getPaywallStatus(userId: string): Promise<boolean> {
throw new Error('Method not implemented');
}
}

8
web/satellite/tests/unit/views/__snapshots__/DashboardArea.spec.ts.snap
View File

@ -5,14 +5,14 @@ exports[`Dashboard renders correctly when data is loaded 1`] = `
<!---->
<!---->
<div class="dashboard-container__wrap">
<navigationarea-stub class="regular-navigation"></navigationarea-stub>
<navigationarea-stub class="dashboard-container__wrap__regular-navigation"></navigationarea-stub>
<div class="dashboard-container__wrap__column">
<dashboardheader-stub></dashboardheader-stub>
<div class="dashboard-container__main-area">
<div class="dashboard-container__main-area__bar-area">
<div class="dashboard-container__wrap__column__main-area">
<div class="dashboard-container__wrap__column__main-area__bar-area">
<!---->
</div>
<div class="dashboard-container__main-area__content">
<div class="dashboard-container__wrap__column__main-area__content">
<router-view-stub name="default"></router-view-stub>
</div>
</div>