Skip to content

Commit b74a31e

Browse files
antoine92190antoine92190
committed
(UI) svg icons theme
1 parent 6b0f985 commit b74a31e

File tree

7 files changed

+152
-30
lines changed

7 files changed

+152
-30
lines changed

‎src/ChatWindow/ChatMessage.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,27 +65,27 @@
6565
class="svg-button icon-file"
6666
@click.stop="openFile(message.file)"
6767
>
68-
<svg-icon fill="#1976d2" name="document" />
68+
<svg-icon name="document" />
6969
</div>
7070
<span>{{ message.content }}</span>
7171
</div>
7272

7373
<div class="text-timestamp">
7474
<div class="icon-edited" v-if="message.edited && !message.deleted">
75-
<svg-icon fill="#9e9e9e" name="pencil" />
75+
<svg-icon name="pencil" param="edited" />
7676
</div>
7777
<span>{{ message.timestamp }}</span>
7878
<span v-if="isMessageSeen">
79-
<svg-icon fill="#0696c7" name="check" class="icon-check" />
79+
<svg-icon name="checkmark" class="icon-check" />
8080
</span>
8181
</div>
8282
</div>
8383
<div class="action-buttons" v-if="isEditable">
8484
<div class="svg-button button-delete" @click.stop="deleteMessage">
85-
<svg-icon fill="#f44336" name="trash" />
85+
<svg-icon name="trash" />
8686
</div>
8787
<div class="svg-button button-edit" @click.stop="editMessage">
88-
<svg-icon fill="#1976d2" name="pencil" />
88+
<svg-icon name="pencil" />
8989
</div>
9090
</div>
9191
</div>

‎src/ChatWindow/ChatWindow.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default {
5454
showFiles: { type: Boolean, default: true },
5555
showEmojis: { type: Boolean, default: true },
5656
textMessages: { type: Object, default: null },
57-
theme: { type: String, default: 'dark' },
57+
theme: { type: String, default: 'light' },
5858
colors: { type: Object, default: null }
5959
},
6060

‎src/ChatWindow/EmojiPicker.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@click.stop="clickEvent"
99
@click="openEmoji"
1010
>
11-
<svg-icon name="emoji" fill="#1976d2" />
11+
<svg-icon name="emoji" />
1212
</div>
1313
<div
1414
slot="emoji-picker"

‎src/ChatWindow/MessagesList.vue

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
v-if="menuActions.length"
1414
@click="menuOpened = !menuOpened"
1515
>
16-
<svg-icon name="vetical-dots" />
16+
<svg-icon name="menu" />
1717
</div>
1818
<transition name="slide-fade" v-if="menuActions.length">
1919
<div
@@ -75,18 +75,18 @@
7575
<div class="box-footer">
7676
<div v-if="imageFile">
7777
<div class="svg-button icon-image" @click="resetImageFile">
78-
<svg-icon fill="#fff" name="close" />
78+
<svg-icon name="close" param="image" />
7979
</div>
8080
<img :src="imageFile" class="image-file" />
8181
</div>
8282

8383
<div class="file-container" v-else-if="file">
8484
<div class="icon-file">
85-
<svg-icon fill="#1976d2" name="file" />
85+
<svg-icon name="file" />
8686
</div>
8787
<div>{{ message }}</div>
8888
<div class="svg-button icon-remove" @click="resetFile">
89-
<svg-icon fill="#9ca6af" name="close" />
89+
<svg-icon name="close" />
9090
</div>
9191
</div>
9292

@@ -110,7 +110,7 @@
110110
></emoji-picker>
111111

112112
<div v-if="showFiles" class="svg-button" @click="launchFilePicker">
113-
<svg-icon fill="#1976d2" name="paperclip" />
113+
<svg-icon name="paperclip" />
114114
</div>
115115

116116
<input
@@ -126,7 +126,7 @@
126126
v-if="editedMessage._id"
127127
@click="resetMessage"
128128
>
129-
<svg-icon fill="#1976d2" name="close-outline" />
129+
<svg-icon name="close-outline" />
130130
</div>
131131

132132
<div
@@ -135,10 +135,7 @@
135135
class="svg-button"
136136
:class="{ 'send-disabled': inputDisabled }"
137137
>
138-
<svg-icon
139-
:fill="inputDisabled ? '#9ca6af' : '#1976d2'"
140-
name="send"
141-
/>
138+
<svg-icon name="send" :param="inputDisabled ? 'disabled' : ''" />
142139
</div>
143140
</div>
144141
</div>

‎src/ChatWindow/RoomsList.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="rooms-container app-border-r">
33
<div class="box-search app-border-b">
44
<div class="icon-search">
5-
<svg-icon fill="#9ca6af" name="search" />
5+
<svg-icon name="search" />
66
</div>
77
<input
88
type="text"
@@ -12,7 +12,7 @@
1212
@input="searchRoom"
1313
/>
1414
<div class="svg-button" @click="addRoom">
15-
<svg-icon fill="#1976d2" name="add-circle" />
15+
<svg-icon name="add" />
1616
</div>
1717
</div>
1818

@@ -41,7 +41,7 @@
4141
<div class="room-name">{{ room.roomName }}</div>
4242
<div class="room-name text-last" v-if="room.lastMessage">
4343
<span v-if="room.lastMessage.seen">
44-
<svg-icon fill="#0696c7" name="check" class="icon-check" />
44+
<svg-icon name="checkmark" class="icon-check" />
4545
</span>
4646
<span>{{ room.lastMessage.content }}</span>
4747
</div>

‎src/ChatWindow/SvgIcon.vue

Lines changed: 78 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,21 @@
77
height="24"
88
viewBox="0 0 24 24"
99
>
10-
<path :fill="fill" :d="svgItem.find(item => item.name === name).path" />
10+
<path :id="svgId" :d="svgItem.find(item => item.name === name).path" />
1111
</svg>
1212
</template>
1313

1414
<script>
1515
export default {
16-
props: ['fill', 'name', 'path'],
16+
props: ['name', 'path', 'param'],
17+
18+
computed: {
19+
svgId() {
20+
const param = this.param ? '-' + this.param : ''
21+
return `chat-icon-${this.name}${param}`
22+
}
23+
},
24+
1725
data() {
1826
return {
1927
svgItem: [
@@ -23,12 +31,12 @@ export default {
2331
'M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'
2432
},
2533
{
26-
name: 'add-circle',
34+
name: 'add',
2735
path:
2836
'M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'
2937
},
3038
{
31-
name: 'vetical-dots',
39+
name: 'menu',
3240
path:
3341
'M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'
3442
},
@@ -76,7 +84,7 @@ export default {
7684
'M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z'
7785
},
7886
{
79-
name: 'check',
87+
name: 'checkmark',
8088
path: 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'
8189
}
8290
]
@@ -85,4 +93,68 @@ export default {
8593
}
8694
</script>
8795

88-
<style></style>
96+
<style>
97+
#chat-icon-search {
98+
fill: var(--chat-icon-color-search);
99+
}
100+
101+
#chat-icon-add {
102+
fill: var(--chat-icon-color-add);
103+
}
104+
105+
#chat-icon-menu {
106+
fill: var(--chat-icon-color-menu);
107+
}
108+
109+
#chat-icon-close {
110+
fill: var(--chat-icon-color-close);
111+
}
112+
113+
#chat-icon-close-image {
114+
fill: var(--chat-icon-color-close-image);
115+
}
116+
117+
#chat-icon-file {
118+
fill: var(--chat-icon-color-file);
119+
}
120+
121+
#chat-icon-paperclip {
122+
fill: var(--chat-icon-color-paperclip);
123+
}
124+
125+
#chat-icon-close-outline {
126+
fill: var(--chat-icon-color-close-outline);
127+
}
128+
129+
#chat-icon-send {
130+
fill: var(--chat-icon-color-send);
131+
}
132+
133+
#chat-icon-send-disabled {
134+
fill: var(--chat-icon-color-send-disabled);
135+
}
136+
137+
#chat-icon-emoji {
138+
fill: var(--chat-icon-color-emoji);
139+
}
140+
141+
#chat-icon-document {
142+
fill: var(--chat-icon-color-document);
143+
}
144+
145+
#chat-icon-pencil {
146+
fill: var(--chat-icon-color-pencil);
147+
}
148+
149+
#chat-icon-pencil-edited {
150+
fill: var(--chat-edited-icon-color-pencil);
151+
}
152+
153+
#chat-icon-trash {
154+
fill: var(--chat-icon-color-trash);
155+
}
156+
157+
#chat-icon-checkmark {
158+
fill: var(--chat-icon-color-checkmark);
159+
}
160+
</style>

‎src/themes/index.js

Lines changed: 57 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,25 @@ export const defaultThemeColors = {
88
messagesBg: '#f8f9fa',
99
textColorDark: '#0a0a0a',
1010
textColor: '#0a0a0a',
11-
inputBg: '#fff'
11+
inputBg: '#fff',
12+
iconsColor: {
13+
search: '#9ca6af',
14+
add: '#1976d2',
15+
menu: '#0a0a0a',
16+
close: '#9ca6af',
17+
closeImage: '#fff',
18+
file: '#1976d2',
19+
paperclip: '#1976d2',
20+
closeOutline: '#1976d2',
21+
send: '#1976d2',
22+
sendDisabled: '#9ca6af',
23+
emoji: '#1976d2',
24+
document: '#1976d2',
25+
pencil: '#1976d2',
26+
pencilEdited: '#9e9e9e',
27+
trash: '#f44336',
28+
checkmark: '#0696c7'
29+
}
1230
},
1331
dark: {
1432
headerBg: '#26272e',
@@ -19,7 +37,25 @@ export const defaultThemeColors = {
1937
messagesBg: '#1C1D21',
2038
textColorDark: '#0a0a0a',
2139
textColor: '#fff',
22-
inputBg: '#34343b'
40+
inputBg: '#34343b',
41+
iconsColor: {
42+
search: '#9ca6af',
43+
add: '#fff',
44+
menu: '#fff',
45+
close: '#9ca6af',
46+
closeImage: '#fff',
47+
file: '#fff',
48+
paperclip: '#fff',
49+
closeOutline: '#fff',
50+
send: '#fff',
51+
sendDisabled: '#9ca6af',
52+
emoji: '#fff',
53+
document: '#1976d2',
54+
pencil: '#1976d2',
55+
pencilEdited: '#9e9e9e',
56+
trash: '#f44336',
57+
checkmark: '#0696c7'
58+
}
2359
}
2460
}
2561

@@ -32,7 +68,8 @@ export const cssThemeVars = ({
3268
messagesBg,
3369
textColorDark,
3470
textColor,
35-
inputBg
71+
inputBg,
72+
iconsColor
3673
}) => {
3774
return {
3875
'--chat-header-bg-color': headerBg,
@@ -43,6 +80,22 @@ export const cssThemeVars = ({
4380
'--chat-color-dark': textColorDark,
4481
'--chat-color': textColor,
4582
'--chat-color-active': sidemenuColorActive,
46-
'--chat-color-input': inputBg
83+
'--chat-color-input': inputBg,
84+
'--chat-icon-color-search': iconsColor.search,
85+
'--chat-icon-color-add': iconsColor.add,
86+
'--chat-icon-color-menu': iconsColor.menu,
87+
'--chat-icon-color-close': iconsColor.close,
88+
'--chat-icon-color-close-image': iconsColor.closeImage,
89+
'--chat-icon-color-file': iconsColor.file,
90+
'--chat-icon-color-paperclip': iconsColor.paperclip,
91+
'--chat-icon-color-close-outline': iconsColor.closeOutline,
92+
'--chat-icon-color-send': iconsColor.send,
93+
'--chat-icon-color-send-disabled': iconsColor.sendDisabled,
94+
'--chat-icon-color-emoji': iconsColor.emoji,
95+
'--chat-icon-color-document': iconsColor.document,
96+
'--chat-icon-color-pencil': iconsColor.pencil,
97+
'--chat-edited-icon-color-pencil': iconsColor.pencilEdited,
98+
'--chat-icon-color-trash': iconsColor.trash,
99+
'--chat-icon-color-checkmark': iconsColor.checkmark
47100
}
48101
}

0 commit comments

Comments
 (0)