Skip to content

Commit

Permalink
feat(quota): implement Quote component
Browse files Browse the repository at this point in the history
Signed-off-by: Franziska Bath <[email protected]>
  • Loading branch information
fracado committed Sep 9, 2024
1 parent 8897e2b commit 1a83db8
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.

<template>
<content>
<Quota />
<hr>
<LanguageSection />
<hr>
<AuthTokenSection />
Expand All @@ -33,6 +35,7 @@ import AuthTokenSection from './components/security/AuthTokenSection.vue'
import WebDavUrl from './components/files/WebDavUrl.vue'
import Software from './components/help/Software.vue'
import LanguageSection from './components/account/LanguageSection.vue'
import Quota from './components/account/Quota.vue'
import { defineComponent } from 'vue'

export default defineComponent({
Expand All @@ -42,6 +45,7 @@ export default defineComponent({
AuthTokenSection,
WebDavUrl,
Software,
Quota,
},
})
</script>
Expand Down
109 changes: 109 additions & 0 deletions src/components/account/Quota.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!--
- SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- SPDX-FileCopyrightText: 2024 STRATO AG
- SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
<section class="section">
<h2>{{ t('simplesettings', 'Storage usage') }}</h2>
<div class="quota">
<NcProgressBar
v-if="hasLimitedSpace"
size="medium"
:value="usageRelative"
:color="barColor"
:style="{'background-color': backgroundColor}" />
<div class="quota-info">
<p>
<span v-if="hasLimitedSpace" :style="quotaPillStyles(barColor)" />
<span v-html="quotaUsedText" />

Check warning on line 20 in src/components/account/Quota.vue

View workflow job for this annotation

GitHub Actions / NPM lint

'v-html' directive can lead to XSS attack
</p>
<p v-if="hasLimitedSpace">
<span :style="quotaPillStyles(backgroundColor)" />
<span v-html="quotaFreeText" />

Check warning on line 24 in src/components/account/Quota.vue

View workflow job for this annotation

GitHub Actions / NPM lint

'v-html' directive can lead to XSS attack
</p>
</div>
</div>
</section>
</template>

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

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

const barColor = null
const backgroundColor = null

const { quota, freeSpace, usage, usageRelative } = loadState('simplesettings', 'personalInfoParameters', {})
const hasLimitedSpace = quota !== SPACE_UNLIMITED

export default {
name: 'Quota',

components: {
NcProgressBar,
},

data() {
return {
usageRelative,
barColor,
backgroundColor,
hasLimitedSpace,
}
},

mounted() {
const styles = getComputedStyle(document.documentElement)
this.barColor = styles.getPropertyValue('--ion-color-blue-b4')
this.backgroundColor = styles.getPropertyValue('--ion-color-cool-grey-c2')
},

computed: {
quotaUsedText() {
return t(
'settings', 'Used: <strong>{usage}</strong>', { usage },
)
},
quotaFreeText() {
return t(
'settings', 'Free: <strong>{freeSpace}</strong>', { freeSpace },
)
},
},

methods: {
quotaPillStyles(color) {
return {
'background-color': color,
'border-radius': 10 + 'px',
'margin-right': 12 + 'px',
display: 'inline-block',
height: 10 + 'px',
width: 20 + 'px',
}
},
},
}
</script>

<style lang="scss" scoped>
.quota {
display: flex;
flex-direction: column;
width: 66.6%;
padding-top: 5px;
gap: 20px 0;

&-info {
display: flex;
flex-direction: column;
width: 100%;
gap: 8px 0;
}
}
</style>

0 comments on commit 1a83db8

Please sign in to comment.