Naming conventions; Add variables

This commit is contained in:
Mihai Uscat 2019-10-15 10:33:36 +03:00 committed by Hristo Terezov
parent 5ade0cad8b
commit 3c25a4c08c
5 changed files with 66 additions and 20 deletions

View File

@ -164,9 +164,45 @@ $watermarkHeight: 74px;
*/ */
$welcomePageDescriptionColor: #fff; $welcomePageDescriptionColor: #fff;
$welcomePageFontFamily: inherit; $welcomePageFontFamily: inherit;
$welcomePageHeaderBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%); $welcomePageBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
$welcomePageTitleColor: #fff; $welcomePageTitleColor: #fff;
$welcomePageHeaderBackground: none;
$welcomePageHeaderBackgroundSmall: none;
$welcomePageHeaderBackgroundPosition: none;
$welcomePageHeaderBackgroundRepeat: none;
$welcomePageHeaderBackgroundSize: none;
$welcomePageHeaderPaddingBottom: 0px;
$welcomePageHeaderTextMarginTop: 35px;
$welcomePageHeaderTextMarginBottom: 35px;
$welcomePageHeaderTextTitleMarginBottom: 16px;
$welcomePageHeaderTextDescriptionDisplay: inherit;
$welcomePageEnterRoomWidth: 680px;
$welcomePageEnterRoomPadding: 25px 30px;
$welcomePageEnterRoomBorderRadius: 0px;
$welcomePageEnterRoomInputContainerPadding: 0 8px 5px 0px;
$welcomePageEnterRoomInputContainerBorderWidth: 0px 0px 2px 0px;
$welcomePageEnterRoomInputContainerBorderStyle: solid;
$welcomePageEnterRoomInputContainerBorderImage: linear-gradient(to right, #dee1e6, #fff) 1;
$welcomePageEnterRoomTitleDisplay: inherit;
$welcomePageTabContainerDisplay: flex;
$welcomePageTabContentDisplay: inherit;
$welcomePageTabButtonsDisplay: flex;
$welcomePageTabDisplay: inherit;
$welcomePageButtonWidth: 51px;
$welcomePageButtonHeight: 35px;
$welcomePageButtonFontWeight: inherit;
$welcomePageButtonBorderRadius: 4px;
$welcomePageButtonLineHeight: 35px;
/** /**
* Deep-linking page variables. * Deep-linking page variables.
*/ */

View File

@ -4,7 +4,7 @@ body.welcome-page {
} }
.welcome { .welcome {
background-image: $welcomePageHeaderBackground; background-image: $welcomePageBackground;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: $welcomePageFontFamily; font-family: $welcomePageFontFamily;
@ -13,6 +13,11 @@ body.welcome-page {
position: relative; position: relative;
.header { .header {
background-image: $welcomePageHeaderBackground;
background-position: $welcomePageHeaderBackgroundPosition;
background-repeat: $welcomePageHeaderBackgroundRepeat;
background-size: $welcomePageHeaderBackgroundSize;
padding-bottom: $welcomePageHeaderPaddingBottom;
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -24,8 +29,8 @@ body.welcome-page {
.header-text { .header-text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: $watermarkHeight + 35; margin-top: $watermarkHeight + $welcomePageHeaderTextMarginTop;
margin-bottom: 35px; margin-bottom: $welcomePageHeaderTextMarginBottom;
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
width: 650px; width: 650px;
z-index: $zindex2; z-index: $zindex2;
@ -36,10 +41,11 @@ body.welcome-page {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 500; font-weight: 500;
line-height: 1.18; line-height: 1.18;
margin-bottom: 16px; margin-bottom: $welcomePageHeaderTextTitleMarginBottom;
} }
.header-text-description { .header-text-description {
display: $welcomePageHeaderTextDescriptionDisplay;
color: $welcomePageDescriptionColor; color: $welcomePageDescriptionColor;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
@ -51,23 +57,24 @@ body.welcome-page {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
width: 680px; width: $welcomePageEnterRoomWidth;
z-index: $zindex2; z-index: $zindex2;
background-color: #fff; background-color: #fff;
padding: 25px 30px; padding: $welcomePageEnterRoomPadding;
border-radius: $welcomePageEnterRoomBorderRadius;
.enter-room-input-container { .enter-room-input-container {
width: 100%; width: 100%;
padding-right: 8px; padding: $welcomePageEnterRoomInputContainerPadding;
padding-bottom: 5px;
text-align: left; text-align: left;
color: #253858; color: #253858;
height: fit-content; height: fit-content;
border-width: 0px 0px 2px 0px; border-width: $welcomePageEnterRoomInputContainerBorderWidth;
border-style: solid; border-style: $welcomePageEnterRoomInputContainerBorderStyle;
border-image: linear-gradient(to right, #dee1e6, #fff) 1; border-image: $welcomePageEnterRoomInputContainerBorderImage;
.enter-room-title { .enter-room-title {
display: $welcomePageEnterRoomTitleDisplay;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
padding-bottom: 5px; padding-bottom: 5px;
@ -94,10 +101,11 @@ body.welcome-page {
min-height: 354px; min-height: 354px;
width: 710px; width: 710px;
background: #75A7E7; background: #75A7E7;
display: flex; display: $welcomePageTabContainerDisplay;
flex-direction: column; flex-direction: column;
.tab-content{ .tab-content{
display: $welcomePageTabContentDisplay;
margin: 5px 0px; margin: 5px 0px;
overflow: hidden; overflow: hidden;
flex-grow: 1; flex-grow: 1;
@ -111,13 +119,14 @@ body.welcome-page {
.tab-buttons { .tab-buttons {
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #FFFFFF;
display: flex; display: $welcomePageTabButtonsDisplay;
flex-grow: 0; flex-grow: 0;
flex-direction: row; flex-direction: row;
min-height: 54px; min-height: 54px;
width: 100%; width: 100%;
.tab { .tab {
display: $welcomePageTabDisplay;
text-align: center; text-align: center;
background: rgba(9,30,66,0.37); background: rgba(9,30,66,0.37);
height: 55px; height: 55px;
@ -138,15 +147,16 @@ body.welcome-page {
} }
.welcome-page-button { .welcome-page-button {
width: 51px; width: $welcomePageButtonWidth;
height: 35px; height: $welcomePageButtonHeight;
font-size: 14px; font-size: 14px;
font-weight: $welcomePageButtonFontWeight;
background: #0074E0; background: #0074E0;
border-radius: 4px; border-radius: $welcomePageButtonBorderRadius;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
line-height: 35px; line-height: $welcomePageButtonLineHeight;
cursor: pointer; cursor: pointer;
} }

View File

@ -27,7 +27,7 @@ var interfaceConfig = {
SHOW_DEEP_LINKING_IMAGE: false, SHOW_DEEP_LINKING_IMAGE: false,
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true, GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
DISPLAY_WELCOME_PAGE_CONTENT: true, DISPLAY_WELCOME_PAGE_CONTENT: true,
DISPLAY_WELCOME_PAGE_TOOLBAR_CONTENT: false, DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT: false,
APP_NAME: 'Jitsi Meet', APP_NAME: 'Jitsi Meet',
NATIVE_APP_NAME: 'Jitsi Meet', NATIVE_APP_NAME: 'Jitsi Meet',
PROVIDER_NAME: 'Jitsi', PROVIDER_NAME: 'Jitsi',

View File

@ -333,7 +333,7 @@ class WelcomePage extends AbstractWelcomePage {
* @returns {boolean} * @returns {boolean}
*/ */
_shouldShowAdditionalToolbarContent() { _shouldShowAdditionalToolbarContent() {
return interfaceConfig.DISPLAY_WELCOME_PAGE_TOOLBAR_CONTENT return interfaceConfig.DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT
&& this._additionalToolbarContentTemplate && this._additionalToolbarContentTemplate
&& this._additionalToolbarContentTemplate.content && this._additionalToolbarContentTemplate.content
&& this._additionalToolbarContentTemplate.innerHTML.trim(); && this._additionalToolbarContentTemplate.innerHTML.trim();