1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<!--
- SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<!-- TODO remove this inline margin placeholder once the settings layout is updated -->
<section id="profile-visibility"
:style="{ marginLeft }">
<HeaderBar :is-heading="true" :readable="heading" />
<em :class="{ disabled }">
{{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile. For example, if visibility is set to "Show to everyone" and scope is set to "Private", "Private" is respected.') }}
</em>
<div class="visibility-dropdowns"
:style="{
gridTemplateRows: `repeat(${rows}, 44px)`,
}">
<VisibilityDropdown v-for="param in visibilityParams"
:key="param.id"
:param-id="param.id"
:display-id="param.displayId"
:visibility.sync="param.visibility" />
</div>
</section>
</template>
<script>
import { loadState } from '@nextcloud/initial-state'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import HeaderBar from '../shared/HeaderBar.vue'
import VisibilityDropdown from './VisibilityDropdown.vue'
import { PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js'
const { profileConfig } = loadState('settings', 'profileParameters', {})
const { profileEnabled } = loadState('settings', 'personalInfoParameters', false)
const compareParams = (a, b) => {
if (a.appId === b.appId || (a.appId !== 'core' && b.appId !== 'core')) {
return a.displayId.localeCompare(b.displayId)
} else if (a.appId === 'core') {
return 1
} else {
return -1
}
}
export default {
name: 'ProfileVisibilitySection',
components: {
HeaderBar,
VisibilityDropdown,
},
data() {
return {
heading: PROFILE_READABLE_ENUM.PROFILE_VISIBILITY,
profileEnabled,
visibilityParams: Object.entries(profileConfig)
.map(([paramId, { appId, displayId, visibility }]) => ({ id: paramId, appId, displayId, visibility }))
.sort(compareParams),
// TODO remove this when not used once the settings layout is updated
marginLeft: window.matchMedia('(min-width: 1600px)').matches
? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim()
: '0px',
}
},
computed: {
disabled() {
return !this.profileEnabled
},
rows() {
return Math.ceil(this.visibilityParams.length / 2)
},
},
mounted() {
subscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate)
// TODO remove this when not used once the settings layout is updated
window.onresize = () => {
this.marginLeft = window.matchMedia('(min-width: 1600px)').matches
? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim()
: '0px'
}
},
beforeDestroy() {
unsubscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate)
},
methods: {
handleProfileEnabledUpdate(profileEnabled) {
this.profileEnabled = profileEnabled
},
},
}
</script>
<style lang="scss" scoped>
section {
padding: 30px;
max-width: 900px;
width: 100%;
em {
display: block;
margin: 16px 0;
&.disabled {
filter: grayscale(1);
opacity: 0.5;
cursor: default;
pointer-events: none;
& *,
&::v-deep * {
cursor: default;
pointer-events: none;
}
}
}
}
</style>
|
