Skip to content

Commit

Permalink
First attempt
Browse files Browse the repository at this point in the history
  • Loading branch information
Lukas Hirt committed Oct 16, 2019
1 parent 849c358 commit 467ab39
Show file tree
Hide file tree
Showing 3 changed files with 230 additions and 216 deletions.
145 changes: 83 additions & 62 deletions apps/files/src/components/FileList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,71 +16,89 @@
</oc-table-row>
</thead>
<oc-table-group>
<oc-table-row v-for="(item, index) in fileData" :key="index" :class="_rowClasses(item)" @click="selectRow(item, $event)" :id="'file-row-' + item.id">
<oc-table-cell>
<oc-checkbox class="uk-margin-small-left" @click.stop @change.native="$emit('toggle', item)" :value="selectedFiles.indexOf(item) >= 0" />
</oc-table-cell>
<oc-table-cell class="uk-padding-remove" v-if="!publicPage()">
<oc-star class="uk-display-block" @click.native.stop="toggleFileFavorite(item)" :shining="item.starred" />
</oc-table-cell>
<oc-table-cell class="uk-text-truncate">
<oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
:name="$_ocFileName(item)" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
:filename="item.name" :key="item.id"/>
<oc-spinner
v-if="$_actionInProgress(item)"
size="small"
:uk-tooltip="$_disabledActionTooltip(item)"
class="uk-margin-small-left"
/>
</oc-table-cell>
<oc-table-cell class="uk-text-meta uk-text-nowrap" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m' : _sidebarOpen }">
{{ item.size | fileSize }}
</oc-table-cell>
<oc-table-cell class="uk-text-meta uk-text-nowrap" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m' : _sidebarOpen }">
{{ formDateFromNow(item.mdate) }}
</oc-table-cell>
<oc-table-cell :class="{ 'uk-visible@s' : _sidebarOpen }" class="uk-position-relative">
<div class="uk-button-group uk-margin-small-right" :class="{ 'uk-visible@m' : !_sidebarOpen, 'uk-visible@xl' : _sidebarOpen }">
<oc-button
v-for="action in actions"
:key="action.ariaLabel"
@click.stop="action.handler(item, action.handlerData)"
:disabled="!action.isEnabled(item, parentFolder) || $_actionInProgress(item)"
:icon="action.icon"
:ariaLabel="action.ariaLabel"
:uk-tooltip="$_disabledActionTooltip(item)"
/>
</div>
<oc-button
:id="'files-file-list-action-button-small-resolution-' + index"
icon="more_vert"
:class="{ 'uk-hidden@m' : !_sidebarOpen, 'uk-visible@s uk-hidden@xl' : _sidebarOpen }"
:disabled="$_actionInProgress(item)"
:aria-label="'show-file-actions'"
@click.stop
/>
<oc-drop
v-if="!$_ocDialog_isOpen"
:toggle="'#files-file-list-action-button-small-resolution-' + index"
:options="{ offset: 0 }"
position="bottom-right"
<DynamicScroller
:items="fileData"
:min-item-size="70"
page-mode
class="uk-height-1-1 uk-width-1-1"
>
<template v-slot="{ item, index, active }">
<DynamicScrollerItem
:item="item"
:active="active"
:data-index="index"
:size-dependencies="[
item.name,
]"
>
<ul class="uk-list">
<li v-for="action in enabledActions(item)" :key="action.ariaLabel">
<oc-button
class="uk-width-1-1"
@click.native.stop="action.handler(item, action.handlerData)"
<oc-table-row :class="_rowClasses(item)" @click="selectRow(item, $event)" :id="'file-row-' + item.id">
<oc-table-cell>
<oc-checkbox class="uk-margin-small-left" @click.stop @change.native="$emit('toggle', item)" :value="selectedFiles.indexOf(item) >= 0" />
</oc-table-cell>
<oc-table-cell class="uk-padding-remove" v-if="!publicPage()">
<oc-star class="uk-display-block" @click.native.stop="toggleFileFavorite(item)" :shining="item.starred" />
</oc-table-cell>
<oc-table-cell class="uk-text-truncate">
<oc-file @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
:name="$_ocFileName(item)" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
:filename="item.name" :key="item.id"/>
<oc-spinner
v-if="$_actionInProgress(item)"
size="small"
:uk-tooltip="$_disabledActionTooltip(item)"
class="uk-margin-small-left"
/>
</oc-table-cell>
<oc-table-cell class="uk-text-meta uk-text-nowrap" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m' : _sidebarOpen }">
{{ item.size | fileSize }}
</oc-table-cell>
<oc-table-cell class="uk-text-meta uk-text-nowrap" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-visible@m' : _sidebarOpen }">
{{ formDateFromNow(item.mdate) }}
</oc-table-cell>
<oc-table-cell :class="{ 'uk-visible@s' : _sidebarOpen }" class="uk-position-relative">
<div class="uk-button-group uk-margin-small-right" :class="{ 'uk-visible@m' : !_sidebarOpen, 'uk-visible@xl' : _sidebarOpen }">
<oc-button
v-for="action in actions"
:key="action.ariaLabel"
@click.stop="action.handler(item, action.handlerData)"
:disabled="!action.isEnabled(item, parentFolder) || $_actionInProgress(item)"
:icon="action.icon"
:ariaLabel="action.ariaLabel"
:uk-tooltip="$_disabledActionTooltip(item)"
/>
</div>
<oc-button
:id="'files-file-list-action-button-small-resolution-' + index"
icon="more_vert"
:class="{ 'uk-hidden@m' : !_sidebarOpen, 'uk-visible@s uk-hidden@xl' : _sidebarOpen }"
:disabled="$_actionInProgress(item)"
:aria-label="'show-file-actions'"
@click.stop
/>
<oc-drop
v-if="!$_ocDialog_isOpen"
:toggle="'#files-file-list-action-button-small-resolution-' + index"
:options="{ offset: 0 }"
position="bottom-right"
>
{{ action.ariaLabel }}
</oc-button>
</li>
</ul>
</oc-drop>
</oc-table-cell>
</oc-table-row>
<ul class="uk-list">
<li v-for="action in enabledActions(item)" :key="action.ariaLabel">
<oc-button
class="uk-width-1-1"
@click.native.stop="action.handler(item, action.handlerData)"
:icon="action.icon"
:ariaLabel="action.ariaLabel"
>
{{ action.ariaLabel }}
</oc-button>
</li>
</ul>
</oc-drop>
</oc-table-cell>
</oc-table-row>
</DynamicScrollerItem>
</template>
</DynamicScroller>
</oc-table-group>
</oc-table>
</div>
Expand Down Expand Up @@ -122,14 +140,17 @@
</div>
</template>
<script>
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
import OcDialogPrompt from './ocDialogPrompt.vue'
import { mapGetters, mapActions, mapState } from 'vuex'
import Mixins from '../mixins'
export default {
components: {
OcDialogPrompt
OcDialogPrompt,
DynamicScroller,
DynamicScrollerItem
},
mixins: [
Mixins
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
"vue-router": "^3.1.3",
"vue-scrollto": "^2.15.0",
"vue-template-compiler": "^2.6.10",
"vue-virtual-scroller": "^1.0.0-rc.2",
"vuex": "^3.1.1",
"vuex-persist": "2.0.1",
"vuex-router-sync": "^5.0.0",
Expand Down
Loading

0 comments on commit 467ab39

Please sign in to comment.