From 3c25a4c08cb2f826e4354e08bf28a5c32f366cd8 Mon Sep 17 00:00:00 2001 From: Mihai Uscat Date: Tue, 15 Oct 2019 10:33:36 +0300 Subject: [PATCH] Naming conventions; Add variables --- css/_variables.scss | 38 +++++++++++++++- css/_welcome_page.scss | 44 ++++++++++++------- ...ss => _welcome_page_settings_toolbar.scss} | 0 interface_config.js | 2 +- .../welcome/components/WelcomePage.web.js | 2 +- 5 files changed, 66 insertions(+), 20 deletions(-) rename css/{_settings_toolbar.scss => _welcome_page_settings_toolbar.scss} (100%) diff --git a/css/_variables.scss b/css/_variables.scss index 602d94e66..d4bdf4e17 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -164,9 +164,45 @@ $watermarkHeight: 74px; */ $welcomePageDescriptionColor: #fff; $welcomePageFontFamily: inherit; -$welcomePageHeaderBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%); +$welcomePageBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%); $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. */ diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index 5be60c46d..f7ed3cd19 100644 --- a/css/_welcome_page.scss +++ b/css/_welcome_page.scss @@ -4,7 +4,7 @@ body.welcome-page { } .welcome { - background-image: $welcomePageHeaderBackground; + background-image: $welcomePageBackground; display: flex; flex-direction: column; font-family: $welcomePageFontFamily; @@ -13,6 +13,11 @@ body.welcome-page { position: relative; .header { + background-image: $welcomePageHeaderBackground; + background-position: $welcomePageHeaderBackgroundPosition; + background-repeat: $welcomePageHeaderBackgroundRepeat; + background-size: $welcomePageHeaderBackgroundSize; + padding-bottom: $welcomePageHeaderPaddingBottom; align-items: center; display: flex; flex-direction: column; @@ -24,8 +29,8 @@ body.welcome-page { .header-text { display: flex; flex-direction: column; - margin-top: $watermarkHeight + 35; - margin-bottom: 35px; + margin-top: $watermarkHeight + $welcomePageHeaderTextMarginTop; + margin-bottom: $welcomePageHeaderTextMarginBottom; max-width: calc(100% - 40px); width: 650px; z-index: $zindex2; @@ -36,10 +41,11 @@ body.welcome-page { font-size: 2.5rem; font-weight: 500; line-height: 1.18; - margin-bottom: 16px; + margin-bottom: $welcomePageHeaderTextTitleMarginBottom; } .header-text-description { + display: $welcomePageHeaderTextDescriptionDisplay; color: $welcomePageDescriptionColor; font-size: 1rem; font-weight: 400; @@ -51,23 +57,24 @@ body.welcome-page { display: flex; align-items: center; max-width: calc(100% - 40px); - width: 680px; + width: $welcomePageEnterRoomWidth; z-index: $zindex2; background-color: #fff; - padding: 25px 30px; + padding: $welcomePageEnterRoomPadding; + border-radius: $welcomePageEnterRoomBorderRadius; .enter-room-input-container { width: 100%; - padding-right: 8px; - padding-bottom: 5px; + padding: $welcomePageEnterRoomInputContainerPadding; text-align: left; color: #253858; height: fit-content; - border-width: 0px 0px 2px 0px; - border-style: solid; - border-image: linear-gradient(to right, #dee1e6, #fff) 1; + border-width: $welcomePageEnterRoomInputContainerBorderWidth; + border-style: $welcomePageEnterRoomInputContainerBorderStyle; + border-image: $welcomePageEnterRoomInputContainerBorderImage; .enter-room-title { + display: $welcomePageEnterRoomTitleDisplay; font-size: 18px; font-weight: bold; padding-bottom: 5px; @@ -94,10 +101,11 @@ body.welcome-page { min-height: 354px; width: 710px; background: #75A7E7; - display: flex; + display: $welcomePageTabContainerDisplay; flex-direction: column; .tab-content{ + display: $welcomePageTabContentDisplay; margin: 5px 0px; overflow: hidden; flex-grow: 1; @@ -111,13 +119,14 @@ body.welcome-page { .tab-buttons { font-size: 18px; color: #FFFFFF; - display: flex; + display: $welcomePageTabButtonsDisplay; flex-grow: 0; flex-direction: row; min-height: 54px; width: 100%; .tab { + display: $welcomePageTabDisplay; text-align: center; background: rgba(9,30,66,0.37); height: 55px; @@ -138,15 +147,16 @@ body.welcome-page { } .welcome-page-button { - width: 51px; - height: 35px; + width: $welcomePageButtonWidth; + height: $welcomePageButtonHeight; font-size: 14px; + font-weight: $welcomePageButtonFontWeight; background: #0074E0; - border-radius: 4px; + border-radius: $welcomePageButtonBorderRadius; color: #FFFFFF; text-align: center; vertical-align: middle; - line-height: 35px; + line-height: $welcomePageButtonLineHeight; cursor: pointer; } diff --git a/css/_settings_toolbar.scss b/css/_welcome_page_settings_toolbar.scss similarity index 100% rename from css/_settings_toolbar.scss rename to css/_welcome_page_settings_toolbar.scss diff --git a/interface_config.js b/interface_config.js index 5daa3b584..5e43aa713 100644 --- a/interface_config.js +++ b/interface_config.js @@ -27,7 +27,7 @@ var interfaceConfig = { SHOW_DEEP_LINKING_IMAGE: false, GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true, DISPLAY_WELCOME_PAGE_CONTENT: true, - DISPLAY_WELCOME_PAGE_TOOLBAR_CONTENT: false, + DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT: false, APP_NAME: 'Jitsi Meet', NATIVE_APP_NAME: 'Jitsi Meet', PROVIDER_NAME: 'Jitsi', diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js index 2cdd33bdc..09a16ba1d 100644 --- a/react/features/welcome/components/WelcomePage.web.js +++ b/react/features/welcome/components/WelcomePage.web.js @@ -333,7 +333,7 @@ class WelcomePage extends AbstractWelcomePage { * @returns {boolean} */ _shouldShowAdditionalToolbarContent() { - return interfaceConfig.DISPLAY_WELCOME_PAGE_TOOLBAR_CONTENT + return interfaceConfig.DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT && this._additionalToolbarContentTemplate && this._additionalToolbarContentTemplate.content && this._additionalToolbarContentTemplate.innerHTML.trim();