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

web: using kebab notation for props names in html (#3030)

Browse Source
This commit is contained in:
Vitalii Shpital 2019-09-23 14:31:42 +03:00 committed by GitHub
parent d32d85a717
commit cfe058d190
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 167 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
// See LICENSE for copying information. // See LICENSE for copying information.
<template> <template>
<div id="app" v-on:click="onClick"> <div id="app" @click="onClick">
<router-view/> <router-view/>
<!-- Area for displaying notification --> <!-- Area for displaying notification -->
<NotificationArea/> <NotificationArea/>
@ -49,7 +49,7 @@ export default class App extends Vue {
<style lang="scss"> <style lang="scss">
body { body {
margin: 0px !important; margin: 0 !important;
height: 100vh; height: 100vh;
zoom: 100%; zoom: 100%;
} }

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

@ -39,7 +39,7 @@
label="Add Card" label="Add Card"
width="140px" width="140px"
height="48px" height="48px"
isDisabled="true" /> is-disabled="true"/>
</div> </div>
</template> </template>

10
web/satellite/src/components/account/ChangePasswordPopup.vue
View File

@ -23,7 +23,7 @@
label="Old Password" label="Old Password"
placeholder ="Enter Old Password" placeholder ="Enter Old Password"
width="100%" width="100%"
isPassword="true" is-password="true"
ref="oldPasswordInput" ref="oldPasswordInput"
:error="oldPasswordError" :error="oldPasswordError"
@setData="setOldPassword" /> @setData="setOldPassword" />
@ -33,7 +33,7 @@
placeholder ="Enter New Password" placeholder ="Enter New Password"
width="100%" width="100%"
ref="newPasswordInput" ref="newPasswordInput"
isPassword="true" is-password="true"
:error="newPasswordError" :error="newPasswordError"
@setData="setNewPassword" /> @setData="setNewPassword" />
<HeaderlessInput <HeaderlessInput
@ -42,12 +42,12 @@
placeholder="Confirm password" placeholder="Confirm password"
width="100%" width="100%"
ref="confirmPasswordInput" ref="confirmPasswordInput"
isPassword="true" is-password="true"
:error="confirmationPasswordError" :error="confirmationPasswordError"
@setData="setPasswordConfirmation" /> @setData="setPasswordConfirmation" />
<div class="change-password-popup__form-container__button-container"> <div class="change-password-popup__form-container__button-container">
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite="true" /> <Button label="Cancel" width="205px" height="48px" :on-press="onCloseClick" is-white="true" />
<Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" /> <Button label="Update" width="205px" height="48px" :on-press="onUpdateClick" />
</div> </div>
</div> </div>
<div class="change-password-popup__close-cross-container" @click="onCloseClick"> <div class="change-password-popup__close-cross-container" @click="onCloseClick">

6
web/satellite/src/components/account/DeleteAccountPopup.vue
View File

@ -44,13 +44,13 @@
placeholder='Your Password' placeholder='Your Password'
class='full-input' class='full-input'
width='100%' width='100%'
isPassword is-password="true"
:error='passwordError' :error='passwordError'
@setData='setPassword'> @setData='setPassword'>
</HeaderedInput> </HeaderedInput>
<div class='delete-account__form-container__button-container'> <div class='delete-account__form-container__button-container'>
<Button label='Cancel' width='205px' height='48px' :onPress='onCloseClick' isWhite="true"/> <Button label='Cancel' width='205px' height='48px' :on-press='onCloseClick' is-white="true"/>
<Button label='Delete' width='205px' height='48px' class='red' :onPress='onDeleteAccountClick'/> <Button label='Delete' width='205px' height='48px' class='red' :on-press='onDeleteAccountClick'/>
</div> </div>
</div> </div>
<div class='delete-account__close-cross-container' @click='onCloseClick'> <div class='delete-account__close-cross-container' @click='onCloseClick'>

8
web/satellite/src/components/account/EditProfilePopup.vue
View File

@ -18,7 +18,7 @@
width="100%" width="100%"
ref="fullNameInput" ref="fullNameInput"
:error="fullNameError" :error="fullNameError"
:initValue="userInfo.fullName" :init-value="userInfo.fullName"
@setData="setFullName" /> @setData="setFullName" />
<HeaderedInput <HeaderedInput
class="full-input" class="full-input"
@ -26,11 +26,11 @@
placeholder="Enter Nickname" placeholder="Enter Nickname"
width="100%" width="100%"
ref="shortNameInput" ref="shortNameInput"
:initValue="userInfo.shortName" :init-value="userInfo.shortName"
@setData="setShortName"/> @setData="setShortName"/>
<div class="edit-profile-popup__form-container__button-container"> <div class="edit-profile-popup__form-container__button-container">
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite="true" /> <Button label="Cancel" width="205px" height="48px" :on-press="onCloseClick" isWhite="true" />
<Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" /> <Button label="Update" width="205px" height="48px" :on-press="onUpdateClick" />
</div> </div>
</div> </div>
<div class="edit-profile-popup__close-cross-container" @click="onCloseClick"> <div class="edit-profile-popup__close-cross-container" @click="onCloseClick">

4
web/satellite/src/components/account/Profile.vue
View File

@ -58,8 +58,8 @@
label="Delete account" label="Delete account"
width="210px" width="210px"
height="56px" height="56px"
:onPress="toggleDeleteAccountPopup" :on-press="toggleDeleteAccountPopup"
isDeletion="true"/> is-deletion="true"/>
</div> </div>
<ChangePasswordPopup v-if="isChangePasswordPopupShown"/> <ChangePasswordPopup v-if="isChangePasswordPopupShown"/>
<EditProfilePopup v-if="isEditProfilePopupShown"/> <EditProfilePopup v-if="isEditProfilePopupShown"/>

2
web/satellite/src/components/account/billing/AccountBalance.vue
View File

@ -19,7 +19,7 @@
label="Earn Credits" label="Earn Credits"
width="153px" width="153px"
height="48px" height="48px"
:onPress="onEarnCredits"/> :on-press="onEarnCredits"/>
</div> </div>
</div> </div>
</template> </template>

2
web/satellite/src/components/account/billing/BillingHistory.vue
View File

@ -63,7 +63,7 @@ export default class BillingHistory extends Vue {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
width: 183px; width: 184px;
margin-bottom: 27px; margin-bottom: 27px;
&__back-button { &__back-button {

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

@ -8,25 +8,25 @@
<ApiKeysCreationPopup <ApiKeysCreationPopup
@closePopup="closeNewApiKeyPopup" @closePopup="closeNewApiKeyPopup"
@showCopyPopup="showCopyApiKeyPopup" @showCopyPopup="showCopyApiKeyPopup"
:isPopupShown="isNewApiKeyPopupShown"/> :is-popup-shown="isNewApiKeyPopupShown"/>
<ApiKeysCopyPopup <ApiKeysCopyPopup
:isPopupShown="isCopyApiKeyPopupShown" :is-popup-shown="isCopyApiKeyPopupShown"
:apiKeySecret="apiKeySecret" :api-key-secret="apiKeySecret"
@closePopup="closeCopyNewApiKeyPopup"/> @closePopup="closeCopyNewApiKeyPopup"/>
<div v-if="!isEmpty || hasSearchQuery" class="api-keys-header"> <div v-if="!isEmpty || hasSearchQuery" class="api-keys-header">
<HeaderComponent ref="headerComponent" placeHolder="API Key" :search="onSearchQueryCallback"> <HeaderComponent ref="headerComponent" placeholder="API Key" :search="onSearchQueryCallback">
<div class="header-default-state" v-if="headerState === 0"> <div class="header-default-state" v-if="headerState === 0">
<Button class="button" label="+Create API Key" width="180px" height="48px" :onPress="onCreateApiKeyClick"/> <Button class="button" label="+Create API Key" width="180px" height="48px" :on-press="onCreateApiKeyClick"/>
</div> </div>
<div class="header-selected-api-keys" v-if="headerState === 1 && !isDeleteClicked"> <div class="header-selected-api-keys" v-if="headerState === 1 && !isDeleteClicked">
<Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onFirstDeleteClick"/> <Button class="button deletion" label="Delete" width="122px" height="48px" :on-press="onFirstDeleteClick"/>
<Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/> <Button class="button" label="Cancel" width="122px" height="48px" is-white="true" :on-press="onClearSelection"/>
</div> </div>
<div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked"> <div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
<span>Are you sure you want to delete {{selectedAPIKeysCount}} {{apiKeyCountTitle}} ?</span> <span>Are you sure you want to delete {{selectedAPIKeysCount}} {{apiKeyCountTitle}} ?</span>
<div class="header-after-delete-click__button-area"> <div class="header-after-delete-click__button-area">
<Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onDelete"/> <Button class="button deletion" label="Delete" width="122px" height="48px" :on-press="onDelete"/>
<Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/> <Button class="button" label="Cancel" width="122px" height="48px" is-white="true" :on-press="onClearSelection"/>
</div> </div>
</div> </div>
</HeaderComponent> </HeaderComponent>
@ -37,9 +37,9 @@
<SortingHeader :onHeaderClickCallback="onHeaderSectionClickCallback"/> <SortingHeader :onHeaderClickCallback="onHeaderSectionClickCallback"/>
<div class="api-keys-items__content"> <div class="api-keys-items__content">
<List <List
:dataSet="apiKeyList" :data-set="apiKeyList"
:itemComponent="itemComponent" :item-component="itemComponent"
:onItemClick="toggleSelection"/> :on-item-click="toggleSelection"/>
</div> </div>
<Pagination <Pagination
class="pagination-area" class="pagination-area"
@ -82,13 +82,13 @@
</svg> </svg>
</div> </div>
<EmptyState <EmptyState
:onButtonClick="onCreateApiKeyClick" :on-button-click="onCreateApiKeyClick"
v-if="isEmpty && !isNewApiKeyPopupShown && !hasSearchQuery" v-if="isEmpty && !isNewApiKeyPopupShown && !hasSearchQuery"
mainTitle="Let's create your first API Key" main-title="Let's create your first API Key"
additional-text="<p>API keys give access to the project allowing you to create buckets, upload files, and read them. Once you’ve created an API key, you’re ready to interact with the network through our Uplink CLI.</p>" additional-text="<p>API keys give access to the project allowing you to create buckets, upload files, and read them. Once you’ve created an API key, you’re ready to interact with the network through our Uplink CLI.</p>"
:imageSource="emptyImage" :image-source="emptyImage"
buttonLabel="Create an API Key" button-label="Create an API Key"
isButtonShown="true" /> is-button-shown="true" />
</div> </div>
</div> </div>
</template> </template>

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

@ -10,7 +10,7 @@
placeholder="Enter API Key Name" placeholder="Enter API Key Name"
class="full-input" class="full-input"
width="100%" /> width="100%" />
<Button class="next-button" label="Next >" width="128px" height="48px" :onPress="onNextClick" /> <Button class="next-button" label="Next >" width="128px" height="48px" :on-press="onNextClick" />
<div class="new-api-key__close-cross-container" @click="onCloseClick"> <div class="new-api-key__close-cross-container" @click="onCloseClick">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/> <path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>

10
web/satellite/src/components/buckets/BucketArea.vue
View File

@ -7,7 +7,7 @@
<div class="buckets-overflow" v-else> <div class="buckets-overflow" v-else>
<div class="buckets-header"> <div class="buckets-header">
<p>Buckets</p> <p>Buckets</p>
<HeaderComponent class="buckets-header-component" placeHolder="Buckets" :search="fetch"/> <HeaderComponent class="buckets-header-component" placeholder="Buckets" :search="fetch"/>
</div> </div>
<div class="buckets-notification-container"> <div class="buckets-notification-container">
<div class="buckets-notification"> <div class="buckets-notification">
@ -20,14 +20,14 @@
</div> </div>
<div v-if="buckets.length" class="buckets-container"> <div v-if="buckets.length" class="buckets-container">
<SortingHeader /> <SortingHeader />
<List :dataSet="buckets" :itemComponent="itemComponent" :onItemClick="doNothing"/> <List :data-set="buckets" :item-component="itemComponent" :on-item-click="doNothing"/>
<Pagination v-if="totalPageCount > 1" :totalPageCount="totalPageCount" :onPageClickCallback="onPageClick" /> <Pagination v-if="totalPageCount > 1" :total-page-count="totalPageCount" :on-page-click-callback="onPageClick" />
</div> </div>
<EmptyState <EmptyState
class="empty-container" class="empty-container"
v-if="!totalPageCount && search" v-if="!totalPageCount && search"
mainTitle="Nothing found :(" main-title="Nothing found :("
:imageSource="emptyImage" /> :image-source="emptyImage" />
</div> </div>
</div> </div>
</template> </template>

6
web/satellite/src/components/common/Button.vue
View File

@ -4,10 +4,10 @@
<template> <template>
<!-- if isDisabled check onPress in parent element --> <!-- if isDisabled check onPress in parent element -->
<div <div
v-bind:class="containerClassName" :class="containerClassName"
:style="style" :style="style"
v-on:click="onPress"> @click="onPress">
<h1 v-bind:class="[isWhite ? 'label white' : 'label']">{{label}}</h1> <h1 :class="[isWhite ? 'label white' : 'label']">{{label}}</h1>
</div> </div>
</template> </template>

2
web/satellite/src/components/common/Checkbox.vue
View File

@ -4,7 +4,7 @@
<template> <template>
<label class="container"> <label class="container">
<input type="checkbox" v-model="checked" @change="onChange"> <input type="checkbox" v-model="checked" @change="onChange">
<span v-bind:class="[isCheckboxError ? 'checkmark error': 'checkmark']"></span> <span :class="[isCheckboxError ? 'checkmark error': 'checkmark']"></span>
</label> </label>
</template> </template>

2
web/satellite/src/components/common/EmptyStateArea.vue
View File

@ -8,7 +8,7 @@
<div class="empty-state__wrap__additional-text" v-html="additionalText"/> <div class="empty-state__wrap__additional-text" v-html="additionalText"/>
<div id="addApiKeysPopupEmptyButton" v-if="isButtonShown"> <div id="addApiKeysPopupEmptyButton" v-if="isButtonShown">
<Button <Button
:onPress="onButtonClick" :on-press="onButtonClick"
:label="buttonLabel" :label="buttonLabel"
width="190px" width="190px"
height="50px"/> height="50px"/>

4
web/satellite/src/components/common/HeaderComponent.vue
View File

@ -6,7 +6,7 @@
<div class="header-container__buttons-area"> <div class="header-container__buttons-area">
<slot></slot> <slot></slot>
</div> </div>
<SearchComponent ref="search" :placeHolder="placeHolder" :search="search"/> <SearchComponent ref="search" :placeholder="placeholder" :search="search"/>
</div> </div>
</template> </template>
@ -27,7 +27,7 @@ declare interface ClearSearch {
}) })
export default class HeaderComponent extends Vue { export default class HeaderComponent extends Vue {
@Prop({default: ''}) @Prop({default: ''})
private readonly placeHolder: string; private readonly placeholder: string;
@Prop({default: () => ''}) @Prop({default: () => ''})
private readonly search: searchCallback; private readonly search: searchCallback;

2
web/satellite/src/components/common/HeaderedInput.vue
View File

@ -29,7 +29,7 @@
v-if="!isMultiline" v-if="!isMultiline"
:id="this.$props.label" :id="this.$props.label"
:placeholder="this.$props.placeholder" :placeholder="this.$props.placeholder"
v-bind:type="[isPassword ? 'password': 'text']" :type="[isPassword ? 'password': 'text']"
@input="onInput" @input="onInput"
@change="onInput" @change="onInput"
v-model="value" v-model="value"

2
web/satellite/src/components/common/List.vue
View File

@ -7,7 +7,7 @@
v-for="item in dataSet" v-for="item in dataSet"
class="item-component__item" class="item-component__item"
:is="itemComponent" :is="itemComponent"
:itemData="item" :item-data="item"
@click.native="onItemClick(item)" @click.native="onItemClick(item)"
:class="{ selected: item.isSelected }"/> :class="{ selected: item.isSelected }"/>
</div> </div>

4
web/satellite/src/components/common/PagesBlock.vue
View File

@ -5,7 +5,7 @@
<div class="pages-container"> <div class="pages-container">
<span <span
v-for="page in pages" v-for="page in pages"
:class="{'selected': checkSelected(page.index)}" :class="{'selected': isSelected(page.index)}"
@click="page.select()" @click="page.select()"
:key="page.index">{{page.index}}</span> :key="page.index">{{page.index}}</span>
</div> </div>
@ -21,7 +21,7 @@ export default class PagesBlock extends Vue {
@Prop({default: () => []}) @Prop({default: () => []})
public readonly pages: Page[]; public readonly pages: Page[];
@Prop({default: () => false}) @Prop({default: () => false})
public readonly checkSelected: CheckSelected; public readonly isSelected: CheckSelected;
} }
</script> </script>

6
web/satellite/src/components/common/Pagination.vue
View File

@ -6,11 +6,11 @@
<div class="pagination-container__pages"> <div class="pagination-container__pages">
<div v-html="arrowLeft" @click="prevPage" class="pagination-container__button"></div> <div v-html="arrowLeft" @click="prevPage" class="pagination-container__button"></div>
<div class="pagination-container__items"> <div class="pagination-container__items">
<PagesBlock :pages="firstBlockPages" :checkSelected="isSelected"/> <PagesBlock :pages="firstBlockPages" :is-selected="isSelected"/>
<span v-if="isFirstDotsShown">...</span> <span v-if="isFirstDotsShown">...</span>
<PagesBlock :pages="middleBlockPages" :checkSelected="isSelected"/> <PagesBlock :pages="middleBlockPages" :is-selected="isSelected"/>
<span v-if="isSecondDotsShown">...</span> <span v-if="isSecondDotsShown">...</span>
<PagesBlock :pages="lastBlockPages" :checkSelected="isSelected"/> <PagesBlock :pages="lastBlockPages" :is-selected="isSelected"/>
</div> </div>
<div v-html="arrowRight" @click="nextPage" class="pagination-container__button"></div> <div v-html="arrowRight" @click="nextPage" class="pagination-container__button"></div>
</div> </div>

4
web/satellite/src/components/common/SearchComponent.vue
View File

@ -8,7 +8,7 @@
@mouseleave="onMouseLeave" @mouseleave="onMouseLeave"
@input="processSearchQuery" @input="processSearchQuery"
v-model="searchQuery" v-model="searchQuery"
:placeholder="`Search ${placeHolder}`" :placeholder="`Search ${placeholder}`"
:style="style" :style="style"
type="text" type="text"
autocomplete="off"> autocomplete="off">
@ -25,7 +25,7 @@ declare interface SearchStyle {
@Component @Component
export default class SearchComponent extends Vue { export default class SearchComponent extends Vue {
@Prop({default: ''}) @Prop({default: ''})
private readonly placeHolder: string; private readonly placeholder: string;
@Prop({default: () => ''}) @Prop({default: () => ''})
private readonly search: searchCallback; private readonly search: searchCallback;

2
web/satellite/src/components/common/registrationSuccessPopup.html
View File

@ -19,7 +19,7 @@
<p>You have almost finished registering your account on the Tardigrade Satellite. Only one step left. Please check your inbox for a verification email.</p> <p>You have almost finished registering your account on the Tardigrade Satellite. Only one step left. Please check your inbox for a verification email.</p>
<h3>Didn’t receive a verification email?<b> {{timeToEnableResendEmailButton}}</b></h3> <h3>Didn’t receive a verification email?<b> {{timeToEnableResendEmailButton}}</b></h3>
<div class="register-success-popup__form-container__button-container"> <div class="register-success-popup__form-container__button-container">
<Button label="Resend Email" width="450px" height="50px" :onPress="onResendEmailButtonClick" :isDisabled="isResendEmailButtonDisabled"/> <Button label="Resend Email" width="450px" height="50px" :on-press="onResendEmailButtonClick" :is-disabled="isResendEmailButtonDisabled"/>
</div> </div>
</div> </div>
<div class="register-success-popup__close-cross-container" @click="onCloseClick"> <div class="register-success-popup__close-cross-container" @click="onCloseClick">

6
web/satellite/src/components/common/test/TestList.vue
View File

@ -3,9 +3,9 @@
<template> <template>
<List <List
:dataSet="dataSetItems" :data-set="dataSetItems"
:itemComponent="getItemComponent" :item-component="getItemComponent"
:onItemClick="onItemClick"/> :on-item-click="onItemClick"/>
</template> </template>
<script lang="ts"> <script lang="ts">

4
web/satellite/src/components/dashboard/DashboardArea.vue
View File

@ -4,8 +4,8 @@
<template> <template>
<div> <div>
<EmptyState <EmptyState
mainTitle="Create your first new project" main-title="Create your first new project"
:imageSource="emptyImage" /> :image-source="emptyImage" />
</div> </div>
</template> </template>

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

@ -3,7 +3,7 @@
<template> <template>
<div class="account-button-container" id="accountDropdownButton"> <div class="account-button-container" id="accountDropdownButton">
<div class="account-button-toggle-container" v-on:click="toggleSelection" > <div class="account-button-toggle-container" @click="toggleSelection" >
<!-- background of this div generated and stores in store --> <!-- background of this div generated and stores in store -->
<div class="account-button-toggle-container__avatar"> <div class="account-button-toggle-container__avatar">
<!-- First digit of firstName after Registration --> <!-- First digit of firstName after Registration -->

4
web/satellite/src/components/header/AccountDropdown.vue
View File

@ -6,7 +6,7 @@
<div class="account-dropdown-choice-container" id="accountDropdown"> <div class="account-dropdown-choice-container" id="accountDropdown">
<div class="account-dropdown-overflow-container"> <div class="account-dropdown-overflow-container">
<!-- TODO: add selection logic onclick --> <!-- TODO: add selection logic onclick -->
<div class="account-dropdown-item-container settings" v-on:click="onAccountSettingsClick" > <div class="account-dropdown-item-container settings" @click="onAccountSettingsClick" >
<div class="account-dropdown-item-container__image-container"> <div class="account-dropdown-item-container__image-container">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/> <path d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/>
@ -14,7 +14,7 @@
</div> </div>
<h2>Account Settings</h2> <h2>Account Settings</h2>
</div> </div>
<div class="account-dropdown-item-container logout" v-on:click="onLogoutClick"> <div class="account-dropdown-item-container logout" @click="onLogoutClick">
<div class="account-dropdown-item-container__image-container"> <div class="account-dropdown-item-container__image-container">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"/>

4
web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue
View File

@ -6,13 +6,13 @@
<div class="project-selection-overflow-container"> <div class="project-selection-overflow-container">
<!-- loop for rendering projects --> <!-- loop for rendering projects -->
<!-- TODO: add selection logic onclick --> <!-- TODO: add selection logic onclick -->
<div class="project-selection-overflow-container__project-choice" v-on:click="onProjectSelected(project.id)" v-for="project in projects" v-bind:key="project.id" > <div class="project-selection-overflow-container__project-choice" @click="onProjectSelected(project.id)" v-for="project in projects" :key="project.id" >
<div class="project-selection-overflow-container__project-choice__mark-container"> <div class="project-selection-overflow-container__project-choice__mark-container">
<svg v-if="project.isSelected" width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg v-if="project.isSelected" width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/> <path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/>
</svg> </svg>
</div> </div>
<h2 v-bind:class="[project.isSelected ? 'project-selection-overflow-container__project-choice--selected' : 'project-selection-overflow-container__project-choice--unselected']">{{project.name}}</h2> <h2 :class="[project.isSelected ? 'project-selection-overflow-container__project-choice--selected' : 'project-selection-overflow-container__project-choice--unselected']">{{project.name}}</h2>
</div> </div>
</div> </div>
</div> </div>

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

@ -24,7 +24,7 @@
</div> </div>
<ProjectSelectionArea class="project-selection-area"/> <ProjectSelectionArea class="project-selection-area"/>
<p class="navigation-area__project-title">PROJECT</p> <p class="navigation-area__project-title">PROJECT</p>
<router-link :aria-label="navItem.name" class="navigation-area__item-container" v-bind:class="{disabled: isProjectNotSelected && navItem.path !== '/project-details'}" v-for="navItem in navigation" v-bind:key="navItem.name" :to="navItem.path"> <router-link :aria-label="navItem.name" class="navigation-area__item-container" :class="{disabled: isProjectNotSelected && navItem.path !== '/project-details'}" v-for="navItem in navigation" :key="navItem.name" :to="navItem.path">
<div class="navigation-area__item-container__link-container" > <div class="navigation-area__item-container__link-container" >
<div v-html="navItem.icon"></div> <div v-html="navItem.icon"></div>
<h1>{{navItem.name}}</h1> <h1>{{navItem.name}}</h1>
@ -60,7 +60,7 @@
<p v-if="!areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Show</p> <p v-if="!areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Show</p>
<p v-if="areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Hide</p> <p v-if="areAccountItemsShown && isAccountButtonShown" @click="toggleAccountItemsVisibility" class="navigation-area__account-title__button">Hide</p>
</div> </div>
<router-link v-if="areAccountItemsShown" class="navigation-area__item-container account-item" v-for="navItem in accountNavigation" v-bind:key="navItem.name" :to="navItem.path"> <router-link v-if="areAccountItemsShown" class="navigation-area__item-container account-item" v-for="navItem in accountNavigation" :key="navItem.name" :to="navItem.path">
<div class="navigation-area__item-container__link-container" > <div class="navigation-area__item-container__link-container" >
<h1 class="account-item">{{navItem.name}}</h1> <h1 class="account-item">{{navItem.name}}</h1>
</div> </div>

8
web/satellite/src/components/project/DeleteProjectPopup.vue
View File

@ -56,17 +56,17 @@
type="text" type="text"
placeholder="Enter Project Name" placeholder="Enter Project Name"
v-model="projectName" v-model="projectName"
v-on:keyup="resetError" > @keyup="resetError" >
</div> </div>
<div class="delete-project-popup__form-container__button-container"> <div class="delete-project-popup__form-container__button-container">
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite="true"/> <Button label="Cancel" width="205px" height="48px" :on-press="onCloseClick" is-white="true"/>
<Button <Button
label="Delete" label="Delete"
width="205px" width="205px"
height="48px" height="48px"
class="red" class="red"
:onPress="onDeleteProjectClick" :on-press="onDeleteProjectClick"
:isDisabled="isDeleteButtonDisabled" /> :is-disabled="isDeleteButtonDisabled" />
</div> </div>
</div> </div>
<div class="delete-project-popup__close-cross-container" @click="onCloseClick"> <div class="delete-project-popup__close-cross-container" @click="onCloseClick">

12
web/satellite/src/components/project/NewProjectPopup.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information. // See LICENSE for copying information.
<template> <template>
<div class="new-project-popup-container" v-on:keyup.enter="createProjectClick" v-on:keyup.esc="onCloseClick"> <div class="new-project-popup-container" @keyup.enter="createProjectClick" @keyup.esc="onCloseClick">
<div class="new-project-popup" id="newProjectPopup" > <div class="new-project-popup" id="newProjectPopup" >
<div class="new-project-popup__info-panel-container"> <div class="new-project-popup__info-panel-container">
<h2 class="new-project-popup__info-panel-container__main-label-text">Create a Project</h2> <h2 class="new-project-popup__info-panel-container__main-label-text">Create a Project</h2>
@ -11,11 +11,11 @@
<div class="new-project-popup__form-container"> <div class="new-project-popup__form-container">
<HeaderedInput <HeaderedInput
label="Project Name" label="Project Name"
additionalLabel="Up To 20 Characters" additional-label="Up To 20 Characters"
placeholder="Enter Project Name" placeholder="Enter Project Name"
class="full-input" class="full-input"
width="100%" width="100%"
maxSymbols="20" max-symbols="20"
:error="nameError" :error="nameError"
@setData="setProjectName"> @setData="setProjectName">
</HeaderedInput> </HeaderedInput>
@ -24,14 +24,14 @@
placeholder="Enter Project Description" placeholder="Enter Project Description"
additional-label="Optional" additional-label="Optional"
class="full-input" class="full-input"
isMultiline="true" is-multiline="true"
height="100px" height="100px"
width="100%" width="100%"
@setData="setProjectDescription"> @setData="setProjectDescription">
</HeaderedInput> </HeaderedInput>
<div class="new-project-popup__form-container__button-container"> <div class="new-project-popup__form-container__button-container">
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite="true"/> <Button label="Cancel" width="205px" height="48px" :on-press="onCloseClick" is-white="true"/>
<Button label="Next" width="205px" height="48px" :onPress="createProjectClick"/> <Button label="Next" width="205px" height="48px" :on-press="createProjectClick"/>
</div> </div>
</div> </div>
<div class="new-project-popup__close-cross-container" @click="onCloseClick"> <div class="new-project-popup__close-cross-container" @click="onCloseClick">

4
web/satellite/src/components/project/ProjectCreationSuccessPopup.vue
View File

@ -35,8 +35,8 @@
<a href="https://github.com/storj/storj/wiki/Uplink-CLI" target="_blank">Uplink CLI.</a> <a href="https://github.com/storj/storj/wiki/Uplink-CLI" target="_blank">Uplink CLI.</a>
</p> </p>
<div class="project-creation-success-popup__form-container__button-container"> <div class="project-creation-success-popup__form-container__button-container">
<Button label="I will do it later" width="214px" height="50px" :onPress="onCloseClick" isWhite="true" /> <Button label="I will do it later" width="214px" height="50px" :on-press="onCloseClick" is-white="true" />
<Button label="Create first API Key" width="214px" height="50px" :onPress="onCreateAPIKeyClick" /> <Button label="Create first API Key" width="214px" height="50px" :on-press="onCreateAPIKeyClick" />
</div> </div>
</div> </div>
<div class="project-creation-success-popup__close-cross-container" @click="onCloseClick"> <div class="project-creation-success-popup__close-cross-container" @click="onCloseClick">

10
web/satellite/src/components/project/ProjectDetails.vue
View File

@ -18,7 +18,7 @@
<h3>{{description}}</h3> <h3>{{description}}</h3>
</div> </div>
<div title="Edit"> <div title="Edit">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditing"> <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" @click="toggleEditing">
<rect width="40" height="40" rx="4" fill="#E2ECF7"/> <rect width="40" height="40" rx="4" fill="#E2ECF7"/>
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/> <path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
</svg> </svg>
@ -30,16 +30,16 @@
placeholder="Enter Description" placeholder="Enter Description"
width="70vw" width="70vw"
height="10vh" height="10vh"
isMultiline="true" is-multiline="true"
@setData="setNewDescription" /> @setData="setNewDescription" />
<div class="project-details-info-container__description-container__buttons-area"> <div class="project-details-info-container__description-container__buttons-area">
<Button label="Cancel" width="180px" height="48px" :onPress="toggleEditing" isWhite="true"/> <Button label="Cancel" width="180px" height="48px" :on-press="toggleEditing" is-white="true"/>
<Button label="Save" width="180px" height="48px" :onPress="onSaveButtonClick"/> <Button label="Save" width="180px" height="48px" :on-press="onSaveButtonClick"/>
</div> </div>
</div> </div>
</div> </div>
<div class="project-details__button-area" id="deleteProjectPopupButton"> <div class="project-details__button-area" id="deleteProjectPopupButton">
<Button class="delete-project" label="Delete project" width="180px" height="48px" :onPress="toggleDeleteDialog" isDeletion="true"/> <Button class="delete-project" label="Delete project" width="180px" height="48px" :on-press="toggleDeleteDialog" is-deletion="true"/>
</div> </div>
</div> </div>
<DeleteProjectPopup v-if="isPopupShown" /> <DeleteProjectPopup v-if="isPopupShown" />

4
web/satellite/src/components/project/ProjectOverviewArea.vue
View File

@ -10,9 +10,9 @@
<router-view v-if="isProjectSelected"/> <router-view v-if="isProjectSelected"/>
<EmptyState <EmptyState
v-if="!isProjectSelected" v-if="!isProjectSelected"
mainTitle="Create your first project" main-title="Create your first project"
additional-text='<p>Please click the button <b>"New Project"</b> in the right corner</p>' additional-text='<p>Please click the button <b>"New Project"</b> in the right corner</p>'
:imageSource="emptyImage" /> :image-source="emptyImage" />
</div> </div>
</template> </template>

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

@ -7,7 +7,7 @@
<div class="scroll-container"> <div class="scroll-container">
<NewPaymentMethodPopup/> <NewPaymentMethodPopup/>
<div v-for="method in paymentMethods" class="payment-methods-container__card-container"> <div v-for="method in paymentMethods" class="payment-methods-container__card-container">
<CardComponent :paymentMethod="method"/> <CardComponent :payment-method="method"/>
</div> </div>
</div> </div>
</div> </div>

100
web/satellite/src/components/team/AddUserPopup.vue
View File

@ -10,19 +10,20 @@
<div v-html='imageSource'></div> <div v-html='imageSource'></div>
</div> </div>
<div class='add-user__form-container'> <div class='add-user__form-container'>
<p v-if="!formError">Email Address</p> <p class='add-user__form-container__common-label' v-if="!formError">Email Address</p>
<div v-if="formError" class="add-user__form-container__label"> <div v-if="formError" class="add-user__form-container__label">
<img src="../../../static/images/register/ErrorInfo.svg"/> <img src="../../../static/images/register/ErrorInfo.svg"/>
<p>{{formError}}</p> <p class="add-user__form-container__label__error">{{formError}}</p>
</div> </div>
<div :class="[inputs.length > 4 ? 'add-user__form-container__inputs-group scrollable' : 'add-user__form-container__inputs-group']"> <div class="add-user__form-container__inputs-group" :class="{ 'scrollable': inputs.length > 4 }">
<div v-for="(input, index) in inputs" <div v-for="(input, index) in inputs"
class="add-user__form-container__inputs-group__item" class="add-user__form-container__inputs-group__item"
:key="index" > :key="index" >
<input <input
placeholder="email@example.com" placeholder="email@example.com"
v-model="input.value" v-model="input.value"
:class="[input.error ? 'error' : 'no-error']" class="no-error-input"
:class="{ 'error-input': input.error }"
@keyup="resetFormErrors(index)" /> @keyup="resetFormErrors(index)" />
<svg @click="deleteInput(index)" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg @click="deleteInput(index)" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.7803 1.28033C12.0732 0.987437 12.0732 0.512563 11.7803 0.21967C11.4874 -0.0732233 11.0126 -0.0732233 10.7197 0.21967L11.7803 1.28033ZM0.21967 10.7197C-0.0732233 11.0126 -0.0732233 11.4874 0.21967 11.7803C0.512563 12.0732 0.987437 12.0732 1.28033 11.7803L0.21967 10.7197ZM1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L1.28033 0.21967ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM10.7197 0.21967L0.21967 10.7197L1.28033 11.7803L11.7803 1.28033L10.7197 0.21967ZM0.21967 1.28033L10.7197 11.7803L11.7803 10.7197L1.28033 0.21967L0.21967 1.28033Z" fill="#AFB7C1"/> <path d="M11.7803 1.28033C12.0732 0.987437 12.0732 0.512563 11.7803 0.21967C11.4874 -0.0732233 11.0126 -0.0732233 10.7197 0.21967L11.7803 1.28033ZM0.21967 10.7197C-0.0732233 11.0126 -0.0732233 11.4874 0.21967 11.7803C0.512563 12.0732 0.987437 12.0732 1.28033 11.7803L0.21967 10.7197ZM1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L1.28033 0.21967ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM10.7197 0.21967L0.21967 10.7197L1.28033 11.7803L11.7803 1.28033L10.7197 0.21967ZM0.21967 1.28033L10.7197 11.7803L11.7803 10.7197L1.28033 0.21967L0.21967 1.28033Z" fill="#AFB7C1"/>
@ -31,18 +32,18 @@
</div> </div>
<div class="add-user-row"> <div class="add-user-row">
<div @click='addInput' class="add-user-row__item" id="addUserButton"> <div @click='addInput' class="add-user-row__item" id="addUserButton">
<div :class="[isMaxInputsCount ? 'inactive-image' : '']"> <div :class="{ 'inactive-image': isMaxInputsCount }">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="20" fill="#2683FF" /> <rect width="40" height="40" rx="20" fill="#2683FF" />
<path d="M25 18.977V21.046H20.9722V25H19.0046V21.046H15V18.977H19.0046V15H20.9722V18.977H25Z" fill="white" /> <path d="M25 18.977V21.046H20.9722V25H19.0046V21.046H15V18.977H19.0046V15H20.9722V18.977H25Z" fill="white" />
</svg> </svg>
</div> </div>
<p :class="[ isMaxInputsCount ? 'inactive-label' : '' ]">Add Another</p> <p class="add-user-row__item__label" :class="{ 'inactive-label': isMaxInputsCount }">Add Another</p>
</div> </div>
</div> </div>
<div class='add-user__form-container__button-container'> <div class='add-user__form-container__button-container'>
<Button label='Cancel' width='205px' height='48px' :onPress="onClose" isWhite="true"/> <Button label='Cancel' width='205px' height='48px' :on-press="onClose" is-white="true"/>
<Button label='Add Team Members' width='205px' height='48px' :onPress="isButtonActive ? onAddUsersClick : () => {}" :isDisabled="!isButtonActive"/> <Button label='Add Team Members' width='205px' height='48px' :on-press="onAddUsersClick" :is-disabled="!isButtonActive"/>
</div> </div>
</div> </div>
<div class='add-user__close-cross-container' @click='onClose'> <div class='add-user__close-cross-container' @click='onClose'>
@ -56,8 +57,8 @@
<rect width="40" height="40" rx="10" fill="#2683FF"/> <rect width="40" height="40" rx="10" fill="#2683FF"/>
<path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/> <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
</svg> </svg>
<div class="notification-wrap__text"> <div class="notification-wrap__text-area">
<p>If the team member you want to invite to join the project is still not on this Satellite, please share this link to the signup page and ask them to register here: <router-link target="_blank" exact to="/register" >{{registerPath}}</router-link></p> <p class="notification-wrap__text-area__text">If the team member you want to invite to join the project is still not on this Satellite, please share this link to the signup page and ask them to register here: <router-link target="_blank" exact to="/register" >{{registerPath}}</router-link></p>
</div> </div>
</div> </div>
</div> </div>
@ -237,6 +238,7 @@ export default class AddUserPopup extends Vue {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
font-family: 'font_regular';
} }
.add-user-row { .add-user-row {
@ -262,13 +264,13 @@ export default class AddUserPopup extends Vue {
margin-right: 20px; margin-right: 20px;
} }
p { &__label {
font-family: 'font_medium'; font-family: 'font_medium';
font-size: 16px; font-size: 16px;
margin-left: 0; margin-left: 0;
padding-left: 0; padding-left: 0;
margin-block-start: 0em; margin-block-start: 0;
margin-block-end: 0em; margin-block-end: 0;
} }
} }
} }
@ -278,7 +280,7 @@ export default class AddUserPopup extends Vue {
color: #DADDE5; color: #DADDE5;
} }
.error { .error-input {
border: 1px solid red !important; border: 1px solid red !important;
} }
@ -304,22 +306,6 @@ export default class AddUserPopup extends Vue {
background-color: #EB5757; background-color: #EB5757;
} }
.text {
margin: 0 !important;
font-family: 'font_regular' !important;
font-size: 16px;
line-height: 25px;
a {
color: #2683FF;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
.add-user { .add-user {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
@ -352,7 +338,6 @@ export default class AddUserPopup extends Vue {
padding: 0 50px; padding: 0 50px;
&__text { &__text {
font-family: 'font_regular';
font-size: 16px; font-size: 16px;
margin-top: 0; margin-top: 0;
margin-bottom: 50px; margin-bottom: 50px;
@ -381,11 +366,11 @@ export default class AddUserPopup extends Vue {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-left: 50px; padding-left: 50px;
margin-bottom: 10px; margin-bottom: 15px;
p { &__error {
margin: 0 !important; margin: 0;
padding-left: 10px !important; padding-left: 10px;
color: #EB5757; color: #EB5757;
} }
} }
@ -396,16 +381,11 @@ export default class AddUserPopup extends Vue {
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
&.scrollable {
overflow-y: scroll;
}
&__item { &__item {
display: flex; display: flex;
align-items: center; align-items: center;
input { .no-error-input {
font-family: 'font_regular';
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
resize: none; resize: none;
@ -441,21 +421,13 @@ export default class AddUserPopup extends Vue {
} }
} }
p { &__common-label {
margin: 0; margin: 0 0 10px 0;
margin-bottom: 10px;
font-family: 'font_regular';
font-size: 16px; font-size: 16px;
line-height: 25px; line-height: 25px;
padding-left: 50px; padding-left: 50px;
} }
a {
font-family: 'font_medium';
font-size: 16px;
color: #2683FF;
}
&__button-container { &__button-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -494,31 +466,22 @@ export default class AddUserPopup extends Vue {
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
&__text { &__text-area {
display: flex; display: flex;
align-items: center; align-items: center;
p { &__text {
font-family: 'font_medium'; font-family: 'font_medium';
font-size: 16px; font-size: 16px;
margin-left: 40px; margin-left: 40px;
span {
margin-right: 10px;
}
}
a {
cursor: pointer;
color: #2683FF;
&:hover {
text-decoration: underline;
}
} }
} }
} }
.scrollable {
overflow-y: scroll;
}
@media screen and (max-width: 1025px) { @media screen and (max-width: 1025px) {
.add-user { .add-user {
padding: 10px; padding: 10px;
@ -526,8 +489,8 @@ export default class AddUserPopup extends Vue {
&__main { &__main {
width: 100%; width: 100%;
padding-right: 0px; padding-right: 0;
padding-left: 0px; padding-left: 0;
} }
&__info-panel-container { &__info-panel-container {
@ -535,7 +498,6 @@ export default class AddUserPopup extends Vue {
} }
&__form-container { &__form-container {
max-width: 800px; max-width: 800px;
} }

12
web/satellite/src/components/team/HeaderArea.vue
View File

@ -5,20 +5,20 @@
<div class="team-header-container"> <div class="team-header-container">
<h1>Project Members</h1> <h1>Project Members</h1>
<div class="team-header-container__wrapper"> <div class="team-header-container__wrapper">
<HeaderComponent ref="headerComponent" placeHolder="Team Members" :search="processSearchQuery"> <HeaderComponent ref="headerComponent" placeholder="Team Members" :search="processSearchQuery">
<div class="header-default-state" v-if="headerState === 0"> <div class="header-default-state" v-if="headerState === 0">
<span>The only project role currently available is Admin, which gives <b>full access</b> to the project.</span> <span>The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
<Button class="button" label="+Add" width="122px" height="48px" :onPress="onAddUsersClick"/> <Button class="button" label="+Add" width="122px" height="48px" :on-press="onAddUsersClick"/>
</div> </div>
<div class="header-selected-members" v-if="headerState === 1 && !isDeleteClicked"> <div class="header-selected-members" v-if="headerState === 1 && !isDeleteClicked">
<Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onFirstDeleteClick"/> <Button class="button deletion" label="Delete" width="122px" height="48px" :on-press="onFirstDeleteClick"/>
<Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/> <Button class="button" label="Cancel" width="122px" height="48px" is-white="true" :on-press="onClearSelection"/>
</div> </div>
<div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked"> <div class="header-after-delete-click" v-if="headerState === 1 && isDeleteClicked">
<span>Are you sure you want to delete {{selectedProjectMembersCount}} {{userCountTitle}}?</span> <span>Are you sure you want to delete {{selectedProjectMembersCount}} {{userCountTitle}}?</span>
<div class="header-after-delete-click__button-area"> <div class="header-after-delete-click__button-area">
<Button class="button deletion" label="Delete" width="122px" height="48px" :onPress="onDelete"/> <Button class="button deletion" label="Delete" width="122px" height="48px" :on-press="onDelete"/>
<Button class="button" label="Cancel" width="122px" height="48px" isWhite="true" :onPress="onClearSelection"/> <Button class="button" label="Cancel" width="122px" height="48px" is-white="true" :on-press="onClearSelection"/>
</div> </div>
</div> </div>
</HeaderComponent> </HeaderComponent>

14
web/satellite/src/components/team/ProjectMembersArea.vue
View File

@ -4,21 +4,21 @@
<template> <template>
<div class="team-area"> <div class="team-area">
<div class="team-area__header"> <div class="team-area__header">
<HeaderArea :headerState="headerState" :selectedProjectMembersCount="selectedProjectMembers.length"/> <HeaderArea :header-state="headerState" :selected-project-members-count="selectedProjectMembers.length"/>
</div> </div>
<div class="team-area__container" id="team-container" v-if="projectMembersCount > 0 || projectMembersTotalCount > 0"> <div class="team-area__container" id="team-container" v-if="projectMembersCount > 0 || projectMembersTotalCount > 0">
<SortingListHeader :onHeaderClickCallback="onHeaderSectionClickCallback"/> <SortingListHeader :on-header-click-callback="onHeaderSectionClickCallback"/>
<div class="team-area__container__content"> <div class="team-area__container__content">
<List <List
:dataSet="projectMembers" :data-set="projectMembers"
:itemComponent="getItemComponent" :item-component="getItemComponent"
:onItemClick="onMemberClick"/> :on-item-click="onMemberClick"/>
</div> </div>
<Pagination <Pagination
class="pagination-area" class="pagination-area"
ref="pagination" ref="pagination"
:totalPageCount="totalPageCount" :total-page-count="totalPageCount"
:onPageClickCallback="onPageClick"/> :on-page-click-callback="onPageClick"/>
</div> </div>
<div class="team-area__empty-search-result-area" v-if="(projectMembersCount === 0 && projectMembersTotalCount === 0)"> <div class="team-area__empty-search-result-area" v-if="(projectMembersCount === 0 && projectMembersTotalCount === 0)">
<h1>No results found</h1> <h1>No results found</h1>

6
web/satellite/src/components/team/SortingListHeader.vue
View File

@ -6,19 +6,19 @@
<div class="sort-header-container__name-container" @click="onHeaderItemClick(ProjectMemberOrderBy.NAME)"> <div class="sort-header-container__name-container" @click="onHeaderItemClick(ProjectMemberOrderBy.NAME)">
<p>Name</p> <p>Name</p>
<VerticalArrows <VerticalArrows
:isActive="getSortBy === ProjectMemberOrderBy.NAME" :is-active="getSortBy === ProjectMemberOrderBy.NAME"
:direction="getSortDirection"/> :direction="getSortDirection"/>
</div> </div>
<div class="sort-header-container__added-container" @click="onHeaderItemClick(ProjectMemberOrderBy.CREATED_AT)"> <div class="sort-header-container__added-container" @click="onHeaderItemClick(ProjectMemberOrderBy.CREATED_AT)">
<p>Added</p> <p>Added</p>
<VerticalArrows <VerticalArrows
:isActive="getSortBy === ProjectMemberOrderBy.CREATED_AT" :is-active="getSortBy === ProjectMemberOrderBy.CREATED_AT"
:direction="getSortDirection"/> :direction="getSortDirection"/>
</div> </div>
<div class="sort-header-container__email-container" @click="onHeaderItemClick(ProjectMemberOrderBy.EMAIL)"> <div class="sort-header-container__email-container" @click="onHeaderItemClick(ProjectMemberOrderBy.EMAIL)">
<p>Email</p> <p>Email</p>
<VerticalArrows <VerticalArrows
:isActive="getSortBy === ProjectMemberOrderBy.EMAIL" :is-active="getSortBy === ProjectMemberOrderBy.EMAIL"
:direction="getSortDirection"/> :direction="getSortDirection"/>
</div> </div>
</div> </div>

2
web/satellite/src/views/forgotPassword/forgotPassword.html
View File

@ -2,7 +2,7 @@
<!--See LICENSE for copying information.--> <!--See LICENSE for copying information.-->
<div class="forgot-password-container"> <div class="forgot-password-container">
<div v-bind:class="loadingClassName"> <div :class="loadingClassName">
<img src="../../../static/images/register/Loading.gif"> <img src="../../../static/images/register/Loading.gif">
</div> </div>
<img class="image" src="../../../static/images/AuthImage.svg" alt="" > <img class="image" src="../../../static/images/AuthImage.svg" alt="" >

2
web/satellite/src/views/login/login.html
View File

@ -32,7 +32,7 @@
@setData="setPassword" @setData="setPassword"
width="100%" width="100%"
height="46px" height="46px"
isPassword="true"> is-password="true">
</HeaderlessInput> </HeaderlessInput>
<div class="login-area__submit-area"> <div class="login-area__submit-area">
<router-link :to="forgotPasswordPath" class="login-area__navigation-area__nav-link" exact> <router-link :to="forgotPasswordPath" class="login-area__navigation-area__nav-link" exact>

8
web/satellite/src/views/register/register.html
View File

@ -53,9 +53,9 @@
@setData="setPassword" @setData="setPassword"
width="100%" width="100%"
height="46px" height="46px"
isPassword="true"> is-password="true">
</HeaderlessInput> </HeaderlessInput>
<InfoComponent class="register-input__info-button" boldText="Use 6 or more characters with a mix of letters, numbers & symbols" > <InfoComponent class="register-input__info-button" bold-text="Use 6 or more characters with a mix of letters, numbers & symbols" >
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="18" height="18" rx="9" fill="#007AFF"/> <rect width="18" height="18" rx="9" fill="#007AFF"/>
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/> <path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
@ -72,9 +72,9 @@
@setData="setRepeatedPassword" @setData="setRepeatedPassword"
width="100%" width="100%"
height="46px" height="46px"
isPassword="true"> is-password="true">
</HeaderlessInput> </HeaderlessInput>
<InfoComponent class="register-input__info-button" boldText="Use 6 or more characters with a mix of letters, numbers & symbols" isCustomPosition> <InfoComponent class="register-input__info-button" bold-text="Use 6 or more characters with a mix of letters, numbers & symbols">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="18" height="18" rx="9" fill="#007AFF"/> <rect width="18" height="18" rx="9" fill="#007AFF"/>
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/> <path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>

2
web/satellite/tests/unit/common/HeaderComponent.spec.ts
View File

@ -17,7 +17,7 @@ describe('HeaderComponent.vue', () => {
it('renders correctly with default props', () => { it('renders correctly with default props', () => {
const wrapper = mount(HeaderComponent); const wrapper = mount(HeaderComponent);
expect(wrapper.vm.$props.placeHolder).toMatch(''); expect(wrapper.vm.$props.placeholder).toMatch('');
expect(wrapper.vm.$props.search).toMatch(''); expect(wrapper.vm.$props.search).toMatch('');
}); });

4
web/satellite/tests/unit/common/PagesBlock.spec.ts
View File

@ -27,7 +27,7 @@ describe('Pagination.vue', () => {
const wrapper = shallowMount(PagesBlock, { const wrapper = shallowMount(PagesBlock, {
propsData: { propsData: {
pages: pagesArray, pages: pagesArray,
checkSelected: (i: number) => i === SELECTED_PAGE_INDEX, isSelected: (i: number) => i === SELECTED_PAGE_INDEX,
}, },
}); });
@ -47,7 +47,7 @@ describe('Pagination.vue', () => {
const wrapper = shallowMount(PagesBlock, { const wrapper = shallowMount(PagesBlock, {
propsData: { propsData: {
pages: pagesArray, pages: pagesArray,
checkSelected: () => false, isSelected: () => false,
}, },
}); });

2
web/satellite/tests/unit/common/SearchComponent.spec.ts
View File

@ -17,7 +17,7 @@ describe('SearchComponent.vue', () => {
it('renders correctly with default props', () => { it('renders correctly with default props', () => {
const wrapper = mount(SearchComponent); const wrapper = mount(SearchComponent);
expect(wrapper.vm.$props.placeHolder).toMatch(''); expect(wrapper.vm.$props.placeholder).toMatch('');
expect(wrapper.vm.$props.search).toMatch(''); expect(wrapper.vm.$props.search).toMatch('');
}); });

12
web/satellite/tests/unit/common/__snapshots__/Pagination.spec.ts.snap
View File

@ -7,11 +7,11 @@ exports[`Pagination.vue renders correctly 1`] = `
<path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"></path> <path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"></path>
</svg></div> </svg></div>
<div class="pagination-container__items"> <div class="pagination-container__items">
<pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub> <pagesblock-stub pages="" isselected="function () { [native code] }"></pagesblock-stub>
<!----> <!---->
<pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub> <pagesblock-stub pages="" isselected="function () { [native code] }"></pagesblock-stub>
<!----> <!---->
<pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub> <pagesblock-stub pages="" isselected="function () { [native code] }"></pagesblock-stub>
</div> </div>
<div class="pagination-container__button"><svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="pagination-container__button"><svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"></path> <path d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"></path>
@ -28,10 +28,10 @@ exports[`Pagination.vue renders correctly with props 1`] = `
<path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"></path> <path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"></path>
</svg></div> </svg></div>
<div class="pagination-container__items"> <div class="pagination-container__items">
<pagesblock-stub pages="[object Object],[object Object],[object Object]" checkselected="function () { [native code] }"></pagesblock-stub> <span>...</span> <pagesblock-stub pages="[object Object],[object Object],[object Object]" isselected="function () { [native code] }"></pagesblock-stub> <span>...</span>
<pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub> <pagesblock-stub pages="" isselected="function () { [native code] }"></pagesblock-stub>
<!----> <!---->
<pagesblock-stub pages="[object Object]" checkselected="function () { [native code] }"></pagesblock-stub> <pagesblock-stub pages="[object Object]" isselected="function () { [native code] }"></pagesblock-stub>
</div> </div>
<div class="pagination-container__button"><svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="pagination-container__button"><svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"></path> <path d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"></path>

4
web/storagenode/src/app/components/BandwidthChart.vue
View File

@ -5,10 +5,10 @@
<div class="chart"> <div class="chart">
<Chart <Chart
id="bandwidth-chart" id="bandwidth-chart"
:chartData="chartData" :chart-data="chartData"
:width="400" :width="400"
:height="200" :height="200"
:tooltipConstructor="bandwidthTooltip" /> :tooltip-constructor="bandwidthTooltip" />
</div> </div>
</template> </template>

2
web/storagenode/src/app/components/ChecksAreaContainer.vue
View File

@ -5,7 +5,7 @@
<div class="checks-area-container"> <div class="checks-area-container">
<div class="checks-area-container__header"> <div class="checks-area-container__header">
<p class="checks-area-container__header__title">{{label}}</p> <p class="checks-area-container__header__title">{{label}}</p>
<InfoComponent :text="infoText" isExtraPadding="true" isCustomPosition="true"> <InfoComponent :text="infoText" is-extra-padding="true" is-custom-position="true">
<div> <div>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="info image"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="info image">
<rect width="18" height="18" rx="9" fill="#5A667C"/> <rect width="18" height="18" rx="9" fill="#5A667C"/>

4
web/storagenode/src/app/components/DiskSpaceChart.vue
View File

@ -5,10 +5,10 @@
<div class="chart"> <div class="chart">
<Chart <Chart
id="disk-space-chart" id="disk-space-chart"
:chartData="chartData" :chart-data="chartData"
:width="400" :width="400"
:height="200" :height="200"
:tooltipConstructor="diskSpaceTooltip" /> :tooltip-constructor="diskSpaceTooltip" />
</div> </div>
</template> </template>

10
web/storagenode/src/app/components/SNOContentFilling.vue
View File

@ -36,21 +36,21 @@
<div v-if="selectedSatellite.id"> <div v-if="selectedSatellite.id">
<p class="info-area__title">Uptime & Audit Checks by Satellite</p> <p class="info-area__title">Uptime & Audit Checks by Satellite</p>
<div class="info-area__checks-area"> <div class="info-area__checks-area">
<ChecksAreaContainer label="Uptime Checks" :amount="checks.uptime" infoText="Uptime checks occur to make sure your node is still online. This is the percentage of uptime checks you’ve passed."/> <ChecksAreaContainer label="Uptime Checks" :amount="checks.uptime" info-text="Uptime checks occur to make sure your node is still online. This is the percentage of uptime checks you’ve passed."/>
<ChecksAreaContainer label="Audit Checks" :amount="checks.audit" infoText="Percentage of successful pings/communication between the node & satellite."/> <ChecksAreaContainer label="Audit Checks" :amount="checks.audit" info-text="Percentage of successful pings/communication between the node & satellite."/>
</div> </div>
</div> </div>
<div> <div>
<p class="info-area__title">Remaining on the Node</p> <p class="info-area__title">Remaining on the Node</p>
<div class="info-area__remaining-space-area"> <div class="info-area__remaining-space-area">
<BarInfoContainer label="Bandwidth Remaining" :amount="bandwidth.remaining" <BarInfoContainer label="Bandwidth Remaining" :amount="bandwidth.remaining"
infoText="of bandwidth left" :currentBarAmount="bandwidth.used" :maxBarAmount="bandwidth.available" /> info-text="of bandwidth left" :current-bar-amount="bandwidth.used" :max-bar-amount="bandwidth.available" />
<BarInfoContainer label="Disk Space Remaining" :amount="diskSpace.remaining" <BarInfoContainer label="Disk Space Remaining" :amount="diskSpace.remaining"
infoText="of disk space left" :currentBarAmount="diskSpace.used" :maxBarAmount="diskSpace.available" /> info-text="of disk space left" :current-bar-amount="diskSpace.used" :max-bar-amount="diskSpace.available" />
</div> </div>
</div> </div>
<p class="info-area__title">Payout</p> <p class="info-area__title">Payout</p>
<PayoutContainer label="STORJ Wallet Address" :walletAddress="wallet" /> <PayoutContainer label="STORJ Wallet Address" :wallet-address="wallet" />
</div> </div>
</template> </template>

4
web/storagenode/src/app/components/SNOContentTitle.vue
View File

@ -24,7 +24,7 @@
<p class="online-status"><b>{{info.status}}</b></p> <p class="online-status"><b>{{info.status}}</b></p>
<p><b>Node Version</b></p> <p><b>Node Version</b></p>
<p class="version">{{version}}</p> <p class="version">{{version}}</p>
<InfoComponent v-if="info.isLastVersion" text="Running the minimal allowed version:" boldText="v.0.0.0" isCustomPosition="true"> <InfoComponent v-if="info.isLastVersion" text="Running the minimal allowed version:" bold-text="v.0.0.0" is-custom-position="true">
<div class="version-svg-container"> <div class="version-svg-container">
<svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image"> <svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image">
<path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#00CE7D" stroke="#F4F6F9"/> <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#00CE7D" stroke="#F4F6F9"/>
@ -32,7 +32,7 @@
</svg> </svg>
</div> </div>
</InfoComponent> </InfoComponent>
<InfoComponent v-else text="Your node is outdated. Please update to:" boldText="v.0.0.0" isCustomPosition="true"> <InfoComponent v-else text="Your node is outdated. Please update to:" bold-text="v.0.0.0" is-custom-position="true">
<div class="version-svg-container"> <div class="version-svg-container">
<svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image"> <svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image">
<path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#E62929" stroke="#F4F6F9"/> <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#E62929" stroke="#F4F6F9"/>

2
web/storagenode/src/app/components/SatelliteSelectionDropdown.vue
View File

@ -6,7 +6,7 @@
<div class="satellite-selection-overflow-container"> <div class="satellite-selection-overflow-container">
<!-- loop for rendering satellites --> <!-- loop for rendering satellites -->
<div class="satellite-selection-overflow-container__satellite-choice" <div class="satellite-selection-overflow-container__satellite-choice"
v-for="satellite in satellites" v-bind:key="satellite.id" v-for="satellite in satellites" :key="satellite.id"
@click.stop="onSatelliteClick(satellite.id)" > @click.stop="onSatelliteClick(satellite.id)" >
<svg v-if="satellite.disqualified" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image"> <svg v-if="satellite.disqualified" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image">
<path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"/> <path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"/>