Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix filename column width in responsive mode #2999

Merged
merged 1 commit into from
Feb 14, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions apps/files/src/components/AllFilesList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
<span class="oc-visually-hidden" v-text="favoritesHeaderText" />
<oc-star id="files-table-header-star" aria-hidden="true" class="uk-display-block uk-disabled" />
</div>
<div></div>
<div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate>Name</div>
<div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate ref="headerNameColumn" >Name</div>
<div><!-- indicators column --></div>
<div :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden' : _sidebarOpen }" class="uk-text-meta uk-width-small" v-translate>Size</div>
<div type="head" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden' : _sidebarOpen }" class="uk-text-nowrap uk-text-meta uk-width-small" v-translate>Updated</div>
</template>
<template #rowColumns="{ item }">
<template #rowColumns="{ item, index }">
<div v-if="!publicPage()">
<oc-star class="uk-display-block" @click.native.stop="toggleFileFavorite(item)" :shining="item.starred" />
</div>
<div class="uk-text-truncate uk-width-expand">
<div class="uk-text-truncate uk-width-expand" :ref="index === 0 ? 'firstRowNameColumn' : null">
<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"/>
Expand All @@ -26,7 +26,9 @@
class="uk-margin-small-left"
/>
</div>
<StatusIndicators :item="item" :parentPath="currentFolder.path" @click="$_openSideBar" />
<div class="uk-flex uk-flex-middle">
<StatusIndicators :item="item" :parentPath="currentFolder.path" @click="$_openSideBar" />
</div>
<div class="uk-text-meta uk-text-nowrap uk-width-small" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden' : _sidebarOpen }">
{{ item.size | fileSize }}
</div>
Expand Down
36 changes: 24 additions & 12 deletions apps/files/src/components/FileList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<!-- TODO: Take care of outside click overall and not just in files list -->
<div :id="id" class="uk-height-1-1 uk-position-relative" @click="hideRowActionsDropdown">
<div class="uk-flex uk-flex-column uk-height-1-1">
<oc-grid gutter="small" flex id="files-table-header" class="uk-padding-small" v-if="fileData.length > 0" key="files-list-results-existence">
<resize-observer @notify="$_resizeHeader" />
<oc-grid ref="headerRow" gutter="small" flex id="files-table-header" class="uk-padding-small" v-if="fileData.length > 0" key="files-list-results-existence">
<div>
<oc-checkbox
class="uk-margin-small-left"
Expand All @@ -15,12 +16,7 @@
/>
</div>
<slot name="headerColumns"/>
<div
class="uk-text-meta uk-text-right uk-width-small uk-margin-small-right"
v-translate
>
More
</div>
<div class="uk-margin-small-right oc-icon" />
</oc-grid>
<div id="files-list-container" class="uk-flex-1 uk-overflow-auto" v-if="!loading">
<RecycleScroller
Expand All @@ -35,7 +31,7 @@
:data-is-visible="active"
@click="selectRow(item, $event); hideRowActionsDropdown()"
>
<oc-grid gutter="small" flex class="uk-padding-small oc-border-top" :class="_rowClasses(item)" :id="'file-row-' + item.id">
<oc-grid :ref="index === 0 ? 'firstRow' : null" gutter="small" flex class="uk-padding-small oc-border-top" :class="_rowClasses(item)" :id="'file-row-' + item.id">
<div>
<oc-checkbox
class="uk-margin-small-left"
Expand All @@ -45,8 +41,8 @@
:hideLabel="true"
/>
</div>
<slot name="rowColumns" :item="item" :index="item.id" />
<div class="uk-width-small uk-text-right uk-margin-small-right">
<slot name="rowColumns" :item="item" :index="index" />
<div class="uk-text-right uk-margin-small-right">
<oc-button
:id="actionsDropdownButtonId(item.id, active)"
class="files-list-row-show-actions"
Expand Down Expand Up @@ -157,6 +153,12 @@ export default {
return this.$route.params.item
}
},
watch: {
compactMode (val) {
// sidebar opens, recalculate header sizes
this.$_resizeHeader()
}
},
methods: {
...mapActions('Files', ['loadFolder', 'markFavorite',
'setHighlightedFile', 'setPublicLinkPassword',
Expand Down Expand Up @@ -302,10 +304,20 @@ export default {

actionsDropdownButtonId (id, active) {
if (active) {
return `files-file-list-action-button-small-resolution-${id}-active`
return `files-file-list-action-button-${id}-active`
}

return `files-file-list-action-button-small-resolution-${id}`
return `files-file-list-action-button-${id}`
},

$_resizeHeader () {
this.$nextTick(() => {
const headerRow = this.$refs.headerRow
const firstRow = this.$refs.firstRow
if (headerRow && firstRow) {
headerRow.$el.style.width = getComputedStyle(firstRow.$el).width
}
})
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions apps/files/src/components/FilesLists/RowActionsDropdown.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<oc-drop
v-if="displayed"
:boundary="`#files-file-list-action-button-small-resolution-${item.id}-active`"
:boundary="`#files-file-list-action-button-${item.id}-active`"
:options="{ offset: 0 }"
PVince81 marked this conversation as resolved.
Show resolved Hide resolved
:toggle="`#files-file-list-action-button-small-resolution-${item.id}-active`"
:toggle="`#files-file-list-action-button-${item.id}-active`"
position="bottom-right"
id="files-list-row-actions-dropdown"
class="uk-open uk-drop-stack"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="uk-flex uk-flex-middle">
<span>
<DefaultIndicators
v-if="displayDefaultIndicators"
:item="item"
Expand All @@ -14,7 +14,7 @@
:key="index"
/>
</template>
</div>
</span>
</template>

<script>
Expand Down
1 change: 1 addition & 0 deletions changelog/0.4.0_2020-02-14/2974
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ This change hides them behind a three dots button on the line, the same that was
The three dots button also now has no more border and looks nicer.

https://github.com/owncloud/phoenix/pull/2974
https://github.com/owncloud/phoenix/issues/2998
8 changes: 8 additions & 0 deletions changelog/unreleased/2998
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
Bugfix: Various fixes for files app in responsive mode

Fixed properly alignment of header columns with the body of the files
table which stays even after resizing.
Removed the column label for the actions column as it looks nicer.

https://github.com/owncloud/phoenix/issues/2998
https://github.com/owncloud/phoenix/pull/2999
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@
"vue-loader": "^15.7.1",
"vue-meta": "^2.2.2",
"vue-router": "^3.1.3",
"vue-resize": "^0.4.5",
"vue-scrollto": "^2.15.0",
"vue-template-compiler": "^2.6.10",
"vuex": "^3.1.1",
Expand Down
3 changes: 3 additions & 0 deletions src/phoenix.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import "core-js/features/symbol/iterator.js"

// --- Libraries and Plugins ---
import Vue from 'vue'
import 'vue-resize/dist/vue-resize.css'
import VueResize from 'vue-resize'

// --- Components ---

Expand Down Expand Up @@ -59,6 +61,7 @@ Vue.use(VueClipboard)
Vue.use(VueScrollTo)
Vue.use(MediaSource)
Vue.use(PhoenixPlugin)
Vue.use(VueResize)
Vue.use(VueMeta, {
// optional pluginOptions
refreshOnceOnNavigation: true
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -9066,6 +9066,11 @@ vue-meta@^2.0.4, vue-meta@^2.2.2:
dependencies:
deepmerge "^4.2.2"

vue-resize@^0.4.5:
version "0.4.5"
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==

vue-router@^3.0.6, vue-router@^3.1.3:
version "3.1.5"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
Expand Down