Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update repo flow to use popups #4979

Merged
merged 4 commits into from
Oct 11, 2023
Merged

Update repo flow to use popups #4979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
128c664
Update repo flow to use popups
siggisim Oct 7, 2023
f115679
Appease checkstyle
siggisim Oct 9, 2023
b76d26c
Hide components when not set
siggisim Oct 9, 2023
69a5be5
Fix up promise error handling
siggisim Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions enterprise/app/repo/BUILD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ ts_library(
"//app/errors:error_service",
"//app/router",
"//app/service:rpc_service",
"//app/util:popup",
"//enterprise/app/secrets:secret_util",
"//proto:github_ts_proto",
"//proto:repo_ts_proto",
Expand Down
84 changes: 83 additions & 1 deletion enterprise/app/repo/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
.create-repo-page {
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
Droid Sans, Helvetica Neue, sans-serif;
Comment on lines +2 to +3
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure if you wanted this to match the main app font, but we're using Open Sans currently

Suggested change
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
Droid Sans, Helvetica Neue, sans-serif;
font-family: "Open Sans", sans-serif;

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to try using this system-ui stack that we use for our marketing page. I messed around with making this the default for our whole app UI as well, but wanted to wait a bit and test it out before taking the leap.

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100%;
}

.create-repo-page .card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
border: 1px solid hsl(240 5.9% 90%);
}

.create-repo-page .repo-block {
flex-direction: column;
width: 50vw;
max-width: 600px;
margin: 32px 0 0 0;
box-sizing: border-box;
margin: 24px 0 0 0;
}

.create-repo-page .repo-create {
Expand Down Expand Up @@ -44,12 +52,14 @@

.create-repo-page .repo-picker input,
.create-repo-page .repo-picker select,
.create-repo-page .repo-picker button,
.create-repo-page .deployment-config input {
padding: 12px;
width: 100%;
border-radius: 8px;
border: 1px solid #aaa;
font-family: inherit;
font-weight: inherit;
font-size: 1.2em;
height: initial;
}
Expand All @@ -73,6 +83,7 @@
color: #fff;
transition: 300ms ease-in-out;
box-sizing: border-box;
gap: 8px;
}

.create-repo-page .view-buttons .view-button,
Expand Down Expand Up @@ -174,3 +185,74 @@
.create-repo-page .deployment-config div:first-of-type {
font-family: monospace;
}

.create-repo-page .template {
transition: all 100ms ease-in-out;
display: flex;
box-sizing: border-box;
overflow: hidden;
width: 100%;
}

.create-repo-page .template-block {
padding-right: 0 !important;
}

.create-repo-page .template-metadata {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
flex-grow: 1;
flex-shrink: 0;
width: calc(100% - 100px);
overflow: hidden;
padding-right: 8px;
}

.create-repo-page .template-name {
font-weight: 800;
font-size: 2.5em;
line-height: 1.2em;
max-height: 2.4em;
display: block;
overflow: hidden;
}

.create-repo-page .template-props {
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
max-width: 100%;
width: 100%;
}

.create-repo-page .template-repo {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
font-weight: 500;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
}

.create-repo-page .template-repo-name {
display: block;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}

.create-repo-page .template-repo svg {
flex-shrink: 0;
}

.create-repo-page .template-image {
width: 100px;
flex-shrink: 0;
object-fit: cover;
object-position: 0 50%;
}
Loading