-
Notifications
You must be signed in to change notification settings - Fork 157
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add remaining quota information, slight redesign
- Loading branch information
1 parent
de185d3
commit 4dd4476
Showing
7 changed files
with
77 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
Enhancement: Quota Information Redesign | ||
|
||
We've slightly redesigned the quota information for the space and logged-in user, | ||
we also show now the remaining space in the quota information. | ||
|
||
https://github.com/owncloud/web/pull/11722 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,8 +12,11 @@ import { Quota } from '@ownclouders/web-client/graph/generated' | |
|
||
const totalQuota = 1000 | ||
const basicQuota = 300 | ||
const basicRemainingQuota = 700 | ||
const warningQuota = 810 | ||
const warningRemainingQuota = 190 | ||
const dangerQuota = 910 | ||
const dangerRemainingQuota = 90 | ||
|
||
const noEmail = '' | ||
const email = '[email protected]' | ||
|
@@ -27,7 +30,10 @@ describe('User Menu component', () => { | |
}) | ||
describe('when quota and no email is set', () => { | ||
it('renders a navigation without email', () => { | ||
const wrapper = getMountedWrapper({ used: basicQuota, total: totalQuota }, noEmail) | ||
const wrapper = getMountedWrapper( | ||
{ used: basicQuota, remaining: basicRemainingQuota, total: totalQuota }, | ||
noEmail | ||
) | ||
expect(wrapper.html()).toMatchSnapshot() | ||
}) | ||
}) | ||
|
@@ -48,6 +54,7 @@ describe('User Menu component', () => { | |
const wrapper = getMountedWrapper( | ||
{ | ||
used: basicQuota, | ||
remaining: basicRemainingQuota, | ||
total: totalQuota | ||
}, | ||
|
@@ -60,6 +67,7 @@ describe('User Menu component', () => { | |
const wrapper = getMountedWrapper( | ||
{ | ||
used: warningQuota, | ||
remaining: warningRemainingQuota, | ||
total: totalQuota | ||
}, | ||
|
@@ -72,6 +80,7 @@ describe('User Menu component', () => { | |
const wrapper = getMountedWrapper( | ||
{ | ||
used: dangerQuota, | ||
remaining: dangerRemainingQuota, | ||
total: totalQuota | ||
}, | ||
|
@@ -84,6 +93,7 @@ describe('User Menu component', () => { | |
const wrapper = getMountedWrapper( | ||
{ | ||
used: basicQuota, | ||
remaining: basicRemainingQuota, | ||
total: 0 | ||
}, | ||
|
@@ -96,6 +106,7 @@ describe('User Menu component', () => { | |
const wrapper = getMountedWrapper( | ||
{ | ||
used: dangerQuota, | ||
remaining: dangerRemainingQuota, | ||
total: 0 | ||
}, | ||
|
@@ -108,6 +119,7 @@ describe('User Menu component', () => { | |
const wrapper = getMountedWrapper( | ||
{ | ||
used: dangerQuota, | ||
remaining: dangerRemainingQuota, | ||
total: totalQuota | ||
}, | ||
email, | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -65,10 +65,11 @@ exports[`User Menu component > when quota and no email is set > renders a naviga | |
<li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"> | ||
<avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper oc-py-xs"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> | ||
<!--v-if--> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs"> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs"> | ||
<oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub> | ||
<div> | ||
<p class="oc-my-rm"><span class="quota-information-text">300 B of 1 kB used (30%)</span></p> | ||
<p class="oc-my-rm"><span class="quota-information-text">300 B of 1 kB used</span></p> | ||
<p class="oc-my-rm"><span class="quota-information-details-text oc-text-xsmall oc-text-muted">30% used, 700 B remaining</span></p> | ||
<oc-progress-stub class="quota-information-progress-bar" max="100" size="small" variation="primary" value="30"></oc-progress-stub> | ||
</div> | ||
</div></span> | ||
|
@@ -98,10 +99,11 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a | |
<oc-list-stub data-v-08f1b1e7="" class="user-menu-list"> | ||
<li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"> | ||
<avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs"> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs"> | ||
<oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub> | ||
<div> | ||
<p class="oc-my-rm"><span class="quota-information-text">810 B of 1 kB used (81%)</span></p> | ||
<p class="oc-my-rm"><span class="quota-information-text">810 B of 1 kB used</span></p> | ||
<p class="oc-my-rm"><span class="quota-information-details-text oc-text-xsmall oc-text-muted">81% used, 190 B remaining</span></p> | ||
<oc-progress-stub class="quota-information-progress-bar" max="100" size="small" variation="warning" value="81"></oc-progress-stub> | ||
</div> | ||
</div></span> | ||
|
@@ -131,10 +133,11 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota | |
<oc-list-stub data-v-08f1b1e7="" class="user-menu-list"> | ||
<li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"> | ||
<avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs"> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs"> | ||
<oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub> | ||
<div> | ||
<p class="oc-my-rm"><span class="quota-information-text">910 B of 1 kB used (91%)</span></p> | ||
<p class="oc-my-rm"><span class="quota-information-text">910 B of 1 kB used</span></p> | ||
<p class="oc-my-rm"><span class="quota-information-details-text oc-text-xsmall oc-text-muted">91% used, 90 B remaining</span></p> | ||
<oc-progress-stub class="quota-information-progress-bar" max="100" size="small" variation="danger" value="91"></oc-progress-stub> | ||
</div> | ||
</div></span> | ||
|
@@ -164,10 +167,11 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota | |
<oc-list-stub data-v-08f1b1e7="" class="user-menu-list"> | ||
<li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"> | ||
<avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs"> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs"> | ||
<oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub> | ||
<div> | ||
<p class="oc-my-rm"><span class="quota-information-text">300 B of 1 kB used (30%)</span></p> | ||
<p class="oc-my-rm"><span class="quota-information-text">300 B of 1 kB used</span></p> | ||
<p class="oc-my-rm"><span class="quota-information-details-text oc-text-xsmall oc-text-muted">30% used, 700 B remaining</span></p> | ||
<oc-progress-stub class="quota-information-progress-bar" max="100" size="small" variation="primary" value="30"></oc-progress-stub> | ||
</div> | ||
</div></span> | ||
|
@@ -197,10 +201,13 @@ exports[`User Menu component > when quota is not defined > renders no percentag | |
<oc-list-stub data-v-08f1b1e7="" class="user-menu-list"> | ||
<li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"> | ||
<avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs"> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs"> | ||
<oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub> | ||
<div> | ||
<p class="oc-my-rm"><span class="quota-information-text">910 B used</span></p> | ||
<p class="oc-my-rm"> | ||
<!--v-if--> | ||
</p> | ||
<!--v-if--> | ||
</div> | ||
</div></span> | ||
|
@@ -230,10 +237,13 @@ exports[`User Menu component > when quota is unlimited > renders no percentag of | |
<oc-list-stub data-v-08f1b1e7="" class="user-menu-list"> | ||
<li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s"> | ||
<avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs"> | ||
<div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs"> | ||
<oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub> | ||
<div> | ||
<p class="oc-my-rm"><span class="quota-information-text">300 B used</span></p> | ||
<p class="oc-my-rm"> | ||
<!--v-if--> | ||
</p> | ||
<!--v-if--> | ||
</div> | ||
</div></span> | ||
|