From 74f4b9f61bd5c8956ec6553126f92773ecf3f54b Mon Sep 17 00:00:00 2001 From: Eric Amodio Date: Fri, 30 Aug 2019 00:46:02 -0400 Subject: [PATCH] Reworks weclome & settings pages --- package.json | 6 +- src/webviews/apps/scss/main.scss | 1772 ++++--- src/webviews/apps/settings/index.html | 6169 +++++++++++++------------ src/webviews/apps/settings/index.ts | 72 +- src/webviews/apps/shared/appWithConfigBase.ts | 76 +- src/webviews/apps/shared/theme.ts | 1 + src/webviews/apps/welcome/index.html | 1076 +++-- src/webviews/helpers.ts | 54 + src/webviews/settingsWebview.ts | 74 +- src/webviews/webviewBase.ts | 8 +- src/webviews/welcomeWebview.ts | 6 + 11 files changed, 4840 insertions(+), 4474 deletions(-) create mode 100644 src/webviews/helpers.ts diff --git a/package.json b/package.json index a454b25..0252e20 100644 --- a/package.json +++ b/package.json @@ -4374,25 +4374,21 @@ { "command": "gitlens.showSettingsPage#file-history-view", "when": "view =~ /^gitlens\\.views\\.fileHistory:/", - "args": "general", "group": "9_gitlens" }, { "command": "gitlens.showSettingsPage#line-history-view", "when": "view =~ /^gitlens\\.views\\.lineHistory:/", - "args": "general", "group": "9_gitlens" }, { "command": "gitlens.showSettingsPage#search-commits-view", "when": "view =~ /^gitlens\\.views\\.search:/", - "args": "general", "group": "9_gitlens" }, { - "command": "gitlens.showSettingsPage#compare-view", + "command": "gitlens.showSettingsPage", "when": "view =~ /^gitlens\\.views\\.compare:/", - "args": "general", "group": "9_gitlens" } ], diff --git a/src/webviews/apps/scss/main.scss b/src/webviews/apps/scss/main.scss index a95e4da..5aff8c4 100644 --- a/src/webviews/apps/scss/main.scss +++ b/src/webviews/apps/scss/main.scss @@ -1,1177 +1,1175 @@ html { - height: 100%; + height: 100%; + font-size: 62.5%; } body { - background-color: var(--color-background); - color: var(--color-foreground); - font-family: var(--font-family); - height: 100%; - line-height: 1.4; -} - -canvas.snow { - max-width: calc(100% - 20px); - pointer-events: none; - position: fixed; - z-index: 2147483646; -} - -.snow__trigger { - cursor: pointer; - position: fixed; - right: 10px; - top: 5px; - transform: rotate(-20deg); - width: 22px; - z-index: 2147483647; - - & svg:hover { - & path:first-child { - fill: #f30000; - } - } -} + background-color: var(--color-background); + color: var(--color-foreground); + font-family: var(--font-family); + height: 100%; + line-height: 1.4; + font-size: 100% !important; +} + +// canvas.snow { +// max-width: calc(100% - 20px); +// pointer-events: none; +// position: fixed; +// z-index: 2147483646; +// } + +// .snow__trigger { +// cursor: pointer; +// position: fixed; +// right: 10px; +// top: 5px; +// transform: rotate(-20deg); +// width: 22px; +// z-index: 2147483647; + +// & svg:hover { +// & path:first-child { +// fill: #f30000; +// } +// } +// } a { - border: 0; - color: var(--color-link-foreground); - font-weight: 400; - outline: none; - text-decoration: none; + border: 0; + color: var(--color-link-foreground); + font-weight: 400; + outline: none; + text-decoration: none; - &:not([href]):not([tabindex]):focus, - &:not([href]):not([tabindex]):hover { - color: inherit; - text-decoration: none; - } + &:not([href]):not([tabindex]):focus, + &:not([href]):not([tabindex]):hover { + color: inherit; + text-decoration: none; + } - &:focus { - outline-color: var(--color-focus-border); - } + &:focus { + outline-color: var(--color-focus-border); + } } b { - font-weight: 600; + font-weight: 600; } code, .shortcut-key { - border-radius: 4px; - color: var(--color-foreground); - padding: 2px 6px 0 6px; - vertical-align: baseline; + border-radius: 4px; + color: var(--color-foreground); + padding: 2px 6px 0 6px; + vertical-align: baseline; - .vscode-dark & { - background-color: var(--color-background--lighten-15); - border-bottom: 2px solid var(--color-background--lighten-15); - } + .vscode-dark & { + background-color: var(--color-background--lighten-15); + border-bottom: 2px solid var(--color-background--lighten-15); + } - .vscode-light & { - background-color: var(--color-background--darken-15); - border-bottom: 2px solid var(--color-background--darken-15); - } -} - -.setting-key { - border-radius: 3px; - font-family: monospace; - font-size: 0.9em; - padding: 1px 5px; - vertical-align: text-top; - - .vscode-dark & { - background-color: var(--color-background--lighten-15); - border-bottom: 2px solid var(--color-background--lighten-15); - } - - .vscode-light & { - background-color: var(--color-background--darken-15); - border-bottom: 2px solid var(--color-background--darken-15); - } + .vscode-light & { + background-color: var(--color-background--darken-15); + border-bottom: 2px solid var(--color-background--darken-15); + } } h1 { - border: none; - font-size: 2.77em; - font-weight: 400; - margin: 0; - padding: 0; - white-space: nowrap; + border: none; + font-size: 4rem; + font-weight: 400; + margin: 0; + padding: 0; + white-space: nowrap; } h2 { - font-size: 1.5em; - font-weight: 200; - line-height: normal; - margin: 1em 0 0.3em 0; - white-space: nowrap; + font-size: 2.2rem; + font-weight: 200; + line-height: normal; + margin: 1em 0 0.3em 0; + white-space: nowrap; } h3 { - font-size: 1.17em; - font-weight: 200; - line-height: normal; - margin: 1em 0 0.3em 0; - white-space: nowrap; + font-size: 1.8rem; + font-weight: 200; + line-height: normal; + margin: 1em 0 0.3em 0; + white-space: nowrap; } h4 { - font-size: 1em; - font-weight: 200; - line-height: normal; - margin: 1em 0 0.3em 0; - white-space: nowrap; + font-size: 1rem; + font-weight: 200; + line-height: normal; + margin: 1em 0 0.3em 0; + white-space: nowrap; } header { - align-items: center; - display: flex; - flex-wrap: wrap; - margin-bottom: 1em; + grid-area: header; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); + grid-gap: 1em 3em; + align-items: center; + justify-items: center; + margin: 0 3em; } input, select, button { - font-family: var(--font-family); - font-size: inherit; - margin: 0; + font-family: var(--font-family); + font-size: inherit; + margin: 0; } input[type='checkbox'] { - background: none; - border: none; - cursor: pointer; - margin: 0; - padding: 0 10px; + background: none; + border: none; + cursor: pointer; + margin: 0; + padding: 0 10px; - &:focus { - background: rgba(0, 0, 0, 0.1); - border-radius: 5px; - outline: none; - } + &:focus { + background: rgba(0, 0, 0, 0.1); + border-radius: 5px; + outline: none; + } - &[disabled] { - color: var(--color-foreground--75); - cursor: default; - } + &[disabled] { + color: var(--color-foreground--75); + cursor: default; + } } input[type='text'], input:not([type]) { - background: none; - color: var(--color-foreground); - margin: 0 0.75em; - max-width: 300px; - padding: 4px; - width: 100%; + background: none; + color: var(--color-foreground); + margin: 0 10px; + max-width: 300px; + padding: 4px; + width: 100%; - .vscode-light & { - border: 1px solid rgba(0, 0, 0, 0.3); - } + .vscode-light & { + border: 1px solid rgba(0, 0, 0, 0.3); + } - .vscode-dark & { - border: 1px solid rgba(255, 255, 255, 0.3); - } + .vscode-dark & { + border: 1px solid rgba(255, 255, 255, 0.3); + } - &:focus { - outline-color: var(--color-focus-border); + &:focus { + outline-color: var(--color-focus-border); - .vscode-light & { - background-color: rgba(255, 255, 255, 0.4); - } + .vscode-light & { + background-color: rgba(255, 255, 255, 0.4); + } - .vscode-dark & { - background-color: rgba(0, 0, 0, 0.2); - } - } + .vscode-dark & { + background-color: rgba(0, 0, 0, 0.2); + } + } - &[disabled] { - color: var(--color-foreground--75); - cursor: default; - } + &[disabled] { + color: var(--color-foreground--75); + cursor: default; + } - &::placeholder { - color: var(--vscode-input-placeholderForeground); - } + &::placeholder { + color: var(--vscode-input-placeholderForeground); + } } label { - cursor: pointer; -} - -section { - display: flex; - flex-wrap: wrap; - margin-bottom: 1em; - padding: 1rem; - - .vscode-light & { - background-color: var(--color-background--darken-05); - } - - .vscode-dark & { - background-color: var(--color-background--lighten-05); - } + cursor: pointer; } select { - background: none; - color: var(--color-foreground); - cursor: pointer; - margin: 0 0.75em; - padding: 2px; - - .vscode-light & { - border: 1px solid rgba(0, 0, 0, 0.3); - } - - .vscode-dark & { - border: 1px solid rgba(255, 255, 255, 0.3); - } - - &:focus { - outline-color: var(--color-focus-border); - .vscode-light & { - background-color: rgba(255, 255, 255, 0.4); - } - - .vscode-dark & { - background-color: rgba(0, 0, 0, 0.2); - } - } - - &[disabled] { - color: var(--color-foreground--75); - cursor: default; - } + background: none; + color: var(--color-foreground); + cursor: pointer; + margin: 0 0.75em; + padding: 2px; + min-width: 5em; + + .vscode-light & { + border: 1px solid rgba(0, 0, 0, 0.3); + } + + .vscode-dark & { + border: 1px solid rgba(255, 255, 255, 0.3); + } + + &:focus { + outline-color: var(--color-focus-border); + .vscode-light & { + background-color: rgba(255, 255, 255, 0.4); + } + + .vscode-dark & { + background-color: rgba(0, 0, 0, 0.2); + } + } + + &[disabled] { + color: var(--color-foreground--75); + cursor: default; + } } select option { - .vscode-light & { - background-color: var(--color-background--darken-05); - } + .vscode-light & { + background-color: var(--color-background--darken-05); + } - .vscode-dark & { - background-color: var(--color-background--lighten-05); - } + .vscode-dark & { + background-color: var(--color-background--lighten-05); + } - &:focus { - outline-color: var(--color-focus-border); - .vscode-light & { - background-color: rgba(255, 255, 255, 0.4); - } + &:focus { + outline-color: var(--color-focus-border); + .vscode-light & { + background-color: rgba(255, 255, 255, 0.4); + } - .vscode-dark & { - background-color: rgba(0, 0, 0, 0.2); - } - } + .vscode-dark & { + background-color: rgba(0, 0, 0, 0.2); + } + } } ul { - font-size: 1em; - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } .button { - background: none; - border: none; - border-radius: 3px; - cursor: pointer; - display: inline-block; - font-size: 0.8em; - letter-spacing: 0.25em; - margin: 1em 0.5em; - padding: 1em 1.75em; - text-decoration: none; - text-transform: uppercase; - user-select: none; - white-space: nowrap; - - &:focus { - outline: none; - } + background: none; + border: none; + border-radius: 3px; + cursor: pointer; + display: inline-block; + font-size: 1.1rem; + letter-spacing: 0.25em; + margin: 1em 0.5em; + padding: 1em 1.75em; + text-decoration: none; + text-transform: uppercase; + user-select: none; + white-space: nowrap; + + &:focus { + outline: none; + } } .button--big { - font-size: 1.25em; + font-size: 1.5rem; } .button--flat { - .vscode-light & { - border: 1px solid rgba(0, 0, 0, 0.6); - color: black; - } - .vscode-dark & { - border: 1px solid rgba(255, 255, 255, 0.6); - color: white !important; - } - transition: background-color 250ms, border-color 250ms, color 250ms; - - &:hover { - .vscode-light & { - background-color: var(--color-button-background--darken-30); - border-color: var(--color-button-background--darken-30); - color: white !important; - } - .vscode-dark & { - background-color: white; - border-color: white; - color: black !important; - } - } - - .preload & { - transition-duration: 0s !important; - } + .vscode-light & { + border: 1px solid rgba(0, 0, 0, 0.6); + color: black; + } + .vscode-dark & { + border: 1px solid rgba(255, 255, 255, 0.6); + color: white !important; + } + transition: background-color 250ms, border-color 250ms, color 250ms; + + &:hover { + .vscode-light & { + background-color: var(--color-button-background--darken-30); + border-color: var(--color-button-background--darken-30); + color: white !important; + } + .vscode-dark & { + background-color: white; + border-color: white; + color: black !important; + } + } + + .preload & { + transition-duration: 0s !important; + } } .button--flat-inverse { - background-color: white; - border: 1px solid white; - color: black !important; - font-weight: 600; - transition: background-color 250ms, border-color 250ms, color 250ms; + background-color: white; + border: 1px solid white; + color: black !important; + font-weight: 600; + transition: background-color 250ms, border-color 250ms, color 250ms; - &:hover { - background: rgba(0, 0, 0, 0.2); - border-color: rgba(255, 255, 255, 0.6); - color: white !important; - } + &:hover { + background: rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.6); + color: white !important; + } - .preload & { - transition-duration: 0s !important; - } + .preload & { + transition-duration: 0s !important; + } } .button--flat-primary { - background-color: var(--color-button-background); - border: 1px solid var(--color-button-background); - color: var(--color-button-foreground) !important; - font-weight: 600; - transition: background-color 250ms, border-color 250ms, color 250ms; - - &:hover { - .vscode-light & { - background-color: var(--color-button-background--darken-30); - border-color: var(--color-button-background--darken-30); - color: white !important; - } - .vscode-dark & { - background-color: white; - border-color: white; - color: black !important; - } - } - - .preload & { - transition-duration: 0s !important; - } + background-color: var(--color-button-background); + border: 1px solid var(--color-button-background); + color: var(--color-button-foreground) !important; + font-weight: 600; + transition: background-color 250ms, border-color 250ms, color 250ms; + + &:hover { + .vscode-light & { + background-color: var(--color-button-background--darken-30); + border-color: var(--color-button-background--darken-30); + color: white !important; + } + .vscode-dark & { + background-color: white; + border-color: white; + color: black !important; + } + } + + .preload & { + transition-duration: 0s !important; + } +} + +.blurb { + font-size: 1.5rem; + font-weight: 200; + color: var(--color-foreground--65); + margin: 1em; + + b { + color: var(--color-foreground--85); + } } -.button-group { - display: flex; - flex-wrap: wrap; - - & .button { - white-space: nowrap; - } -} - -.button-group--support-gitlens { - justify-content: center; - margin: 1.5em 0 1em 0; - - & .button { - margin-left: 1.5em; - margin-right: 1.5em; - white-space: nowrap; - } -} - -.button-group--support-gitlens-sidebar { - margin-bottom: 1em; - - & .button { - font-weight: 400; - margin: 0.75em 0; - text-align: center; - width: 100%; - } -} - -.about { - font-size: 1.2em; - font-weight: 200; - color: var(--color-foreground--75); - margin: 3em 1em; - - b { - color: var(--color-foreground--85); - } +.command { + font-weight: 600; + padding: 1px 3px; } -.changelog { - border-radius: 1em; - margin: 2em; - - .vscode-light & { - background-color: var(--color-background--darken-05); - box-shadow: inset 0 0 6px 0px rgba(0, 0, 0, 0.05); - } +.container { + display: grid; + grid-template-areas: 'header header' 'hero hero' 'content sidebar'; + grid-template-columns: repeat(1, 1fr min-content); + margin: 1em auto; + grid-gap: 1em 3em; + max-width: 1200px; + min-width: 450px; - .vscode-dark & { - background-color: var(--color-background--lighten-075); - box-shadow: inset 0 0 6px 0px rgba(255, 255, 255, 0.075); - } + @media all and (max-width: 768px) { + grid-gap: 1em 0; + } } -.changelog__badge { - background-color: #0366d6; - border-radius: 3px; - box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.5); - color: #e6e6e6; - display: inline-block; - font-size: 11px; - font-weight: 600; - line-height: 1.7; - margin-right: 1.25em; - padding: 2px 5px; - text-align: center; - text-transform: uppercase; - vertical-align: text-top; - width: 65px; -} +.content__area { + grid-area: content; + font-size: 1.4rem; -.changelog__badge--added { - background-color: #28a745; -} + .vscode-light & { + background-color: var(--color-background--darken-05); + } -.changelog__badge--changed, -.changelog__badge--fixed { - background-color: #0366d6; -} - -.changelog__badge--version { - background-color: #914db3; - font-size: 15px; -} + .vscode-dark & { + background-color: var(--color-background--lighten-05); + } -.changelog__date { - font-variant: small-caps; - font-weight: 600; - margin-left: -7px; - opacity: 0.9; - vertical-align: middle; + @media all and (max-width: 768px) { + grid-column: span 1; + } } -.changelog__details { - align-items: center; - display: flex; - font-size: 0.9em; - justify-content: center; - padding: 0 0 0 7em; - position: relative; +.content__area--full-scroll { + background-color: unset !important; + margin-bottom: 90vh; - &:before { - border-left: 1px solid rgba(122, 122, 122, 0.15); - content: ' '; - height: calc(100% + 7px); - left: 37px; - position: absolute; - top: 1px; - } + .section--settings { + margin: 0 0 1em 0; + } } -.changelog__details--list { - flex-direction: column; +.cta { + display: flex; + flex-wrap: wrap; + justify-content: center; + font-size: 1.3rem; + margin: 0; - & p { - align-self: flex-start; - margin-bottom: 0; - } - - & p:last-child { - margin-bottom: 1em; - } -} - -.changelog__hint { - color: var(--color-foreground--75); - font-weight: 200; - margin: 1em; + & p { + margin-left: 10%; + margin-right: 10%; + margin-top: -0.5em; + opacity: 0.6; + } } -.changelog__image-link { - text-align: center; +.cta--primary { + margin: 0 1em; } -.changelog__image { - margin: 1em 0 0 -2em; - max-width: 65%; +.cta--secondary { + margin: 0 1em; } -.changelog__list { - flex: 100% 0 1; - font-size: 1.1em; - font-weight: 200; - list-style-type: none; - margin: 1em; - - & li { - margin-bottom: 1em; - } +.header__blurb { + color: var(--color-foreground--75); + flex: 2 1 55%; + font-size: 1.5rem; + font-weight: 200; + margin: 0; + min-width: 345px; - & code { - font-size: 0.8em; - } + @media all and (max-width: 880px) { + margin: 0 2em; + } } -.changelog__list-item--version { - margin: 2em 0 0.5em 0; - padding-top: 2em; - - .vscode-dark & { - border-top: 1px solid var(--color-background--lighten-30); - } +.header__link { + color: var(--color-foreground); + outline: none; - .vscode-light & { - border-top: 1px solid var(--color-background--darken-30); - } + &:hover, + &:active, + &:focus { + color: var(--color-foreground); + outline: none; + } } -.changelog__title { - flex: 100% 0 0; - font-size: 2em; - text-align: center; +.header__logo { + display: flex; + flex-wrap: nowrap; } -.changelog__version { - background-color: #914db3; - border-bottom: 2px solid #914db3; - border-radius: 3px; - color: #f2f2f2; - margin: 0 0.25em; - padding: 2px 10px; - text-align: center; - vertical-align: bottom; +.header__logo--highlight { + color: #914db3; } -.command { - font-weight: 600; - padding: 1px 3px; +.header__subtitle { + color: var(--color-foreground--65); + font-size: 2rem; + font-weight: 100; + margin: -0.2em 0 0 0; + white-space: nowrap; } -.container { - align-items: center; - display: flex; - justify-content: center; - min-height: 100%; - min-width: 100%; -} +.hero__area { + grid-area: hero; + color: var(--color-foreground--75); + font-size: 1.5rem; + font-weight: 200; + margin: 0 1em; -.content { - margin-top: 3em; - max-width: 1200px; - min-width: 450px; - width: 90%; + b { + color: var(--color-foreground--85); + } } -.cta__container { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin: 3em 0; - - & p { - margin-top: -1em; - opacity: 0.6; - } +.hero__area--sticky { + background: var(--color-background); + margin: 0; + padding: 1em 0; + position: sticky; + top: -1px; + z-index: 1; + grid-column: span 1; } -.cta__primary { - margin: 0 1em; +.hero__row { + display: flex; + flex-wrap: nowrap; + align-items: baseline; + justify-content: space-between; } -.cta__secondary { - margin: 0 1em; +.hero__subtitle { + color: var(--color-foreground--75); + font-size: 1.4rem; + margin: 0.25em 0 0 0; } -.section-list { - list-style: disc; - margin: 0 0 2em 2em; - - & li { - margin-bottom: 0.5em; - } +.hero__title { + font-size: 4rem; + margin: 0; } -.section-list--nested { - margin: 1em 0 0 2em; +.hero__title-actions { + margin: 0 1em; } -.feature_preview { - display: flex; - justify-content: space-evenly; - margin: 1em 0; +.hero__toolbar { + flex: 1 1 auto; - .section-list--nested & { - margin-left: -2em; - } + display: flex; + justify-content: flex-end; + white-space: nowrap; - a { - flex: 35% 0 1; - } + select, + option { + background-color: var(--color-background) !important; + margin-right: 0; - img { - width: 100%; - } + @media all and (max-width: 768px) { + margin-right: unset; + } + } } -.header__blurb { - color: var(--color-foreground--75); - flex: 55% 2 1; - font-size: 1.2em; - font-weight: 200; - margin: -1em 0 0 6em; - min-width: 345px; - - @media all and (max-width: 880px) { - margin: 0 2em; - } +.hero__toolbar-scope { + flex: 0 0 auto; } -.header__link { - color: var(--color-foreground); - outline: none; +.icon { + background-color: var(--color-foreground); + display: inline-block; + height: 24px; + margin-right: 3px; + position: relative; + width: 19px; + top: 9px; - &:hover, - &:active, - &:focus { - color: var(--color-foreground); - outline: none; - } + h2 & { + top: 7px; + } } -.header__logo { - display: flex; - flex-wrap: nowrap; +.icon__bulb { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + opacity: 0.8; } -.header__logo--highlight { - color: #914db3; +.icon__chevron-down { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; } -.header__subtitle { - color: var(--color-foreground--50); - display: block; - font-size: 2em; - font-weight: 100; - margin-top: -0.2em; - white-space: nowrap; +.icon__gear { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; } -.icon { - background-color: var(--color-foreground); - display: inline-block; - height: 24px; - margin-bottom: -9px; - width: 19px; +.icon__info { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; } -.icon__info { - -webkit-mask-image: url('data:image/svg+xml;utf8,'); - mask-image: url('data:image/svg+xml;utf8,'); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; +.icon--md { + height: 30px; + width: 24px; + top: 12px; } .icon--lg { - height: 36px; - margin-bottom: -16px; - width: 30px; + height: 36px; + width: 30px; + top: 15px; } .image__logo { - margin: 9px 1em 0 0; - max-height: 64px; - max-width: 64px; + margin: 9px 1em 0 0; + max-height: 64px; + max-width: 64px; } .image__preview { - border-radius: 8px; - box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8), 0px 0px 12px 1px rgba(0, 0, 0, 0.5); + border-radius: 8px; + box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8), 0px 0px 12px 1px rgba(0, 0, 0, 0.5); + width: 600px; } .image__preview--overlay { - left: 0; - position: absolute; - top: 0; + left: 0; + position: absolute; + top: 0; } -.label__hint { - color: var(--color-foreground--75); - display: block; - font-weight: 200; - margin: 1em 2em; +.link__configure, +.link__learn-more { + margin-left: 10px; } -.list-button { - border: none; - color: var(--color-foreground); - cursor: pointer; - font-size: 1em; - height: 5em; - margin: 5px 1px; - max-width: 475px; - padding: 12px 10px; - text-align: left; - width: calc(100% - 2px); +.presets { + align-items: baseline; + justify-content: center; + display: flex; + width: 100%; + flex-wrap: wrap; +} + +section { + display: flex; + flex-wrap: wrap; + + margin-bottom: 1em; + padding: 1em; - .vscode-light & { - background-color: var(--color-background--darken-05); - } + h2 { + flex: 1 0 auto; - .vscode-dark & { - background-color: var(--color-background--lighten-05); - } + display: flex; + margin-top: 0; + margin-bottom: 1em; + } +} - &:hover, - &:focus { - .vscode-light & { - background-color: var(--color-background--darken-075); - } +.section--full { + flex-flow: column; +} - .vscode-dark & { - background-color: var(--color-background--lighten-075); - } - } +.section--settings { + flex: 0 1 auto; - &:focus { - outline: 0; + display: flex; + flex-wrap: wrap; - .vscode-light & { - border: 1px solid var(--color-background--darken-15); - } + border-radius: 6px; + margin: 1em; + padding: 1em; - .vscode-dark & { - border: 1px solid var(--color-background--lighten-15); - } - } -} + .vscode-dark & { + background: var(--color-background--lighten-075); + } -.list-button__title { - font-size: 1em; - font-weight: 400; - margin: 0; - margin-bottom: 0.25em; - overflow: hidden; - text-overflow: ellipsis; + .vscode-light & { + background: var(--color-background--darken-075); + } } -.list-button__detail { - color: var(--color-foreground--75); - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} +.section--collapsible { + .section__header { + cursor: pointer; + flex: 1 0 100%; + margin-right: 0; + + &:after { + background-color: var(--color-foreground--75); + content: ''; + height: 40px; + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 32px 40px; + mask-size: 32px 40px; + position: absolute; + right: 0; + top: 0; + transition: transform 250ms ease-in-out; + width: 32px; + } + } + + &.collapsed { + .section__header { + margin-bottom: 0; + + &:after { + transform: translateY(-9px) rotate(-180deg); + } -.page-header { - margin: 1em 0 2em 0; - position: relative; + h2 { + margin-bottom: 0; + } + } + + .section__collapsible { + display: none; + } + } } -.page-header--sticky { - background: var(--color-background); - margin: 1em 0 1em 0; - padding-bottom: 1em; - position: sticky; - top: 0; - z-index: 1; +.section__collapsible { + display: flex; + flex-flow: wrap-reverse; } -.page-header__row { - display: flex; - flex-wrap: nowrap; - justify-content: space-between; +.section__collapsible--wrap { + flex-flow: wrap; } -.page-header__title { - flex: 0 0 auto; - font-size: 3em; - margin: 0; +.section__content { + flex: 1 1 auto; + + display: flex; + flex-flow: column wrap; } -.page-header__title-actions { - flex: 0 0 auto; - margin: 1.75em 1em 0 1em; +.section__group { + flex: 1 0 100%; + + display: flex; + flex-flow: wrap-reverse; + margin-top: 1em; } -.page-header__toolbar { - display: flex; - flex: 1 1 100%; - justify-content: flex-end; - margin: 1.5em 174px 0 0; // 174px ~ the width of the sidebar - white-space: nowrap; +.section__header { + display: flex; + align-items: baseline; + flex: 0 1 auto; + flex-flow: column; + margin-bottom: 1em; + margin-right: 1em; + position: relative; - @media all and (max-width: 860px) { - margin-right: -9px; - } + h2 { + margin-bottom: 0; + } - select, - option { - background-color: var(--color-background) !important; - } + .link__configure, + .link__learn-more { + visibility: hidden; + } + + &:hover { + .link__configure, + .link__learn-more { + visibility: visible; + } + } } -.page-header__subtitle { - color: var(--color-foreground--75); - font-size: 1.2em; - margin: 0.25em 0 0 0; +.section__header-hint { + color: var(--color-foreground--75); + font-weight: 200; + margin: 0.25em 0; } -.presets { - align-items: baseline; - display: flex; - margin-bottom: 1em; - margin-top: -1em; +.section__header-info { + display: grid; + grid-template-columns: auto auto; + grid-gap: 1em; + align-items: center; + + color: var(--color-foreground--75); + font-weight: 200; + margin: 0.25em 0.5em; + + p { + margin: 0; + line-height: 2rem; + } + + .icon { + top: 3px; + } } -.presets__buttons { - font-size: 0.8em; - margin-left: 1em; +.section__hint { + flex: 0 0 auto; + + color: var(--color-foreground--75); + font-weight: 200; + margin: 1em 0 0 0; } .section__preview { - flex: 30% 1 1; - margin-left: 2em; - min-width: 400px; - position: relative; -} + flex: 0 1 auto; + position: relative; + margin-left: auto; + margin-right: auto; -.section__settings { - display: flex; - flex: 100% 1 0; - flex-wrap: wrap; - margin-right: 1em; + .section__collapsible & { + margin-bottom: 1em; + } } -.section__settings--multi { - & > .settings-group { - flex-basis: 100%; - margin-left: 1em; - } +.section__preview-hint { + color: var(--color-foreground--75); + font-weight: 200; + margin: 0.5em 0.5em 0 0.5em; + text-align: center; } -.section__header { - align-items: baseline; - cursor: pointer; - display: flex; - flex: 100% 0 0; - flex-wrap: wrap; - margin-bottom: 2em; - - position: relative; - - &:after { - background-color: var(--color-foreground--75); - content: ''; - height: 40px; - -webkit-mask-image: url('data:image/svg+xml;utf8,'); - mask-image: url('data:image/svg+xml;utf8,'); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 32px 40px; - mask-size: 32px 40px; - position: absolute; - right: 0; - top: 0; - transition: transform 500ms cubic-bezier(0, 1.5, 1, 1); - width: 32px; - } - - &.collapsed { - margin-bottom: 0; - - &:after { - transform: rotateX(180deg); - } - - & + .section__settings { - display: none; - } - } -} +// .section__preview-spacer { +// flex-grow: 10; +// flex-shrink: 10; +// } .section__title { - flex: 100% 1 0; - margin: 0; + flex: 1 0 auto; + margin: 0; +} + +.section__title--primary { + font-size: 3rem; + margin: 0.3em 0; + justify-content: center; +} + +.section__title--break { + border-top: 1px solid var(--color-background--lighten-30); + margin: 0.3em 15% 0 15%; + padding-top: 1em; + justify-content: center; +} + +.setting { + flex: 0 1 auto; + position: relative; + margin-right: 1em; + + & input[type='checkbox'] { + flex: 0 0 16px; + height: 16px; + margin: 0 10px 0 0; + position: relative; + top: 3px; + width: 16px; + } + + &[disabled] { + label { + color: var(--color-foreground--75); + cursor: default; + } + } +} + +.setting--expandable { + .setting__expander { + background-color: var(--color-foreground--75); + cursor: pointer; + height: 16px; + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 32px 28px; + mask-size: 32px 28px; + position: relative; + margin: 0; + transform: translate(-9px, 4px) rotate(-90deg); + transition: transform 250ms ease-in-out; + width: 32px; + } + + & + .settings { + display: none; + } + + &.expanded { + .setting__expander { + transform: translate(-4px, 0); + } + + & + .settings { + display: unset; + } + } +} + +.setting__input { + display: inline-flex; + flex-wrap: nowrap; + align-items: baseline; + line-height: normal; + margin: 0.5em 0; + + input, + select { + flex-grow: 1; + + & + .link__configure, + & + .link__learn-more { + margin-left: 0; + } + } + + input[type='text'] { + min-width: 245px; + } + + label { + flex-grow: 0; + + > select { + margin-top: 0.25em; + } + } + + .link__learn-more, + .link__configure { + visibility: hidden; + max-height: 15px; + + .icon { + display: block; + top: unset; + } + } + + &:hover { + .link__learn-more, + .link__configure { + visibility: visible; + } + } +} + +.setting__input--big { + font-size: 2.2rem; + font-weight: 200; + margin: 0; + + & input[type='checkbox'] { + flex: 0 0 1.5em; + height: 1em; + margin: 0; + position: relative; + top: 3px; + left: -5px; + width: 1em; + } + + & label { + white-space: nowrap; + } + + .link__learn-more, + .link__configure { + max-height: 17px; + } } -.section__title-hint { - color: var(--color-foreground--75); - font-weight: 200; - margin: 0.25em 0; +.setting__hint { + color: var(--color-foreground--75); + display: block; + font-weight: 200; + font-size: 1.3rem; + margin: 0 1em 0.5em 1em; } -.section-group__content { - flex: auto 1 1; - min-width: 410px; -} +.settings { + flex: 1 0 auto; -.section-group__content--full-scroll { - margin-bottom: 100%; -} + display: flex; + flex-wrap: wrap; + // align-items: baseline; + // justify-content: space-between; -.section-group__sidebar { - align-self: flex-start; - position: sticky; - top: 0; - z-index: 2; + .setting { + margin-right: 3em; + } +} - li { - white-space: nowrap; - } +.settings--fixed { + display: block; } -.section-group__sidebar--settings { - flex: 145px 0 0; - margin: -4em 0 0 3em; +.sidebar { + grid-area: sidebar; + align-self: flex-start; + font-size: 1.3rem; + position: sticky; + top: 0; + z-index: 2; - @media all and (max-width: 860px) { - display: none; - } -} + @media all and (max-width: 768px) { + display: none; + } -.section-group__sidebar--welcome { - flex: 196px 0 0; - margin: 1em 1em 0 0.5em; + li { + white-space: nowrap; + } - @media all and (max-width: 616px) { - display: none; - } + .button { + margin: 0; + } } -.section-group-section { - font-size: 1.1em; - font-weight: 200; +.sidebar__group { + margin-top: 1em; - p { - margin: 0.5em 0.25em 1em 0.25em; - } -} + h2 { + font-size: 2rem; + } -.section-group-section__cols { - display: flex; - flex-wrap: wrap; + p { + font-weight: 400; + opacity: 0.5; + text-align: center; + } } -.section-group-section__col { - flex: 45% 1 1; - margin: 0 4px; - min-width: 300px; -} +.sidebar__jump-link { + &.active { + font-weight: 700; -.section-groups { - display: flex; - justify-content: space-around; - margin-top: -1em; -} + &:before { + content: ' '; + border-left: 4px solid var(--color-link-foreground--darken-20); + position: absolute; + left: -1em; + height: 1em; + padding-bottom: 4px; -.settings-group { - flex: 2 1; - margin-bottom: 1em; - min-width: 300px; + .vscode-light & { + border-left-color: var(--color-link-foreground--lighten-20); + } + } + } } -.settings-group__header { - font-size: 1.2em; - margin: 0 0 1.5em 0; - padding-top: 1em; +.sponsor__image { + opacity: 0.8; + transition: opacity 250ms; + transform: scale(0.6); + margin: -2.5em 0; - &:first-child { - margin-top: -1em; - } + &:hover { + opacity: 1; + } } -.settings-group__header-hint { - color: var(--color-foreground--75); - font-weight: 200; - margin-top: -1em; +.sponsor__tag { + font-size: 1.1rem; + margin: -1em 0.5em 0 0.5em; + opacity: 0.5; + text-align: center; } -.settings-group__hint { - color: var(--color-foreground--75); - font-weight: 200; - margin-left: 2.3em; - text-indent: -2.75em; +.bold { + font-weight: 600; } -.settings-group__hint--more { - display: block; - margin-top: 0.5em; - text-indent: initial; +.center { + text-align: center; } -.settings-group__setting { - align-items: baseline; - display: flex; - flex: 100% 1 1; - flex-wrap: wrap; - margin-bottom: 0.75em; - position: relative; - - & input[type='checkbox'] { - flex: 16px 0 0; - height: 16px; - margin: 0 0.75em 0 0; - position: relative; - top: 3px; - width: 16px; - } - - & label { - flex: auto 0 1; - margin-bottom: 0.75em; - } +.hidden { + display: none !important; +} - &[disabled] { - label { - color: var(--color-foreground--75); - cursor: default; - } - } +.highlight { + background-color: #914db3; + border-bottom: 2px solid #914db3; + border-radius: 3px; + color: #f2f2f2; + margin: 0 0.25em; + padding: 2px 10px; + text-align: center; + vertical-align: bottom; } -.settings-group__setting--small { - color: var(--color-foreground--75); - font-size: 0.8em; - margin-top: -0.75em; +.is-sidebar-hidden { + display: none; - input[type='checkbox'] { - flex: 12px 0 0; - height: 12px; - margin: 0 0.75em 0 0; - position: relative; - top: 3px; - width: 12px; - } + @media all and (max-width: 768px) { + display: initial; + } } -.setting__hint { - color: var(--color-foreground--50); - font-size: 0.9em; - margin: -1em 0 1em 1em; +.mb-0 { + margin-bottom: 0 !important; } -.settings-scope { - flex: 0 0 auto; +.mb-05 { + margin-bottom: 0.5em !important; } -.sidebar-group { - margin-top: 1em; +.mb-1 { + margin-bottom: 1em !important; } -.sidebar-group__message { - font-weight: 400; - opacity: 0.5; - text-align: center; +.mb-2 { + margin-bottom: 2em !important; } -.sidebar__jump-link { - &.active { - font-weight: 700; - - &:before { - content: ' '; - border-left: 4px solid var(--color-link-foreground--darken-20); - position: absolute; - left: -1em; - height: 1em; - padding-bottom: 4px; +.ml-0 { + margin-left: 0 !important; +} - .vscode-light & { - border-left-color: var(--color-link-foreground--lighten-20); - } - } - } +.ml-1 { + margin-left: 1em !important; } -.sponsor__image { - opacity: 0.8; - transition: opacity 250ms; +.ml-2 { + margin-left: 2em !important; +} - &:hover { - opacity: 1; - } +.ml-3 { + margin-left: 3em !important; } -.sponsor__tag { - font-size: 0.8em; - margin: -1em 0.5em 0 0.5em; - opacity: 0.5; - text-align: center; +.ml-4 { + margin-left: 4em !important; } -.bold { - font-weight: 600; +.mr-0 { + margin-right: 0 !important; } -.center { - text-align: center; +.mr-1 { + margin-right: 1em !important; } -.hidden { - display: none !important; +.mr-2 { + margin-right: 2em !important; } -.mb-2 { - margin-bottom: 2em !important; +.mt-n1 { + margin-top: -1em !important; } -.ml-1 { - margin-left: 1em; +.mt-0 { + margin-top: 0 !important; } -.ml-2 { - margin-left: 2em; +.mt-05 { + margin-top: 0.5em !important; } -.ml-3 { - margin-left: 3em; +.mt-1 { + margin-top: 1em !important; } -.ml-4 { - margin-left: 4em; +.mt-2 { + margin-top: 2em !important; } .non-interactive { - cursor: default !important; + cursor: default !important; } .nowrap { - flex-wrap: nowrap !important; + white-space: nowrap !important; } .light { - .vscode-dark & { - display: none; - } + .vscode-dark & { + display: none; + } } .dark { - .vscode-light & { - display: none; - } + .vscode-light & { + display: none; + } } ::-webkit-scrollbar-corner { - background-color: transparent !important; + background-color: transparent !important; } @import 'popup'; diff --git a/src/webviews/apps/settings/index.html b/src/webviews/apps/settings/index.html index 5c2db99..8bbf41c 100644 --- a/src/webviews/apps/settings/index.html +++ b/src/webviews/apps/settings/index.html @@ -1,2972 +1,3203 @@ - - - - - - - - -
-
-
- - - -

- GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to - visualize code authorship at a glance via Git blame annotations and code lens, - seamlessly navigate and explore Git repositories, gain valuable insights via - powerful comparison commands, and so much more. -

-
- -
-
-

Settings

-
- collapse all - -
-
- -
-
-

- For advanced customizations refer to the - GitLens docs - and edit your - User Settings -

-
- -
-
-
-
-

- General - - - -

-

General GitLens settings — defaults and globals

-
-
-

Views Side Bar Layout

-
-
- Presets - - Default Layout - Source Control Layout - Contextual Layout - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
-
- -

Default Date/Time Display

-
-
- - - -
-
- - - - - -
-
- - - - - -
-
- -

Keyboard Shortcuts

-
-
- - - -
- - - -

- Search for gitlens in the - Keyboard Shortcuts - editor to see the shortcuts and to customize them further -

-
- -

Menus & Toolbars

-
-

- Any changes to menu & toolbar settings will require a - reload - before they will take effect -

- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
- -

- For more advanced customizations open - User Settings - and search for gitlens -

-
-
- -
-
-

- Current Line Blame - - - -

-

- Adds an unobtrusive blame annotation at the end of the current line -

-
-
-
-
- - -
- -
- - - - -
- -
- - -
-

- When enabled the annotation can be scrolled into view when it is outside the - viewport -

-
- -
- - - -
- -

- For more advanced customizations open - User Settings - and search for gitlens.currentLine - - Use the - GitLens: Toggle Line Blame Annotations - command to override this setting for the current window - -

-
-
- -
-
-

- Gutter Blame - - - -

-

- Adds on-demand gutter blame annotations for the whole file -

-
-
-
-
- - -
- -
- - - - -
- -
- - -
-

- Indicator color reflects the age of the most recent change (hot or cold), while - indicator brightness ranges from bright (newer) to dim (older) based on the - relative age -

- -
- - -
- -
- - -
- -
- - -
-

- Compacts (deduplicates) matching adjacent blame annotations -

- -
- - -
- -
- - -
-
- - -
-
- - -
-
- -
- - - - - - - - - -
- -

- For more advanced customizations open - User Settings - and search for gitlens.blame - - Use the - - - command to turn the annotations on or off - - - Press Esc to turn off the annotations - -

-
-
- -
-
-

- Hovers - - - -

-

Adds detailed blame information accessible via hovers

-
- -
-
-
- - -
- -
- - -
- - - - - - - - - -
- - -
- -
- - -
-
- -
- - - - - - - - - - - - - - - - - - - - -
- -
-
-
- - -
- -
- - -
- -
- - -
- -
- - -
-
-
- -
- - - - - - - - -
-
-
- -
-
-

- Code Lens - - - -

-

- Adds authorship code lens to the top of files and on code blocks -

-
-
-
-
- - -
- -
- - -
-
- - -
- -
- - -
-
- - -
- -
- -
-
- - -
-
- - -
-
- - -
-
-
- - - - - - - - - - - - -
-

- For more advanced customizations open - User Settings - and search for gitlens.codeLens - - Use the - GitLens: Toggle Git Code Lens - command to override this setting for the current window - -

-
-
- -
-
-

- Gutter Heatmap - - - -

-

- Adds on-demand heatmap (age) indicator to the edge of the gutter to show how - recently lines were changed
- Indicator color reflects the age of the most recent change (hot or cold), while - indicator brightness ranges from bright (newer) to dim (older) based on the relative - age -

-
- -
-
-
- - -
-
- -
- -
- -

- Use the - - - command to turn the annotations on or off - - Press Esc to turn off the annotations - -

-
-
- -
-
-

- Recent Changes - - - -

-

- Adds on-demand recent changes annotations to highlight lines changed by the most - recent commit -

-
- -
-
-
- - -
- -
- - -
- -
- - -
- -
- - -
-
- -
- - - - -
- -

- Use the - - - command to turn the annotations on or off - - Press Esc to turn off the annotations - -

-
-
- -
-
-

- Status Bar Blame - - - -

-

- Adds a Git blame annotation about the current line to the status bar -

-
- -
-
-
- - -
- -
- - - - -
- -
- - -
- -
- - -
- -
- - -
-

- Avoids clearing the previous blame information when changing lines to reduce - status bar "flashing" -

-
- -
- - - -
- -

- For more advanced customizations open - User Settings - and search for gitlens.statusBar - - Use the - GitLens: Toggle Line Blame Annotations - command to override this setting for the current window - -

-
-
- -
-
-

- Repositories view - - - -

-

- Adds a Repositories view to visualize, navigate, and explore Git repositories -

-
-
-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- - -
- - -
-

- Compacts (flattens) unnecessary nesting when using a tree layouts -

- -
- - -
- -
- - -
- -
- - -
-
-
- - - - -
-

- For more advanced customizations open - User Settings - and search for gitlens.views.repositories or - gitlens.views -

-
-
- -
-
-

- File History view - - - -

-

- Adds a File History view to visualize, navigate, and explore the revision history of - the current file -

-
-
-
-
- - -
- -
- - -
- -
- - -
-
-
- - -
-
-
- -
-
-

- Line History view - - - -

-

- Adds a Line History view to visualize, navigate, and explore the revision history of - the selected lines of current file -

-
-
-
-
- - -
- -
- - -
- -
- - -
-
-
- - -
-
-
- -
-
-

- Search Commits view - - - -

-

- Adds a Search Commits view to search and explore commit histories by message, - author, files, id, etc -

-
-
-
-
- - -
- -
- - -
- -
- - -
- -
- - -
-

- Compacts (flattens) unnecessary nesting when using a tree layouts -

- -
- - -
-
- -
- - - - -
-

- For more advanced customizations open - User Settings - and search for gitlens.views.search or gitlens.views -

-
-
- -
-
-

- Compare view - - - -

-

- Adds a Compare view to visualize comparisons between branches, tags, commits, and - more -

-
-
-
-
- - -
- -
- - -
- -
- - -
- -
- - -
-

- Compacts (flattens) unnecessary nesting when using a tree layouts -

- -
- - -
-
- -
- - - - -
-

- For more advanced customizations open - User Settings - and search for gitlens.views.compare or gitlens.views -

-
-
- -
-
-

- Modes - - - -

-

- Supports user-defined modes for quickly toggling between sets of settings -

-
- -
-
-
- - -
- -
- - -
-
- -
- - - -
- -

- For more advanced customizations or to add - your own modes, open - User Settings - and search for gitlens.modes - - Use the - GitLens: Switch Mode - command to quickly switch the active mode - - - Use the - GitLens: Toggle Review Mode - command to toggle Review mode - - - Use the - GitLens: Toggle Zen Mode - command to toggle Zen mode - -

-
-
-
- -
-
-

Jump to

- -
-
-

Help

- -
-
-

Resources

- -
-
-
-
-
- - #{endOfBody} - + + + + + + + + +
+
+ + + +

+ GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to + visualize code authorship at a glance via Git blame annotations and code lens, + seamlessly navigate and explore Git repositories, gain valuable insights via powerful + comparison commands, and so much more. +

+
+ +
+
+

Settings

+
+ collapse all + +
+
+ +
+
+

+ For advanced customizations refer to the + GitLens docs + and edit your + User Settings +

+
+ +
+
+
+
+ + + + + +
+ +

+ Adds an unobtrusive blame annotation at the end of the current line +

+
+ +
+

+ Use the + GitLens: Toggle Line Blame Annotations + command to override this setting for the current window +

+
+
+
+ +
+
+
+
+
+ + + +
+ +
+ +
+
+ + +
+

+ When enabled the annotation can be scrolled into view when it is outside the + viewport +

+
+
+ +

+ For more options, open + User Settings + and search for gitlens.currentLine +

+
+
+ + + +
+
+
+ +
+
+
+ + + + + +
+ +

+ Adds authorship code lens to the top of files and on code blocks +

+
+ +
+

+ Use the + GitLens: Toggle Git Code Lens + command to override this setting for the current window +

+
+
+
+ +
+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+
+ +
+
+ + +
+
+ +
+
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+
+ + +
+

At the top of the file

+
+ +
+
+ + +
+

+ At the start of modules, classes, interfaces, etc +

+
+ +
+
+ + +
+

At the start of functions, methods, etc

+
+
+
+ +

+ For more options, open + User Settings + and search for gitlens.codeLens +

+
+ +
+ + + + + + + + + + + + +
+
+
+ +
+
+
+ + + + + +
+ +

+ Adds a Git blame annotation about the current line to the status bar +

+
+ +
+
+
+
+
+ + + + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+

+ Avoids clearing the previous blame information when changing lines to reduce + status bar "flashing" +

+
+
+ +

+ For more options, open + User Settings + and search for gitlens.statusBar +

+
+ +
+ + + +
+
+
+ +
+
+
+ + + + + +
+ +

Adds detailed blame information accessible via hovers

+
+ +
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ + + + +
+ + + + +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+ +
+ + + + + + + + +
+
+
+
+ +
+
+

+ Views + + + +

+

Adds rich views to visualize, navigate, and explore

+
+ +
+
+

+ GitLens views can be configured to be shown in different side bar layouts to best match + your workflow. You can easily change the default layout (where all views are shown + together on the GitLens side bar) below +

+
+ Default Layout + Source Control Layout + Contextual Layout +
+ +
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+
+
+ + + + + +
+
+
+
+
+
+ +
+
+
+ + + + + +
+ +

+ Adds a Repositories view to visualize, navigate, and explore Git repositories +

+
+ +
+
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+

+ Chooses the best layout based on the number of files at each nesting level +

+
+ +
+
+ + +
+

+ Compacts (flattens) unnecessary nesting when using a tree layouts +

+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+ +

+ For more options, open + User Settings + and search for gitlens.views.repositories or + gitlens.views +

+
+
+
+ +
+ + + + +
+
+
+ +
+
+
+ + + + + +
+ +

+ Adds a File History view to visualize, navigate, and explore the revision history of the + current file +

+
+ +
+
+
+
+
+ + +
+
+ +
+
+ + +
+
+
+
+ +
+ + +
+
+
+ +
+
+
+ + + + + +
+ +

+ Adds a Line History view to visualize, navigate, and explore the revision history of the + selected lines of current file +

+
+ +
+
+
+
+
+ + +
+
+ +
+
+ + +
+
+
+
+ +
+ + +
+
+
+ +
+
+
+ + + + + +
+ +

+ Adds a Search Commits view to search and explore commit histories by message, author, files, + id, etc +

+
+ +
+
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+

+ Compacts (flattens) unnecessary nesting when using a tree layouts +

+
+ +
+
+ + +
+
+
+ +

+ For more options, open + User Settings + and search for gitlens.views.search or gitlens.views +

+
+ +
+ + + + +
+
+
+ +
+
+
+ + + + + +
+ +

+ Adds a Compare view to visualize comparisons between branches, tags, commits, and more +

+
+ +
+
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+

+ Compacts (flattens) unnecessary nesting when using a tree layouts +

+
+ +
+
+ + +
+
+
+ +

+ For more options, open + User Settings + and search for gitlens.views.compare or gitlens.views +

+
+ +
+ + + + +
+
+
+ +
+
+

+ Gutter Blame + + + +

+ +

+ Adds on-demand gutter blame annotations for the whole file +

+
+ +
+

+ Use the + + + command to turn the annotations on or off +

+

Press Esc to turn off the annotations

+
+
+
+ +
+
+
+
+ + +
+
+ +
+
+ + + + +
+
+ +
+
+ + +
+

+ Indicator color reflects the age of the most recent change (hot or cold), while + indicator brightness ranges from bright (newer) to dim (older) based on the relative + age +

+
+ +
+
+
+ + +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+

+ Compacts (deduplicates) matching adjacent blame annotations +

+
+ +
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+ +

+ For more options, open + User Settings + and search for gitlens.blame +

+
+ +
+ + + + + + + + + +
+
+
+ +
+
+

+ Gutter Heatmap + + + +

+ +

+ Adds on-demand heatmap (age) indicator to the edge of the gutter to show how recently lines + were changed +

+
+ +
+

+ Use the + + + command to turn the annotations on or off +

+

Press Esc to turn off the annotations

+
+
+
+ +
+
+

+ Indicator color reflects the age of the most recent + change (hot or cold), while indicator brightness ranges from bright (newer) to dim + (older) based on the relative age +

+ +
+
+ + +
+
+
+ +
+ +
+
+
+ +
+
+

+ Recent Changes + + + +

+ +

+ Adds on-demand recent changes annotations to highlight lines changed by the most recent + commit +

+
+ +
+

+ Use the + + + command to turn the annotations on or off +

+

Press Esc to turn off the annotations

+
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ +
+ + + + +
+
+
+ +
+
+

Dates & Times

+
+ +
+
+
+
+ + +
+ + +
+ +
+
+
+ + + + + +
+ Example date: + + +
+ +
+
+ + + + + +
+ Example short date: + + +
+
+
+
+
+ +
+
+
+ + +
+ +

+ Adds many helpful commands to the built-in menus & toolbars +

+ +
+ +
+

+ Any changes to these settings will require a + reload + before they will take effect +

+
+
+
+ +
+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+ +
+
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+ +
+
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+
+ +
+
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+ +
+
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+ +
+
+
+ + +
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+ +
+
+

+ Modes + + + +

+ +

+ Supports user-defined modes for quickly toggling between sets of settings +

+
+ +
+

+ Use the + GitLens: Switch Mode + command to quickly switch the active mode +

+

+ Use the + GitLens: Toggle Review Mode + command to toggle Review mode +

+

+ Use the + GitLens: Toggle Zen Mode + command to toggle Zen mode +

+
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+
+ +

+ For more options or to add your own custom modes, open + User Settings + and search for gitlens.modes +

+
+ +
+ + + +
+
+
+ +
+
+

Keyboard Shortcuts

+
+ +
+
+
+
+ + + +
+ + + +
+

+ Search for gitlens in the + Keyboard Shortcuts + editor to see the shortcuts and to customize them further +

+
+
+
+
+ +
+
+

Jump to

+ +
+
+ ❤ GitLens + +
+
+

Help

+ +
+
+

Resources

+ +
+
+
+ + #{endOfBody} + diff --git a/src/webviews/apps/settings/index.ts b/src/webviews/apps/settings/index.ts index 707b0bb..b87abbe 100644 --- a/src/webviews/apps/settings/index.ts +++ b/src/webviews/apps/settings/index.ts @@ -35,7 +35,7 @@ export class SettingsApp extends AppWithConfig { } let top = 83; - const header = document.querySelector('.page-header--sticky'); + const header = document.querySelector('.hero__area--sticky'); if (header != null) { top = header.clientHeight; } @@ -54,12 +54,23 @@ export class SettingsApp extends AppWithConfig { protected onBind(me: this) { super.onBind(me); - DOM.listenAll('.section__header', 'click', function(this: HTMLInputElement, e: Event) { + DOM.listenAll('.section--collapsible>.section__header', 'click', function(this: HTMLInputElement, e: Event) { return me.onSectionHeaderClicked(this, e as MouseEvent); }); + DOM.listenAll('.setting--expandable .setting__expander', 'click', function(this: HTMLInputElement, e: Event) { + return me.onSettingExpanderCicked(this, e as MouseEvent); + }); + DOM.listenAll('a[data-action="jump"]', 'mousedown', (e: Event) => { + e.stopPropagation(); + e.preventDefault(); + }); DOM.listenAll('a[data-action="jump"]', 'click', function(this: HTMLAnchorElement, e: Event) { return me.onJumpToLinkClicked(this, e as MouseEvent); }); + DOM.listenAll('[data-action]', 'mousedown', (e: Event) => { + e.stopPropagation(); + e.preventDefault(); + }); DOM.listenAll('[data-action]', 'click', function(this: HTMLAnchorElement, e: Event) { return me.onActionLinkClicked(this, e as MouseEvent); }); @@ -85,31 +96,41 @@ export class SettingsApp extends AppWithConfig { private onObserver(entries: IntersectionObserverEntry[], observer: IntersectionObserver) { for (const entry of entries) { this._sections.set(entry.target.parentElement!.id, entry.isIntersecting); + } - let nextActive: string | undefined; - for (const [id, visible] of this._sections.entries()) { - if (nextActive === undefined) { - nextActive = this._activeSection === 'modes' ? 'modes' : id; - } - - if (!visible) continue; - + let nextActive: string | undefined; + for (const [id, visible] of this._sections.entries()) { + if (visible) { nextActive = id; + break; } + } - if (this._activeSection === nextActive) return; + if (nextActive === undefined) { + if (entries.length !== 1) return; - if (this._activeSection !== undefined) { - this.toggleJumpLink(this._activeSection, false); - } + const entry = entries[0]; + if (entry.boundingClientRect == null || entry.rootBounds == null) return; - this._activeSection = nextActive; + nextActive = entry.target.parentElement!.id; + if (entry.boundingClientRect.top >= entry.rootBounds.bottom) { + const keys = [...this._sections.keys()]; + const index = keys.indexOf(nextActive); + if (index <= 0) return; - if (this._activeSection !== undefined) { - this.toggleJumpLink(this._activeSection, true); + nextActive = keys[index - 1]; } } + + if (this._activeSection === nextActive) return; + + if (this._activeSection !== undefined) { + this.toggleJumpLink(this._activeSection, false); + } + + this._activeSection = nextActive; + this.toggleJumpLink(this._activeSection, true); } protected getSettingsScope(): 'user' | 'workspace' { @@ -121,7 +142,7 @@ export class SettingsApp extends AppWithConfig { private onActionLinkClicked(element: HTMLElement, e: MouseEvent) { switch (element.dataset.action) { case 'collapse': - for (const el of document.querySelectorAll('.section__header')) { + for (const el of document.querySelectorAll('.section--collapsible')) { el.classList.add('collapsed'); } @@ -130,7 +151,7 @@ export class SettingsApp extends AppWithConfig { break; case 'expand': - for (const el of document.querySelectorAll('.section__header')) { + for (const el of document.querySelectorAll('.section--collapsible')) { el.classList.remove('collapsed'); } @@ -161,14 +182,15 @@ export class SettingsApp extends AppWithConfig { } private onSectionHeaderClicked(element: HTMLElement, e: MouseEvent) { - if ( - (e.target as HTMLElement).matches('i.icon__info') || - (e.target as HTMLElement).matches('a.link__learn-more') - ) { + if ((e.target as HTMLElement).matches('a, input, label, i.icon__info')) { return; } - element.classList.toggle('collapsed'); + element.parentElement!.classList.toggle('collapsed'); + } + + private onSettingExpanderCicked(element: HTMLElement, e: MouseEvent) { + element.parentElement!.parentElement!.classList.toggle('expanded'); } private scrollToAnchor(anchor: string) { @@ -177,7 +199,7 @@ export class SettingsApp extends AppWithConfig { let height = 83; - const header = document.querySelector('.page-header--sticky'); + const header = document.querySelector('.hero__area--sticky'); if (header != null) { height = header.clientHeight; } diff --git a/src/webviews/apps/shared/appWithConfigBase.ts b/src/webviews/apps/shared/appWithConfigBase.ts index eff2b14..9dd2e04 100644 --- a/src/webviews/apps/shared/appWithConfigBase.ts +++ b/src/webviews/apps/shared/appWithConfigBase.ts @@ -9,6 +9,9 @@ import { } from '../../protocol'; import { DOM } from './dom'; import { App } from './appBase'; +import { Dates } from '../../../system/date'; + +const dateFormatter = Dates.getFormatter(new Date('Wed Jul 25 2018 19:18:00 GMT-0400')); export abstract class AppWithConfig extends App { private _changes: { [key: string]: any } = Object.create(null); @@ -23,16 +26,25 @@ export abstract class AppWithConfig extends A } protected onBind(me: this) { - DOM.listenAll('input[type=checkbox].setting', 'change', function(this: HTMLInputElement) { + DOM.listenAll('input[type=checkbox][data-setting]', 'change', function(this: HTMLInputElement) { return me.onInputChecked(this); }); - DOM.listenAll('input[type=text].setting, input:not([type]).setting', 'blur', function(this: HTMLInputElement) { + DOM.listenAll('input[type=text][data-setting], input:not([type])[data-setting]', 'blur', function( + this: HTMLInputElement + ) { return me.onInputBlurred(this); }); - DOM.listenAll('input[type=text].setting, input:not([type]).setting', 'focus', function(this: HTMLInputElement) { + DOM.listenAll('input[type=text][data-setting], input:not([type])[data-setting]', 'focus', function( + this: HTMLInputElement + ) { return me.onInputFocused(this); }); - DOM.listenAll('select.setting', 'change', function(this: HTMLSelectElement) { + DOM.listenAll('input[type=text][data-setting][data-setting-preview]', 'input', function( + this: HTMLInputElement + ) { + return me.onInputChanged(this); + }); + DOM.listenAll('select[data-setting]', 'change', function(this: HTMLSelectElement) { return me.onInputSelected(this); }); DOM.listenAll('.popup', 'mousedown', function(this: HTMLElement, e: Event) { @@ -95,6 +107,14 @@ export abstract class AppWithConfig extends A this.applyChanges(); } + protected onInputChanged(element: HTMLInputElement) { + if (this._updating) return; + + for (const el of document.querySelectorAll(`span[data-setting-preview="${element.name}"]`)) { + this.updatePreview(el, element.value); + } + } + protected onInputChecked(element: HTMLInputElement) { if (this._updating) return; @@ -102,7 +122,7 @@ export abstract class AppWithConfig extends A `${this.appName}.onInputChecked: name=${element.name}, checked=${element.checked}, value=${element.value}` ); - switch (element.dataset.type) { + switch (element.dataset.settingType) { case 'object': { const props = element.name.split('.'); const settingName = props.splice(0, 1)[0]; @@ -140,7 +160,7 @@ export abstract class AppWithConfig extends A if (element.checked) { this._changes[element.name] = fromCheckboxValue(element.value); } else { - this._changes[element.name] = false; + this._changes[element.name] = element.dataset.valueOff == null ? false : element.dataset.valueOff; } break; @@ -193,7 +213,7 @@ export abstract class AppWithConfig extends A this.log(`${this.appName}.onTokenClicked: id=${element.id}`); - const setting = element.closest('.settings-group__setting'); + const setting = element.closest('.setting'); if (setting == null) return; const input = setting.querySelector('input[type=text], input:not([type])'); @@ -253,27 +273,34 @@ export abstract class AppWithConfig extends A this._updating = true; try { - for (const el of document.querySelectorAll('input[type=checkbox].setting')) { - const checked = - el.dataset.type === 'array' - ? (this.getSettingValue(el.name) || []).includes(el.value) - : this.getSettingValue(el.name) || false; - el.checked = checked; + for (const el of document.querySelectorAll('input[type=checkbox][data-setting]')) { + if (el.dataset.settingType === 'array') { + el.checked = (this.getSettingValue(el.name) || []).includes(el.value); + } else if (el.dataset.valueOff != null) { + const value = this.getSettingValue(el.name); + el.checked = el.dataset.valueOff !== value; + } else { + el.checked = this.getSettingValue(el.name) || false; + } } for (const el of document.querySelectorAll( - 'input[type=text].setting, input:not([type]).setting' + 'input[type=text][data-setting], input:not([type])[data-setting]' )) { el.value = this.getSettingValue(el.name) || ''; } - for (const el of document.querySelectorAll('select.setting')) { + for (const el of document.querySelectorAll('select[data-setting]')) { const value = this.getSettingValue(el.name); const option = el.querySelector(`option[value='${value}']`); if (option != null) { option.selected = true; } } + + for (const el of document.querySelectorAll('span[data-setting-preview]')) { + this.updatePreview(el); + } } finally { this._updating = false; } @@ -317,6 +344,25 @@ export abstract class AppWithConfig extends A el.classList.toggle('hidden', !this.evaluateStateExpression(el.dataset.visibility!, state)); } } + + private updatePreview(el: HTMLSpanElement, value?: string) { + switch (el.dataset.settingPreviewType) { + case 'date': + if (value === undefined) { + value = this.getSettingValue(el.dataset.settingPreview!); + } + + if (value == null || value.length === 0) { + value = el.dataset.settingPreviewDefault; + } + + el.innerText = value == null ? '' : dateFormatter.format(value); + break; + + default: + break; + } + } } function ensureIfBoolean(value: string | boolean): string | boolean { diff --git a/src/webviews/apps/shared/theme.ts b/src/webviews/apps/shared/theme.ts index 287a4d1..fa903e3 100644 --- a/src/webviews/apps/shared/theme.ts +++ b/src/webviews/apps/shared/theme.ts @@ -53,6 +53,7 @@ export function initializeAndWatchThemeColors() { bodyStyle.setProperty('--color-foreground', color); bodyStyle.setProperty('--color-foreground--85', opacity(color, 85)); bodyStyle.setProperty('--color-foreground--75', opacity(color, 75)); + bodyStyle.setProperty('--color-foreground--65', opacity(color, 65)); bodyStyle.setProperty('--color-foreground--50', opacity(color, 50)); color = computedStyle.getPropertyValue('--vscode-focusBorder').trim(); diff --git a/src/webviews/apps/welcome/index.html b/src/webviews/apps/welcome/index.html index a1caaa1..5320efb 100644 --- a/src/webviews/apps/welcome/index.html +++ b/src/webviews/apps/welcome/index.html @@ -1,526 +1,584 @@ - - - + + + - - -
-
-
- - - -

- GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to - visualize code authorship at a glance via Git blame annotations and code lens, - seamlessly navigate and explore Git repositories, gain valuable insights via - powerful comparison commands, and so much more. -

-
+ + +
+
+ + + +

+ GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to + visualize code authorship at a glance via Git blame annotations and code lens, + seamlessly navigate and explore Git repositories, gain valuable insights via powerful + comparison commands, and so much more. +

+
-
-

- GitLens is - an - open-source - extension for Visual Studio Code created by - Eric Amodio. -

-

- GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when - a line or code block was changed. Jump back through history to gain further insights as - to how and why the code evolved. Effortlessly explore the history and evolution of a codebase. - Dive right in and see how GitLens can help! -

-

- While GitLens is powerful and feature rich, it is also highly customizable to meet your - specific needs — find code lens intrusive or the current line blame annotation distracting - — no problem, it is quick and easy to turn them off or change how they behave via the - built-in - GitLens Settings - editor, an interactive editor covering many of GitLens' powerful settings. While for more - advanced customizations, refer to the - GitLens docs - and edit your - User Settings. -

-
+
+

+ GitLens is an + open-source + extension for Visual Studio Code created by + Eric Amodio. +

+

+ GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a + line or code block was changed. Jump back through history to gain further insights as to how + and why the code evolved. Effortlessly explore the history and evolution of a codebase. Dive right + in and see how GitLens can help! +

-
-
- Support GitLens ❤ -
-
- Configure GitLens -

Don't miss how easy it is to configure GitLens!

-
-
+
+
+ Support GitLens ❤ +

+ While GitLens is generously offered to everyone free of charge, if you find it useful, + please consider supporting it. +

+
+
+
-
-
-
-

- What's New in GitLens 9.9 -

-

- See the - release notes - for the full set of changes -

-
- - -
+
+
+

+ Welcome to GitLens 10 +

+

+ GitLens, while powerful and feature rich, is also highly customizable to meet your + needs. Do you find code lens intrusive or the current line blame annotation distracting — + no problem, quickly turn them off or change how they behave using the options below. +

-
    -
  • - 9.9.3 - AUGUST  2019 -
    -
    • +

    + Quick Setup +

    +

    + For more options, use the interactive + GitLens Settings + editor +

    +
-
  • - NEWAdds an _Add - Remote_ command to the _Remotes_ node of the _Repositories_ view — closes - #694 - — thanks to - PR #802 - by Zach Boyle (@zaboyle) +
    +
    +
    +
    + + + + + +
    +

    + Adds an unobtrusive blame annotation at the end of the current line +

    +
    +
    +
    + + + +
    +
    -
    -
    • -
  • - IMPROVEDReverses the - order of comparisons in the _Compare_ view for consistent comparisons results -
    -
    • -
  • - FIXEDFixes - #812 - — Regression in 9.9.2: Clicking changed file in Repository Browser opens diff - view between WorkingTree <-> WorkingTree, not index -
    -
    • +
    +
    +
    +
    + + + + + +
    +

    + Adds authorship code lens to the top of files and on code blocks +

    +
    +
    +
    + + + + -
  • - 9.9.2 - AUGUST  2019 -
    -
    • + + + -
  • - NEWAdds a - Checkout command to the current branch in the Repositories view which - opens a quick pick menu to choose a new branch to checkout to -
    -
    • -
  • - FIXEDFixes - #806 - — file diff in two-dot branch compare should only show the changes in one - branch -
    -
    • -
  • - FIXEDFixes - #756 - — Merge commit shows only the changes from the last commit on those files -
    -
    • -
  • - FIXEDFixes - #809 - — Wrong commit diff in file history -
    -
    • -
  • - FIXEDFixes - #685 - — GitLens not loading for a single repository -
    -
    • -
  • - FIXEDFixes - #789 - — Line blame annotations not working when vscode root is home dir and .gnupg - dir is inaccessible -
    -
    • -
  • - FIXEDFixes - #649 - — GitLens can't see the remote but git can -
    -
    • -
  • - FIXEDFixes - #798 - — git pull/fetch all repositories -
    -
    • -
  • - FIXEDFixes - #805 - — Version 9.9.1 breaks working tree comparison -
    -
    • -
  • - FIXEDFixes an issue - where the GitLens Compare view was shown when using the - Select for Compare command in the Repositories view -
    -
    • + + + +
    +
    -
  • - 9.9.1 - JULY  2019 -
    -
    • +
    +
    +
    +
    + + + + + +
    +

    + Adds a Git blame annotation about the current line to the status bar +

    +
    +
    +
    + + + +
    +
    -
  • - FIXEDFixes - #797 - — Branch diff against master shows incorrect files in two-dot mode -
    -
    • +
    +
    +
    +

    + Dates & Times + + + +

    +
    -
  • - 9.9.0 - JULY  2019 -
    -
    • +
    +
    + + +
    + + +
    -
  • - NEWAdds guided - (step-by-step) access to common Git commands (and their flags) via the all-new - Git Commands command (gitlens.gitCommands) -
    - Quickly navigate and execute Git commands through easy-to-use menus where each - command requires an explicit confirm step before executing -
    -
    • -
  • - NEWAdds - Open All Changes, Open All Changes with Working Tree, - Open Files, and Open Revisions commands to files changed nodes in the - views — closes - #760 -
    -
    • -
  • - NEWAdds working tree - comparison support to the - Compare Current Branch with <branch, tag, or ref> node within each - repository in the Repositories view -
    -

    - Adds a Switch to Working Tree Comparison command or - Switch to Branch Comparison command to the - Compare Current Branch with <branch, tag, or ref> node -

    -

    - Changes gitlens.views.repositories.showBranchComparison to also - specify the default type of comparison — either with the current - branch or the working tree -

    -
    -
    • -
  • - NEWAdds - Switch to Two-dot Comparison and - Switch to Three-dot Comparison commands to specify whether to use the - symmetric difference (three-dot) notation or the range (two-dot) notation for the - comparison — applies to all comparisons in the views -
    -
    • -
  • - NEWAdds a new - ${tips} format token to show an indicator if the commit is a tip of - any branches or tags — closes - #792 -
    -
    • -
  • - IMPROVEDImproves - performance and memory consumption -
    -
    • -
  • - IMPROVEDChanges the - Checkout command on remote branches to create and checkout a new local branch - rather than checkout a detached HEAD — closes - #709 -
    -
    • -
  • - IMPROVEDChanges - folders in the views to expand by default when using Tree Layout -
    -
    • -
  • - FIXEDFixes - #791 - — Notification of unstashed changes in working directory on failed checkout -
    -
    • -
  • - FIXEDFixes - #795 - — Commit quick access icons replaced with open file actions in File History - View -
    -
    • -
  • - FIXEDFixes issue with - the JSON schema of a configuration setting -
    -
    • - -
    -
    -
    -
    -

    Sponsored by

    - - - - - +
    +
    +
    + + + + + +
    + Example date: + + +
    -

    Show Your Support  ❤

    -

    - While GitLens is generously offered to everyone free of charge, if you find it useful, - please consider supporting it. -

    -
    - Become a Sponsor - Donate via PayPal - Donate via Cash App -
    - -
    -
    -

    Help

    - -
    -
    -

    Resources

    - -
    -
    -
    -
    -
    - #{endOfBody} - +
    +
    + + + + + +
    + Example short date: + + +
    +
    +
    + + +
    +
    +
    +

    + Views + + + +

    +
    + +

    + GitLens views can be configured to be shown in different side bar layouts to best match your + workflow. You can easily change the default layout (where all views are shown together on + the GitLens side bar) below +

    + +
    + Default Layout + Source Control Layout + Contextual Layout +
    + +
    +
    +
    + + + + + +
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    + +
    +
    + Support GitLens ❤ +

    + While GitLens is generously offered to everyone free of charge, if you find it useful, please + consider supporting it. +

    +
    +
    +

    Sponsors

    + + + + + +
    +
    +

    Help

    + +
    +
    +

    Resources

    + +
    +
    + + #{endOfBody} + diff --git a/src/webviews/helpers.ts b/src/webviews/helpers.ts new file mode 100644 index 0000000..b3fbfac --- /dev/null +++ b/src/webviews/helpers.ts @@ -0,0 +1,54 @@ +'use strict'; +import { ConfigurationTarget } from 'vscode'; +import { configuration, ViewLocation } from '../configuration'; + +export function applyViewLayoutPreset(preset: 'contextual' | 'default' | 'scm') { + let repositories; + let histories; + let compareAndSearch; + switch (preset) { + case 'contextual': + repositories = ViewLocation.SourceControl; + histories = ViewLocation.Explorer; + compareAndSearch = ViewLocation.GitLens; + break; + case 'default': + repositories = ViewLocation.GitLens; + histories = ViewLocation.GitLens; + compareAndSearch = ViewLocation.GitLens; + break; + case 'scm': + repositories = ViewLocation.SourceControl; + histories = ViewLocation.SourceControl; + compareAndSearch = ViewLocation.SourceControl; + break; + default: + return; + } + + configuration.update( + configuration.name('views')('repositories')('location').value, + repositories, + ConfigurationTarget.Global + ); + configuration.update( + configuration.name('views')('fileHistory')('location').value, + histories, + ConfigurationTarget.Global + ); + configuration.update( + configuration.name('views')('lineHistory')('location').value, + histories, + ConfigurationTarget.Global + ); + configuration.update( + configuration.name('views')('compare')('location').value, + compareAndSearch, + ConfigurationTarget.Global + ); + configuration.update( + configuration.name('views')('search')('location').value, + compareAndSearch, + ConfigurationTarget.Global + ); +} diff --git a/src/webviews/settingsWebview.ts b/src/webviews/settingsWebview.ts index 91ff7d1..7af7dbe 100644 --- a/src/webviews/settingsWebview.ts +++ b/src/webviews/settingsWebview.ts @@ -1,7 +1,7 @@ 'use strict'; -import { commands, ConfigurationTarget, Disposable, workspace } from 'vscode'; +import { commands, Disposable, workspace } from 'vscode'; import { Commands } from '../commands'; -import { Config, configuration, ViewLocation } from '../configuration'; +import { Config, configuration } from '../configuration'; import { IpcMessage, onIpcCommand, @@ -10,6 +10,7 @@ import { SettingsState } from './protocol'; import { WebviewBase } from './webviewBase'; +import { applyViewLayoutPreset } from './helpers'; const anchorRegex = /.*?#(.*)/; @@ -35,18 +36,18 @@ export class SettingsWebview extends WebviewBase { [, anchor] = match; } - return commands.registerCommand( - c, - () => { - this._pendingJumpToAnchor = anchor; - return this.show(); - }, - this - ); + return commands.registerCommand(c, () => this.onShowCommand(anchor), this); }) ); } + protected onShowCommand(anchor?: string) { + if (anchor) { + this._pendingJumpToAnchor = anchor; + } + super.onShowCommand(); + } + protected onMessageReceived(e: IpcMessage) { switch (e.method) { case ReadyCommandType.method: @@ -96,57 +97,6 @@ export class SettingsWebview extends WebviewBase { } registerCommands() { - return [commands.registerCommand(`${this.id}.applyViewLayoutPreset`, this.applyViewLayoutPreset, this)]; - } - - private applyViewLayoutPreset(preset: 'contextual' | 'default' | 'scm') { - let repositories; - let histories; - let compareAndSearch; - switch (preset) { - case 'contextual': - repositories = ViewLocation.SourceControl; - histories = ViewLocation.Explorer; - compareAndSearch = ViewLocation.GitLens; - break; - case 'default': - repositories = ViewLocation.GitLens; - histories = ViewLocation.GitLens; - compareAndSearch = ViewLocation.GitLens; - break; - case 'scm': - repositories = ViewLocation.SourceControl; - histories = ViewLocation.SourceControl; - compareAndSearch = ViewLocation.SourceControl; - break; - default: - return; - } - - configuration.update( - configuration.name('views')('repositories')('location').value, - repositories, - ConfigurationTarget.Global - ); - configuration.update( - configuration.name('views')('fileHistory')('location').value, - histories, - ConfigurationTarget.Global - ); - configuration.update( - configuration.name('views')('lineHistory')('location').value, - histories, - ConfigurationTarget.Global - ); - configuration.update( - configuration.name('views')('compare')('location').value, - compareAndSearch, - ConfigurationTarget.Global - ); - configuration.update( - configuration.name('views')('search')('location').value, - compareAndSearch, - ConfigurationTarget.Global - ); + return [commands.registerCommand(`${this.id}.applyViewLayoutPreset`, applyViewLayoutPreset, this)]; } } diff --git a/src/webviews/webviewBase.ts b/src/webviews/webviewBase.ts index e3dc943..9e86060 100644 --- a/src/webviews/webviewBase.ts +++ b/src/webviews/webviewBase.ts @@ -41,10 +41,10 @@ export abstract class WebviewBase implements Disposable { private _disposablePanel: Disposable | undefined; private _panel: WebviewPanel | undefined; - constructor(showCommand: Commands, column?: ViewColumn) { + constructor(showCommand: Commands, private readonly _column?: ViewColumn) { this._disposable = Disposable.from( configuration.onDidChange(this.onConfigurationChanged, this), - commands.registerCommand(showCommand, () => this.show(column), this) + commands.registerCommand(showCommand, this.onShowCommand, this) ); } @@ -65,6 +65,10 @@ export abstract class WebviewBase implements Disposable { this._disposablePanel && this._disposablePanel.dispose(); } + protected onShowCommand() { + this.show(this._column); + } + private onConfigurationChanged(e: ConfigurationChangeEvent) { this.notifyDidChangeConfiguration(); } diff --git a/src/webviews/welcomeWebview.ts b/src/webviews/welcomeWebview.ts index 5bfa852..7f7df55 100644 --- a/src/webviews/welcomeWebview.ts +++ b/src/webviews/welcomeWebview.ts @@ -1,8 +1,10 @@ 'use strict'; +import { commands } from 'vscode'; import { Commands } from '../commands'; import { Container } from '../container'; import { WelcomeState } from './protocol'; import { WebviewBase } from './webviewBase'; +import { applyViewLayoutPreset } from './helpers'; export class WelcomeWebview extends WebviewBase { constructor() { @@ -21,6 +23,10 @@ export class WelcomeWebview extends WebviewBase { return 'Welcome to GitLens'; } + registerCommands() { + return [commands.registerCommand(`${this.id}.applyViewLayoutPreset`, applyViewLayoutPreset, this)]; + } + renderEndOfBody() { const bootstrap: WelcomeState = { config: Container.config