Skip to content

Commit ca777de

Browse files
shiveroshivero
authored
Merge pull request #20 from shivero/feature/development
Channel notification menu
2 parents 956fb47 + a0e0ce5 commit ca777de

File tree

12 files changed

+149
-64
lines changed

12 files changed

+149
-64
lines changed

‎dist/assets/index-3878e1fa.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/assets/index-999457a1.js

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/assets/index-b14a4f9b.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/assets/index-f312e120.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎dist/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<link rel="icon" type="image/svg+xml" href="/discord-ui-tailwind-vue-vite/vite.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>Discord clone - Vue 3 + Vite + TailwindCSS </title>
9-
<script type="module" crossorigin src="/discord-ui-tailwind-vue-vite/assets/index-f312e120.js"></script>
10-
<link rel="stylesheet" href="/discord-ui-tailwind-vue-vite/assets/index-3878e1fa.css">
9+
<script type="module" crossorigin src="/discord-ui-tailwind-vue-vite/assets/index-999457a1.js"></script>
10+
<link rel="stylesheet" href="/discord-ui-tailwind-vue-vite/assets/index-b14a4f9b.css">
1111
</head>
1212

1313
<body class="bg-discord-dark-2">

‎src/components/Channel.vue

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<template>
22
<div :class="unreadClass" class="">
33
<div
4-
class="mx-2 flex h-8 items-center gap-2 rounded-sm px-2 opacity-100 hover:cursor-pointer hover:bg-gray-700 hover:text-gray-400">
4+
:class="isActive"
5+
class="mx-2 flex h-8 items-center gap-2 rounded-sm px-2 opacity-100 hover:cursor-pointer ">
56
<div v-if="props.channel.type == 'voice'">
67
<div><VolumeChannelIcon class="fill-gray-500" /></div>
78
</div>
9+
810
<div v-else-if="props.channel.type == 'text'">
911
<div><TextChannelIcon class="fill-gray-500" /></div>
1012
</div>
11-
1213
<div
13-
:class="props.channel.unread ? 'text-white' : 'tex-gray-500'"
14+
:class="props.channel.unread ? 'text-white' : ''"
1415
class="w-[80%] -translate-y-0.5 truncate font-semibold">
1516
{{ props.channel.name }}
1617
</div>
@@ -23,10 +24,18 @@ import { IChannel } from "./IChannel";
2324
import VolumeChannelIcon from "./Icons/VolumeChannelIcon.vue";
2425
import TextChannelIcon from "./Icons/TextChannelIcon.vue";
2526
const props = defineProps<{ channel: IChannel }>();
27+
import { computed } from "vue";
28+
import { useChannelStore } from "@/store/channelStore";
29+
const channelStore = useChannelStore();
2630
31+
const isActive = computed(() => {
32+
return `${channelStore.group}+${channelStore.name}` === `${props.channel.group}+${props.channel.name}`
33+
? "bg-gray-700 text-white hover:bg-gray-700"
34+
: "text-gray-500 hover:bg-gray-700 hover:text-gray-400";
35+
});
2736
let unreadClass =
28-
props.channel.unread &&
37+
props.channel.unread ?
2938
`before:content-[" "] relative before:absolute before:-translate-y-1/2 before:top-1/2
30-
before:rounded-full before:bg-white before:h-4 before:w-2 before:block before:-translate-x-1
31-
overflow-hidden before:overflow-auto`;
39+
before:rounded-full before:bg-white before:h-3 before:w-2 before:block before:-translate-x-1
40+
overflow-hidden before:overflow-auto` : "";
3241
</script>

‎src/components/ChannelHeader.vue

Lines changed: 82 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,31 @@ import PopoverBasic from "./Popover/PopoverBasic.vue";
2020
import Tooltip from "./Tooltip/Tooltip.vue";
2121
const channelStore = useChannelStore();
2222
import { localeEn } from "../translations/locale-en";
23+
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
24+
import { ref } from "vue";
25+
import ArrowDown from "./Icons/ArrowDown.vue";
26+
import ArrowRight from "./Icons/ArrowRight.vue";
27+
28+
const cb = () => {
29+
console.log("test");
30+
};
31+
const muteMenuOpen = ref(false);
32+
33+
const notificationMenuItems = [
34+
{ name: "Use Category Default", subtext: "@only mentions", active: true },
35+
{ name: "All" },
36+
{ name: "Mentions" },
37+
{ name: "Nothing" },
38+
];
39+
const muteNotificationOptions = [
40+
{ name: "For 15 minutes" },
41+
{ name: "For 1 hour" },
42+
{ name: "For 3 hours" },
43+
{ name: "For 8 hours" },
44+
{ name: "For 24 hours" },
45+
{ name: "Until next week" },
46+
{ name: "Until I turn it back on" },
47+
];
2348
</script>
2449

2550
<template>
@@ -45,12 +70,63 @@ import { localeEn } from "../translations/locale-en";
4570
<PopoverBasic title="Threads" :open="open" :size="2" />
4671
</PopoverPanel>
4772
</Popover>
48-
<Tooltip
49-
intent="primary"
50-
size="medium"
51-
:tooltipText="localeEn.ui_notiifcations.name">
52-
<MdiBell class="inline-block fill-gray-400 text-2xl" />
53-
</Tooltip>
73+
<Menu class="relative" as="div">
74+
<MenuButton>
75+
<Tooltip
76+
intent="primary"
77+
size="medium"
78+
:tooltipText="localeEn.ui_notiifcations.name">
79+
<MdiBell class="inline-block fill-gray-400 text-2xl" />
80+
</Tooltip>
81+
</MenuButton>
82+
83+
<MenuItems
84+
class="absolute right-0 top-10 flex w-min max-w-sm flex-col rounded-lg bg-zinc-900 px-2 py-2">
85+
<MenuItem class="mb-1">
86+
<span>
87+
<Menu as="div" class="relative" v-slot="{ open }">
88+
<MenuButton
89+
class="flex h-8 w-full items-center justify-between rounded-sm p-2 text-sm text-gray-400 hover:bg-discord-blue hover:text-white"
90+
:onmouseenter="() => (muteMenuOpen = true)">
91+
Mute Channel <ArrowRight class="translate-x-2 fill-gray-400 text-lg" />
92+
</MenuButton>
93+
<MenuItems
94+
static
95+
v-show="muteMenuOpen"
96+
class="absolute left-8 right-0 top-0 flex w-max max-w-xs -translate-y-2 translate-x-full flex-col rounded-lg bg-zinc-900 px-2 py-2">
97+
<MenuItem
98+
v-for="item in muteNotificationOptions"
99+
class="min-h-8 flex w-full flex-col rounded-sm p-2 text-sm text-gray-400 hover:cursor-pointer hover:bg-discord-blue hover:text-white"
100+
v-slot="{ active }">
101+
<div>
102+
<div>{{ item.name }}</div>
103+
</div>
104+
</MenuItem>
105+
</MenuItems>
106+
</Menu>
107+
</span>
108+
</MenuItem>
109+
<div class="mx-1 my-1 border border-zinc-600"></div>
110+
<MenuItem
111+
v-for="item in notificationMenuItems"
112+
class="group flex w-full rounded-sm p-2 text-sm leading-none text-gray-400 [min-height:9px] hover:cursor-pointer hover:bg-discord-blue hover:text-white"
113+
v-slot="{ active }"
114+
:onmouseenter="() => (muteMenuOpen = false)">
115+
<div class="flex flex-nowrap items-center justify-between">
116+
<div class="leading-tight">
117+
<div class="whitespace-nowrap">{{ item.name }}</div>
118+
<div class="font-bold">{{ item.subtext }}</div>
119+
</div>
120+
<div
121+
class="ml-4 box-content flex h-3 w-3 items-center justify-center rounded-full border-2 border-gray-400 group-hover:border-white">
122+
<div
123+
:class="item.active ? 'bg-discord-blue group-hover:bg-white' : ''"
124+
class="absolute m-auto rounded-full [height:8px] [width:8px]"></div>
125+
</div>
126+
</div>
127+
</MenuItem>
128+
</MenuItems>
129+
</Menu>
54130
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_pinned.name">
55131
<MdiPin class="inline-block fill-gray-400 text-2xl" />
56132
</Tooltip>

‎src/components/Icons/ArrowDown.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
const props = defineProps(["size"]);
32
</script>
43

54
<template>

‎src/components/Icons/ArrowRight.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
<script setup lang="ts"></script>
1+
<script setup lang="ts">
2+
</script>
23

34
<template>
4-
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
height="1em"
8+
width="1em"
9+
viewBox="0 -960 960 960"
10+
>
511
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
612
</svg>
713
</template>

‎src/components/Tooltip/Tooltip.vue

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,29 @@
11
<script setup lang="ts">
22
import { cva, type VariantProps } from "class-variance-authority";
3-
4-
const tooltip = cva(["span", "mt-8 inline-flex items-center justify-center"], {
5-
variants: {
6-
intent: {
7-
primary: "hover:bg-discord-blue-hover rounded bg-discord-blue text-white",
8-
secondary: "secondary",
9-
},
10-
size: {
11-
small: "h-4 px-2 text-sm",
12-
medium: "h-9 px-4 text-sm",
3+
import { ref } from "vue";
4+
let isClicked = ref(false);
5+
const tooltip = cva(
6+
[
7+
"absolute left-1/2 top-8 w-max max-w-xs -translate-x-1/2",
8+
"invisible rounded-lg opacity-0 transition-opacity group-hover:visible group-hover:flex group-hover:opacity-100 group-focus:hidden",
9+
],
10+
{
11+
variants: {
12+
intent: {
13+
primary: [
14+
"bg-zinc-900 shadow-lg shadow-zinc-800",
15+
isClicked.value ? "text-red-500" : "",
16+
],
17+
secondary: "",
18+
},
19+
size: {
20+
small: "",
21+
medium: "px-4 py-2 text-sm leading-tight",
22+
},
1323
},
24+
compoundVariants: [{ intent: "primary", size: "medium", class: "primaryMedium" }],
1425
},
15-
compoundVariants: [{ intent: "primary", size: "medium", class: "primaryMedium" }],
16-
});
26+
);
1727
1828
type SpanProps = VariantProps<typeof tooltip>;
1929
@@ -29,13 +39,17 @@ withDefaults(
2939
tooltipText: "Tooltip",
3040
},
3141
);
42+
const onSlotClick = () => {
43+
isClicked.value = !isClicked.value;
44+
};
3245
</script>
3346

3447
<template>
3548
<span class="group relative">
36-
<slot />
37-
<span
38-
class="shadow-lg shadow-zinc-800 invisible absolute top-8 max-w-xs w-max left-1/2 -translate-x-1/2 rounded-lg bg-zinc-900 px-4 py-2 text-sm leading-tight opacity-0 transition-opacity group-hover:visible group-hover:flex group-hover:opacity-100 group-focus:hidden">
49+
<span @click="onSlotClick" @mouseleave="isClicked = false">
50+
<slot />
51+
</span>
52+
<span :class="[tooltip({ intent, size }), isClicked ? 'group-hover:invisible' : '']">
3953
{{ tooltipText }}
4054
</span>
4155
</span>

0 commit comments

Comments
 (0)