Skip to content

Commit

Permalink
refactor(ui): improve sidebar item list structure
Browse files Browse the repository at this point in the history 
* Refactored the list item structure in AppLayout to use prepend
and append slots.
* Moved the crown icon to the append slot for better alignment.
  • Loading branch information
@gustavosbarreto
gustavosbarreto committed Sep 27, 2024
1 parent 9558215 commit e0cbd14
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 87 deletions.
41 changes: 17 additions & 24 deletions ui/src/layouts/AppLayout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<Namespace data-test="namespace-component" />
</div>

<v-list class="bg-v-theme-surface" data-test="list">
<v-list density="compact" class="bg-v-theme-surface" data-test="list">
<v-list-item
v-for="item in visibleItems"
:key="item.title"
Expand All @@ -43,30 +43,23 @@
:disabled="disableItem(item.title)"
data-test="list-item"
>

<v-list-item-title
:data-test="item.icon + '-listItem'"
>
<div class="d-flex align-center">
<div class="mr-3">
<v-icon data-test="icon">
{{ item.icon }}
</v-icon>
</div>
{{ item.title }}
<v-chip
v-if="item.isPremium && envVariables.isCommunity && envVariables.premiumPaywall"
density="comfortable"
label
variant="outlined"
size="x-small"
class="ml-1"
color="yellow"
prepend-icon="mdi-crown">Premium</v-chip>

</div>
<template #prepend>
<v-icon data-test="icon">
{{ item.icon }}
</v-icon>
</template>
<template #append>
<v-icon
v-if="item.isPremium && envVariables.isCommunity && envVariables.premiumPaywall"
color="yellow"
size="x-small"
icon="mdi-crown"
data-test="icon"
/>
</template>
<v-list-item-title :data-test="item.icon + '-listItem'">
{{ item.title }}
</v-list-item-title>

</v-list-item>
<v-col class="d-flex align-end justify-center">
<QuickConnection />
Expand Down
126 changes: 63 additions & 63 deletions ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,103 +27,103 @@ exports[`App Layout Component > Renders the component 1`] = `
</div>
</div>
<!--v-if-->
<div data-v-e7291ef4=\\"\\" class=\\"v-list v-theme--dark bg-transparent v-list--density-default v-list--one-line bg-v-theme-surface\\" tabindex=\\"0\\" role=\\"listbox\\" data-test=\\"list\\"><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--link v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/\\" tabindex=\\"-2\\" data-test=\\"list-item\\"><span class=\\"v-list-item__overlay\\"></span><span class=\\"v-list-item__underlay\\"></span>
<!---->
<div data-v-e7291ef4=\\"\\" class=\\"v-list v-theme--dark bg-transparent v-list--density-compact v-list--one-line bg-v-theme-surface\\" tabindex=\\"0\\" role=\\"listbox\\" data-test=\\"list\\"><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--link v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/\\" tabindex=\\"-2\\" data-test=\\"list-item\\"><span class=\\"v-list-item__overlay\\"></span><span class=\\"v-list-item__underlay\\"></span>
<div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-home mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
<div class=\\"v-list-item__spacer\\"></div>
</div>
<div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
<!---->
<!---->
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-home-listItem\\">
<div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
<div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-home mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Home
<!--v-if-->
</div>
</div>
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-home-listItem\\">Home</div>
</div>
<div class=\\"v-list-item__append\\">
<!--v-if-->
<div class=\\"v-list-item__spacer\\"></div>
</div>
<!---->
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/devices\\" data-test=\\"list-item\\">
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/devices\\" data-test=\\"list-item\\">
<!----><span class=\\"v-list-item__underlay\\"></span>
<!---->
<div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-cellphone-link mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
<div class=\\"v-list-item__spacer\\"></div>
</div>
<div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
<!---->
<!---->
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-cellphone-link-listItem\\">
<div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
<div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-cellphone-link mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Devices
<!--v-if-->
</div>
</div>
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-cellphone-link-listItem\\">Devices</div>
</div>
<!---->
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/containers\\" data-test=\\"list-item\\">
<div class=\\"v-list-item__append\\">
<!--v-if-->
<div class=\\"v-list-item__spacer\\"></div>
</div>
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/containers\\" data-test=\\"list-item\\">
<!----><span class=\\"v-list-item__underlay\\"></span>
<!---->
<div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-server mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
<div class=\\"v-list-item__spacer\\"></div>
</div>
<div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
<!---->
<!---->
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-server-listItem\\">
<div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
<div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-server mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Containers
<!--v-if-->
</div>
</div>
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-server-listItem\\">Containers</div>
</div>
<!---->
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/sessions\\" data-test=\\"list-item\\">
<div class=\\"v-list-item__append\\">
<!--v-if-->
<div class=\\"v-list-item__spacer\\"></div>
</div>
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/sessions\\" data-test=\\"list-item\\">
<!----><span class=\\"v-list-item__underlay\\"></span>
<!---->
<div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-history mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
<div class=\\"v-list-item__spacer\\"></div>
</div>
<div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
<!---->
<!---->
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-history-listItem\\">
<div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
<div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-history mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Sessions
<!--v-if-->
</div>
</div>
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-history-listItem\\">Sessions</div>
</div>
<div class=\\"v-list-item__append\\">
<!--v-if-->
<div class=\\"v-list-item__spacer\\"></div>
</div>
<!---->
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/firewall/rules\\" data-test=\\"list-item\\">
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/firewall/rules\\" data-test=\\"list-item\\">
<!----><span class=\\"v-list-item__underlay\\"></span>
<!---->
<div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-security mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
<div class=\\"v-list-item__spacer\\"></div>
</div>
<div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
<!---->
<!---->
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-security-listItem\\">
<div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
<div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-security mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Firewall Rules
<!--v-if-->
</div>
</div>
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-security-listItem\\">Firewall Rules</div>
</div>
<div class=\\"v-list-item__append\\">
<!--v-if-->
<div class=\\"v-list-item__spacer\\"></div>
</div>
<!---->
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/sshkeys/public-keys\\" data-test=\\"list-item\\">
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/sshkeys/public-keys\\" data-test=\\"list-item\\">
<!----><span class=\\"v-list-item__underlay\\"></span>
<!---->
<div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-key mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
<div class=\\"v-list-item__spacer\\"></div>
</div>
<div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
<!---->
<!---->
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-key-listItem\\">
<div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
<div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-key mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Public Keys
<!--v-if-->
</div>
</div>
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-key-listItem\\">Public Keys</div>
</div>
<!---->
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/settings\\" data-test=\\"list-item\\">
<div class=\\"v-list-item__append\\">
<!--v-if-->
<div class=\\"v-list-item__spacer\\"></div>
</div>
</a><a data-v-e7291ef4=\\"\\" class=\\"v-list-item v-list-item--disabled v-theme--dark v-list-item--density-compact v-list-item--two-line rounded-0 v-list-item--variant-text mb-2\\" href=\\"/settings\\" data-test=\\"list-item\\">
<!----><span class=\\"v-list-item__underlay\\"></span>
<!---->
<div class=\\"v-list-item__prepend\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-cog mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i>
<div class=\\"v-list-item__spacer\\"></div>
</div>
<div class=\\"v-list-item__content\\" data-no-activator=\\"\\">
<!---->
<!---->
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-cog-listItem\\">
<div data-v-e7291ef4=\\"\\" class=\\"d-flex align-center\\">
<div data-v-e7291ef4=\\"\\" class=\\"mr-3\\"><i data-v-e7291ef4=\\"\\" class=\\"mdi-cog mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\" data-test=\\"icon\\"></i></div> Settings
<!--v-if-->
</div>
</div>
<div data-v-e7291ef4=\\"\\" class=\\"v-list-item-title\\" data-test=\\"mdi-cog-listItem\\">Settings</div>
</div>
<div class=\\"v-list-item__append\\">
<!--v-if-->
<div class=\\"v-list-item__spacer\\"></div>
</div>
<!---->
</a>
<div data-v-e7291ef4=\\"\\" class=\\"v-col d-flex align-end justify-center\\">
<div data-v-136d2a2f=\\"\\" data-v-e7291ef4=\\"\\"><button data-v-136d2a2f=\\"\\" type=\\"button\\" class=\\"v-btn v-btn--block v-theme--dark bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat\\" tabindex=\\"0\\" aria-label=\\"Dialog Quick Connection\\" data-test=\\"quick-connection-open-btn\\"><span class=\\"v-btn__overlay\\"></span><span class=\\"v-btn__underlay\\"></span><span class=\\"v-btn__prepend\\"><i class=\\"mdi-console mdi v-icon notranslate v-theme--dark v-icon--size-default\\" aria-hidden=\\"true\\"></i></span><span class=\\"v-btn__content\\" data-no-activator=\\"\\"> Quick Connect </span>
Expand Down

0 comments on commit e0cbd14

Please sign in to comment.