code.gitea.io/gitea@v1.21.7/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 gt-f1">{{ 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    padding-left: 8px;
    65  }
    66  
    67  .sub-items .item-file {
    68    padding-left: 24px;
    69  }
    70  
    71  .item-file.selected {
    72    color: var(--color-text);
    73    background: var(--color-active);
    74    border-radius: 4px;
    75  }
    76  
    77  .item-file.viewed {
    78    color: var(--color-text-light-3);
    79  }
    80  
    81  .item-file,
    82  .item-directory {
    83    display: flex;
    84    align-items: center;
    85    gap: 0.25em;
    86    padding: 3px 6px;
    87  }
    88  
    89  .item-file:hover,
    90  .item-directory:hover {
    91    color: var(--color-text);
    92    background: var(--color-hover);
    93    border-radius: 4px;
    94    cursor: pointer;
    95  }
    96  </style>