mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
[feature] added basic custom styling for chat
This commit is contained in:
Markus
parent
ee359309d9
commit
59828c25d2
@ -406,4 +406,9 @@ $color-toast-green: $color-success;
|
|||||||
$color-ribbon-event: $background-color-third;
|
$color-ribbon-event: $background-color-third;
|
||||||
$color-ribbon-event-active: $background-color-third-active;
|
$color-ribbon-event-active: $background-color-third-active;
|
||||||
$color-ribbon-article: $background-color-secondary;
|
$color-ribbon-article: $background-color-secondary;
|
||||||
$color-ribbon-article-active: $background-color-secondary-active;
|
$color-ribbon-article-active: $background-color-secondary-active;
|
||||||
|
|
||||||
|
|
||||||
|
:export {
|
||||||
|
colorYellow: $color-yellow;
|
||||||
|
}
|
||||||
@ -15,6 +15,7 @@
|
|||||||
:rooms-loaded="true"
|
:rooms-loaded="true"
|
||||||
show-files="false"
|
show-files="false"
|
||||||
show-audio="false"
|
show-audio="false"
|
||||||
|
:styles="JSON.stringify(computedChatStyle)"
|
||||||
:show-footer="true"
|
:show-footer="true"
|
||||||
@send-message="sendMessage($event.detail[0])"
|
@send-message="sendMessage($event.detail[0])"
|
||||||
@fetch-messages="fetchMessages($event.detail[0])"
|
@fetch-messages="fetchMessages($event.detail[0])"
|
||||||
@ -29,6 +30,7 @@
|
|||||||
<script>
|
<script>
|
||||||
// import { roomQuery } from '~/graphql/Rooms'
|
// import { roomQuery } from '~/graphql/Rooms'
|
||||||
import { messageQuery } from '~/graphql/Messages'
|
import { messageQuery } from '~/graphql/Messages'
|
||||||
|
import chatStyle from '~/constants/chat.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Chat',
|
name: 'Chat',
|
||||||
@ -129,6 +131,12 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
computedChatStyle(){
|
||||||
|
// return this.theme === 'light' ? chatStyle.STYLE.light : chatStyle.STYLE.dark
|
||||||
|
return chatStyle.STYLE.light
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetchMessages({ room, options = {} }) {
|
fetchMessages({ room, options = {} }) {
|
||||||
// console.log(room, options)
|
// console.log(room, options)
|
||||||
|
|||||||
302
webapp/constants/chat.js
Normal file
302
webapp/constants/chat.js
Normal file
@ -0,0 +1,302 @@
|
|||||||
|
import tokens from './../assets/_new/styles/tokens.scss'
|
||||||
|
// import branding from './../assets/styles/imports/_branding.scss'
|
||||||
|
|
||||||
|
let styleData=tokens;
|
||||||
|
|
||||||
|
|
||||||
|
const STYLE = {
|
||||||
|
light: {
|
||||||
|
general: {
|
||||||
|
color: '#0a0a0a',
|
||||||
|
colorButtonClear: '#1976d2',
|
||||||
|
colorButton: '#fff',
|
||||||
|
backgroundColorButton: '#1976d2',
|
||||||
|
backgroundInput: '#fff',
|
||||||
|
colorPlaceholder: styleData.colorYellow,
|
||||||
|
colorCaret: '#1976d2',
|
||||||
|
colorSpinner: '#333',
|
||||||
|
borderStyle: '1px solid #e1e4e8',
|
||||||
|
backgroundScrollIcon: '#fff'
|
||||||
|
},
|
||||||
|
|
||||||
|
container: {
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
boxShadow:
|
||||||
|
'0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)'
|
||||||
|
},
|
||||||
|
|
||||||
|
header: {
|
||||||
|
background: '#fff',
|
||||||
|
colorRoomName: '#0a0a0a',
|
||||||
|
colorRoomInfo: styleData.colorYellow
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
background: '#f8f9fa',
|
||||||
|
borderStyleInput: '1px solid #e1e4e8',
|
||||||
|
borderInputSelected: '#1976d2',
|
||||||
|
backgroundReply: '#e5e5e6',
|
||||||
|
backgroundTagActive: '#e5e5e6',
|
||||||
|
backgroundTag: '#f8f9fa'
|
||||||
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
background: '#f8f9fa'
|
||||||
|
},
|
||||||
|
|
||||||
|
sidemenu: {
|
||||||
|
background: '#fff',
|
||||||
|
backgroundHover: '#f6f6f6',
|
||||||
|
backgroundActive: '#e5effa',
|
||||||
|
colorActive: '#1976d2',
|
||||||
|
borderColorSearch: '#e1e5e8'
|
||||||
|
},
|
||||||
|
|
||||||
|
dropdown: {
|
||||||
|
background: '#fff',
|
||||||
|
backgroundHover: '#f6f6f6'
|
||||||
|
},
|
||||||
|
|
||||||
|
message: {
|
||||||
|
background: '#fff',
|
||||||
|
backgroundMe: '#ccf2cf',
|
||||||
|
color: '#0a0a0a',
|
||||||
|
colorStarted: styleData.colorYellow,
|
||||||
|
backgroundDeleted: '#dadfe2',
|
||||||
|
backgroundSelected: '#c2dcf2',
|
||||||
|
colorDeleted: '#757e85',
|
||||||
|
colorUsername: styleData.colorYellow,
|
||||||
|
colorTimestamp: '#828c94',
|
||||||
|
backgroundDate: '#e5effa',
|
||||||
|
colorDate: '#505a62',
|
||||||
|
backgroundSystem: '#e5effa',
|
||||||
|
colorSystem: '#505a62',
|
||||||
|
backgroundMedia: 'rgba(0, 0, 0, 0.15)',
|
||||||
|
backgroundReply: 'rgba(0, 0, 0, 0.08)',
|
||||||
|
colorReplyUsername: '#0a0a0a',
|
||||||
|
colorReply: '#6e6e6e',
|
||||||
|
colorTag: '#0d579c',
|
||||||
|
backgroundImage: '#ddd',
|
||||||
|
colorNewMessages: '#1976d2',
|
||||||
|
backgroundScrollCounter: '#0696c7',
|
||||||
|
colorScrollCounter: '#fff',
|
||||||
|
backgroundReaction: '#eee',
|
||||||
|
borderStyleReaction: '1px solid #eee',
|
||||||
|
backgroundReactionHover: '#fff',
|
||||||
|
borderStyleReactionHover: '1px solid #ddd',
|
||||||
|
colorReactionCounter: '#0a0a0a',
|
||||||
|
backgroundReactionMe: '#cfecf5',
|
||||||
|
borderStyleReactionMe: '1px solid #3b98b8',
|
||||||
|
backgroundReactionHoverMe: '#cfecf5',
|
||||||
|
borderStyleReactionHoverMe: '1px solid #3b98b8',
|
||||||
|
colorReactionCounterMe: '#0b59b3',
|
||||||
|
backgroundAudioRecord: '#eb4034',
|
||||||
|
backgroundAudioLine: 'rgba(0, 0, 0, 0.15)',
|
||||||
|
backgroundAudioProgress: '#455247',
|
||||||
|
backgroundAudioProgressSelector: '#455247',
|
||||||
|
colorFileExtension: '#757e85'
|
||||||
|
},
|
||||||
|
|
||||||
|
markdown: {
|
||||||
|
background: 'rgba(239, 239, 239, 0.7)',
|
||||||
|
border: 'rgba(212, 212, 212, 0.9)',
|
||||||
|
color: '#e01e5a',
|
||||||
|
colorMulti: '#0a0a0a'
|
||||||
|
},
|
||||||
|
|
||||||
|
room: {
|
||||||
|
colorUsername: '#0a0a0a',
|
||||||
|
colorMessage: '#67717a',
|
||||||
|
colorTimestamp: '#a2aeb8',
|
||||||
|
colorStateOnline: '#4caf50',
|
||||||
|
colorStateOffline: styleData.colorYellow,
|
||||||
|
backgroundCounterBadge: '#0696c7',
|
||||||
|
colorCounterBadge: '#fff'
|
||||||
|
},
|
||||||
|
|
||||||
|
emoji: {
|
||||||
|
background: '#fff'
|
||||||
|
},
|
||||||
|
|
||||||
|
icons: {
|
||||||
|
search: styleData.colorYellow,
|
||||||
|
add: '#1976d2',
|
||||||
|
toggle: '#0a0a0a',
|
||||||
|
menu: '#0a0a0a',
|
||||||
|
close: styleData.colorYellow,
|
||||||
|
closeImage: '#fff',
|
||||||
|
file: '#1976d2',
|
||||||
|
paperclip: '#1976d2',
|
||||||
|
closeOutline: '#000',
|
||||||
|
closePreview: '#fff',
|
||||||
|
send: '#1976d2',
|
||||||
|
sendDisabled: styleData.colorYellow,
|
||||||
|
emoji: '#1976d2',
|
||||||
|
emojiReaction: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
document: '#1976d2',
|
||||||
|
pencil: '#9e9e9e',
|
||||||
|
checkmark: '#9e9e9e',
|
||||||
|
checkmarkSeen: '#0696c7',
|
||||||
|
eye: '#fff',
|
||||||
|
dropdownMessage: '#fff',
|
||||||
|
dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
|
||||||
|
dropdownRoom: '#9e9e9e',
|
||||||
|
dropdownScroll: '#0a0a0a',
|
||||||
|
microphone: '#1976d2',
|
||||||
|
audioPlay: '#455247',
|
||||||
|
audioPause: '#455247',
|
||||||
|
audioCancel: '#eb4034',
|
||||||
|
audioConfirm: '#1ba65b'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
general: {
|
||||||
|
color: '#fff',
|
||||||
|
colorButtonClear: '#fff',
|
||||||
|
colorButton: '#fff',
|
||||||
|
backgroundColorButton: '#1976d2',
|
||||||
|
backgroundInput: '#202223',
|
||||||
|
colorPlaceholder: '#596269',
|
||||||
|
colorCaret: '#fff',
|
||||||
|
colorSpinner: '#fff',
|
||||||
|
borderStyle: 'none',
|
||||||
|
backgroundScrollIcon: '#fff'
|
||||||
|
},
|
||||||
|
|
||||||
|
container: {
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '4px',
|
||||||
|
boxShadow:
|
||||||
|
'0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)'
|
||||||
|
},
|
||||||
|
|
||||||
|
header: {
|
||||||
|
background: '#181a1b',
|
||||||
|
colorRoomName: '#fff',
|
||||||
|
colorRoomInfo: '#9ca6af'
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
background: '#131415',
|
||||||
|
borderStyleInput: 'none',
|
||||||
|
borderInputSelected: '#1976d2',
|
||||||
|
backgroundReply: '#1b1c1c',
|
||||||
|
backgroundTagActive: '#1b1c1c',
|
||||||
|
backgroundTag: '#131415'
|
||||||
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
background: '#131415'
|
||||||
|
},
|
||||||
|
|
||||||
|
sidemenu: {
|
||||||
|
background: '#181a1b',
|
||||||
|
backgroundHover: '#202224',
|
||||||
|
backgroundActive: '#151617',
|
||||||
|
colorActive: '#fff',
|
||||||
|
borderColorSearch: '#181a1b'
|
||||||
|
},
|
||||||
|
|
||||||
|
dropdown: {
|
||||||
|
background: '#2a2c33',
|
||||||
|
backgroundHover: '#26282e'
|
||||||
|
},
|
||||||
|
|
||||||
|
message: {
|
||||||
|
background: '#22242a',
|
||||||
|
backgroundMe: '#1f7e80',
|
||||||
|
color: '#fff',
|
||||||
|
colorStarted: '#9ca6af',
|
||||||
|
backgroundDeleted: '#1b1c21',
|
||||||
|
backgroundSelected: '#c2dcf2',
|
||||||
|
colorDeleted: '#a2a5a8',
|
||||||
|
colorUsername: '#b3bac9',
|
||||||
|
colorTimestamp: '#ebedf2',
|
||||||
|
backgroundDate: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
colorDate: '#bec5cc',
|
||||||
|
backgroundSystem: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
colorSystem: '#bec5cc',
|
||||||
|
backgroundMedia: 'rgba(0, 0, 0, 0.18)',
|
||||||
|
backgroundReply: 'rgba(0, 0, 0, 0.18)',
|
||||||
|
colorReplyUsername: '#fff',
|
||||||
|
colorReply: '#d6d6d6',
|
||||||
|
colorTag: '#f0c60a',
|
||||||
|
backgroundImage: '#ddd',
|
||||||
|
colorNewMessages: '#fff',
|
||||||
|
backgroundScrollCounter: '#1976d2',
|
||||||
|
colorScrollCounter: '#fff',
|
||||||
|
backgroundReaction: 'none',
|
||||||
|
borderStyleReaction: 'none',
|
||||||
|
backgroundReactionHover: '#202223',
|
||||||
|
borderStyleReactionHover: 'none',
|
||||||
|
colorReactionCounter: '#fff',
|
||||||
|
backgroundReactionMe: '#4e9ad1',
|
||||||
|
borderStyleReactionMe: 'none',
|
||||||
|
backgroundReactionHoverMe: '#4e9ad1',
|
||||||
|
borderStyleReactionHoverMe: 'none',
|
||||||
|
colorReactionCounterMe: '#fff',
|
||||||
|
backgroundAudioRecord: '#eb4034',
|
||||||
|
backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
|
||||||
|
backgroundAudioProgress: '#b7d4d3',
|
||||||
|
backgroundAudioProgressSelector: '#b7d4d3',
|
||||||
|
colorFileExtension: '#a2a5a8'
|
||||||
|
},
|
||||||
|
|
||||||
|
markdown: {
|
||||||
|
background: 'rgba(239, 239, 239, 0.7)',
|
||||||
|
border: 'rgba(212, 212, 212, 0.9)',
|
||||||
|
color: '#e01e5a',
|
||||||
|
colorMulti: '#0a0a0a'
|
||||||
|
},
|
||||||
|
|
||||||
|
room: {
|
||||||
|
colorUsername: '#fff',
|
||||||
|
colorMessage: '#6c7278',
|
||||||
|
colorTimestamp: '#6c7278',
|
||||||
|
colorStateOnline: '#4caf50',
|
||||||
|
colorStateOffline: '#596269',
|
||||||
|
backgroundCounterBadge: '#1976d2',
|
||||||
|
colorCounterBadge: '#fff'
|
||||||
|
},
|
||||||
|
|
||||||
|
emoji: {
|
||||||
|
background: '#343740'
|
||||||
|
},
|
||||||
|
|
||||||
|
icons: {
|
||||||
|
search: '#596269',
|
||||||
|
add: '#fff',
|
||||||
|
toggle: '#fff',
|
||||||
|
menu: '#fff',
|
||||||
|
close: '#9ca6af',
|
||||||
|
closeImage: '#fff',
|
||||||
|
file: '#1976d2',
|
||||||
|
paperclip: '#fff',
|
||||||
|
closeOutline: '#fff',
|
||||||
|
closePreview: '#fff',
|
||||||
|
send: '#fff',
|
||||||
|
sendDisabled: '#646a70',
|
||||||
|
emoji: '#fff',
|
||||||
|
emojiReaction: '#fff',
|
||||||
|
document: '#1976d2',
|
||||||
|
pencil: '#ebedf2',
|
||||||
|
checkmark: '#ebedf2',
|
||||||
|
checkmarkSeen: '#f0d90a',
|
||||||
|
eye: '#fff',
|
||||||
|
dropdownMessage: '#fff',
|
||||||
|
dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
|
||||||
|
dropdownRoom: '#fff',
|
||||||
|
dropdownScroll: '#0a0a0a',
|
||||||
|
microphone: '#fff',
|
||||||
|
audioPlay: '#b7d4d3',
|
||||||
|
audioPause: '#b7d4d3',
|
||||||
|
audioCancel: '#eb4034',
|
||||||
|
audioConfirm: '#1ba65b'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
STYLE
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user