mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
added more base design to chat component & lint
This commit is contained in:
Markus
parent
59828c25d2
commit
13b2968c28
@ -410,5 +410,24 @@ $color-ribbon-article-active: $background-color-secondary-active;
|
||||
|
||||
|
||||
:export {
|
||||
colorYellow: $color-yellow;
|
||||
colorPrimary: $color-primary;
|
||||
colorPrimaryActive: $color-primary-active;
|
||||
colorPrimaryLight: $color-primary-light;
|
||||
|
||||
borderColorSoft: $border-color-soft;
|
||||
|
||||
borderRadiusBase: $border-radius-base;
|
||||
|
||||
textColorBase: $text-color-base;
|
||||
textColorSoft: $text-color-soft;
|
||||
textColorInverse: $text-color-inverse;
|
||||
|
||||
boxShadowBase: $box-shadow-base;
|
||||
|
||||
backgroundColorBase: $background-color-base;
|
||||
backgroundColorSoft: $background-color-soft;
|
||||
backgroundColorSoftest: $background-color-softest;
|
||||
backgroundColorPrimary: $background-color-primary;
|
||||
|
||||
colorNeutral30: $color-neutral-30;
|
||||
}
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
IS_ONLINE: this.$t('chat.isOnline'),
|
||||
LAST_SEEN: this.$t('chat.lastSeen'),
|
||||
IS_TYPING: this.$t('chat.isTyping'),
|
||||
CANCEL_SELECT_MESSAGE: this.$t('chat.cancelSelectMessage')
|
||||
CANCEL_SELECT_MESSAGE: this.$t('chat.cancelSelectMessage'),
|
||||
},
|
||||
roomActions: [
|
||||
{
|
||||
@ -133,9 +133,10 @@ export default {
|
||||
|
||||
computed: {
|
||||
computedChatStyle() {
|
||||
// TODO light/dark theme still needed?
|
||||
// return this.theme === 'light' ? chatStyle.STYLE.light : chatStyle.STYLE.dark
|
||||
return chatStyle.STYLE.light
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchMessages({ room, options = {} }) {
|
||||
|
||||
@ -1,72 +1,70 @@
|
||||
import tokens from './../assets/_new/styles/tokens.scss'
|
||||
// import branding from './../assets/styles/imports/_branding.scss'
|
||||
|
||||
let styleData=tokens;
|
||||
|
||||
const styleData = tokens
|
||||
|
||||
const STYLE = {
|
||||
light: {
|
||||
general: {
|
||||
color: '#0a0a0a',
|
||||
color: styleData.textColorBase,
|
||||
colorButtonClear: '#1976d2',
|
||||
colorButton: '#fff',
|
||||
backgroundColorButton: '#1976d2',
|
||||
backgroundInput: '#fff',
|
||||
colorPlaceholder: styleData.colorYellow,
|
||||
colorPlaceholder: styleData.textColorSoft,
|
||||
colorCaret: '#1976d2',
|
||||
colorSpinner: '#333',
|
||||
colorSpinner: styleData.colorPrimary,
|
||||
borderStyle: '1px solid #e1e4e8',
|
||||
backgroundScrollIcon: '#fff'
|
||||
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)'
|
||||
borderRadius: styleData.borderRadiusBase,
|
||||
boxShadow: styleData.boxShadowBase,
|
||||
},
|
||||
|
||||
header: {
|
||||
background: '#fff',
|
||||
colorRoomName: '#0a0a0a',
|
||||
colorRoomInfo: styleData.colorYellow
|
||||
background: styleData.backgroundColorSoft,
|
||||
colorRoomName: styleData.textColorBase,
|
||||
colorRoomInfo: styleData.textColorSoft,
|
||||
},
|
||||
|
||||
footer: {
|
||||
background: '#f8f9fa',
|
||||
background: styleData.backgroundColorSoft,
|
||||
borderStyleInput: '1px solid #e1e4e8',
|
||||
borderInputSelected: '#1976d2',
|
||||
backgroundReply: '#e5e5e6',
|
||||
backgroundTagActive: '#e5e5e6',
|
||||
backgroundTag: '#f8f9fa'
|
||||
backgroundReply: styleData.backgroundColorSoft,
|
||||
backgroundTagActive: styleData.backgroundColorSoft,
|
||||
backgroundTag: styleData.backgroundColorBase,
|
||||
},
|
||||
|
||||
content: {
|
||||
background: '#f8f9fa'
|
||||
background: styleData.backgroundColorBase,
|
||||
},
|
||||
|
||||
sidemenu: {
|
||||
background: '#fff',
|
||||
backgroundHover: '#f6f6f6',
|
||||
backgroundActive: '#e5effa',
|
||||
backgroundActive: styleData.colorPrimaryLight,
|
||||
colorActive: '#1976d2',
|
||||
borderColorSearch: '#e1e5e8'
|
||||
borderColorSearch: '#e1e5e8',
|
||||
},
|
||||
|
||||
dropdown: {
|
||||
background: '#fff',
|
||||
backgroundHover: '#f6f6f6'
|
||||
backgroundHover: '#f6f6f6',
|
||||
},
|
||||
|
||||
message: {
|
||||
background: '#fff',
|
||||
backgroundMe: '#ccf2cf',
|
||||
color: '#0a0a0a',
|
||||
colorStarted: styleData.colorYellow,
|
||||
background: styleData.backgroundColorBase,
|
||||
backgroundMe: styleData.colorPrimaryLight,
|
||||
color: styleData.textColorBase,
|
||||
colorStarted: '#9ca6af',
|
||||
backgroundDeleted: '#dadfe2',
|
||||
backgroundSelected: '#c2dcf2',
|
||||
colorDeleted: '#757e85',
|
||||
colorUsername: styleData.colorYellow,
|
||||
colorUsername: '#9ca6af',
|
||||
colorTimestamp: '#828c94',
|
||||
backgroundDate: '#e5effa',
|
||||
colorDate: '#505a62',
|
||||
@ -95,14 +93,14 @@ const STYLE = {
|
||||
backgroundAudioLine: 'rgba(0, 0, 0, 0.15)',
|
||||
backgroundAudioProgress: '#455247',
|
||||
backgroundAudioProgressSelector: '#455247',
|
||||
colorFileExtension: '#757e85'
|
||||
colorFileExtension: '#757e85',
|
||||
},
|
||||
|
||||
markdown: {
|
||||
background: 'rgba(239, 239, 239, 0.7)',
|
||||
border: 'rgba(212, 212, 212, 0.9)',
|
||||
color: '#e01e5a',
|
||||
colorMulti: '#0a0a0a'
|
||||
colorMulti: '#0a0a0a',
|
||||
},
|
||||
|
||||
room: {
|
||||
@ -110,31 +108,31 @@ const STYLE = {
|
||||
colorMessage: '#67717a',
|
||||
colorTimestamp: '#a2aeb8',
|
||||
colorStateOnline: '#4caf50',
|
||||
colorStateOffline: styleData.colorYellow,
|
||||
colorStateOffline: '#9ca6af',
|
||||
backgroundCounterBadge: '#0696c7',
|
||||
colorCounterBadge: '#fff'
|
||||
colorCounterBadge: '#fff',
|
||||
},
|
||||
|
||||
emoji: {
|
||||
background: '#fff'
|
||||
background: '#fff',
|
||||
},
|
||||
|
||||
icons: {
|
||||
search: styleData.colorYellow,
|
||||
add: '#1976d2',
|
||||
toggle: '#0a0a0a',
|
||||
menu: '#0a0a0a',
|
||||
close: styleData.colorYellow,
|
||||
search: '#9ca6af',
|
||||
add: styleData.colorPrimary,
|
||||
toggle: styleData.colorNeutral30,
|
||||
menu: styleData.colorNeutral30,
|
||||
close: '#9ca6af',
|
||||
closeImage: '#fff',
|
||||
file: '#1976d2',
|
||||
paperclip: '#1976d2',
|
||||
file: styleData.colorPrimary,
|
||||
paperclip: styleData.colorPrimary,
|
||||
closeOutline: '#000',
|
||||
closePreview: '#fff',
|
||||
send: '#1976d2',
|
||||
sendDisabled: styleData.colorYellow,
|
||||
emoji: '#1976d2',
|
||||
send: styleData.colorPrimary,
|
||||
sendDisabled: '#9ca6af',
|
||||
emoji: styleData.colorPrimary,
|
||||
emojiReaction: 'rgba(0, 0, 0, 0.3)',
|
||||
document: '#1976d2',
|
||||
document: styleData.colorPrimary,
|
||||
pencil: '#9e9e9e',
|
||||
checkmark: '#9e9e9e',
|
||||
checkmarkSeen: '#0696c7',
|
||||
@ -143,12 +141,12 @@ const STYLE = {
|
||||
dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
|
||||
dropdownRoom: '#9e9e9e',
|
||||
dropdownScroll: '#0a0a0a',
|
||||
microphone: '#1976d2',
|
||||
microphone: styleData.colorPrimary,
|
||||
audioPlay: '#455247',
|
||||
audioPause: '#455247',
|
||||
audioCancel: '#eb4034',
|
||||
audioConfirm: '#1ba65b'
|
||||
}
|
||||
audioConfirm: '#1ba65b',
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
general: {
|
||||
@ -161,20 +159,19 @@ const STYLE = {
|
||||
colorCaret: '#fff',
|
||||
colorSpinner: '#fff',
|
||||
borderStyle: 'none',
|
||||
backgroundScrollIcon: '#fff'
|
||||
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)'
|
||||
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'
|
||||
colorRoomInfo: '#9ca6af',
|
||||
},
|
||||
|
||||
footer: {
|
||||
@ -183,11 +180,11 @@ const STYLE = {
|
||||
borderInputSelected: '#1976d2',
|
||||
backgroundReply: '#1b1c1c',
|
||||
backgroundTagActive: '#1b1c1c',
|
||||
backgroundTag: '#131415'
|
||||
backgroundTag: '#131415',
|
||||
},
|
||||
|
||||
content: {
|
||||
background: '#131415'
|
||||
background: '#131415',
|
||||
},
|
||||
|
||||
sidemenu: {
|
||||
@ -195,12 +192,12 @@ const STYLE = {
|
||||
backgroundHover: '#202224',
|
||||
backgroundActive: '#151617',
|
||||
colorActive: '#fff',
|
||||
borderColorSearch: '#181a1b'
|
||||
borderColorSearch: '#181a1b',
|
||||
},
|
||||
|
||||
dropdown: {
|
||||
background: '#2a2c33',
|
||||
backgroundHover: '#26282e'
|
||||
backgroundHover: '#26282e',
|
||||
},
|
||||
|
||||
message: {
|
||||
@ -240,14 +237,14 @@ const STYLE = {
|
||||
backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
|
||||
backgroundAudioProgress: '#b7d4d3',
|
||||
backgroundAudioProgressSelector: '#b7d4d3',
|
||||
colorFileExtension: '#a2a5a8'
|
||||
colorFileExtension: '#a2a5a8',
|
||||
},
|
||||
|
||||
markdown: {
|
||||
background: 'rgba(239, 239, 239, 0.7)',
|
||||
border: 'rgba(212, 212, 212, 0.9)',
|
||||
color: '#e01e5a',
|
||||
colorMulti: '#0a0a0a'
|
||||
colorMulti: '#0a0a0a',
|
||||
},
|
||||
|
||||
room: {
|
||||
@ -257,11 +254,11 @@ const STYLE = {
|
||||
colorStateOnline: '#4caf50',
|
||||
colorStateOffline: '#596269',
|
||||
backgroundCounterBadge: '#1976d2',
|
||||
colorCounterBadge: '#fff'
|
||||
colorCounterBadge: '#fff',
|
||||
},
|
||||
|
||||
emoji: {
|
||||
background: '#343740'
|
||||
background: '#343740',
|
||||
},
|
||||
|
||||
icons: {
|
||||
@ -292,11 +289,11 @@ const STYLE = {
|
||||
audioPlay: '#b7d4d3',
|
||||
audioPause: '#b7d4d3',
|
||||
audioCancel: '#eb4034',
|
||||
audioConfirm: '#1ba65b'
|
||||
}
|
||||
}
|
||||
audioConfirm: '#1ba65b',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
STYLE
|
||||
STYLE,
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user