Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="filters">
|
||||
<h6 class="filters-title text is-xsmall is-txtSoftGrey u-tupper letter-spacing">{{ $t('SettingsDropdown.filter') }}</h6>
|
||||
<ul class="list">
|
||||
<li class="type text is-caption is-txtGrey" :class="{ 'type--selected': isFilterApplied('mine') }">
|
||||
<a href="javascript:void(0)" class="element" :class="{ 'element--selected': isFilterApplied('mine') }" @click="setFilter('mine')">
|
||||
{{ $t(`SettingsDropdown.types.${section}`) }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="type text is-caption is-txtGrey" :class="{ 'type--selected': isFilterApplied('favorited') }">
|
||||
<a href="javascript:void(0)" class="element" :class="{ 'element--selected': isFilterApplied('favorited') }" @click="setFilter('favorited')">
|
||||
{{ $t('SettingsDropdown.types.favorited', { count: metadata.total_likes }) }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="type text is-caption is-txtGrey" :class="{ 'type--selected': isFilterApplied('shared') }" v-if="metadata.total_shared">
|
||||
<a href="javascript:void(0)" class="element" :class="{ 'element--selected': isFilterApplied('shared') }" @click="setFilter('shared')">
|
||||
{{ $t('SettingsDropdown.types.shared', { count: metadata.total_shared }) }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="type text is-caption is-txtGrey" :class="{ 'type--selected': isFilterApplied('locked') }">
|
||||
<a href="javascript:void(0)" class="element" :class="{ 'element--selected': isFilterApplied('locked') }" @click="setFilter('locked')">
|
||||
{{ $t('SettingsDropdown.types.locked', { count: metadata.total_locked }) }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="type text is-caption is-txtGrey" :class="{ 'type--selected': isPrivacyFilterApplied }">
|
||||
<div class="element">
|
||||
<a href="javascript:void(0)" class="element--inline" :class="{ 'element--selected': isFilterApplied('public') }" @click="setFilter('public')">
|
||||
{{ $t('SettingsDropdown.types.publicPrivacy') }}
|
||||
</a> |
|
||||
<a href="javascript:void(0)" class="element--inline" :class="{ 'element--selected': isFilterApplied('private') }" @click="setFilter('private')">
|
||||
{{ $t('SettingsDropdown.types.privatePrivacy') }}
|
||||
</a> |
|
||||
<a href="javascript:void(0)" class="element--inline" :class="{ 'element--selected': isFilterApplied('link') }" @click="setFilter('link')">
|
||||
{{ $t('SettingsDropdown.types.linkPrivacy') }}
|
||||
</a> |
|
||||
<a href="javascript:void(0)" class="element--inline" :class="{ 'element--selected': isFilterApplied('password') }" @click="setFilter('password')">
|
||||
{{ $t('SettingsDropdown.types.passwordPrivacy') }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Filters',
|
||||
props: {
|
||||
section: String,
|
||||
filter: String,
|
||||
metadata: {
|
||||
type: Object,
|
||||
default () {
|
||||
return { total_shared: 0 };
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isPrivacyFilterApplied () {
|
||||
return ['public', 'private', 'link', 'password'].indexOf(this.$props.filter) > -1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setFilter (filter) {
|
||||
this.$emit('filterChanged', filter);
|
||||
},
|
||||
|
||||
isFilterApplied (filter) {
|
||||
return this.$props.filter === filter;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.filters {
|
||||
background-color: $white;
|
||||
|
||||
&-title {
|
||||
padding: 20px 24px 12px 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $softblue;
|
||||
}
|
||||
|
||||
&.type--selected {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transform: translateY(-50%);
|
||||
background-image: url("../../assets/icons/common/check.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element {
|
||||
display: block;
|
||||
padding: 12px 24px 12px 36px;
|
||||
|
||||
&--inline {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $softblue;
|
||||
}
|
||||
}
|
||||
|
||||
.element,
|
||||
.element--inline {
|
||||
&.element--selected {
|
||||
color: $text__color;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<h6 class="text is-xsmall is-txtSoftGrey u-tupper letter-spacing">{{ $t('SettingsDropdown.orderMaps') }}</h6>
|
||||
<ul class="list">
|
||||
<li class="type text is-caption is-txtGrey" v-for="ordering in orderings" :key="ordering.name" :class="{ 'type--selected': isOrderApplied(ordering.order, ordering.direction) }">
|
||||
<a class="element" v-if="!ordering.options" :class="{ 'element--selected': isOrderApplied(ordering.order, ordering.direction) }" @click="setOrder(ordering.order, ordering.direction)">
|
||||
{{ $t(`SettingsDropdown.order.${ordering.name}`) }}
|
||||
</a>
|
||||
|
||||
<template v-else>
|
||||
{{ $t(`SettingsDropdown.order.${ordering.name}.title`) }} (
|
||||
<span v-for="(option, index) in ordering.options" :key="option">
|
||||
<a :key="option" class="element" :class="{ 'element--selected': isOrderApplied(ordering.order, option) }" @click="setOrder(ordering.order, option)">
|
||||
{{ $t(`SettingsDropdown.order.${ordering.name}.${option}`) }}
|
||||
</a>
|
||||
<span v-if="index < ordering.options.length - 1">|</span>
|
||||
</span>
|
||||
)
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Ordering',
|
||||
props: {
|
||||
orderings: Array,
|
||||
order: String,
|
||||
orderDirection: String
|
||||
},
|
||||
methods: {
|
||||
isOrderApplied (order, direction) {
|
||||
return direction
|
||||
? (this.$props.order === order) && (this.$props.orderDirection === direction)
|
||||
: this.$props.order === order;
|
||||
},
|
||||
|
||||
setOrder (order, direction) {
|
||||
this.$emit('orderChanged', { order, direction });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.section {
|
||||
padding: 24px 12px 24px 36px;
|
||||
border-bottom: none;
|
||||
background-color: #FFF;
|
||||
background-color: $softblue;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.type {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.type--selected {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -22px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transform: translateY(-50%);
|
||||
background-image: url("../../assets/icons/common/check.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.element--selected {
|
||||
color: $text__color;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<Dropdown ref="dropdown" class="settings">
|
||||
<template slot="button">
|
||||
<slot />
|
||||
</template>
|
||||
|
||||
<Filters :section="section" :filter="filter" :metadata="metadata" @filterChanged="setFilter"/>
|
||||
</Dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from '../Dropdowns/Dropdown';
|
||||
import Filters from '../Settings/Filters';
|
||||
|
||||
export default {
|
||||
name: 'SettingsDropdown',
|
||||
components: {
|
||||
Dropdown,
|
||||
Filters
|
||||
},
|
||||
props: {
|
||||
section: String,
|
||||
filter: String,
|
||||
metadata: {
|
||||
type: Object,
|
||||
default () {
|
||||
return { total_shared: 0 };
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false,
|
||||
isDropdownOpen: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setFilter (filter) {
|
||||
this.$refs.dropdown.closeDropdown();
|
||||
this.$emit('filterChanged', filter);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.settings {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user