code.gitea.io/gitea@v1.22.3/web_src/js/components/DiffFileTreeItem.vue (about)

     1  <script>
     2  import {SvgIcon} from '../svg.js';
     3  import {diffTreeStore} from '../modules/stores.js';
     4  
     5  export default {
     6    components: {SvgIcon},
     7    props: {
     8      item: {
     9        type: Object,
    10        required: true,
    11      },
    12    },
    13    data: () => ({
    14      store: diffTreeStore(),
    15      collapsed: false,
    16    }),
    17    methods: {
    18      getIconForDiffType(pType) {
    19        const diffTypes = {
    20          1: {name: 'octicon-diff-added', classes: ['text', 'green']},
    21          2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
    22          3: {name: 'octicon-diff-removed', classes: ['text', 'red']},
    23          4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
    24          5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
    25        };
    26        return diffTypes[pType];
    27      },
    28    },
    29  };
    30  </script>
    31  <template>
    32    <!--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"-->
    33    <a
    34      v-if="item.isFile" class="item-file"
    35      :class="{'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed}"
    36      :title="item.name" :href="'#diff-' + item.file.NameHash"
    37    >
    38      <!-- file -->
    39      <SvgIcon name="octicon-file"/>
    40      <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
    41      <SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).classes"/>
    42    </a>
    43    <div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
    44      <!-- directory -->
    45      <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
    46      <SvgIcon class="text primary" name="octicon-file-directory-fill"/>
    47      <span class="gt-ellipsis">{{ item.name }}</span>
    48    </div>
    49  
    50    <div v-if="item.children?.length" v-show="!collapsed" class="sub-items">
    51      <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem"/>
    52    </div>
    53  </template>
    54  <style scoped>
    55  a, a:hover {
    56    text-decoration: none;
    57    color: var(--color-text);
    58  }
    59  
    60  .sub-items {
    61    display: flex;
    62    flex-direction: column;
    63    gap: 1px;
    64    margin-left: 13px;
    65    border-left: 1px solid var(--color-secondary);
    66  }
    67  
    68  .sub-items .item-file {
    69    padding-left: 18px;
    70  }
    71  
    72  .item-file.selected {
    73    color: var(--color-text);
    74    background: var(--color-active);
    75    border-radius: 4px;
    76  }
    77  
    78  .item-file.viewed {
    79    color: var(--color-text-light-3);
    80  }
    81  
    82  .item-file,
    83  .item-directory {
    84    display: flex;
    85    align-items: center;
    86    gap: 0.25em;
    87    padding: 3px 6px;
    88  }
    89  
    90  .item-file:hover,
    91  .item-directory:hover {
    92    color: var(--color-text);
    93    background: var(--color-hover);
    94    border-radius: 4px;
    95    cursor: pointer;
    96  }
    97  </style>