Skip to content

Commit 9ceab8a

Browse files
AlexAndBearAlexAndBear
authored
Reorganize account page (#11440)
1 parent 22aaf2f commit 9ceab8a

File tree

13 files changed

+472
-244
lines changed

13 files changed

+472
-244
lines changed

‎packages/design-system/changelog/unreleased/enhancement-redesign-account-page

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Enhancement: Redesign account page
2+
3+
We've redesigned the account page to make the overall experience more intuitive and user-friendly.
4+
5+
https://github.com/owncloud/web/pull/11440
6+
https://github.com/owncloud/web/issues/11372

‎packages/design-system/src/components/OcCheckbox/OcCheckbox.vue

+11-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
:class="classes"
99
:value="option"
1010
:disabled="disabled"
11+
:aria-label="labelHidden ? label : null"
1112
@keydown.enter="keydownEnter"
1213
/>
13-
<label :for="id" :class="labelClasses" v-text="label" />
14+
<label v-if="!labelHidden" :for="id" :class="labelClasses" v-text="label" />
1415
</span>
1516
</template>
1617

@@ -19,6 +20,7 @@ import { defineComponent, PropType } from 'vue'
1920
import { isEqual } from 'lodash-es'
2021
import { getSizeClass } from '../../utils/sizeClasses'
2122
import uniqueId from '../../utils/uniqueId'
23+
2224
/**
2325
* A checkbox input element. The checkbox is either checked or unchecked.
2426
*/
@@ -75,6 +77,13 @@ export default defineComponent({
7577
required: true,
7678
default: null
7779
},
80+
/**
81+
* Hide the label of the Checkbox
82+
*/
83+
labelHidden: {
84+
type: Boolean,
85+
default: false
86+
},
7887
/**
7988
* Is the label of the Checkbox visually hidden?
8089
**/
@@ -238,7 +247,7 @@ label > .oc-checkbox + span {
238247
<oc-checkbox :value="true" label="Medium checkbox (default)"/>
239248
</div>
240249
<div>
241-
<oc-checkbox size="large" label="Large checkbox" />
250+
<oc-checkbox size="large" label="Large checkbox"/>
242251
</div>
243252
</section>
244253
</template>

‎packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
1616
<thead class="oc-thead">
1717
<tr tabindex="-1" class="oc-table-header-row">
1818
<th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-select oc-pl-s" style="top: 0px;">
19-
<div><span class="oc-table-thead-content"><oc-checkbox-stub id="oc-checkbox-1" disabled="false" modelvalue="false" label="Select all spaces" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub></span></div>
19+
<div><span class="oc-table-thead-content"><oc-checkbox-stub id="oc-checkbox-1" disabled="false" modelvalue="false" label="Select all spaces" labelhidden="false" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub></span></div>
2020
</th>
2121
<th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
2222
<div><span class="oc-table-thead-content header-text"></span></div>
@@ -60,7 +60,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
6060
<tbody class="has-item-context-menu">
6161
<tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
6262
<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
63-
<oc-checkbox-stub id="oc-checkbox-2" disabled="false" modelvalue="false" option="undefined" label="Select 1 Some space" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
63+
<oc-checkbox-stub id="oc-checkbox-2" disabled="false" modelvalue="false" option="undefined" label="Select 1 Some space" labelhidden="false" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
6464
</td>
6565
<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
6666
<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="1 Some space">1 Some space</span></td>
@@ -86,7 +86,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
8686
</tr>
8787
<tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
8888
<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
89-
<oc-checkbox-stub id="oc-checkbox-3" disabled="false" modelvalue="false" option="undefined" label="Select 2 Another space" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
89+
<oc-checkbox-stub id="oc-checkbox-3" disabled="false" modelvalue="false" option="undefined" label="Select 2 Another space" labelhidden="false" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
9090
</td>
9191
<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
9292
<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="2 Another space">2 Another space</span></td>

‎packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -74,5 +74,6 @@ export type ExtensionPoint<T extends Extension> = {
7474
defaultExtensionId?: string
7575
userPreference?: {
7676
label: string
77+
description?: string
7778
}
7879
}

‎packages/web-runtime/src/components/Account/AccountTable.vue

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="account-table">
3+
<slot name="header" :title="title">
4+
<h2 class="account-table-title" v-text="title" />
5+
</slot>
6+
<oc-table-simple>
7+
<oc-thead class="oc-invisible-sr">
8+
<oc-tr>
9+
<oc-th v-for="field in fields" :key="field">{{ field }}</oc-th>
10+
</oc-tr>
11+
</oc-thead>
12+
<oc-tbody>
13+
<slot />
14+
</oc-tbody>
15+
</oc-table-simple>
16+
</div>
17+
</template>
18+
19+
<script lang="ts">
20+
import { defineComponent } from 'vue'
21+
22+
export default defineComponent({
23+
name: 'AccountTable',
24+
props: {
25+
title: {
26+
type: String,
27+
required: true
28+
},
29+
fields: {
30+
type: Array<String>,
31+
required: true
32+
}
33+
}
34+
})
35+
</script>
36+
37+
<style lang="scss">
38+
@media (max-width: 800px) {
39+
.account-table {
40+
tr {
41+
display: block;
42+
padding-bottom: var(--oc-space-xsmall);
43+
height: 100% !important;
44+
}
45+
46+
td {
47+
display: block !important;
48+
width: 100% !important;
49+
padding-top: var(--oc-space-small);
50+
padding-bottom: var(--oc-space-small);
51+
}
52+
53+
h2 {
54+
color: var(--oc-color-text-muted);
55+
font-size: var(--oc-font-size-large);
56+
font-weight: var(--oc-font-weight-default);
57+
}
58+
59+
.oc-select {
60+
width: 100%;
61+
}
62+
}
63+
}
64+
65+
.account-table {
66+
.oc-select {
67+
min-width: 200px;
68+
}
69+
70+
tr {
71+
border-top: 0;
72+
border-bottom: 1px solid var(--oc-color-border);
73+
height: var(--oc-size-height-table-row);
74+
}
75+
76+
td:first-of-type {
77+
width: 20%;
78+
}
79+
80+
td:not(:first-of-type) {
81+
color: var(--oc-color-text-muted);
82+
83+
p {
84+
color: var(--oc-color-text-muted);
85+
}
86+
}
87+
88+
td:nth-child(3) {
89+
display: flex;
90+
justify-content: end;
91+
align-items: center;
92+
min-height: var(--oc-size-height-table-row);
93+
}
94+
}
95+
</style>

‎packages/web-runtime/src/components/Account/GdprExport.vue

+19-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
2-
<div class="oc-mb-l">
3-
<p v-text="$gettext('Request a personal data export according to §20 GDPR.')" />
2+
<div>
43
<span v-if="loading">
54
<oc-spinner />
65
</span>
@@ -9,29 +8,39 @@
98
class="oc-flex oc-flex-middle"
109
data-testid="export-in-process"
1110
>
12-
<oc-icon name="time" fill-type="line" size="small" class="oc-mr-s" />
13-
<span v-text="$gettext('Export is being processed. This can take up to 24 hours.')" />
11+
<div class="oc-flex oc-flex-middle">
12+
<oc-icon name="time" fill-type="line" size="small" />
13+
<span
14+
class="oc-ml-xs"
15+
v-text="$gettext('Export is being processed. This can take up to 24 hours.')"
16+
/>
17+
</div>
1418
</span>
1519
<div v-else class="oc-flex">
1620
<oc-button
17-
appearance="outline"
21+
appearance="raw"
1822
variation="primary"
1923
data-testid="request-export-btn"
2024
class="oc-mr-s"
2125
@click="requestExport"
2226
>
23-
<span v-text="$gettext('Request new export')" />
27+
<div class="oc-flex oc-flex-middle">
28+
<oc-icon name="question-answer" fill-type="line" size="small" />
29+
<span class="oc-ml-xs" v-text="$gettext('Request new export')" />
30+
</div>
2431
</oc-button>
2532
<oc-button
2633
v-if="exportFile"
27-
appearance="outline"
34+
v-oc-tooltip="$gettext('Latest export from: %{date}', { date: exportDate })"
35+
appearance="raw"
2836
variation="primary"
2937
data-testid="download-export-btn"
3038
@click="downloadExport"
3139
>
32-
<oc-icon name="download" fill-type="line" size="small" />
33-
<span v-text="$gettext('Download latest export')" />
34-
<span v-text="`(${exportDate})`" />
40+
<div class="oc-flex oc-flex-middle">
41+
<oc-icon name="download" fill-type="line" size="small" />
42+
<span class="oc-ml-xs" v-text="$gettext('Download')" />
43+
</div>
3544
</oc-button>
3645
</div>
3746
</div>

‎packages/web-runtime/src/layouts/Application.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,8 @@ export default defineComponent({
204204
multiple: false,
205205
defaultExtensionId: defaultProgressBarExtension.id,
206206
userPreference: {
207-
label: $gettext('Global progress bar')
207+
label: $gettext('Global progress bar'),
208+
description: $gettext('Customize your progress bar')
208209
}
209210
}
210211
const extensionPoints = computed<ExtensionPoint<Extension>[]>(() => [progressBarExtensionPoint])

0 commit comments

Comments
 (0)