upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-10 17:23:59 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 58

fix(files): inline action styling

Browse source 
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ 2023-03-25 14:00:44 +01:00
parent bda286c7f0
commit 6358e9752f
No known key found for this signature in database
GPG key ID: 60C25B8C072916CF
4 changed files with 40 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
apps/files/src/components/BreadCrumbs.vue
View file

@ -1,24 +1,31 @@
<template>
<NcBreadcrumbs data-cy-files-content-breadcrumbs>
<!-- Current path sections -->
<NcBreadcrumb v-for="section in sections"
<NcBreadcrumb v-for="(section, index) in sections"
:key="section.dir"
:aria-label="t('files', `Go to the '{dir}' directory`, section)"
:aria-label="ariaLabel(section)"
:native-title="ariaLabel(section)"
v-bind="section"
@click="onClick(section.to)" />
@click.native="onClick(section.to)">
<template v-if="index === 0" #icon>
<Home :size="20" />
</template>
</NcBreadcrumb>
</NcBreadcrumbs>
</template>
<script>
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
import { basename } from 'path'
import Home from 'vue-material-design-icons/Home.vue'
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
import Vue from 'vue'
export default Vue.extend({
name: 'BreadCrumbs',
components: {
Home,
NcBreadcrumbs,
NcBreadcrumb,
},
@ -52,11 +59,17 @@ export default Vue.extend({
methods: {
onClick(to) {
debugger
if (to?.query?.dir === this.$route.query.dir) {
alert('You are already here!')
this.$emit('reload')
}
},
ariaLabel(section) {
if (section?.to?.query?.dir === this.$route.query.dir) {
return t('files', 'Reload current directory')
}
return t('files', 'Go to the "{dir}" directory', section)
},
},
})
</script>

10
apps/files/src/components/FileEntry.vue
View file

@ -441,16 +441,20 @@ tr {
.files-list__row-icon-preview:not([style*='background']) {
background: linear-gradient(110deg, var(--color-loading-dark) 0%, var(--color-loading-dark) 25%, var(--color-loading-light) 50%, var(--color-loading-dark) 75%, var(--color-loading-dark) 100%);
background-size: 400%;
animation: preview-gradient-slide 1s ease infinite;
animation: preview-gradient-slide 1.2s ease-in-out infinite;
}
</style>
<style>
@keyframes preview-gradient-slide {
from {
0% {
background-position: 100% 0%;
}
to {
50% {
background-position: 0% 0%;
}
/* adds a small delay to the animation */
100% {
background-position: 0% 0%;
}
}

13
apps/files/src/mixins/fileslist-row.scss
View file

@ -118,11 +118,22 @@ td, th {
.files-list__row-actions {
width: auto;
// Add margin to all cells after the actions
& ~ td,
& ~ th {
// Add margin to all cells after the actions
margin: 0 var(--cell-margin);
}
&::v-deep > button {
.button-vue__text {
// Remove bold from default button styling
font-weight: normal;
}
&:not(:hover, :focus, :active) .button-vue__wrapper {
// Also apply color-text-maxcontrast to non-active button
color: var(--color-text-maxcontrast);
}
}
}
.files-list__row-size {

2
apps/files/src/views/FilesList.vue
View file

@ -25,7 +25,7 @@
data-cy-files-content>
<div class="files-list__header">
<!-- Current folder breadcrumbs -->
<BreadCrumbs :path="dir" />
<BreadCrumbs :path="dir" @reload="fetchContent" />
<!-- Secondary loading indicator -->
<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />