Skip to content

Commit e0b85f2

Browse files
cizil-keyvaluecizil-keyvalue
authored
feat: Add ui of notification panel
* feat: Add ui of notification panel * format: Resolve linting errors
1 parent 9c877e7 commit e0b85f2

33 files changed

+1792
-2
lines changed

‎custom.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.svg' {
2+
const src: string;
3+
export default src;
4+
}

‎src/assets/dark/emptyIconDark.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/defaultAvatar.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/errorIcon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/light/emptyIconLight.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/BellIcon.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div :class="className" :style="{ width: size, height: size }">
3+
<svg :width="size" :height="size" viewBox="0 0 24 24" :fill="fill" xmlns="http://www.w3.org/2000/svg">
4+
<path
5+
d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9"
6+
:stroke="stroke" stroke-width="1.2973" stroke-linecap="round" stroke-linejoin="round" />
7+
</svg>
8+
</div>
9+
</template>
10+
11+
<script setup lang="ts">
12+
withDefaults(
13+
defineProps<{
14+
fill?: string;
15+
className?: string;
16+
size?: string;
17+
stroke?: string;
18+
}>(),
19+
{
20+
className: '',
21+
fill: 'none',
22+
size: '24',
23+
stroke: '#232326'
24+
}
25+
);
26+
</script>

‎src/components/ClearAllIcon.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div :class="className" :style="{ width: size, height: size }">
3+
<svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<path
5+
d="M5 12C5 12.5523 5.44772 13 6 13H18C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11H6C5.44772 11 5 11.4477 5 12ZM3 16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16C17 15.4477 16.5523 15 16 15H4C3.44772 15 3 15.4477 3 16ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9H20C20.5523 9 21 8.55228 21 8C21 7.44772 20.5523 7 20 7H8Z"
6+
:fill="fill" />
7+
</svg>
8+
</div>
9+
</template>
10+
11+
<script setup lang="ts">
12+
withDefaults(
13+
defineProps<{
14+
fill?: string;
15+
className?: string;
16+
size?: string;
17+
}>(),
18+
{
19+
className: '',
20+
fill: '#667185',
21+
size: '24'
22+
}
23+
);
24+
</script>

‎src/components/CloseIcon.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div :class="className" :style="{ width: size, height: size }">
3+
<svg :width="size" :height="size" viewBox="0 0 20 20" :fill="fill" xmlns="http://www.w3.org/2000/svg">
4+
<path d="M5 15L15 5M5 5L15 15" :stroke="stroke" stroke-width="2" stroke-linecap="round"
5+
stroke-linejoin="round" />
6+
</svg>
7+
8+
</div>
9+
</template>
10+
11+
<script setup lang="ts">
12+
withDefaults(
13+
defineProps<{
14+
fill?: string;
15+
className?: string;
16+
size?: string;
17+
stroke?: string;
18+
}>(),
19+
{
20+
fill: 'none',
21+
size: '20',
22+
stroke: '#98A2B3',
23+
className: ''
24+
}
25+
);
26+
</script>

‎src/components/EmptyList.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="siren-sdk-empty-container">
3+
<div :style="containerStyle" class="siren-sdk-empty-icon-container">
4+
<img
5+
:src="darkMode ? darkIcon : lightIcon"
6+
alt="empty_list"
7+
class="siren-sdk-empty-icon"
8+
/>
9+
</div>
10+
<div :style="styles.emptyText" class="siren-sdk-empty-text">
11+
{{ LIST_EMPTY_TEXT }}
12+
</div>
13+
<div :style="styles.emptyText" class="siren-sdk-empty-sub-text">
14+
{{ LIST_EMPTY_SUB_TEXT }}
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script setup lang="ts">
20+
import {
21+
COLORS,
22+
LIST_EMPTY_TEXT,
23+
LIST_EMPTY_SUB_TEXT
24+
} from '../utils/constants';
25+
import type { EmptyListProps } from '../types';
26+
import darkIcon from '../assets/dark/emptyIconDark.svg';
27+
import lightIcon from '../assets/light/emptyIconLight.svg';
28+
29+
import '../styles/emptyList.css';
30+
31+
const props = defineProps<EmptyListProps>();
32+
33+
const containerStyle = {
34+
backgroundColor: props.darkMode
35+
? COLORS.dark.iconColor
36+
: COLORS.light.iconColor
37+
};
38+
</script>

‎src/components/ErrorWindow.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="siren-sdk-error-window-container">
3+
<div :style="containerStyle" class="siren-sdk-error-icon-container">
4+
<img src="../assets/errorIcon.svg" alt="error_icon" :style="iconOpacity" class="siren-sdk-error-icon" />
5+
</div>
6+
<div :style="styles.errorText" class="siren-sdk-error-text">
7+
{{ ERROR_TEXT }}
8+
</div>
9+
<div :style="styles.errorText" class="siren-sdk-error-sub-text">
10+
{{ ERROR_SUB_TEXT }}
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script setup lang="ts">
16+
import { defineProps } from 'vue';
17+
18+
import { COLORS, ERROR_TEXT, ERROR_SUB_TEXT } from '../utils/constants';
19+
import type { ErrorWindowProps } from '../types';
20+
21+
import '../styles/errorWindow.css';
22+
23+
const props = defineProps<ErrorWindowProps>();
24+
25+
const containerStyle = {
26+
backgroundColor: props.darkMode
27+
? COLORS.dark.iconColor
28+
: COLORS.light.iconColor
29+
};
30+
const iconOpacity = { opacity: props.darkMode ? 0.2 : 1 };
31+
</script>

0 commit comments

Comments
 (0)