Skip to content

Commit a9c6678

Browse files
antoine92190antoine92190
committed
(refactor) extract css outside component
1 parent 35ef8ed commit a9c6678

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1658
-1689
lines changed

‎.github/CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
- If you want to test using Firebase, you can follow the steps [here](https://github.com/antoine92190/vue-advanced-chat#using-with-firestore)
1010
- You can use the code in `demo/src/ChatContainer.vue` or write your own code to test the chat
1111
- Run `npm run serve` inside the `demo` folder to open the demo app
12-
- You need to keep `import ChatWindow from './../../src/ChatWindow'` to use the chat code locally and see your modifications live
12+
- You need to keep `import ChatWindow from './../../src/lib/ChatWindow'` to use the chat code locally and see your modifications live
1313
- When you are done with your changes, you can create a pull request and make sure you filled in the template correctly

‎demo/src/ChatContainer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ import {
8080
deleteDbField
8181
} from '@/firestore'
8282
import { parseTimestamp, isSameDay } from '@/utils/dates'
83-
import ChatWindow from './../../src/ChatWindow'
83+
import ChatWindow from './../../src/lib/ChatWindow'
8484
// import ChatWindow, { Rooms } from 'vue-advanced-chat'
8585
// import ChatWindow from 'vue-advanced-chat'
8686
// import 'vue-advanced-chat/dist/vue-advanced-chat.css'

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
"serve": "vue-cli-service serve",
3333
"build": "npm run clean:lib && npm run build:lib && npm run build:wc",
3434
"clean:lib": "rimraf dist",
35-
"build:lib": "vue-cli-service build --target lib --no-clean --name vue-advanced-chat ./src/ChatWindow/index.js",
36-
"build:wc": "vue-cli-service build --target wc --no-clean --name vue-advanced-chat ./src/ChatWindow/ChatWindow.vue",
35+
"build:lib": "vue-cli-service build --target lib --no-clean --name vue-advanced-chat ./src/lib/index.js",
36+
"build:wc": "vue-cli-service build --target wc --no-clean --name vue-advanced-chat ./src/lib/ChatWindow.vue",
3737
"prepublish": "npm run lint && npm run build",
3838
"publish-beta": "npm publish --tag beta",
3939
"lint": "vue-cli-service lint",

‎src/components/EmojiPicker/EmojiPicker.scss

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.vac-wrapper {
2+
position: relative;
3+
display: flex;
4+
5+
.vac-emoji-picker {
6+
position: absolute;
7+
z-index: 9999;
8+
bottom: 32px;
9+
right: 10px;
10+
width: 240px;
11+
overflow: scroll;
12+
padding: 16px;
13+
box-sizing: border-box;
14+
border-radius: 0.5rem;
15+
background: var(--chat-emoji-bg-color);
16+
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.1),
17+
0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 1px rgba(0, 0, 0, 0.1);
18+
}
19+
20+
.vac-picker-reaction {
21+
position: fixed;
22+
top: initial;
23+
right: initial;
24+
}
25+
26+
.vac-emoji-picker__search {
27+
display: flex;
28+
}
29+
30+
.vac-emoji-picker__search > input {
31+
flex: 1;
32+
border-radius: 10rem;
33+
border: var(--chat-border-style);
34+
padding: 5px 10px;
35+
outline: none;
36+
background: var(--chat-bg-color-input);
37+
color: var(--chat-color);
38+
}
39+
40+
.vac-emoji-picker h5 {
41+
margin: 15px 0 8px;
42+
color: #b1b1b1;
43+
text-transform: uppercase;
44+
font-size: 0.8rem;
45+
cursor: default;
46+
}
47+
48+
.vac-emoji-picker .vac-emojis {
49+
display: flex;
50+
flex-wrap: wrap;
51+
justify-content: space-between;
52+
}
53+
54+
.vac-emoji-picker .vac-emojis:after {
55+
content: '';
56+
flex: auto;
57+
}
58+
59+
.vac-emoji-picker .vac-emojis span {
60+
padding: 0.2rem;
61+
cursor: pointer;
62+
border-radius: 5px;
63+
}
64+
65+
.vac-emoji-picker .vac-emojis span:hover {
66+
background: var(--chat-sidemenu-bg-color-hover);
67+
cursor: pointer;
68+
}
69+
70+
.vac-emoji-reaction svg {
71+
height: 19px;
72+
width: 19px;
73+
}
74+
}

‎src/components/EmojiPicker.vue renamed to ‎src/components/EmojiPicker/EmojiPicker.vue

Lines changed: 1 addition & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
<script>
6060
import EmojiPicker from 'vue-emoji-picker'
6161
62-
import SvgIcon from './SvgIcon'
62+
import SvgIcon from '../SvgIcon/SvgIcon'
6363
6464
export default {
6565
components: {
@@ -128,80 +128,3 @@ export default {
128128
}
129129
}
130130
</script>
131-
132-
<style lang="scss">
133-
.vac-wrapper {
134-
position: relative;
135-
display: flex;
136-
137-
.vac-emoji-picker {
138-
position: absolute;
139-
z-index: 9999;
140-
bottom: 32px;
141-
right: 10px;
142-
width: 240px;
143-
overflow: scroll;
144-
padding: 16px;
145-
box-sizing: border-box;
146-
border-radius: 0.5rem;
147-
background: var(--chat-emoji-bg-color);
148-
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.1),
149-
0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 1px rgba(0, 0, 0, 0.1);
150-
}
151-
152-
.vac-picker-reaction {
153-
position: fixed;
154-
top: initial;
155-
right: initial;
156-
}
157-
158-
.vac-emoji-picker__search {
159-
display: flex;
160-
}
161-
162-
.vac-emoji-picker__search > input {
163-
flex: 1;
164-
border-radius: 10rem;
165-
border: var(--chat-border-style);
166-
padding: 5px 10px;
167-
outline: none;
168-
background: var(--chat-bg-color-input);
169-
color: var(--chat-color);
170-
}
171-
172-
.vac-emoji-picker h5 {
173-
margin: 15px 0 8px;
174-
color: #b1b1b1;
175-
text-transform: uppercase;
176-
font-size: 0.8rem;
177-
cursor: default;
178-
}
179-
180-
.vac-emoji-picker .vac-emojis {
181-
display: flex;
182-
flex-wrap: wrap;
183-
justify-content: space-between;
184-
}
185-
186-
.vac-emoji-picker .vac-emojis:after {
187-
content: '';
188-
flex: auto;
189-
}
190-
191-
.vac-emoji-picker .vac-emojis span {
192-
padding: 0.2rem;
193-
cursor: pointer;
194-
border-radius: 5px;
195-
}
196-
197-
.vac-emoji-picker .vac-emojis span:hover {
198-
background: var(--chat-sidemenu-bg-color-hover);
199-
cursor: pointer;
200-
}
201-
202-
.vac-emoji-reaction svg {
203-
height: 19px;
204-
width: 19px;
205-
}
206-
}
207-
</style>

‎src/components/FormatMessage/FormatMessage.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.vac-format-message-wrapper {
2+
.vac-icon-deleted {
3+
height: 14px;
4+
width: 14px;
5+
vertical-align: middle;
6+
margin: -3px 1px 0 0;
7+
fill: var(--chat-room-color-message);
8+
}
9+
10+
.vac-image-link-container {
11+
background-color: var(--chat-message-bg-color-media);
12+
padding: 8px;
13+
margin: 2px auto;
14+
border-radius: 4px;
15+
}
16+
17+
.vac-image-link {
18+
position: relative;
19+
background-color: var(--chat-message-bg-color-image) !important;
20+
background-size: contain;
21+
background-position: center center !important;
22+
background-repeat: no-repeat !important;
23+
height: 150px;
24+
width: 150px;
25+
max-width: 100%;
26+
border-radius: 4px;
27+
margin: 0 auto;
28+
}
29+
30+
.vac-image-link-message {
31+
max-width: 166px;
32+
font-size: 12px;
33+
}
34+
}

‎src/components/FormatMessage.vue renamed to ‎src/components/FormatMessage/FormatMessage.vue

Lines changed: 3 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@
5252
</template>
5353

5454
<script>
55-
import SvgIcon from './SvgIcon'
55+
import SvgIcon from '../SvgIcon/SvgIcon'
5656
57-
import formatString from '../utils/format-string'
58-
import { IMAGE_TYPES } from '../utils/constants'
57+
import formatString from '../../utils/format-string'
58+
import { IMAGE_TYPES } from '../../utils/constants'
5959
6060
export default {
6161
name: 'FormatMessage',
@@ -149,40 +149,3 @@ export default {
149149
}
150150
}
151151
</script>
152-
153-
<style lang="scss">
154-
.vac-format-message-wrapper {
155-
.vac-icon-deleted {
156-
height: 14px;
157-
width: 14px;
158-
vertical-align: middle;
159-
margin: -3px 1px 0 0;
160-
fill: var(--chat-room-color-message);
161-
}
162-
163-
.vac-image-link-container {
164-
background-color: var(--chat-message-bg-color-media);
165-
padding: 8px;
166-
margin: 2px auto;
167-
border-radius: 4px;
168-
}
169-
170-
.vac-image-link {
171-
position: relative;
172-
background-color: var(--chat-message-bg-color-image) !important;
173-
background-size: contain;
174-
background-position: center center !important;
175-
background-repeat: no-repeat !important;
176-
height: 150px;
177-
width: 150px;
178-
max-width: 100%;
179-
border-radius: 4px;
180-
margin: 0 auto;
181-
}
182-
183-
.vac-image-link-message {
184-
max-width: 166px;
185-
font-size: 12px;
186-
}
187-
}
188-
</style>

‎src/components/Loader.vue renamed to ‎src/components/Loader/Loader.scss

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,3 @@
1-
<template>
2-
<transition name="vac-fade-spinner" appear>
3-
<div
4-
v-if="show"
5-
class="vac-loader-wrapper"
6-
:class="{
7-
'vac-container-center': !infinite,
8-
'vac-container-top': infinite
9-
}"
10-
>
11-
<div id="vac-circle" />
12-
</div>
13-
</transition>
14-
</template>
15-
16-
<script>
17-
export default {
18-
name: 'Loader',
19-
20-
props: {
21-
show: { type: Boolean, default: false },
22-
infinite: { type: Boolean, default: false }
23-
}
24-
}
25-
</script>
26-
27-
<style lang="scss">
281
.vac-loader-wrapper {
292
&.vac-container-center {
303
position: absolute;
@@ -97,4 +70,3 @@ export default {
9770
transform: rotate(359deg);
9871
}
9972
}
100-
</style>

‎src/components/Loader/Loader.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<transition name="vac-fade-spinner" appear>
3+
<div
4+
v-if="show"
5+
class="vac-loader-wrapper"
6+
:class="{
7+
'vac-container-center': !infinite,
8+
'vac-container-top': infinite
9+
}"
10+
>
11+
<div id="vac-circle" />
12+
</div>
13+
</transition>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'Loader',
19+
20+
props: {
21+
show: { type: Boolean, default: false },
22+
infinite: { type: Boolean, default: false }
23+
}
24+
}
25+
</script>

0 commit comments

Comments
 (0)