Skip to content

Commit e4b512e

Browse files
codinghack30codinghack30
committed
notice - initial
1 parent bfbc448 commit e4b512e

File tree

8 files changed

+214
-222
lines changed

8 files changed

+214
-222
lines changed

‎src/layouts/admin/vertical-header/NotificationDD.vue‎

Lines changed: 30 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,45 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue';
2+
// import { ref } from 'vue';
33
// icons
4-
import { CheckCircleOutlined, GiftOutlined, MessageOutlined, SettingOutlined, BellOutlined } from '@ant-design/icons-vue';
4+
// import { CheckCircleOutlined, GiftOutlined, MessageOutlined, SettingOutlined, BellOutlined } from '@ant-design/icons-vue';
5+
import { router } from '@/router';
6+
import { useCustomizerStore } from '@/stores/customizer';
57
6-
const isActive = ref(true);
8+
const customizer = useCustomizerStore();
79
8-
function deactivateItem() {
9-
isActive.value = false;
10-
}
10+
// const isActive = ref(true);
11+
12+
// function deactivateItem() {
13+
// isActive.value = false;
14+
// }
15+
16+
const openNotice = () => {
17+
customizer.SET_TITLE('お知らせ');
18+
router.push('/notice');
19+
};
1120
</script>
1221

1322
<template>
14-
<!-- ---------------------------------------------- -->
15-
<!-- notifications DD -->
16-
<!-- ---------------------------------------------- -->
17-
<v-menu :close-on-content-click="false" offset="6, 0">
18-
<template v-slot:activator="{ props }">
19-
<v-btn class="text-secondary ml-sm-2 ml-1" icon color="error" rounded="sm" size="large" v-bind="props">
20-
<!-- <v-badge :content="isActive ? '2' : '0'" color="error" offset-x="-4" offset-y="-5">
23+
<!-- ---------------------------------------------- -->
24+
<!-- notifications DD -->
25+
<!-- ---------------------------------------------- -->
26+
<v-menu :close-on-content-click="false" offset="6, 0">
27+
<template v-slot:activator="{ props }">
28+
<v-btn class="text-secondary ml-sm-2 ml-1" icon color="error" rounded="sm" size="large" v-bind="props" @click="openNotice">
29+
<!-- <v-badge :content="isActive ? '2' : '0'" color="error" offset-x="-4" offset-y="-5">
2130
<BellOutlined :style="{ fontSize: '16px' }" />
2231
</v-badge> -->
23-
<v-icon>mdi-bell-badge</v-icon>
24-
</v-btn>
25-
<div class="pr-3" :style="{ color: 'rgb(var(--v-theme-error))' }">お知らせあり</div>
26-
</template>
27-
<v-sheet rounded="md" width="387" class="notification-dropdown">
28-
<div class="pa-4">
29-
<div class="d-flex align-center justify-space-between">
30-
<h6 class="text-subtitle-1 mb-0">Notifications</h6>
31-
<v-btn
32-
variant="text"
33-
color="success"
34-
icon
35-
rounded
36-
size="small"
37-
@click="deactivateItem()"
38-
:class="isActive ? 'd-block' : 'd-none'"
39-
>
40-
<CheckCircleOutlined :style="{ fontSize: '16px' }" />
41-
<v-tooltip aria-label="tooltip" activator="parent" location="bottom" :content-class="isActive ? 'custom-tooltip' : 'd-none'">
42-
<span class="text-caption">Mark as all read</span>
43-
</v-tooltip>
44-
</v-btn>
45-
</div>
46-
</div>
47-
<v-divider></v-divider>
48-
<perfect-scrollbar style="height: calc(100vh - 300px); max-height: 265px">
49-
<v-list class="py-0" lines="two" aria-label="notification list" aria-busy="true">
50-
<v-list-item value="1" color="secondary" class="no-spacer py-1" :active="isActive">
51-
<template v-slot:prepend>
52-
<v-avatar size="36" variant="flat" color="lightsuccess" class="mr-3 py-2 text-success">
53-
<GiftOutlined />
54-
</v-avatar>
55-
</template>
56-
<div class="d-inline-flex justify-space-between w-100">
57-
<h6 class="text-subtitle-1 font-weight-regular mb-0">
58-
It's <span style="font-weight: 600">Cristina danny's</span> birthday today.
59-
</h6>
60-
<span class="text-caption">3:00 AM</span>
61-
</div>
62-
63-
<p class="text-caption text-medium-emphasis my-0">2 min ago</p>
64-
</v-list-item>
65-
<v-divider></v-divider>
66-
<v-list-item value="2" color="secondary" class="no-spacer">
67-
<template v-slot:prepend>
68-
<v-avatar size="36" variant="flat" color="lightprimary" class="mr-3 py-2 text-primary">
69-
<MessageOutlined />
70-
</v-avatar>
71-
</template>
72-
<div class="d-inline-flex justify-space-between w-100">
73-
<h6 class="text-subtitle-1 font-weight-regular mb-0"><span style="font-weight: 600">Aida Burg</span> commented your post.</h6>
74-
<span class="text-caption">6:00 PM</span>
75-
</div>
76-
77-
<p class="text-caption text-medium-emphasis my-0">5 August</p>
78-
</v-list-item>
79-
<v-divider></v-divider>
80-
<v-list-item value="3" color="secondary" class="no-spacer" :active="isActive">
81-
<template v-slot:prepend>
82-
<v-avatar size="36" variant="flat" color="lighterror" class="mr-3 py-2 text-error">
83-
<SettingOutlined />
84-
</v-avatar>
85-
</template>
86-
<div class="d-inline-flex justify-space-between w-100">
87-
<h6 class="text-subtitle-1 font-weight-regular mb-0">Your Profile is Complete <span style="font-weight: 600">60%</span></h6>
88-
<span class="text-caption">2:45 PM</span>
89-
</div>
90-
91-
<p class="text-caption text-medium-emphasis my-0">7 hours ago</p>
92-
</v-list-item>
93-
<v-divider></v-divider>
94-
<v-list-item value="4" color="secondary" class="no-spacer">
95-
<template v-slot:prepend>
96-
<v-avatar size="36" variant="flat" color="lightprimary" class="mr-3 py-2 text-primary"> C </v-avatar>
97-
</template>
98-
<div class="d-inline-flex justify-space-between w-100">
99-
<h6 class="text-subtitle-1 font-weight-regular mb-0">
100-
<span style="font-weight: 600">Cristina Danny</span> invited to join <span style="font-weight: 600">Metting.</span>
101-
</h6>
102-
<span class="text-caption">9:10 PM</span>
103-
</div>
104-
105-
<p class="text-caption text-medium-emphasis my-0">Daily scrum meeting time</p>
106-
</v-list-item>
107-
</v-list>
108-
</perfect-scrollbar>
109-
<v-divider></v-divider>
110-
<div class="pa-2 text-center">
111-
<v-btn color="primary" variant="text">View All</v-btn>
112-
</div>
113-
</v-sheet>
114-
</v-menu>
32+
<v-icon>mdi-bell-badge</v-icon>
33+
</v-btn>
34+
<div class="pr-3" :style="{ color: 'rgb(var(--v-theme-error))' }">お知らせあり</div>
35+
</template>
36+
</v-menu>
11537
</template>
11638

11739
<style lang="scss">
11840
.v-tooltip {
119-
> .v-overlay__content.custom-tooltip {
120-
padding: 2px 6px;
121-
}
41+
> .v-overlay__content.custom-tooltip {
42+
padding: 2px 6px;
43+
}
12244
}
12345
</style>

‎src/layouts/admin/vertical-header/VerticalHeader.vue‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,22 @@ const customizer = useCustomizerStore();
1212
</script>
1313

1414
<template>
15-
<v-app-bar elevation="0" height="100" class="border-0">
16-
<v-btn
17-
class="text-secondary mr-3"
18-
color="darkText"
19-
icon
20-
rounded="sm"
21-
variant="text"
22-
@click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
23-
size="small"
24-
>
25-
<!-- <MenuFoldOutlined :style="{ fontSize: '16px' }" /> -->
26-
<v-icon class="text-h2">mdi-menu</v-icon>
27-
</v-btn>
15+
<v-app-bar elevation="0" height="100" class="border-0">
16+
<v-btn
17+
class="text-secondary mr-3"
18+
color="darkText"
19+
icon
20+
rounded="sm"
21+
variant="text"
22+
@click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
23+
size="small"
24+
>
25+
<!-- <MenuFoldOutlined :style="{ fontSize: '16px' }" /> -->
26+
<v-icon class="text-h2">mdi-menu</v-icon>
27+
</v-btn>
2828

29-
<!-- search mobile -->
30-
<!-- <v-menu :close-on-content-click="false" class="hidden-lg-and-up" offset="10, 0">
29+
<!-- search mobile -->
30+
<!-- <v-menu :close-on-content-click="false" class="hidden-lg-and-up" offset="10, 0">
3131
<template v-slot:activator="{ props }">
3232
<v-btn
3333
class="hidden-lg-and-up text-secondary ml-1"
@@ -50,29 +50,29 @@ const customizer = useCustomizerStore();
5050
</v-sheet>
5151
</v-menu> -->
5252

53-
<!-- ---------------------------------------------- -->
54-
<!-- Search part -->
55-
<!-- ---------------------------------------------- -->
56-
<!-- <v-sheet class="d-none d-lg-block" width="250">
53+
<!-- ---------------------------------------------- -->
54+
<!-- Search part -->
55+
<!-- ---------------------------------------------- -->
56+
<!-- <v-sheet class="d-none d-lg-block" width="250">
5757
<Searchbar />
5858
</v-sheet> -->
5959

60-
<!---/Search part -->
60+
<!---/Search part -->
6161

62-
<v-spacer />
63-
<!-- ---------------------------------------------- -->
64-
<!---right part -->
65-
<!-- ---------------------------------------------- -->
62+
<v-spacer />
63+
<!-- ---------------------------------------------- -->
64+
<!---right part -->
65+
<!-- ---------------------------------------------- -->
6666

67-
<!-- TITLE -->
68-
<v-app-bar-title v-model="customizer.title" :style="{ color: 'rgb(var(--v-theme-textmain))' }" class="text-h3 font-weight-medium">{{
69-
customizer.title
70-
}}</v-app-bar-title>
67+
<!-- TITLE -->
68+
<v-app-bar-title v-model="customizer.title" :style="{ color: 'rgb(var(--v-theme-textmain))' }" class="text-h3 font-weight-medium">{{
69+
customizer.title
70+
}}</v-app-bar-title>
7171

72-
<!-- ---------------------------------------------- -->
73-
<!-- Github -->
74-
<!-- ---------------------------------------------- -->
75-
<!-- <v-btn
72+
<!-- ---------------------------------------------- -->
73+
<!-- Github -->
74+
<!-- ---------------------------------------------- -->
75+
<!-- <v-btn
7676
icon
7777
class="text-secondary hidden-sm-and-down d-flex"
7878
color="darkText"
@@ -84,15 +84,15 @@ const customizer = useCustomizerStore();
8484
<GithubOutlined :style="{ fontSize: '16px' }" />
8585
</v-btn> -->
8686

87-
<!-- ---------------------------------------------- -->
88-
<!-- Notification -->
89-
<!-- ---------------------------------------------- -->
90-
<NotificationDD />
87+
<!-- ---------------------------------------------- -->
88+
<!-- Notification -->
89+
<!-- ---------------------------------------------- -->
90+
<NotificationDD />
9191

92-
<!-- ---------------------------------------------- -->
93-
<!-- User Profile -->
94-
<!-- ---------------------------------------------- -->
95-
<!-- <v-menu :close-on-content-click="false" offset="8, 0">
92+
<!-- ---------------------------------------------- -->
93+
<!-- User Profile -->
94+
<!-- ---------------------------------------------- -->
95+
<!-- <v-menu :close-on-content-click="false" offset="8, 0">
9696
<template v-slot:activator="{ props }">
9797
<v-btn class="profileBtn" variant="text" rounded="sm" v-bind="props">
9898
<div class="d-flex align-center">
@@ -107,5 +107,5 @@ const customizer = useCustomizerStore();
107107
<ProfileDD />
108108
</v-sheet>
109109
</v-menu> -->
110-
</v-app-bar>
110+
</v-app-bar>
111111
</template>

‎src/layouts/admin/vertical-sidebar/NavItem/NavItem.vue‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,29 @@ const props = defineProps({ item: Object, level: Number });
33
</script>
44

55
<template>
6-
<!---Single Item-->
7-
<v-list-item
8-
:to="item.type === 'external' ? '' : item.to"
9-
:href="item.type === 'external' ? item.to : ''"
10-
rounded
11-
class="py-5"
12-
color="main"
13-
:disabled="item.disabled"
14-
:target="item.type === 'external' ? '_blank' : ''"
15-
>
16-
<!---If icon-->
17-
<template v-slot:prepend>
18-
<!-- <component :is="props.item.icon" class="iconClass" :level="props.level"></component> -->
19-
<v-icon :icon="props.item.icon" class="iconClass" :level="props.level"></v-icon>
20-
</template>
21-
<v-list-item-title class="font-weight-medium">{{ $t(item.title) }}</v-list-item-title>
22-
<!---If Caption-->
23-
<v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
24-
{{ item.subCaption }}
25-
</v-list-item-subtitle>
26-
<!-- -If any chip or label -->
27-
<template v-slot:append>
28-
<v-icon icon="mdi-chevron-right" class="iconClass" :level="props.level"></v-icon>
29-
</template>
30-
</v-list-item>
6+
<!---Single Item-->
7+
<v-list-item
8+
:to="item.type === 'external' ? '' : item.to"
9+
:href="item.type === 'external' ? item.to : ''"
10+
rounded
11+
class="py-5"
12+
color="main"
13+
:disabled="item.disabled"
14+
:target="item.type === 'external' ? '_blank' : ''"
15+
>
16+
<!---If icon-->
17+
<template v-slot:prepend>
18+
<!-- <component :is="props.item.icon" class="iconClass" :level="props.level"></component> -->
19+
<v-icon :icon="props.item.icon" class="iconClass" :level="props.level"></v-icon>
20+
</template>
21+
<v-list-item-title class="font-weight-medium">{{ $t(item.title) }}</v-list-item-title>
22+
<!---If Caption-->
23+
<v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
24+
{{ item.subCaption }}
25+
</v-list-item-subtitle>
26+
<!-- -If any chip or label -->
27+
<template v-slot:append>
28+
<v-icon icon="mdi-chevron-right" class="iconClass" :level="props.level"></v-icon>
29+
</template>
30+
</v-list-item>
3131
</template>

‎src/layouts/admin/vertical-sidebar/VerticalSidebar.vue‎

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,44 @@ const sidebarMenu = shallowRef(sidebarItems);
1414
</script>
1515

1616
<template>
17-
<v-navigation-drawer left v-model="customizer.mini_sidebar" elevation="0" rail-width="60" mobile-breakpoint="lg" app class="leftSidebar">
18-
<div class="pa-5 text-center">
19-
<Logo />
20-
</div>
21-
<div class="pa-5" :style="{ backgroundColor: 'rgb(var(--v-theme-main)' }">
22-
<div class="text-white font-weight-bold">管理者</div>
23-
<div class="py-1"></div>
24-
<div class="text-h4 text-white font-weight-regular">名字名前</div>
25-
</div>
26-
<!-- ---------------------------------------------- -->
27-
<!---Navigation -->
28-
<!-- ---------------------------------------------- -->
29-
<perfect-scrollbar class="scrollnavbar">
30-
<v-list aria-busy="true" aria-label="menu list">
31-
<!---Menu Loop -->
32-
<template v-for="(item, i) in sidebarMenu" :key="i">
33-
<NavItem :item="item" v-if="item.title != 'ログアウト'" @click.stop="customizer.SET_TITLE(item.title || '')" />
34-
<NavItem :item="item" v-else @click.stop="customizer.SET_TITLE('HOME')" />
35-
<!---End Single Item-->
36-
</template>
37-
</v-list>
38-
</perfect-scrollbar>
39-
</v-navigation-drawer>
17+
<v-navigation-drawer
18+
left
19+
v-model="customizer.mini_sidebar"
20+
elevation="0"
21+
rail-width="60"
22+
mobile-breakpoint="lg"
23+
app
24+
class="leftSidebar"
25+
>
26+
<div class="pa-5 text-center">
27+
<Logo />
28+
</div>
29+
<div class="pa-5" :style="{ backgroundColor: 'rgb(var(--v-theme-main)' }">
30+
<div class="text-white font-weight-bold">管理者</div>
31+
<div class="py-1"></div>
32+
<div class="text-h4 text-white font-weight-regular">名字名前</div>
33+
</div>
34+
<!-- ---------------------------------------------- -->
35+
<!---Navigation -->
36+
<!-- ---------------------------------------------- -->
37+
<perfect-scrollbar class="scrollnavbar">
38+
<v-list aria-busy="true" aria-label="menu list">
39+
<!---Menu Loop -->
40+
<template v-for="(item, i) in sidebarMenu" :key="i">
41+
<NavItem :item="item" v-if="item.title != 'ログアウト'" @click.stop="customizer.SET_TITLE(item.title || '')" />
42+
<NavItem :item="item" v-else @click.stop="customizer.SET_TITLE('HOME')" />
43+
<!---End Single Item-->
44+
</template>
45+
</v-list>
46+
47+
<template v-slot:append>
48+
<template v-for="(item, i) in sidebarMenu" :key="i">
49+
<NavItem
50+
:item="item"
51+
v-if="(item.title ?? '').includes('ポータルサイト') || (item.title ?? '').includes('操作ヘルプ')"
52+
/>
53+
</template>
54+
</template>
55+
</perfect-scrollbar>
56+
</v-navigation-drawer>
4057
</template>

0 commit comments

Comments
 (0)