development/github-desktop
development/github-desktop
1
0
Fork 0
mirror of https://github.com/desktop/desktop synced 2024-10-02 14:23:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18565 from desktop/skip-sign-in-when-zoomed

Browse source 
Skip sign in when zoomed
This commit is contained in:
tidy-dev 2024-05-10 15:00:45 +00:00 committed by GitHub
parent c1f1ea6aa2 bef74de462
commit 7b366c1f39
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 163 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
app/src/ui/welcome/start.tsx
View file

@ -31,52 +31,60 @@ export class Start extends React.Component<IStartProps, {}> {
aria-label="Welcome to GitHub Desktop"
aria-describedby="start-description"
>
<h1 className="welcome-title">Welcome to GitHub&nbsp;Desktop</h1>
{!this.props.loadingBrowserAuth ? (
<>
<p id="start-description" className="welcome-text">
GitHub Desktop is a seamless way to contribute to projects on
GitHub and GitHub Enterprise. Sign in below to get started with
your existing projects.
</p>
</>
) : (
<p>{BrowserRedirectMessage}</p>
)}
<div className="welcome-main-buttons">
<Button
type="submit"
className="button-with-icon"
disabled={this.props.loadingBrowserAuth}
onClick={this.signInWithBrowser}
autoFocus={true}
role="link"
>
{this.props.loadingBrowserAuth && <Loading />}
Sign in to GitHub.com
<Octicon symbol={octicons.linkExternal} />
</Button>
{this.props.loadingBrowserAuth ? (
<Button onClick={this.cancelBrowserAuth}>Cancel</Button>
<div className="start-content">
<h1 className="welcome-title">
Welcome to <span>GitHub Desktop</span>
</h1>
{!this.props.loadingBrowserAuth ? (
<>
<p id="start-description" className="welcome-text">
GitHub Desktop is a seamless way to contribute to projects on
GitHub and GitHub Enterprise. Sign in below to get started with
your existing projects.
</p>
</>
) : (
<Button onClick={this.signInToEnterprise}>
Sign in to GitHub Enterprise
</Button>
<p>{BrowserRedirectMessage}</p>
)}
</div>
<div className="skip-action-container">
<p className="welcome-text">
New to GitHub?{' '}
<LinkButton uri={CreateAccountURL} className="create-account-link">
Create your free account.
<div className="welcome-main-buttons">
<Button
type="submit"
className="button-with-icon"
disabled={this.props.loadingBrowserAuth}
onClick={this.signInWithBrowser}
autoFocus={true}
role="link"
>
{this.props.loadingBrowserAuth && <Loading />}
Sign in to GitHub.com
<Octicon symbol={octicons.linkExternal} />
</Button>
{this.props.loadingBrowserAuth ? (
<Button onClick={this.cancelBrowserAuth}>Cancel</Button>
) : (
<Button onClick={this.signInToEnterprise}>
Sign in to GitHub Enterprise
</Button>
)}
</div>
<div className="skip-action-container">
<p className="welcome-text">
New to GitHub?{' '}
<LinkButton
uri={CreateAccountURL}
className="create-account-link"
>
Create your free account.
</LinkButton>
</p>
<LinkButton className="skip-button" onClick={this.skip}>
Skip this step
</LinkButton>
</p>
<LinkButton className="skip-button" onClick={this.skip}>
Skip this step
</LinkButton>
</div>
</div>
<div className="welcome-start-disclaimer-container">
<div className="start-footer">
<p>
By creating an account, you agree to the{' '}
<LinkButton uri={'https://github.com/site/terms'}>
@ -84,9 +92,8 @@ export class Start extends React.Component<IStartProps, {}> {
</LinkButton>
. For more information about GitHub's privacy practices, see the{' '}
<LinkButton uri={'https://github.com/site/privacy'}>
GitHub Privacy Statement
GitHub Privacy Statement.
</LinkButton>
.
</p>
<p>
GitHub Desktop sends usage metrics to improve the product and inform

3
app/styles/ui/_configure-git-user.scss
View file

@ -39,7 +39,8 @@
.commit {
font-size: var(--font-size);
padding: var(--spacing-half) var(--spacing);
width: 280px;
width: 100%;
max-width: 280px;
border-bottom: none;
}
}

160
app/styles/ui/_welcome.scss
View file

@ -1,17 +1,75 @@
#welcome {
// This is used to scale the font and inputs so that they are bigger on large
// screens. Before, we used the `zoom` property, but that was causing issues
// with the layout when zooming in/out.
--welcome-scale: 1;
@media screen and (min-width: 1366px) and (min-height: 700px) {
--welcome-scale: 1.2;
}
@media screen and (min-width: 1400px) and (min-height: 725px) {
--welcome-scale: 1.3;
}
@media screen and (min-width: 1600px) and (min-height: 750px) {
--welcome-scale: 1.4;
}
@media screen and (min-width: 1800px) and (min-height: 775px) {
--welcome-scale: 1.5;
}
--welcome-font-size: calc(var(--font-size) * var(--welcome-scale));
--welcome-font-size-sm: calc(var(--font-size-sm) * var(--welcome-scale));
--welcome-font-size-md: calc(var(--font-size-md) * var(--welcome-scale));
--welcome-font-size-xxl: calc(var(--font-size-xxl) * var(--welcome-scale));
// Override the height of some components to make them bigger. The new height
// is platform specific and defined as --welcome-item-height
--text-field-height: var(--welcome-item-height);
--button-height: var(--welcome-item-height);
--text-field-height: calc(var(--welcome-item-height) * var(--welcome-scale));
--button-height: calc(var(--welcome-item-height) * var(--welcome-scale));
--radio-control-radius: calc(13px * var(--welcome-scale));
--welcome-content-width: calc(500px * var(--welcome-scale));
--avatar-size: calc(16px * var(--welcome-scale));
align-items: stretch;
justify-content: center;
flex-direction: row;
font-size: var(--font-size-md);
font-size: var(--welcome-font-size-md);
#start {
display: flex;
flex-direction: column;
input[type='radio'] {
width: var(--radio-control-radius);
height: var(--radio-control-radius);
}
#configure-git {
flex-grow: 1;
justify-content: center;
#configure-git-user {
padding-bottom: var(--spacing);
#commit-list.commit-list-example {
.commit {
font-size: var(--welcome-font-size);
}
.header,
.byline {
font-size: var(--welcome-font-size-sm);
}
.avatar {
width: var(--avatar-size);
height: var(--avatar-size);
}
.AvatarStack.AvatarStack--small {
width: calc(var(--avatar-size) + 5px);
height: var(--avatar-size);
}
}
}
}
.actions {
@ -73,7 +131,7 @@
input,
button,
select {
font-size: var(--font-size-md);
font-size: var(--welcome-font-size-md);
}
input {
@ -116,10 +174,6 @@
font-weight: var(--font-weight-semibold);
}
.basic-auth-link {
font-size: var(--font-size);
}
.welcome-main-buttons {
margin-top: var(--spacing-quad);
@ -127,6 +181,11 @@
padding-left: var(--spacing-double);
padding-right: var(--spacing-double);
margin: 0 var(--spacing-double) var(--spacing) 0;
// Allows the button to take of full-width of the container when wrapped.
@media screen and (max-width: 600px) {
margin-right: 0;
}
}
.octicon.spin {
@ -142,30 +201,24 @@
}
.welcome-title {
font-size: var(--font-size-xxl);
font-size: var(--welcome-font-size-xxl);
font-weight: var(--font-weight-light);
line-height: 1.25;
margin-bottom: var(--spacing);
span {
display: inline-block;
}
}
.welcome-text {
margin: var(--spacing) 0;
}
.welcome-button {
font-weight: var(--font-weight-semibold);
margin: var(--spacing) 0;
}
.sign-in-field {
width: 100%;
}
.welcome-left {
flex-grow: 1;
width: 60%;
}
.welcome-right {
flex-grow: 1;
width: 40%;
@ -174,8 +227,21 @@
.welcome-left {
display: flex;
align-items: center;
width: 60%;
padding: var(--spacing-quad);
position: relative;
height: 100vh;
overflow-y: auto;
.welcome-content {
max-width: var(--welcome-content-width);
width: 100%;
section {
// allows scrolling of flex containers
max-height: 100vh;
}
}
.welcome-graphic-bottom {
position: absolute;
@ -200,21 +266,31 @@
// I hate this but we'll have to live with it for beta.
z-index: -1;
}
}
@media screen and (min-width: 1366px) {
zoom: 1.2;
#start {
// makes up for the padding on the welcome-left that is applied to all welcome screens
// Having a min-height makes the start-footer be able to flex to take up the remaining vertical space
min-height: calc(100vh - 2 * var(--spacing-quad));
display: flex;
flex-direction: column;
.start-content {
// Make content take of remaining height of container besides the footer.
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
// The footer is ~100px tall in 100% zoom, this makes it so that the
// start-content is centered vertically on the screen for default zoom levels.
// Other levels, we are more concerned about not clipping then visual
// centering.
margin-top: 100px;
}
@media screen and (min-width: 1400px) {
zoom: 1.3;
}
@media screen and (min-width: 1600px) {
zoom: 1.4;
}
@media screen and (min-width: 1800px) {
zoom: 1.5;
.start-footer {
font-size: var(--welcome-font-size-sm);
color: var(--text-secondary-color);
}
}
@ -242,22 +318,6 @@
}
}
.welcome-start-disclaimer-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 var(--spacing-quad) var(--spacing-quad) var(--spacing-quad);
font-size: var(--font-size-sm);
color: var(--text-secondary-color);
}
.welcome-content {
justify-content: center;
max-width: 500px;
width: 100%;
}
.forgot-password-link {
align-self: center;
margin-left: var(--spacing);