Skip to content

Commit 8eb46c9

Browse files
PytalPytal
committed
Remake group and quota details section with Vue
Signed-off-by: Christopher Ng <chrng8@gmail.com>
1 parent ca747b9 commit 8eb46c9

File tree

12 files changed

+141
-90
lines changed

12 files changed

+141
-90
lines changed

‎apps/settings/css/settings.css‎

Lines changed: 0 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/settings/css/settings.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/settings/css/settings.scss‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -276,30 +276,6 @@ select {
276276
}
277277
}
278278

279-
280-
#body-settings #quota {
281-
cursor: default;
282-
position: relative;
283-
284-
progress {
285-
height: 6px;
286-
287-
&::-moz-progress-bar {
288-
border-radius: 3px 0 0 3px;
289-
}
290-
291-
&::-webkit-progress-value {
292-
border-radius: 3px 0 0 3px;
293-
}
294-
}
295-
296-
div {
297-
font-weight: normal;
298-
white-space: nowrap;
299-
}
300-
}
301-
302-
303279
/* verify accounts */
304280
/* only show pointer cursor when popup will be there */
305281
.verification-dialog {
@@ -388,10 +364,6 @@ select {
388364
}
389365
}
390366

391-
#groups-groups {
392-
padding-top: 5px;
393-
}
394-
395367
.clientsbox img {
396368
height: 60px;
397369
}

‎apps/settings/lib/Settings/Personal/PersonalInfo.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -139,20 +139,20 @@ public function getForm(): TemplateResponse {
139139
$messageParameters = $this->getMessageParameters($account);
140140

141141
$parameters = [
142-
'total_space' => $totalSpace,
143-
'usage' => \OC_Helper::humanFileSize($storageInfo['used']),
144-
'usage_relative' => round($storageInfo['relative']),
145-
'quota' => $storageInfo['quota'],
146142
'federationEnabled' => $federationEnabled,
147143
'lookupServerUploadEnabled' => $lookupServerUploadEnabled,
148-
'groups' => $this->getGroups($user),
149144
'isFairUseOfFreePushService' => $this->isFairUseOfFreePushService(),
150145
'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
151146
] + $messageParameters + $localeParameters;
152147

153148
$personalInfoParameters = [
154149
'userId' => $uid,
155150
'avatar' => $this->getProperty($account, IAccountManager::PROPERTY_AVATAR),
151+
'groups' => $this->getGroups($user),
152+
'quota' => $storageInfo['quota'],
153+
'totalSpace' => $totalSpace,
154+
'usage' => \OC_Helper::humanFileSize($storageInfo['used']),
155+
'usageRelative' => round($storageInfo['relative']),
156156
'displayName' => $this->getProperty($account, IAccountManager::PROPERTY_DISPLAYNAME),
157157
'emailMap' => $this->getEmailMap($account),
158158
'phone' => $this->getProperty($account, IAccountManager::PROPERTY_PHONE),

‎apps/settings/src/components/PersonalInfo/DetailsSection.vue‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!--
2+
- @copyright 2022 Christopher Ng <chrng8@gmail.com>
3+
-
4+
- @author Christopher Ng <chrng8@gmail.com>
5+
-
6+
- @license AGPL-3.0-or-later
7+
-
8+
- This program is free software: you can redistribute it and/or modify
9+
- it under the terms of the GNU Affero General Public License as
10+
- published by the Free Software Foundation, either version 3 of the
11+
- License, or (at your option) any later version.
12+
-
13+
- This program is distributed in the hope that it will be useful,
14+
- but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
- GNU Affero General Public License for more details.
17+
-
18+
- You should have received a copy of the GNU Affero General Public License
19+
- along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
-
21+
-->
22+
23+
<template>
24+
<section>
25+
<HeaderBar :readable="t('settings', 'Details')" />
26+
27+
<div class="details">
28+
<div class="details__groups">
29+
<Account :size="20" />
30+
<div class="details__groups-info">
31+
<p>{{ t('settings', 'You are a member of the following groups:') }}</p>
32+
<p class="details__groups-list">{{ groups.join(', ') }}</p>
33+
</div>
34+
</div>
35+
<div class="details__quota">
36+
<CircleSlice :size="20" />
37+
<div class="details__quota-info">
38+
<p class="details__quota-text" v-html="quotaText" />
39+
<NcProgressBar size="medium"
40+
:value="usageRelative"
41+
:error="usageRelative > 80" />
42+
</div>
43+
</div>
44+
</div>
45+
</section>
46+
</template>
47+
48+
<script>
49+
import { loadState } from '@nextcloud/initial-state'
50+
import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar'
51+
52+
import Account from 'vue-material-design-icons/Account'
53+
import CircleSlice from 'vue-material-design-icons/CircleSlice3'
54+
55+
import HeaderBar from './shared/HeaderBar.vue'
56+
57+
/** SYNC to be kept in sync with `lib/public/Files/FileInfo.php` */
58+
const SPACE_UNLIMITED = -3
59+
60+
const { groups, quota, totalSpace, usage, usageRelative } = loadState('settings', 'personalInfoParameters', {})
61+
62+
export default {
63+
name: 'DetailsSection',
64+
65+
components: {
66+
Account,
67+
CircleSlice,
68+
HeaderBar,
69+
NcProgressBar,
70+
},
71+
72+
computed: {
73+
quotaText() {
74+
if (quota === SPACE_UNLIMITED) {
75+
return t('settings', 'You are using <strong>{usage}</strong>', { usage })
76+
}
77+
return t(
78+
'settings',
79+
'You are using <strong>{usage}</strong> of <strong>{totalSpace}</strong> (<strong>{usageRelative} %</strong>)',
80+
{ usage, totalSpace, usageRelative },
81+
)
82+
}
83+
},
84+
85+
data() {
86+
return {
87+
groups,
88+
usageRelative,
89+
}
90+
},
91+
}
92+
</script>
93+
94+
<style lang="scss" scoped>
95+
.details {
96+
display: flex;
97+
flex-direction: column;
98+
margin: 10px 32px 10px 0;
99+
gap: 16px 0;
100+
color: var(--color-text-lighter);
101+
102+
&__groups,
103+
&__quota {
104+
display: flex;
105+
gap: 0 10px;
106+
107+
&-info {
108+
display: flex;
109+
flex-direction: column;
110+
width: 100%;
111+
gap: 4px 0;
112+
}
113+
114+
&-list {
115+
font-weight: bold;
116+
}
117+
118+
&::v-deep .material-design-icon {
119+
align-self: flex-start;
120+
margin-top: 2px;
121+
}
122+
}
123+
}
124+
</style>

‎apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ import FederationControl from './FederationControl.vue'
5656
5757
import {
5858
ACCOUNT_PROPERTY_READABLE_ENUM,
59-
ACCOUNT_SETTING_PROPERTY_READABLE_ENUM,
6059
PROFILE_READABLE_ENUM,
6160
} from '../../../constants/AccountPropertyConstants.js'
6261
@@ -77,7 +76,6 @@ export default {
7776
readable: {
7877
type: String,
7978
required: true,
80-
validator: (value) => Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(value) || Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(value) || value === PROFILE_READABLE_ENUM.PROFILE_VISIBILITY,
8179
},
8280
inputId: {
8381
type: String,
@@ -109,7 +107,7 @@ export default {
109107
},
110108
111109
isSettingProperty() {
112-
return Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(this.readable)
110+
return !Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(this.readable) && !Object.values(PROFILE_READABLE_ENUM).includes(this.readable)
113111
},
114112
},
115113

‎apps/settings/src/main-personal-info.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { translate as t } from '@nextcloud/l10n'
2727
import '@nextcloud/dialogs/styles/toast.scss'
2828

2929
import AvatarSection from './components/PersonalInfo/AvatarSection.vue'
30+
import DetailsSection from './components/PersonalInfo/DetailsSection.vue'
3031
import DisplayNameSection from './components/PersonalInfo/DisplayNameSection.vue'
3132
import EmailSection from './components/PersonalInfo/EmailSection/EmailSection.vue'
3233
import PhoneSection from './components/PersonalInfo/PhoneSection.vue'
@@ -52,6 +53,7 @@ Vue.mixin({
5253
})
5354

5455
const AvatarView = Vue.extend(AvatarSection)
56+
const DetailsView = Vue.extend(DetailsSection)
5557
const DisplayNameView = Vue.extend(DisplayNameSection)
5658
const EmailView = Vue.extend(EmailSection)
5759
const PhoneView = Vue.extend(PhoneSection)
@@ -61,6 +63,7 @@ const TwitterView = Vue.extend(TwitterSection)
6163
const LanguageView = Vue.extend(LanguageSection)
6264

6365
new AvatarView().$mount('#vue-avatar-section')
66+
new DetailsView().$mount('#vue-details-section')
6467
new DisplayNameView().$mount('#vue-displayname-section')
6568
new EmailView().$mount('#vue-email-section')
6669
new PhoneView().$mount('#vue-phone-section')

0 commit comments

Comments
 (0)