Skip to content

Commit 7cf0c6c

Browse files
nfebenfebe
committed
Improve sharing flow
Resolves: #26691 Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
1 parent bef4053 commit 7cf0c6c

4 files changed

Lines changed: 313 additions & 14 deletions

File tree

‎apps/files_sharing/src/components/SharingEntry.vue‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,22 @@
2929
:menu-position="'left'"
3030
:url="share.shareWithAvatar" />
3131

32-
<component :is="share.shareWithLink ? 'a' : 'div'"
33-
:title="tooltip"
34-
:aria-label="tooltip"
35-
:href="share.shareWithLink"
36-
class="sharing-entry__desc">
37-
<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
38-
<p v-if="hasStatus">
39-
<span>{{ share.status.icon || '' }}</span>
40-
<span>{{ share.status.message || '' }}</span>
41-
</p>
42-
</component>
32+
<div class="sharing-entry__summary" @click="openSharingDetails">
33+
<component :is="share.shareWithLink ? 'a' : 'div'"
34+
:title="tooltip"
35+
:aria-label="tooltip"
36+
:href="share.shareWithLink"
37+
class="sharing-entry__desc">
38+
<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
39+
<p v-if="hasStatus">
40+
<span>{{ share.status.icon || '' }}</span>
41+
<span>{{ share.status.message || '' }}</span>
42+
</p>
43+
</component>
44+
<select class="share-select">
45+
<option>Can edit</option>
46+
</select>
47+
</div>
4348
<NcActions menu-align="right"
4449
class="sharing-entry__actions"
4550
@close="onMenuClose">
@@ -456,6 +461,9 @@ export default {
456461
onMenuClose() {
457462
this.onNoteSubmit()
458463
},
464+
openSharingDetails() {
465+
this.$emit('open-sharing-details');
466+
},
459467
},
460468
}
461469
</script>
@@ -469,7 +477,9 @@ export default {
469477
display: flex;
470478
flex-direction: column;
471479
justify-content: space-between;
480+
// border: 1px solid red;
472481
padding: 8px;
482+
padding-bottom: 0;
473483
line-height: 1.2em;
474484
p {
475485
color: var(--color-text-maxcontrast);
@@ -481,5 +491,28 @@ export default {
481491
&__actions {
482492
margin-left: auto;
483493
}
494+
495+
&__summary {
496+
padding: 0 !important;
497+
display: flex;
498+
flex-direction: column;
499+
.share-select {
500+
appearance: none;
501+
-webkit-appearance: none;
502+
-moz-appearance: none;
503+
border: none;
504+
margin: 0;
505+
outline: none;
506+
font-size: 12px;
507+
height: auto;
508+
width: unset;
509+
min-height: initial;
510+
font-weight: bold;
511+
color: var(--color-primary-element);
512+
}
513+
}
514+
484515
}
516+
517+
485518
</style>

‎apps/files_sharing/src/views/SharingDetailsTab.vue‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<template>
2+
<div class="sharingTabDetailsView">
3+
<div class="sharingTabDetailsView__header">
4+
<span>
5+
<FolderIcon :size="40" />
6+
</span>
7+
<span>
8+
<h1>{{ t('file_sharing', 'Edit Share Link') }}</h1>
9+
<small>Dummy: Important documents</small>
10+
</span>
11+
</div>
12+
<div class="sharingTabDetailsView__quick-permissions">
13+
<ul>
14+
<li> <span>
15+
<ViewIcon />
16+
</span> View only</li>
17+
<li> <span>
18+
<EditIcon />
19+
</span> Edit</li>
20+
<li> <span>
21+
<UploadIcon />
22+
</span> File drop</li>
23+
</ul>
24+
</div>
25+
<div class="sharingTabDetailsView__advanced-control">
26+
<button @click="advancedSectionAccordionExpanded = !advancedSectionAccordionExpanded">
27+
Advanced Settings
28+
<span>
29+
<MenuDownIcon />
30+
</span>
31+
</button>
32+
</div>
33+
<div v-if="advancedSectionAccordionExpanded" class="sharingTabDetailsView__advanced">
34+
<section>
35+
<NcTextField :value.sync="noteToRecipient" :label="t('file_sharing', 'Note to recipient')"
36+
:label-visible="true" :show-trailing-button="noteToRecipient !== ''"
37+
@trailing-button-click="noteToRecipient = ''">
38+
</NcTextField>
39+
<NcCheckboxRadioSwitch :checked.sync="setPassword">{{ t('file_sharing', 'Set password') }}
40+
</NcCheckboxRadioSwitch>
41+
<NcInputField :label="t('file_sharing', 'Password')">
42+
</NcInputField>
43+
44+
<NcCheckboxRadioSwitch :checked.sync="setExpirationDate">{{ t('file_sharing', 'Set expiration date') }}
45+
</NcCheckboxRadioSwitch>
46+
<NcInputField :value.sync="expirationDate" :label="t('file_sharing', 'Expiration date')">
47+
</NcInputField>
48+
<NcCheckboxRadioSwitch :checked.sync="hideDownload">{{ t('file_sharing', 'Hide download') }}
49+
</NcCheckboxRadioSwitch>
50+
<NcInputField :value.sync="shareLabel" :label-visible="true" :label="t('file_sharing', 'Share label')">
51+
</NcInputField>
52+
</section>
53+
</div>
54+
55+
<div class="sharingTabDetailsView__footer">
56+
<a href="">
57+
<CloseIcon />
58+
Delete link
59+
</a>
60+
<div class="button-group">
61+
<NcButton @click="$emit('close-sharing-details')">{{ t('file_sharing', 'Cancel') }}</NcButton>
62+
<NcButton>{{ t('file_sharing', 'Share & copy link') }}</NcButton>
63+
</div>
64+
</div>
65+
</div>
66+
</template>
67+
68+
<script>
69+
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
70+
import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
71+
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
72+
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
73+
import FolderIcon from 'vue-material-design-icons/Folder.vue'
74+
import CloseIcon from 'vue-material-design-icons/Close.vue'
75+
import EditIcon from 'vue-material-design-icons/Pencil.vue'
76+
import ViewIcon from 'vue-material-design-icons/Eye.vue'
77+
import UploadIcon from 'vue-material-design-icons/Upload.vue'
78+
import MenuDownIcon from 'vue-material-design-icons/MenuDown.vue'
79+
80+
export default {
81+
name: 'SharingDetailsTab',
82+
components: {
83+
NcButton,
84+
NcInputField,
85+
NcTextField,
86+
NcCheckboxRadioSwitch,
87+
FolderIcon,
88+
CloseIcon,
89+
EditIcon,
90+
ViewIcon,
91+
UploadIcon,
92+
MenuDownIcon,
93+
},
94+
data() {
95+
return {
96+
setPassword: false,
97+
password: '',
98+
noteToRecipient: '',
99+
setExpirationDate: false,
100+
expirationDate: '',
101+
hideDownload: false,
102+
shareLabel: '',
103+
advancedSectionAccordionExpanded: false,
104+
};
105+
},
106+
methods: {
107+
},
108+
mounted() {
109+
}
110+
};
111+
</script>
112+
113+
<style lang="scss" scoped>
114+
.sharingTabDetailsView {
115+
width: 96%;
116+
margin: 0 auto;
117+
118+
&__header {
119+
display: flex;
120+
align-items: center;
121+
justify-content: left;
122+
width: 100%;
123+
margin-bottom: 0.2em;
124+
box-sizing: border-box;
125+
126+
span:nth-child(1) {
127+
align-items: center;
128+
justify-content: center;
129+
color: var(--color-primary-element);
130+
padding: 0.1em;
131+
}
132+
133+
span:nth-child(2) {
134+
display: flex;
135+
flex-direction: column;
136+
justify-content: left;
137+
align-items: flex-start;
138+
text-align: left;
139+
140+
h1 {
141+
margin: 0;
142+
font-size: 16px;
143+
}
144+
145+
small {
146+
font-size: 12px;
147+
margin-top: 0;
148+
color: rgb(65, 62, 62);
149+
}
150+
}
151+
}
152+
153+
154+
&__quick-permissions {
155+
display: flex;
156+
justify-content: center;
157+
margin-bottom: 0.2em;
158+
159+
ul {
160+
list-style: none;
161+
margin: 0;
162+
border: 2px solid #ddd;
163+
text-align: left;
164+
width: 100%;
165+
box-sizing: border-box;
166+
167+
li {
168+
padding: 0.5em;
169+
display: flex;
170+
flex-direction: row;
171+
border-bottom: 1px solid #ddd;
172+
173+
span:nth-child(1) {
174+
align-items: center;
175+
justify-content: center;
176+
color: var(--color-primary-element);
177+
padding: 0.1em;
178+
}
179+
180+
&:last-child {
181+
border-bottom: none;
182+
}
183+
}
184+
}
185+
}
186+
187+
&__advanced-control {
188+
button {
189+
display: flex;
190+
border: none;
191+
background-color: transparent;
192+
color: inherit;
193+
font: inherit;
194+
font-weight: bolder;
195+
line-height: normal;
196+
overflow: visible;
197+
text-align: inherit;
198+
text-transform: none;
199+
-webkit-appearance: none;
200+
-moz-appearance: none;
201+
appearance: none;
202+
cursor: pointer;
203+
204+
&:focus {
205+
outline: none;
206+
}
207+
}
208+
209+
}
210+
211+
&__advanced {
212+
margin-bottom: 0.5em;
213+
214+
section {
215+
input {
216+
border-radius: 0 !important;
217+
}
218+
}
219+
}
220+
221+
&__footer {
222+
display: flex;
223+
flex-direction: column;
224+
justify-content: space-between;
225+
align-items: flex-start;
226+
227+
a {
228+
display: flex;
229+
align-items: center;
230+
color: rgb(223, 7, 7);
231+
text-decoration: underline;
232+
font-size: 16px;
233+
}
234+
235+
.button-group {
236+
display: flex;
237+
justify-content: space-between;
238+
width: 100%;
239+
margin-top: 16px;
240+
241+
button {
242+
flex: 1;
243+
margin-left: 16px;
244+
245+
&:first-child {
246+
margin-left: 0;
247+
}
248+
}
249+
}
250+
}
251+
}
252+
</style>

‎apps/files_sharing/src/views/SharingList.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
:file-info="fileInfo"
2828
:share="share"
2929
:is-unique="isUnique(share)"
30-
@remove:share="removeShare" />
30+
@remove:share="removeShare"
31+
@open-sharing-details="$emit('open-sharing-details')"/>
3132
</ul>
3233
</template>
3334

0 commit comments

Comments
 (0)