Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remake group and quota details section with Vue #33512

Merged
merged 1 commit into from
Sep 15, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 0 additions & 22 deletions apps/settings/css/settings.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion apps/settings/css/settings.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

28 changes: 0 additions & 28 deletions apps/settings/css/settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -276,30 +276,6 @@ select {
}
}


#body-settings #quota {
cursor: default;
position: relative;

progress {
height: 6px;

&::-moz-progress-bar {
border-radius: 3px 0 0 3px;
}

&::-webkit-progress-value {
border-radius: 3px 0 0 3px;
}
}

div {
font-weight: normal;
white-space: nowrap;
}
}


/* verify accounts */
/* only show pointer cursor when popup will be there */
.verification-dialog {
Expand Down Expand Up @@ -388,10 +364,6 @@ select {
}
}

#groups-groups {
padding-top: 5px;
}

.clientsbox img {
height: 60px;
}
Expand Down
10 changes: 5 additions & 5 deletions apps/settings/lib/Settings/Personal/PersonalInfo.php
Original file line number Diff line number Diff line change
Expand Up @@ -139,20 +139,20 @@ public function getForm(): TemplateResponse {
$messageParameters = $this->getMessageParameters($account);

$parameters = [
'total_space' => $totalSpace,
'usage' => \OC_Helper::humanFileSize($storageInfo['used']),
'usage_relative' => round($storageInfo['relative']),
'quota' => $storageInfo['quota'],
'federationEnabled' => $federationEnabled,
'lookupServerUploadEnabled' => $lookupServerUploadEnabled,
'groups' => $this->getGroups($user),
'isFairUseOfFreePushService' => $this->isFairUseOfFreePushService(),
'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
] + $messageParameters + $localeParameters;

$personalInfoParameters = [
'userId' => $uid,
'avatar' => $this->getProperty($account, IAccountManager::PROPERTY_AVATAR),
'groups' => $this->getGroups($user),
'quota' => $storageInfo['quota'],
'totalSpace' => $totalSpace,
'usage' => \OC_Helper::humanFileSize($storageInfo['used']),
'usageRelative' => round($storageInfo['relative']),
'displayName' => $this->getProperty($account, IAccountManager::PROPERTY_DISPLAYNAME),
'emailMap' => $this->getEmailMap($account),
'phone' => $this->getProperty($account, IAccountManager::PROPERTY_PHONE),
Expand Down
124 changes: 124 additions & 0 deletions apps/settings/src/components/PersonalInfo/DetailsSection.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!--
- @copyright 2022 Christopher Ng <[email protected]>
-
- @author Christopher Ng <[email protected]>
-
- @license AGPL-3.0-or-later
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->

<template>
<section>
<HeaderBar :readable="t('settings', 'Details')" />

<div class="details">
<div class="details__groups">
<Account :size="20" />
<div class="details__groups-info">
<p>{{ t('settings', 'You are a member of the following groups:') }}</p>
<p class="details__groups-list">{{ groups.join(', ') }}</p>
</div>
</div>
<div class="details__quota">
<CircleSlice :size="20" />
<div class="details__quota-info">
<p class="details__quota-text" v-html="quotaText" />
<NcProgressBar size="medium"
:value="usageRelative"
:error="usageRelative > 80" />
</div>
</div>
</div>
</section>
</template>

<script>
import { loadState } from '@nextcloud/initial-state'
import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar'

import Account from 'vue-material-design-icons/Account'
import CircleSlice from 'vue-material-design-icons/CircleSlice3'

import HeaderBar from './shared/HeaderBar.vue'

/** SYNC to be kept in sync with `lib/public/Files/FileInfo.php` */
const SPACE_UNLIMITED = -3

const { groups, quota, totalSpace, usage, usageRelative } = loadState('settings', 'personalInfoParameters', {})

export default {
name: 'DetailsSection',

components: {
Account,
CircleSlice,
HeaderBar,
NcProgressBar,
},

computed: {
quotaText() {
if (quota === SPACE_UNLIMITED) {
return t('settings', 'You are using <strong>{usage}</strong>', { usage })
}
return t(
'settings',
'You are using <strong>{usage}</strong> of <strong>{totalSpace}</strong> (<strong>{usageRelative} %</strong>)',
{ usage, totalSpace, usageRelative },
)
}
},

data() {
return {
groups,
usageRelative,
}
},
}
</script>

<style lang="scss" scoped>
.details {
display: flex;
flex-direction: column;
margin: 10px 32px 10px 0;
gap: 16px 0;
color: var(--color-text-lighter);

&__groups,
&__quota {
display: flex;
gap: 0 10px;

&-info {
display: flex;
flex-direction: column;
width: 100%;
gap: 4px 0;
}

&-list {
font-weight: bold;
}

&::v-deep .material-design-icon {
align-self: flex-start;
margin-top: 2px;
}
}
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ import FederationControl from './FederationControl.vue'

import {
ACCOUNT_PROPERTY_READABLE_ENUM,
ACCOUNT_SETTING_PROPERTY_READABLE_ENUM,
PROFILE_READABLE_ENUM,
} from '../../../constants/AccountPropertyConstants.js'

Expand All @@ -77,7 +76,6 @@ export default {
readable: {
type: String,
required: true,
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,
},
inputId: {
type: String,
Expand Down Expand Up @@ -109,7 +107,7 @@ export default {
},

isSettingProperty() {
return Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(this.readable)
return !Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(this.readable) && !Object.values(PROFILE_READABLE_ENUM).includes(this.readable)
},
},

Expand Down
3 changes: 3 additions & 0 deletions apps/settings/src/main-personal-info.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { translate as t } from '@nextcloud/l10n'
import '@nextcloud/dialogs/styles/toast.scss'

import AvatarSection from './components/PersonalInfo/AvatarSection.vue'
import DetailsSection from './components/PersonalInfo/DetailsSection.vue'
import DisplayNameSection from './components/PersonalInfo/DisplayNameSection.vue'
import EmailSection from './components/PersonalInfo/EmailSection/EmailSection.vue'
import PhoneSection from './components/PersonalInfo/PhoneSection.vue'
Expand All @@ -52,6 +53,7 @@ Vue.mixin({
})

const AvatarView = Vue.extend(AvatarSection)
const DetailsView = Vue.extend(DetailsSection)
const DisplayNameView = Vue.extend(DisplayNameSection)
const EmailView = Vue.extend(EmailSection)
const PhoneView = Vue.extend(PhoneSection)
Expand All @@ -61,6 +63,7 @@ const TwitterView = Vue.extend(TwitterSection)
const LanguageView = Vue.extend(LanguageSection)

new AvatarView().$mount('#vue-avatar-section')
new DetailsView().$mount('#vue-details-section')
new DisplayNameView().$mount('#vue-displayname-section')
new EmailView().$mount('#vue-email-section')
new PhoneView().$mount('#vue-phone-section')
Expand Down
Loading