web/satellite: create acces grant: duration selection logic (#3978)
This commit is contained in:
Malcolm Bouzi
GitHub
parent
257c8682d3
commit
c6626748d0
@ -5,14 +5,14 @@
|
||||
<div class="duration-picker">
|
||||
<div class="duration-picker__list">
|
||||
<ul class="duration-picker__list__column">
|
||||
<li class="duration-picker__list__column-item">Forever</li>
|
||||
<li class="duration-picker__list__column-item">1 month</li>
|
||||
<li class="duration-picker__list__column-item">24 Hours</li>
|
||||
<li v-on:click="onDurationClick" class="duration-picker__list__column-item">Forever</li>
|
||||
<li v-on:click="onDurationClick" class="duration-picker__list__column-item">1 month</li>
|
||||
<li v-on:click="onDurationClick" class="duration-picker__list__column-item">24 Hours</li>
|
||||
</ul>
|
||||
<ul class="duration-picker__list__column">
|
||||
<li class="duration-picker__list__column-item">6 Months</li>
|
||||
<li class="duration-picker__list__column-item">1 Week</li>
|
||||
<li class="duration-picker__list__column-item">1 Year</li>
|
||||
<li v-on:click="onDurationClick" class="duration-picker__list__column-item">6 Months</li>
|
||||
<li v-on:click="onDurationClick" class="duration-picker__list__column-item">1 Week</li>
|
||||
<li v-on:click="onDurationClick" class="duration-picker__list__column-item">1 Year</li>
|
||||
</ul>
|
||||
</div>
|
||||
<hr class="duration-picker__break">
|
||||
@ -20,8 +20,12 @@
|
||||
<DatePicker
|
||||
range
|
||||
open
|
||||
:append-to-body="false"
|
||||
:inline="true"
|
||||
v-model="date"
|
||||
popup-class="duration-picker__date-picker__popup"
|
||||
input-class="duration-picker__date-picker__input"
|
||||
@change="onDateChange($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,14 +35,30 @@
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import DatePicker from 'vue2-datepicker';
|
||||
import 'vue2-datepicker/index.css';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
DatePicker,
|
||||
},
|
||||
})
|
||||
|
||||
export default class DurationPicker extends Vue {
|
||||
private duration: string = '';
|
||||
private dateRange: string[] = [];
|
||||
|
||||
/**
|
||||
* When date range value changes
|
||||
* @param dateRange
|
||||
*/
|
||||
public onDateChange(date): void {
|
||||
this.dateRange = date;
|
||||
}
|
||||
|
||||
/**
|
||||
* When duration button is clicked
|
||||
* @param duration
|
||||
*/
|
||||
public onDurationClick(event): void {
|
||||
this.duration = event.target.textContent;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -46,7 +66,7 @@ export default class DurationPicker extends Vue {
|
||||
.duration-picker {
|
||||
background: #fff;
|
||||
width: 530px;
|
||||
height: 595px;
|
||||
height: 400px;
|
||||
border: 1px solid #384b65;
|
||||
margin: 0 auto;
|
||||
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
@ -55,30 +75,24 @@ export default class DurationPicker extends Vue {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 190px;
|
||||
|
||||
top: 100%;
|
||||
&__list {
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 48px;
|
||||
-webkit-column-count: 2;
|
||||
column-count: 2;
|
||||
padding: 18px 24px 0;
|
||||
|
||||
padding: 10px 24px 0;
|
||||
&__column {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&__column-item {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 400;
|
||||
padding: 15px 0 15px 12px;
|
||||
padding: 10px 0 10px 12px;
|
||||
border-left: 7px solid #fff;
|
||||
color: #1b2533;
|
||||
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
background: #f5f6fa;
|
||||
@ -87,36 +101,42 @@ export default class DurationPicker extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__break {
|
||||
width: 84%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__date-picker {
|
||||
|
||||
&__wrapper {
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.duration-picker {
|
||||
|
||||
&__date-picker {
|
||||
|
||||
&__popup {
|
||||
top: 70% !important;
|
||||
left: 210px !important;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 25px;
|
||||
width: 480px;
|
||||
height: 210px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx-calendar {
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.mx-table-date td, .mx-table-date th {
|
||||
height: 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.mx-table {
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,60 +5,78 @@
|
||||
<div class="duration-selection">
|
||||
<div
|
||||
class="duration-selection__toggle-container"
|
||||
@click="toggleDurationPicker"
|
||||
@click="togglePicker"
|
||||
>
|
||||
<h1 class="duration-selection__toggle-container__name">Forever</h1>
|
||||
<ExpandIcon
|
||||
class="duration-selection__toggle-container__expand-icon"
|
||||
alt="Arrow down (expand)"
|
||||
<h1 class="duration-selection__toggle-container__name">Forever</h1>
|
||||
<ExpandIcon
|
||||
class="duration-selection__toggle-container__expand-icon"
|
||||
alt="Arrow down (expand)"
|
||||
/>
|
||||
</div>
|
||||
<DurationPicker
|
||||
v-if="isDurationPickerVisible"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import DurationPicker from '@/components/accessGrants/permissions/DurationPicker.vue';
|
||||
|
||||
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
ExpandIcon,
|
||||
DurationPicker,
|
||||
},
|
||||
})
|
||||
|
||||
export default class DurationSelection extends Vue {
|
||||
|
||||
public isDurationPickerVisible: boolean = false;
|
||||
/**
|
||||
* Toggles duration picker.
|
||||
*/
|
||||
public togglePicker(): void {
|
||||
this.isDurationPickerVisible = !this.isDurationPickerVisible;
|
||||
}
|
||||
/**
|
||||
* Closes duration picker.
|
||||
*/
|
||||
public closePicker(): void {
|
||||
this.isDurationPickerVisible = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.duration-selection {
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
margin-left: 15px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(56, 75, 101, 0.4);
|
||||
font-family: 'font_regular', sans-serif;
|
||||
width: 235px;
|
||||
|
||||
&__toggle-container {
|
||||
.duration-selection {
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
margin-left: 15px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(56, 75, 101, 0.4);
|
||||
font-family: 'font_regular', sans-serif;
|
||||
width: 235px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 20px;
|
||||
width: calc(100% - 40px);
|
||||
|
||||
&__name {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #384b65;
|
||||
margin: 0;
|
||||
&__toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 20px;
|
||||
width: calc(100% - 40px);
|
||||
|
||||
&__name {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #384b65;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,7 +31,6 @@
|
||||
<div class="permissions__content__right__duration-select">
|
||||
<p class="permissions__content__right__duration-select__label">Duration</p>
|
||||
<DurationSelection />
|
||||
<DurationPicker/>
|
||||
</div>
|
||||
<div class="permissions__content__right__buckets-select">
|
||||
<p class="permissions__content__right__buckets-select__label">Buckets</p>
|
||||
@ -67,7 +66,6 @@ import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import BucketNameBullet from '@/components/accessGrants/permissions/BucketNameBullet.vue';
|
||||
import BucketsSelection from '@/components/accessGrants/permissions/BucketsSelection.vue';
|
||||
import DurationPicker from '@/components/accessGrants/permissions/DurationPicker.vue';
|
||||
import DurationSelection from '@/components/accessGrants/permissions/DurationSelection.vue';
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
|
||||
@ -81,7 +79,6 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
|
||||
BackIcon,
|
||||
BucketsSelection,
|
||||
BucketNameBullet,
|
||||
DurationPicker,
|
||||
DurationSelection,
|
||||
VButton,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user