Skip to content

Commit

Permalink
put remaining parts together to make it work
Browse files Browse the repository at this point in the history
  • Loading branch information
@JammingBen
JammingBen committed Oct 18, 2023
1 parent 76b4769 commit 7ef2380
Show file tree
Hide file tree
Showing 26 changed files with 387 additions and 280 deletions.
1 change: 0 additions & 1 deletion packages/design-system/src/components/OcButton/OcButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,6 @@ export default defineComponent({
&-raw-inverse {
background-color: transparent;
border-style: none;
font-size: var(--oc-font-size-medium);
font-weight: normal;
min-height: 0;
padding: 0;
Expand Down
53 changes: 24 additions & 29 deletions packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@
:key="resource.getDomSelector() + resource.status"
class="oc-text-nowrap oc-flex oc-flex-middle oc-flex-right"
>
<oc-icon v-if="getShowSynchedIcon(resource)" name="cloudy-2" v-oc-tooltip="syncHint" />
<oc-icon
v-if="getShowSynchedIcon(resource)"
v-oc-tooltip="$gettext('Synced with your devices')"
name="cloudy-2"
/>
</div>
</template>
<template #contextMenu="{ resource }">
Expand All @@ -49,26 +53,14 @@
/>
</template>
<template #quickActions="{ resource }">
<!-- Provide different button depending on share being hidden/visible -->
<!-- 'decline-share' should be turned into "hide", and should show a modal if the share-to-be-hidden is already accepted -->
<oc-button
v-if="getShowAcceptButton(resource)"
size="small"
variation="success"
class="file-row-share-status-accept"
@click.stop="triggerAction('accept-share', { space: null, resources: [resource] })"
appearance="raw"
:class="['oc-ml-s', 'oc-p-s', hideShareAction.class]"
@click.stop="hideShareAction.handler({ space: null, resources: [resource] })"
>
<oc-icon size="small" name="check" />
<span v-translate>Enable sync</span>
</oc-button>
<oc-button
v-if="getShowDeclineButton(resource)"
size="small"
class="file-row-share-decline oc-ml-s"
@click.stop="triggerAction('hide-share', { space: null, resources: [resource] })"
>
<oc-icon size="small" name="spam-3" fill-type="line" />
<span v-translate>Hide</span>
<oc-icon size="small" :name="resource.hidden ? 'eye' : 'eye-off'" fill-type="line" />
<span>{{ hideShareAction.label({ space: null, resources: [resource] }) }}</span>
</oc-button>
</template>
<template #footer>
Expand Down Expand Up @@ -97,13 +89,12 @@
</template>

<script lang="ts">
import { ResourceTable } from '@ownclouders/web-pkg'
import { defineComponent, PropType } from 'vue'
import { ResourceTable, useFileActions, useFileActionsToggleHideShare } from '@ownclouders/web-pkg'
import { computed, defineComponent, PropType, unref } from 'vue'
import { debounce } from 'lodash-es'
import { ImageDimension, ImageType } from '@ownclouders/web-pkg'
import { VisibilityObserver } from '@ownclouders/web-pkg'
import { mapActions } from 'vuex'
import { useFileActions } from '@ownclouders/web-pkg'
import { SortDir, useStore, useGetMatchingSpace } from '@ownclouders/web-pkg'
import { createLocationSpaces } from '@ownclouders/web-pkg'
import ListInfo from '../../components/FilesList/ListInfo.vue'
Expand Down Expand Up @@ -200,6 +191,10 @@ export default defineComponent({
const store = useStore()
const { getMatchingSpace } = useGetMatchingSpace()
const { triggerDefaultAction } = useFileActions()
const { actions: hideShareActions } = useFileActionsToggleHideShare({ store })
const hideShareAction = computed(() => unref(hideShareActions)[0])
const resourceTargetRouteCallback = ({
path,
fileId,
Expand All @@ -211,14 +206,11 @@ export default defineComponent({
)
}
// TODO: Pipe through gettext
const syncHint = 'Synced with your devices'
return {
...useFileActions(),
triggerDefaultAction,
hideShareAction,
resourceTargetRouteCallback,
...useSelectedResources({ store }),
syncHint,
getMatchingSpace
}
},
Expand Down Expand Up @@ -280,13 +272,13 @@ export default defineComponent({
onExit: debounced.cancel
})
},
getShowSynchedIcon(resource) {
getShowSynchedIcon(resource: Resource) {
return resource.status === ShareStatus.accepted
},
getShowAcceptButton(resource) {
getShowAcceptButton(resource: Resource) {
return resource.status === ShareStatus.declined || resource.status === ShareStatus.pending
},
getShowDeclineButton(resource) {
getShowDeclineButton(resource: Resource) {
return resource.status === ShareStatus.accepted || resource.status === ShareStatus.pending
},
toggleShowMore() {
Expand All @@ -300,4 +292,7 @@ export default defineComponent({
.files-empty {
height: auto;
}
.oc-files-actions-hide-share-trigger:hover {
background-color: var(--oc-color-background-secondary);
}
</style>
130 changes: 51 additions & 79 deletions packages/web-app-files/src/views/shares/SharedWithMe.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,50 +8,49 @@
</app-bar>
<app-loading-spinner v-if="areResourcesLoading" />
<template v-else>
<!-- TODO: Make styling final -->
<div class="button-group oc-button-group oc-m-m">
<oc-button
:appearance="areHiddenFilesShown ? 'raw' : 'filled'"
class="oc-px-m"
@click="setAreHiddenFilesShown(false)"
>
Shares
</oc-button>
<oc-button
:appearance="areHiddenFilesShown ? 'filled' : 'raw'"
class="oc-px-m"
@click="setAreHiddenFilesShown(true)"
>
Hidden Shares
</oc-button>
<div class="share-visibility-filter oc-flex oc-m-m">
<div class="oc-mr-m oc-flex oc-flex-middle">
<oc-icon name="filter-2" class="oc-mr-xs" />
<span v-text="$gettext('Filter:')" />
</div>
<item-filter-inline
filter-name="share-visibility"
:filter-options="visibilityOptions"
@toggle-filter="setAreHiddenFilesShown"
/>
</div>

<shared-with-me-section
v-if="!areHiddenFilesShown"
id="files-shared-with-me-visible-view"
:display-thumbnails="displayThumbnails"
:file-list-header-y="fileListHeaderY"
:items="visibleShares"
:items="items"
:resource-clickable="true"
:show-more-toggle="true"
:side-bar-open="sideBarOpen"
:sort-by="acceptedSortBy"
:sort-dir="acceptedSortDir"
:sort-handler="acceptedHandleSort"
:sort-by="sortBy"
:sort-dir="sortDir"
:sort-handler="handleSort"
:title="shareSectionTitle"
:empty-message="$gettext('No shares')"
:grouping-settings="groupingSettings"
/>
<shared-with-me-section
v-if="areHiddenFilesShown"
id="files-shared-with-me-hidden-view"
:display-thumbnails="displayThumbnails"
:file-list-header-y="fileListHeaderY"
:items="hiddenShares"
:resource-clickable="false"
:items="items"
:resource-clickable="true"
:show-more-toggle="true"
:side-bar-open="sideBarOpen"
:sort-by="acceptedSortBy"
:sort-dir="acceptedSortDir"
:sort-handler="acceptedHandleSort"
:sort-by="sortBy"
:sort-dir="sortDir"
:sort-handler="handleSort"
:title="shareSectionTitle"
:empty-message="$gettext('No hidden shares')"
:grouping-settings="groupingSettings"
/>
</template>
</files-view-wrapper>
Expand All @@ -62,16 +61,15 @@
<script lang="ts">
import { useResourcesViewDefaults } from '../../composables'
import { AppLoadingSpinner } from '@ownclouders/web-pkg'
import { AppBar } from '@ownclouders/web-pkg'
import { AppLoadingSpinner, InlineFilterOption } from '@ownclouders/web-pkg'
import { AppBar, ItemFilterInline } from '@ownclouders/web-pkg'
import SharedWithMeSection from '../../components/Shares/SharedWithMeSection.vue'
import { ShareStatus } from '@ownclouders/web-client/src/helpers/share'
import { computed, defineComponent, ref, unref } from 'vue'
import { Resource } from '@ownclouders/web-client'
import SideBar from '../../components/SideBar/SideBar.vue'
import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
import { useGetMatchingSpace, useSort } from '@ownclouders/web-pkg'
// import { useGroupingSettings } from '@ownclouders/web-pkg'
import { useGroupingSettings } from '@ownclouders/web-pkg'
import SharesNavigation from 'web-app-files/src/components/AppBar/SharesNavigation.vue'
import { useGettext } from 'vue3-gettext'
import { useStore } from '@ownclouders/web-pkg'
Expand All @@ -83,7 +81,8 @@ export default defineComponent({
AppBar,
AppLoadingSpinner,
SharedWithMeSection,
SideBar
SideBar,
ItemFilterInline
},
setup() {
Expand All @@ -108,43 +107,25 @@ export default defineComponent({
return areHiddenFilesShown.value ? $gettext('Hidden Shares') : $gettext('Shares')
})
const setAreHiddenFilesShown = (value: boolean) => {
areHiddenFilesShown.value = value
}
const visibilityOptions = computed(() => [
{ name: 'visible', label: $gettext('Shares') },
{ name: 'hidden', label: $gettext('Hidden Shares') }
])
const visibleShares = computed(() => unref(storeItems).filter((r) => r.hide !== 'true'))
const hiddenShares = computed(() => unref(storeItems).filter((r) => r.hide === 'true'))
const setAreHiddenFilesShown = (value: InlineFilterOption) => {
areHiddenFilesShown.value = value.name === 'hidden'
store.dispatch('Files/resetFileSelection')
}
// TODO: Adapt for show/hidden state
const accepted = computed(() =>
unref(storeItems).filter((item) => item.status === ShareStatus.accepted)
)
const {
sortBy: acceptedSortBy,
sortDir: acceptedSortDir,
items: acceptedItems,
handleSort: acceptedHandleSort
} = useSort({
items: accepted,
fields: sortFields,
sortByQueryName: 'accepted-sort-by',
sortDirQueryName: 'accepted-sort-dir'
const visibleShares = computed(() => unref(storeItems).filter((r) => !r.hidden))
const hiddenShares = computed(() => unref(storeItems).filter((r) => r.hidden))
const currentItems = computed(() => {
return unref(areHiddenFilesShown) ? unref(hiddenShares) : unref(visibleShares)
})
// declined shares
const declined = computed(() =>
unref(storeItems).filter((item) => item.status === ShareStatus.declined)
)
const {
sortBy: declinedSortBy,
sortDir: declinedSortDir,
items: declinedItems,
handleSort: declinedHandleSort
} = useSort({
items: declined,
fields: sortFields,
sortByQueryName: 'declined-sort-by',
sortDirQueryName: 'declined-sort-dir'
const { sortBy, sortDir, items, handleSort } = useSort({
items: currentItems,
fields: sortFields
})
const { getMatchingSpace } = useGetMatchingSpace()
Expand Down Expand Up @@ -173,35 +154,26 @@ export default defineComponent({
scrollToResourceFromRoute,
areHiddenFilesShown,
visibilityOptions,
displayThumbnails,
hiddenShares,
setAreHiddenFilesShown,
shareSectionTitle,
visibleShares,
// TODO: Add sorting via useSort
acceptedHandleSort,
acceptedSortBy,
acceptedSortDir,
acceptedItems
handleSort,
sortBy,
sortDir,
items,
// TODO: Renable for hidden/shown shares
// CERN
// ...useGroupingSettings({ sortBy: acceptedSortBy, sortDir: acceptedSortDir })
...useGroupingSettings({ sortBy: sortBy, sortDir: sortDir })
}
},
data: () => ({
ShareStatus
}),
async created() {
await this.loadResourcesTask.perform()
// TODO: Fix
// this.scrollToResourceFromRoute(
// [...this.acceptedItems, ...this.pendingItems, ...this.declinedItems],
// 'files-app-bar'
// )
this.scrollToResourceFromRoute(this.items, 'files-app-bar')
}
})
</script>
Loading

0 comments on commit 7ef2380

Please sign in to comment.