mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-25 08:59:31 -05:00
8d5fbeb7a2
Follow: * #23574 * Remove all ".tooltip[data-content=...]" Major changes: * Remove "tooltip" class, use "[data-tooltip-content=...]" instead of ".tooltip[data-content=...]" * Remove legacy `data-position`, it's dead code since last Fomantic Tooltip -> Tippy Tooltip refactoring * Rename reaction attribute from `data-content` to `data-reaction-content` * Add comments for some `data-content`: `{{/* used by the form */}}` * Remove empty "ui" class * Use "text color" for SVG icons (a few)
147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<template>
|
|
<div v-show="show" :title="item.name">
|
|
<!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
|
|
<div class="item" :class="item.isFile ? 'filewrapper gt-p-1' : ''">
|
|
<!-- Files -->
|
|
<SvgIcon
|
|
v-if="item.isFile"
|
|
name="octicon-file"
|
|
class="svg-icon file"
|
|
/>
|
|
<a
|
|
v-if="item.isFile"
|
|
class="file gt-ellipsis muted"
|
|
:href="item.isFile ? '#diff-' + item.file.NameHash : ''"
|
|
>{{ item.name }}</a>
|
|
<SvgIcon
|
|
v-if="item.isFile"
|
|
:name="getIconForDiffType(item.file.Type)"
|
|
:class="['svg-icon', getIconForDiffType(item.file.Type), 'status']"
|
|
/>
|
|
|
|
<!-- Directories -->
|
|
<div v-if="!item.isFile" class="directory gt-p-1" @click.stop="handleClick(item.isFile)">
|
|
<SvgIcon
|
|
class="svg-icon"
|
|
:name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"
|
|
/>
|
|
<SvgIcon
|
|
class="svg-icon directory"
|
|
name="octicon-file-directory-fill"
|
|
/>
|
|
<span class="gt-ellipsis">{{ item.name }}</span>
|
|
</div>
|
|
<div v-show="!collapsed">
|
|
<DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {SvgIcon} from '../svg.js';
|
|
|
|
export default {
|
|
components: {SvgIcon},
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
show: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
}
|
|
},
|
|
data: () => ({
|
|
collapsed: false,
|
|
}),
|
|
methods: {
|
|
handleClick(itemIsFile) {
|
|
if (itemIsFile) {
|
|
return;
|
|
}
|
|
this.collapsed = !this.collapsed;
|
|
},
|
|
getIconForDiffType(pType) {
|
|
const diffTypes = {
|
|
1: 'octicon-diff-added',
|
|
2: 'octicon-diff-modified',
|
|
3: 'octicon-diff-removed',
|
|
4: 'octicon-diff-renamed',
|
|
5: 'octicon-diff-modified', // there is no octicon for copied, so modified should be ok
|
|
};
|
|
return diffTypes[pType];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
span.svg-icon.status {
|
|
float: right;
|
|
}
|
|
|
|
span.svg-icon.file {
|
|
color: var(--color-secondary-dark-7);
|
|
}
|
|
|
|
span.svg-icon.directory {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
span.svg-icon.octicon-diff-modified {
|
|
color: var(--color-yellow);
|
|
}
|
|
|
|
span.svg-icon.octicon-diff-added {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
span.svg-icon.octicon-diff-removed {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
span.svg-icon.octicon-diff-renamed {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
.item.filewrapper {
|
|
display: grid !important;
|
|
grid-template-columns: 20px 7fr 1fr;
|
|
padding-left: 18px !important;
|
|
}
|
|
|
|
.item.filewrapper:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-hover);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
div.directory {
|
|
display: grid;
|
|
grid-template-columns: 18px 20px auto;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
div.directory:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-hover);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
div.list {
|
|
padding-bottom: 0 !important;
|
|
padding-top: inherit !important;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|