Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add settings menu to topnav #1032

Closed
wants to merge 11 commits into from
Closed

feat: add settings menu to topnav #1032

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1f8e086
feat: add settings menu to topnav
wa0x6e Dec 10, 2024
6b2850e
Merge branch 'master' into feat-add-link-to-v1
wa0x6e Dec 10, 2024
62dafdf
fix: fix dropdown placement due to portal and fixed conflict
wa0x6e Dec 10, 2024
79ca9f5
Merge branch 'master' into feat-add-link-to-v1
wa0x6e Dec 10, 2024
8413bdc
fix: portal argument should be optional
wa0x6e Dec 11, 2024
84130a7
feat: redirect to same page on old interface when existing
wa0x6e Dec 11, 2024
75eee21
Merge branch 'master' into feat-add-link-to-v1
wa0x6e Dec 11, 2024
6111eaa
Merge branch 'master' into feat-add-link-to-v1
ChaituVR Dec 11, 2024
7d7e7e8
fix: improve message about new interface
wa0x6e Dec 14, 2024
7e81914
DRY: use constant for new UI blog post url
wa0x6e Dec 18, 2024
ec1c9b5
DRY: reuse constants for old interface links
wa0x6e Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 68 additions & 4 deletions apps/ui/src/components/App/Topnav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,10 +149,74 @@ onUnmounted(() => {
</template>
</UiButton>
<IndicatorPendingTransactions />
<UiButton class="!px-0 w-[46px]" @click="toggleSkin">
<IH-light-bulb v-if="currentMode === 'dark'" class="inline-block" />
<IH-moon v-else class="inline-block" />
</UiButton>
<UiDropdown :z-index="999" :portal="false">
<template #button>
<slot name="button">
<UiButton class="!px-0 w-[46px]" v-bind="$attrs">
<IH-cog-6-tooth class="inline-block" />
</UiButton>
</slot>
</template>
<template #items>
<UiDropdownItem v-slot="{ active }">
<a
:class="['flex gap-2 items-center', { 'opacity-80': active }]"
href="https://snapshot.box"
>
<IH-bolt :width="16" />
Mainnet
</a>
</UiDropdownItem>
Comment on lines +223 to +231
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be weird showing this on snapshot.box and testnet link on testnet.snapshot.box.

<UiDropdownItem v-slot="{ active }">
<a
:class="['flex gap-2 items-center', { 'opacity-80': active }]"
href="https://testnet.snapshot.box"
>
<IH-beaker :width="16" />
Testnet
</a>
</UiDropdownItem>
<UiDropdownItem v-slot="{ active }">
<a
:class="['flex gap-2 items-center', { 'opacity-80': active }]"
href="https://v1.snapshot.box"
>
<IH-bolt-slash :width="16" />
Old interface
</a>
wa0x6e marked this conversation as resolved.
Show resolved Hide resolved
</UiDropdownItem>
<hr class="h-[2px] bg-skin-text/20 mx-3" />
<UiDropdownItem v-slot="{ active }">
<button
type="button"
class="flex items-center gap-2"
:class="{ 'opacity-80': active }"
@click="toggleSkin"
>
<IH-light-bulb
v-if="currentMode === 'dark'"
class="inline-block"
:width="16"
/>
<IH-moon v-else class="inline-block" :width="16" />
<span>
Switch to
{{ currentMode === 'dark' ? 'light' : 'dark' }} theme
</span>
</button>
</UiDropdownItem>
<hr class="h-[2px] bg-skin-text/20 mx-3" />
<UiDropdownItem v-slot="{ active }">
<a
wa0x6e marked this conversation as resolved.
Show resolved Hide resolved
:class="['flex gap-2 items-center', { 'opacity-80': active }]"
href="https://snapshot.mirror.xyz/0qnfjmE0SFeUykArdi664oO4qFcZUoZTTOd8m7es_Eo"
wa0x6e marked this conversation as resolved.
Show resolved Hide resolved
>
<IH-sparkles :width="16" />
Discover our new interface
</a>
wa0x6e marked this conversation as resolved.
Show resolved Hide resolved
</UiDropdownItem>
</template>
</UiDropdown>
</div>
</UiTopnav>
<teleport to="#modal">
Expand Down
12 changes: 8 additions & 4 deletions apps/ui/src/components/Ui/Dropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,15 @@ withDefaults(
disabled?: boolean;
gap?: string;
placement?: 'start' | 'end';
zIndex?: number;
portal: boolean;
}>(),
{
disabled: false,
gap: '8',
placement: 'end'
placement: 'end',
zIndex: 10,
portal: true
}
);
</script>
Expand All @@ -21,8 +25,8 @@ withDefaults(
<Float
:placement="`bottom-${placement}`"
:offset="Number(gap)"
portal
z-index="10"
:z-index="zIndex"
:portal="portal"
>
<MenuButton :disabled="disabled" as="template" class="cursor-pointer">
<slot name="button" />
Expand All @@ -38,7 +42,7 @@ withDefaults(
<MenuItems
class="rounded-md bg-skin-border text-skin-link shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden"
>
<div class="max-h-[208px] overflow-y-auto">
<div class="max-h-[215px] overflow-y-auto">
<slot name="items" />
</div>
</MenuItems>
Expand Down