Compare commits

...

1 Commits

Author SHA1 Message Date
Horatiu Muresan 5497d9566d chore(welcome-page) Welcome page redesign 2022-12-22 14:17:43 +02:00
6 changed files with 77 additions and 47 deletions

View File

@ -126,6 +126,12 @@ form {
background-size: contain;
}
.leftwatermarknomargin {
background-position: center left;
background-repeat: no-repeat;
background-size: contain;
}
.rightwatermark {
right: 32px;
top: 32px;

View File

@ -170,8 +170,9 @@ $welcomePageHeaderPaddingBottom: 0px;
$welcomePageHeaderTitleMaxWidth: initial;
$welcomePageHeaderTextAlign: center;
$welcomePageHeaderContainerMarginTop: 104px;
$welcomePageHeaderContainerDisplay: flex;
$welcomePageHeaderContainerMargin: 104px 32px 0 32px;
$welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
$welcomePageHeaderTextTitleMarginBottom: 0;
$welcomePageHeaderTextTitleFontSize: 42px;

View File

@ -29,6 +29,16 @@ body.welcome-page {
flex-direction: column;
margin: $welcomePageHeaderContainerMargin;
z-index: $zindex2;
align-items: center;
position: relative;
max-width: 688px;
}
.header-watermark-container {
position: absolute;
width: 100%;
height: 100%;
margin-top: calc(20px - #{$welcomePageHeaderContainerMarginTop});
}
.header-text-title {
@ -123,16 +133,11 @@ body.welcome-page {
max-width: calc(100% - 40px);
padding: 16px 0 39px 0;
width: $welcomePageEnterRoomWidth;
text-align: center;
p {
color: $welcomePageDescriptionColor;
float: left;
text-align: $welcomePageHeaderTextAlign;
a {
color: inherit;
font-weight: 600;
}
a {
color: inherit;
font-weight: 600;
}
}
}
@ -200,8 +205,8 @@ body.welcome-page {
color: $welcomePageDescriptionColor;
padding: 4px;
position: absolute;
top: 32px;
right: 32px;
top: calc(35px - #{$welcomePageHeaderContainerMarginTop});
right: 0;
z-index: $zindex2;
* {
@ -224,6 +229,11 @@ body.welcome-page {
width: $welcomePageWatermarkWidth;
height: $welcomePageWatermarkHeight;
}
.watermark.leftwatermarknomargin {
width: $welcomePageWatermarkWidth;
height: $welcomePageWatermarkHeight;
}
}
&.without-content {
@ -242,10 +252,17 @@ body.welcome-page {
padding-top: 40px;
}
.welcome-card-row {
.welcome-card-column {
display: flex;
justify-content: center;
padding: 0 32px;
flex-direction: column;
align-items: center;
max-width: 688px;
margin: auto;
> div {
margin-bottom: 16px;
}
}
.welcome-card-text {
@ -253,7 +270,7 @@ body.welcome-page {
}
.welcome-card {
width: 49%;
width: 100%;
border-radius: 8px;
&--dark {
@ -268,10 +285,6 @@ body.welcome-page {
&--grey {
background: #F2F3F4;
}
&--shadow {
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
}
}
.welcome-footer {

View File

@ -1362,6 +1362,7 @@
"recentList": "Recent",
"recentListDelete": "Delete entry",
"recentListEmpty": "Your recent list is currently empty. Chat with your team and you will find all your recent meetings here.",
"recentMeetings": "Your recent meetings",
"reducedUIText": "Welcome to {{app}}!",
"roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",
"roomname": "Enter room name",
@ -1370,6 +1371,7 @@
"settings": "Settings",
"startMeeting": "Start meeting",
"terms": "Terms",
"title": "Secure, fully featured, and completely free video conferencing"
"title": "Secure, fully featured, and completely free video conferencing",
"upcomingMeetings": "Your upcoming meetings"
}
}

View File

@ -38,6 +38,11 @@ type Props = {
*/
_showJitsiWatermark: boolean,
/**
* Whether the watermark should have a `top` and `left` value.
*/
noMargins: boolean;
/**
* The default value for the Jitsi logo URL.
*/
@ -160,7 +165,9 @@ class Watermarks extends Component<Props, State> {
_logoUrl,
_showJitsiWatermark
} = this.props;
const { t } = this.props;
const { noMargins, t } = this.props;
const className = `watermark ${noMargins ? 'leftwatermarknomargin' : 'leftwatermark'}`;
let reactElement = null;
if (_showJitsiWatermark) {
@ -172,14 +179,14 @@ class Watermarks extends Component<Props, State> {
};
reactElement = (<div
className = 'watermark leftwatermark'
className = { className }
style = { style } />);
if (_logoLink) {
reactElement = (
<a
aria-label = { t('jitsiHome', { logo: interfaceConfig.APP_NAME }) }
className = 'watermark leftwatermark'
className = { className }
href = { _logoLink }
target = '_new'>
{ reactElement }

View File

@ -184,24 +184,27 @@ class WelcomePage extends AbstractWelcomePage {
<div
className = { `welcome ${contentClassName} ${footerClassName}` }
id = 'welcome_page'>
<div className = 'welcome-watermark'>
<Watermarks defaultJitsiLogoURL = { DEFAULT_WELCOME_PAGE_LOGO_URL } />
</div>
<div className = 'header'>
<div className = 'welcome-page-settings'>
<SettingsButton
defaultTab = { SETTINGS_TABS.CALENDAR }
isDisplayedOnWelcomePage = { true } />
{ showAdditionalToolbarContent
? <div
className = 'settings-toolbar-content'
ref = { this._setAdditionalToolbarContentRef } />
: null
}
</div>
<div className = 'header-image' />
<div className = 'header-container'>
<div className = 'header-watermark-container'>
<div className = 'welcome-watermark'>
<Watermarks
defaultJitsiLogoURL = { DEFAULT_WELCOME_PAGE_LOGO_URL }
noMargins = { true } />
</div>
</div>
<div className = 'welcome-page-settings'>
<SettingsButton
defaultTab = { SETTINGS_TABS.CALENDAR }
isDisplayedOnWelcomePage = { true } />
{ showAdditionalToolbarContent
? <div
className = 'settings-toolbar-content'
ref = { this._setAdditionalToolbarContentRef } />
: null
}
</div>
<h1 className = 'header-text-title'>
{ t('welcomepage.headerTitle') }
</h1>
@ -246,18 +249,16 @@ class WelcomePage extends AbstractWelcomePage {
{ _moderatedRoomServiceUrl && (
<div id = 'moderated-meetings'>
<p>
{
translateToHTML(
t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
}
</p>
{
translateToHTML(
t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
}
</div>)}
</div>
</div>
<div className = 'welcome-cards-container'>
<div className = 'welcome-card-row'>
<div className = 'welcome-card-column'>
<div className = 'welcome-tabs welcome-card welcome-card--blue'>
{ this._renderTabs() }
</div>
@ -403,14 +404,14 @@ class WelcomePage extends AbstractWelcomePage {
if (_calendarEnabled) {
tabs.push({
label: t('welcomepage.calendar'),
label: t('welcomepage.upcomingMeetings'),
content: <CalendarList />
});
}
if (_recentListEnabled) {
tabs.push({
label: t('welcomepage.recentList'),
label: t('welcomepage.recentMeetings'),
content: <RecentList />
});
}