web_src/js/components/DiffFileList.vue


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<script>
import {loadMoreFiles} from '../features/repo-diff.js';
import {diffTreeStore} from '../modules/stores.js';

export default {
  data: () => {
    return {store: diffTreeStore()};
  },
  mounted() {
    document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
  },
  unmounted() {
    document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList);
  },
  methods: {
    toggleFileList() {
      this.store.fileListIsVisible = !this.store.fileListIsVisible;
    },
    diffTypeToString(pType) {
      const diffTypes = {
        1: 'add',
        2: 'modify',
        3: 'del',
        4: 'rename',
        5: 'copy',
      };
      return diffTypes[pType];
    },
    diffStatsWidth(adds, dels) {
      return `${adds / (adds + dels) * 100}%`;
    },
    loadMoreData() {
      loadMoreFiles(this.store.linkLoadMore);
    }
  },
};
</script>
<template>
  <ol class="diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible">
    <li v-for="file in store.files" :key="file.NameHash">
      <div class="gt-font-semibold gt-df gt-ac pull-right">
        <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ store.binaryFileMessage }}</span>
        {{ file.IsBin ? '' : file.Addition + file.Deletion }}
        <span v-if="!file.IsBin" class="diff-stats-bar gt-mx-3" :data-tooltip-content="store.statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
          <div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }"/>
        </span>
      </div>
      <!-- todo finish all file status, now modify, add, delete and rename -->
      <span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)">&nbsp;</span>
      <a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
    </li>
    <li v-if="store.isIncomplete" class="gt-pt-2">
      <span class="file gt-df gt-ac gt-sb">{{ store.tooManyFilesMessage }}
        <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
      </span>
    </li>
  </ol>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!--
  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<NcButton :class="['files-list__column-sort-button', {
			'files-list__column-sort-button--active': sortingMode === mode,
			'files-list__column-sort-button--size': sortingMode === 'size',
		}]"
		:alignment="mode === 'size' ? 'end' : 'start-reverse'"
		type="tertiary"
		:title="name"
		@click="toggleSortBy(mode)">
		<template #icon>
			<MenuUp v-if="sortingMode !== mode || isAscSorting" class="files-list__column-sort-button-icon" />
			<MenuDown v-else class="files-list__column-sort-button-icon" />
		</template>
		<span class="files-list__column-sort-button-text">{{ name }}</span>
	</NcButton>
</template>

<script lang="ts">
import { translate } from '@nextcloud/l10n'
import { defineComponent } from 'vue'

import MenuDown from 'vue-material-design-icons/MenuDown.vue'
import MenuUp from 'vue-material-design-icons/MenuUp.vue'
import NcButton from '@nextcloud/vue/components/NcButton'

import filesSortingMixin from '../mixins/filesSorting.ts'

export default defineComponent({
	name: 'FilesListTableHeaderButton',

	components: {
		MenuDown,
		MenuUp,
		NcButton,
	},

	mixins: [
		filesSortingMixin,
	],

	props: {
		name: {
			type: String,
			required: true,
		},
		mode: {
			type: String,
			required: true,
		},
	},

	methods: {
		t: translate,
	},
})
</script>

<style scoped lang="scss">
.files-list__column-sort-button {
	// Compensate for cells margin
	margin: 0 calc(var(--button-padding, var(--cell-margin)) * -1);
	min-width: calc(100% - 3 * var(--cell-margin))!important;

	&-text {
		color: var(--color-text-maxcontrast);
		font-weight: normal;
	}

	&-icon {
		color: var(--color-text-maxcontrast);
		opacity: 0;
		transition: opacity var(--animation-quick);
		inset-inline-start: -10px;
	}

	&--size &-icon {
		inset-inline-start: 10px;
	}

	&--active &-icon,
	&:hover &-icon,
	&:focus &-icon,
	&:active &-icon {
		opacity: 1;
	}
}
</style>