Skip to content

Commit

Permalink
Preparations with dummy content
Browse files Browse the repository at this point in the history
  • Loading branch information
Lukas Hirt committed Jul 1, 2019
1 parent 39c9482 commit 4fb2de4
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 34 deletions.
2 changes: 1 addition & 1 deletion apps/files/src/components/FileDetails.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<oc-app-side-bar class="uk-padding-small uk-overflow-auto" :disableAction="false" @close="close()">
<oc-app-side-bar class="uk-padding-small uk-overflow-auto uk-height-1-1" :disableAction="false" @close="close()">
<template slot="title" v-if="items.length === 1">
<div class="uk-inline">
<oc-icon :name="fileTypeIcon(items[0])" size="large" />
Expand Down
201 changes: 170 additions & 31 deletions apps/files/src/components/FileSharingSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,121 @@
</div>
<div v-else>
<oc-spinner v-if="sharesLoading"></oc-spinner>
<oc-accordion v-if="!sharesLoading" :multiple=true>
<oc-accordion-item v-if="owner" class="uk-open">
<span slot="title" v-translate>Owner(s)</span>
<template slot="content">
<oc-user
:avatar="owner.avatar"
:user-name="owner.name"
:display-name="owner.displayName"
:email="owner.email"
>
<template slot="properties">
<span v-translate>Owner</span>
</template>
</oc-user>
<template v-if="!sharesLoading">
<!-- <h4><translate>Owner</translate></h4>
<oc-user
:avatar="owner.avatar"
:user-name="owner.name"
:display-name="owner.displayName"
class="uk-margin-bottom"
>
<template slot="properties">
<span v-translate>{{ owner.email }}</span>
</template>
</oc-accordion-item>
</oc-user> -->
<section>
<h4>Collaborators (2)</h4>
<label class="oc-label"><translate>Invite new collaborators</translate></label>
<oc-autocomplete
v-model="selectedItem" :items="autocompleteResults" :itemsLoading="autocompleteInProgress"
:placeholder="$_ocCollaborationStatus_autocompletePlacholder" @update:input="onAutocompleteInput"
:filter="filterRecipients" id="oc-sharing-autocomplete" class="uk-margin-bottom"
>
<template v-slot:item="{item}">
<span>{{ buildRecipientDisplay(item) }}</span>
</template>
</oc-autocomplete>
<oc-accordion :multiple=true>
<oc-accordion-item class="uk-margin-small-bottom">
<template slot="title">
<oc-user
:avatar="owner.avatar"
user-name="Jane Doe"
display-name="Jane Doe"
>
<template slot="properties">
<span v-translate>Editor | Expires: July 4, 2019</span>
</template>
</oc-user>
</template>
<template slot="content">
<oc-grid gutter="small" class="uk-flex uk-flex-between uk-margin-small-bottom">
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Type</span>
<span>User</span>
</div>
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Status</span>
<span>Accepted</span>
</div>
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Shared from</span>
<span>Administrator</span>
</div>
</oc-grid>
<oc-grid gutter="small" class="uk-margin-bottom">
<div class="uk-width-1-1 uk-width-1-2@xl">
<label class="oc-label">Role</label>
<oc-button id="files-collaborators-role-button" class="uk-width-1-1">Editor</oc-button>
<p class="uk-text-meta uk-margin-remove">View, download and edit</p>
<oc-drop toggle="#files-collaborators-role-button" mode="click" :options="{ 'offset': 0 }" class="oc-autocomplete-dropdown">
<ul class="oc-autocomplete-suggestion-list">
<li v-for="(role, index) in roles" :key="index" class="oc-autocomplete-suggestion">
<span class="uk-text-bold">{{ role.name }}</span>
<p class="uk-text-meta uk-margin-remove">{{ role.description }}</p>
</li>
</ul>
</oc-drop>
</div>
<div class="uk-width-1-1 uk-width-1-2@xl">
<label class="oc-label">Expiration date <span class="uk-text-meta uk-remove-margin">(optional)</span></label>
<oc-text-input type="date" class="uk-width-1-1 oc-button-role">04 - 07 - 2019</oc-text-input>
</div>
</oc-grid>
<oc-button variation="primary" disabled>Save</oc-button>
<oc-button icon="delete" />
</template>
</oc-accordion-item>
<oc-accordion-item class="uk-margin-small-bottom">
<template slot="title">
<oc-user
:avatar="owner.avatar"
user-name="ownCloud"
display-name="ownCloud"
>
<template slot="properties">
<span v-translate>Co-Owner</span>
</template>
</oc-user>
</template>
<template slot="content">
<oc-grid gutter="small" class="uk-flex uk-flex-between uk-margin-small-bottom">
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Type</span>
<span>Group</span>
</div>
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Status</span>
<span>Accepted</span>
</div>
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Shared from</span>
<span>Administrator</span>
</div>
<div>
<oc-button icon="edit">Edit share</oc-button>
<oc-button icon="delete" />
</div>
</oc-grid>
</template>
</oc-accordion-item>
</oc-accordion>
</section>
</template>
<!-- <oc-accordion v-if="!sharesLoading" :multiple=true>
<oc-accordion-item class="uk-open">
<span slot="title" v-translate>Collaborators</span>
<template slot="content">
<oc-autocomplete v-model="selectedItem" :items="autocompleteResults" :itemsLoading="autocompleteInProgress"
:placeholder="$_ocCollaborationStatus_autocompletePlacholder" @update:input="onAutocompleteInput"
:filter="filterRecipients" id="oc-sharing-autocomplete">
<template v-slot:item="{item}">
<span>{{ buildRecipientDisplay(item) }}</span>
</template> </oc-autocomplete>
<ul class="uk-list">
<li v-for="(c, k) in shares" :key="k">
<oc-user
Expand Down Expand Up @@ -77,7 +167,7 @@
</ul>
</template>
</oc-accordion-item>
</oc-accordion>
</oc-accordion> -->
</div>
</div>
</template>
Expand All @@ -86,7 +176,7 @@
import { mapGetters, mapActions, mapState } from 'vuex'
export default {
title: ($gettext) => {
return $gettext('Sharing')
return $gettext('Collaborators')
},
name: 'FileSharingSidebar',
mounted () {
Expand Down Expand Up @@ -120,15 +210,21 @@ export default {
saving: false,
roles: {
viewer: { name: 'Viewer', description: 'Download and preview' },
editor: { name: 'Editor', description: 'Upload, edit, delete, download and preview' },
viewer: {
name: this.$gettext('Viewer'),
description: this.$gettext('Download and preview')
},
editor: {
name: this.$gettext('Editor'),
description: this.$gettext('Upload, edit, delete, download and preview')
},
coowner: {
name: 'Co-owner',
description: 'Share, upload, edit, delete, download and preview'
name: this.$gettext('Co-owner'),
description: this.$gettext('Share, upload, edit, delete, download and preview')
},
legacy: {
name: 'Legacy',
description: 'Yet unmapped combination of permissions'
customRole: {
name: this.$gettext('Custom role'),
description: this.$gettext('Set detailed permissions')
}
}
}
Expand All @@ -137,7 +233,7 @@ export default {
...mapGetters('Files', ['selectedFiles', 'shareOpen', 'shares', 'sharesError', 'sharesLoading']),
...mapState(['user']),
$_ocCollaborationStatus_autocompletePlacholder () {
return this.$gettext('Add name(s), email(s) or federation ID\'s')
return this.$gettext('Search by name, email or federation ID\'s')
},
owner () {
if (this.shares.length === 0) {
Expand Down Expand Up @@ -215,3 +311,46 @@ export default {
}
}
</script>

<style>
.uk-accordion-title .oc-avatar {
width: 50px;
}
.uk-accordion-title .uk-text-lead {
font-size: 16px;
font-weight: bold;
}
.uk-accordion-title .uk-inline > span {
font-size: 16px;
}
.oc-label {
display: block;
margin-bottom: 5px;
}
#files-collaborators-role-button {
padding: 0 10px;
text-align: left;
}
.oc-autocomplete-suggestion {
transition: background-color .3s, color .3s;
cursor: pointer;
}
.oc-autocomplete-suggestion:hover {
color: white;
background-color: #002966;
}
.oc-autocomplete-dropdown .uk-card {
padding: 0 !important;
}
.oc-autocomplete-suggestion:hover .uk-text-meta, .oc-autocomplete-suggestion-selected .uk-text-meta {
color: white;
}
</style>
2 changes: 1 addition & 1 deletion apps/files/src/components/FilesApp.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<oc-loader id="files-list-progress" v-if="loadingFolder"></oc-loader>
<file-list @toggle="toggleFileSelect" @FileAction="openFileActionBar" :fileData="activeFiles" @sideBarOpen="openSideBar"/>
</div>
<div class="uk-width-1-1 uk-width-medium@s uk-width-large@l" v-if="_sidebarOpen">
<div class="uk-width-1-1 uk-width-medium@s uk-width-1-3@l" v-if="_sidebarOpen" style="border-left: 1px solid #ccd4e0">
<file-details :items="selectedFiles" :starsEnabled="false" :checkboxEnabled="false" ref="fileDetails" @reload="$_ocFilesFolder_getFolder" @reset="resetFileSelection"/>
</div>
<oc-file-actions></oc-file-actions>
Expand Down
2 changes: 1 addition & 1 deletion apps/files/src/default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const appInfo = {
component: FileSharingSidebar,
quickAccess: {
icon: 'share',
ariaLabel: 'Share'
ariaLabel: 'Collaborators'
}
}
]
Expand Down

0 comments on commit 4fb2de4

Please sign in to comment.