Briq/multiparty-meeting
7
0 Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added logo and styling options

Browse Source
This commit is contained in:
Håvar Aambø Fosstveit committed 2019-04-01 10:53:44 +02:00
1 parent 4d21e7b4e9
commit 9b78a81ef0
7 files changed
+26 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/public/chooseRoom.html
+1 -1
View File
@@ -15,7 +15,7 @@
top: 40%;
width: 90%;
transform: translate(-50%, 0%);
background-image: url('/images/background.svg');
background-image: url('/images/background.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
app/public/config.example.js
+7 -3
View File
@@ -1,8 +1,9 @@
// eslint-disable-next-line
var config =
{
loginEnabled : false,
developmentPort : 3443,
turnServers : [
turnServers : [
{
urls : [
'turn:turn.example.com:443?transport=tcp'
@@ -16,8 +17,11 @@ var config =
{
tcp : true
},
lastN : 4,
theme :
lastN : 4,
background : 'images/background.jpg',
// Add file and uncomment for adding logo to appbar
// logo : 'images/logo.svg',
theme :
{
palette :
{
app/public/images/background.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

app/public/images/background.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"><path d="M961,588L929,566L941,608Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M929,566L904,567L941,608Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M904,567L889,599L941,608Z" fill="#656262" stroke="#656262" stroke-width="1.51"/><path d="M929,566L915,535L904,567Z" fill="#676464" stroke="#676464" stroke-width="1.51"/><path d="M904,567L854,580L889,599Z" fill="#656262" stroke="#656262" stroke-width="1.51"/><path d="M938,502L915,535L929,566Z" fill="#686565" stroke="#686565" stroke-width="1.51"/><path d="M889,599L908,634L941,608Z" fill="#636161" stroke="#636161" stroke-width="1.51"/><path d="M961,588L991,531L929,566Z" fill="#686565" stroke="#686565" stroke-width="1.51"/><path d="M1008,627L994,569L961,588Z" fill="#656262" stroke="#656262" stroke-width="1.51"/><path d="M976,636L961,588L941,608Z" fill="#656262" stroke="#656262" stroke-width="1.51"/><path d="M950,649L976,636L941,608Z" fill="#646161" stroke="#646161" stroke-width="1.51"/><path d="M908,634L950,649L941,608Z" fill="#636161" stroke="#636161" stroke-width="1.51"/><path d="M889,599L879,628L908,634Z" fill="#636060" stroke="#636060" stroke-width="1.51"/><path d="M908,634L921,685L950,649Z" fill="#625f5f" stroke="#625f5f" stroke-width="1.51"/><path d="M994,569L991,531L961,588Z" fill="#676464" stroke="#676464" stroke-width="1.51"/><path d="M976,636L1008,627L961,588Z" fill="#646262" stroke="#646262" stroke-width="1.51"/><path d="M994,569L1028,550L991,531Z" fill="#676464" stroke="#676464" stroke-width="1.51"/><path d="M991,683L1008,627L976,636Z" fill="#626060" stroke="#626060" stroke-width="1.51"/><path d="M991,531L938,502L929,566Z" fill="#686565" stroke="#686565" stroke-width="1.51"/><path d="M845,556L854,580L904,567Z" fill="#656262" stroke="#656262" stroke-width="1.51"/><path d="M889,599L854,580L879,628Z" fill="#646161" stroke="#646161" stroke-width="1.51"/><path d="M845,556L904,567L861,523Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M1008,627L1030,582L994,569Z" fill="#656262" stroke="#656262" stroke-width="1.51"/><path d="M1030,582L1028,550L994,569Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M991,531L970,482L938,502Z" fill="#676464" stroke="#676464" stroke-width="1.51"/><path d="M861,523L904,567L915,535Z" fill="#676464" stroke="#676464" stroke-width="1.51"/><path d="M876,491L861,523L915,535Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M867,678L921,685L908,634Z" fill="#605e5e" stroke="#605e5e" stroke-width="1.51"/><path d="M950,649L991,683L976,636Z" fill="#626060" stroke="#626060" stroke-width="1.51"/><path d="M921,685L933,687L950,649Z" fill="#615f5f" stroke="#615f5f" stroke-width="1.51"/><path d="M1014,465L970,482L991,531Z" fill="#656363" stroke="#656363" stroke-width="1.51"/><path d="M938,502L915,478L915,535Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M933,687L991,683L950,649Z" fill="#625f5f" stroke="#625f5f" stroke-width="1.51"/><path d="M1008,627L1063,601L1030,582Z" fill="#636161" stroke="#636161" stroke-width="1.51"/><path d="M940,475L915,478L938,502Z" fill="#656363" stroke="#656363" stroke-width="1.51"/><path d="M970,482L940,475L938,502Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M854,580L832,624L879,628Z" fill="#636060" stroke="#636060" stroke-width="1.51"/><path d="M879,628L867,678L908,634Z" fill="#615f5f" stroke="#615f5f" stroke-width="1.51"/><path d="M806,593L832,624L854,580Z" fill="#625f5f" stroke="#625f5f" stroke-width="1.51"/><path d="M1028,550L1030,518L991,531Z" fill="#676464" stroke="#676464" stroke-width="1.51"/><path d="M1052,535L1030,518L1028,550Z" fill="#666464" stroke="#666464" stroke-width="1.51"/><path d="M915,478L876,491L915,535Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M817,524L820,554L845,556Z" fill="#656262" stroke="#656262" stroke-width="1.51"/><path d="M832,624L867,678L879,628Z" fill="#605e5e" stroke="#605e5e" stroke-width="1.51"/><path d="M921,685L925,719L933,687Z" fill="#605d5d" stroke="#605d5d" stroke-width="1.51"/><path d="M991,683L1040,648L1008,627Z" fill="#615f5f" stroke="#615f5f" stroke-width="1.51"/><path d="M1069,541L1052,535L1028,550Z" fill="#666363" stroke="#666363" stroke-width="1.51"/><path d="M845,556L820,554L854,580Z" fill="#646262" stroke="#646262" stroke-width="1.51"/><path d="M817,524L845,556L861,523Z" fill="#656363" stroke="#656363" stroke-width="1.51"/><path d="M1069,541L1028,550L1030,582Z" fill="#656262" stroke="#656262" stroke-width="1.51"/><path d="M1040,648L1063,601L1008,627Z" fill="#626060" stroke="#626060" stroke-width="1.51"/><path d="M820,554L806,593L854,580Z" fill="#636161" stroke="#636161" stroke-width="1.51"/><path d="M832,624L832,691L867,678Z" fill="#5f5d5d" stroke="#5f5d5d" stroke-width="1.51"/><path d="M918,728L925,719L873,721Z" fill="#5e5c5c" stroke="#5e5c5c" stroke-width="1.51"/><path d="M933,687L983,714L991,683Z" fill="#605e5e" stroke="#605e5e" stroke-width="1.51"/><path d="Line truncated
Side by Side

Before

Width:  |  Height:  |  Size: 313 KiB

app/src/components/Room.js
+17 -3
View File
@@ -42,9 +42,15 @@ const styles = (theme) =>
({
root :
{
display : 'flex',
width : '100%',
height : '100%'
display : 'flex',
width : '100%',
height : '100%',
backgroundColor : 'var(--background-color)',
backgroundImage : `url(${window.config.background})`,
backgroundAttachment : 'fixed',
backgroundPosition : 'center',
backgroundSize : 'cover',
backgroundRepeat : 'no-repeat'
},
message :
{
@@ -60,6 +66,10 @@ const styles = (theme) =>
margin : 0,
padding : 0
},
logo :
{
marginLeft : 20
},
show :
{
opacity : 1,
@@ -288,6 +298,10 @@ class Room extends React.PureComponent
<MenuIcon />
</IconButton>
</Badge>
{ window.config.logo ?
<img alt='Logo' className={classes.logo} src={window.config.logo} />
:null
}
<Typography
className={classes.title}
variant='h6'
app/src/index.css
-25
View File
@@ -1,13 +1,6 @@
:root {
--background: url('./images/background.jpg');
--background-color: rgba(114, 119, 143, 1.0);
--circle-button-color: rgba(255, 255, 255, 0.3);
--circle-button-toggled-color: rgba(255, 255, 255, 0.7);
--circle-button-unsupported-color: rgba(212, 34, 65, 0.7);
--circle-button-diabled-color: rgba(255, 255, 255, 0.5);
--circle-button-size: 2.5em;
--media-control-button-color: rgba(255, 255, 255, 0.85);
--media-control-botton-on: rgba(255, 255, 255, 0.7);
--media-control-botton-off: rgba(212, 34, 65, 0.7);
@@ -25,18 +18,6 @@
--peer-bg-color: rgba(42, 75, 88, 0.9);
--peer-video-bg-color: rgba(0, 0, 0, 0.75);
--chat-message-color: rgba(0, 0, 0, 0.1);
--chat-input-bg-color: rgba(255, 255, 255, 1.0);
--chat-input-text-color: rgba(0, 0, 0, 1.0);
--chat-send-bg-color: rgba(170, 238, 255, 1.0);
--filesharing-bg-color: rgba(170, 238, 255, 1.0);
--notification-info-bg-color: rgba(10, 29, 38, 0.75);
--notification-info-text-color: rgba(255, 255, 255, 0.65);
--notification-error-bg-color: rgba(255, 25, 20, 0.65);
--notification-error-text-color: rgba(255, 255, 255, 0.85);
--active-speaker-border-color: rgba(255, 255, 255, 1.0);
--selected-peer-border-color: rgba(55, 126, 255, 1.0);
}
@@ -54,12 +35,6 @@ body
height: 100%;
width: 100%;
font-size: 16px;
background-color: var(--background-color);
background-image: var(--background);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#multiparty-meeting