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

web/satellite: info button added on PM page (#3449)

Browse Source
This commit is contained in:
Vitalii Shpital 2019-11-05 14:10:06 +02:00 committed by Nikolay Yurchenko
parent 1a0757ebf7
commit bee1acef4e
3 changed files with 103 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,14 +3,20 @@
<template>
<div class="team-header-container">
<h1 class="team-header-container__title">Project Members</h1>
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<VInfo
class="team-header-container__title-area__info-button"
bold-text="The only project role currently available is Admin, which gives full access to the project.">
<InfoIcon class="team-header-container__title-area__info-button__image"/>
</VInfo>
</div>
<div class="team-header-container__wrapper">
<VHeader
ref="headerComponent"
placeholder="Team Members"
:search="processSearchQuery">
<div class="header-default-state" v-if="isDefaultState">
<span class="header-default-state__info-text">The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
<VButton
class="button"
label="+Add"
@ -70,8 +76,11 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import VHeader from '@/components/common/VHeader.vue';
import VInfo from '@/components/common/VInfo.vue';
import AddUserPopup from '@/components/team/AddUserPopup.vue';
import InfoIcon from '@/../static/images/team/infoTooltip.svg';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectMemberHeaderState } from '@/types/projectMembers';
@ -87,6 +96,8 @@ declare interface ClearSearch {
VButton,
VHeader,
AddUserPopup,
VInfo,
InfoIcon,
},
})
export default class HeaderArea extends Vue {
@ -191,12 +202,34 @@ export default class HeaderArea extends Vue {
<style scoped lang="scss">
.team-header-container {
&__title {
font-family: 'font_bold', sans-serif;
font-size: 32px;
line-height: 39px;
margin: 0;
user-select: none;
&__title-area {
display: flex;
align-items: center;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 32px;
line-height: 39px;
margin: 0;
user-select: none;
}
&__info-button {
max-height: 20px;
cursor: pointer;
margin-left: 10px;
&:hover {
.team-header-svg-path {
fill: #fff;
}
.team-header-svg-rect {
fill: #2683ff;
}
}
}
}
}
@ -204,7 +237,7 @@ export default class HeaderArea extends Vue {
.header-after-delete-click {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: center;
height: 85px;
&__info-text {
@ -230,7 +263,7 @@ export default class HeaderArea extends Vue {
.header-selected-members {
display: flex;
align-items: flex-end;
align-items: center;
height: 85px;
justify-content: center;
@ -286,4 +319,28 @@ export default class HeaderArea extends Vue {
box-shadow: none;
}
}
/deep/ .info__message-box {
background-image: url('../../../static/images/account/billing/MessageBox.png');
background-repeat: no-repeat;
min-height: 80px;
min-width: 220px;
width: 220px;
top: 110%;
left: -224%;
padding: 0 20px 12px 20px;
word-break: break-word;
&__text {
text-align: left;
font-size: 13px;
line-height: 17px;
margin-top: 20px;
&__bold-text {
font-family: 'font_medium', sans-serif;
color: #354049;
}
}
}
</style>

4
web/satellite/static/images/team/infoTooltip.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="team-header-svg-rect" x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#AFB7C1"/>
<path class="team-header-svg-path" d="M7 7.25177C7.00959 6.23527 7.28777 5.44177 7.83453 4.87129C8.38129 4.29043 9.1199 4 10.0504 4C10.952 4 11.6667 4.22819 12.1942 4.68458C12.7314 5.14097 13 5.79444 13 6.64498C13 7.03913 12.9376 7.38661 12.8129 7.68741C12.6882 7.98821 12.5396 8.24234 12.3669 8.44979C12.1942 8.65724 11.9592 8.90099 11.6619 9.18105C11.2686 9.54408 10.9712 9.876 10.7698 10.1768C10.5779 10.4672 10.482 10.8303 10.482 11.2659H9.04317C9.04317 10.851 9.10072 10.488 9.21583 10.1768C9.33094 9.86563 9.46523 9.6115 9.61871 9.41443C9.78177 9.20698 10.0024 8.96841 10.2806 8.69873C10.6067 8.37718 10.8465 8.09712 11 7.85856C11.1535 7.61999 11.2302 7.31919 11.2302 6.95615C11.2302 6.55163 11.1103 6.25082 10.8705 6.05375C10.6403 5.8463 10.3141 5.74257 9.89209 5.74257C9.45084 5.74257 9.10552 5.87223 8.85611 6.13154C8.60671 6.38048 8.47242 6.75389 8.45324 7.25177H7ZM9.73381 12.7595C10.0216 12.7595 10.2566 12.8633 10.4388 13.0707C10.6307 13.2782 10.7266 13.5427 10.7266 13.8642C10.7266 14.1961 10.6307 14.471 10.4388 14.6888C10.2566 14.8963 10.0216 15 9.73381 15C9.45564 15 9.22062 14.8911 9.02878 14.6733C8.84652 14.4554 8.7554 14.1858 8.7554 13.8642C8.7554 13.5427 8.84652 13.2782 9.02878 13.0707C9.22062 12.8633 9.45564 12.7595 9.73381 12.7595Z" fill="#354049"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

39
web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
View File

@ -2,10 +2,15 @@
exports[`Team HeaderArea renders correctly 1`] = `
<div class="team-header-container">
<h1 class="team-header-container__title">Project Members</h1>
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub text="" boldtext="The only project role currently available is Admin, which gives full access to the project." class="team-header-container__title-area__info-button">
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
</vinfo-stub>
</div>
<div class="team-header-container__wrapper">
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
<div class="header-default-state"><span class="header-default-state__info-text">The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
<div class="header-default-state">
<vbutton-stub label="+Add" width="122px" height="48px" onpress="function () { [native code] }" class="button"></vbutton-stub>
</div>
<!---->
@ -20,7 +25,12 @@ exports[`Team HeaderArea renders correctly 1`] = `
exports[`Team HeaderArea renders correctly with 1 selected user and delete clicked once 1`] = `
<div class="team-header-container">
<h1 class="team-header-container__title">Project Members</h1>
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub text="" boldtext="The only project role currently available is Admin, which gives full access to the project." class="team-header-container__title-area__info-button">
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
</vinfo-stub>
</div>
<div class="team-header-container__wrapper">
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
<!---->
@ -41,7 +51,12 @@ exports[`Team HeaderArea renders correctly with 1 selected user and delete click
exports[`Team HeaderArea renders correctly with 2 selected users and delete clicked once 1`] = `
<div class="team-header-container">
<h1 class="team-header-container__title">Project Members</h1>
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub text="" boldtext="The only project role currently available is Admin, which gives full access to the project." class="team-header-container__title-area__info-button">
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
</vinfo-stub>
</div>
<div class="team-header-container__wrapper">
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
<!---->
@ -62,10 +77,15 @@ exports[`Team HeaderArea renders correctly with 2 selected users and delete clic
exports[`Team HeaderArea renders correctly with opened Add team member popup 1`] = `
<div class="team-header-container">
<h1 class="team-header-container__title">Project Members</h1>
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub text="" boldtext="The only project role currently available is Admin, which gives full access to the project." class="team-header-container__title-area__info-button">
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
</vinfo-stub>
</div>
<div class="team-header-container__wrapper">
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
<div class="header-default-state"><span class="header-default-state__info-text">The only project role currently available is Admin, which gives <b>full access</b> to the project.</span>
<div class="header-default-state">
<vbutton-stub label="+Add" width="122px" height="48px" onpress="function () { [native code] }" class="button"></vbutton-stub>
</div>
<!---->
@ -80,7 +100,12 @@ exports[`Team HeaderArea renders correctly with opened Add team member popup 1`]
exports[`Team HeaderArea renders correctly with selected users 1`] = `
<div class="team-header-container">
<h1 class="team-header-container__title">Project Members</h1>
<div class="team-header-container__title-area">
<h1 class="team-header-container__title-area__title">Project Members</h1>
<vinfo-stub text="" boldtext="The only project role currently available is Admin, which gives full access to the project." class="team-header-container__title-area__info-button">
<infoicon-stub class="team-header-container__title-area__info-button__image"></infoicon-stub>
</vinfo-stub>
</div>
<div class="team-header-container__wrapper">
<vheader-stub placeholder="Team Members" search="function () { [native code] }">
<!---->