From 5693a58588e89a37cb01a85086e81f4570e1e3e1 Mon Sep 17 00:00:00 2001 From: Eric Amodio Date: Fri, 30 Nov 2018 02:19:19 -0500 Subject: [PATCH] Revamps GitLens Welcome page Moves Support GitLens up in README Removes Support GitLens from Settings page --- README.md | 65 ++- src/ui/scss/main.scss | 85 ++-- src/ui/settings/index.html | 51 +- src/ui/shared/app-base.ts | 1 + src/ui/welcome/index.html | 1164 +++++++++++++++----------------------------- 5 files changed, 490 insertions(+), 876 deletions(-) diff --git a/README.md b/README.md index 66d255e..6951af9 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,15 @@
+# Support GitLens + +While GitLens is generously offered to everyone free of charge, if you find it useful, please consider [**supporting**](https://gitlens.amod.io/#support-gitlens) it. + +- [**Become a Sponsor**](https://www.patreon.com/eamodio 'Become a sponsor on Patreon') — join the growing group of generous [backers](https://github.com/eamodio/vscode-gitlens/blob/master/BACKERS.md) +- [**Donate via PayPal**](https://www.paypal.me/eamodio 'Donate via PayPal') or [**Donate via Cash App**](https://cash.me/$eamodio 'Donate via Cash App') + +Also please [write a review](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#review-details 'Write a review'), [star or fork me on GitHub](https://github.com/eamodio/vscode-gitlens 'Star or fork me on GitHub'), and [follow me on Twitter](https://twitter.com/eamodio 'Follow me on Twitter') + # What's new in GitLens 9 ## 9.0 — November 2018 @@ -55,29 +64,28 @@ See the [release notes](https://github.com/eamodio/vscode-gitlens/blob/master/CH # GitLens [GitLens](http://gitlens.amod.io 'Learn more about GitLens') is an [open-source](https://github.com/eamodio/vscode-gitlens 'Open GitLens on GitHub') extension for [Visual Studio Code](https://code.visualstudio.com) created by [Eric Amodio](http://www.amod.io 'Learn more about Eric'). -While GitLens is generously offered to everyone free of charge, if you find it useful please consider [supporting](#support-gitlens 'Support GitLens') it. ❤ -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. Explore the history and evolution of a codebase. +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. Explore the history and evolution of a codebase. -Here are just some of the features that GitLens provides, +While GitLens is **powerful and feature rich**, it is also [highly customizable](#gitlens-settings- 'Jump to the GitLens settings docs') 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](#configuration 'Jump to Configuration'), an **interactive editor** covering many of GitLens' powerful settings. While for more advanced customizations, refer to the [GitLens settings docs](#gitlens-settings- 'Jump to the GitLens settings docs') and edit your vscode [user settings](https://code.visualstudio.com/docs/getstarted/settings 'Open User settings'). -- an unobtrusive [current line blame](#current-line-blame- 'Jump to the Current Line Blame') annotation at the end of the line with detailed blame information accessible via [hovers](#hovers- 'Jump to Hovers') -- on-demand [gutter blame](#gutter-blame- 'Jump to the Gutter Blame') annotations, including a heatmap, for the whole file -- [authorship code lens](#code-lens- 'Jump to the Code Lens') showing the most recent commit and # of authors to the top of files and/or on code blocks -- on-demand [gutter heatmap](#gutter-heatmap- 'Jump to the Gutter Heatmap') annotations to show how recently lines were changed, relative to all the other changes in the file and to now (hot vs. cold) -- on-demand [recent changes](#recent-changes- 'Jump to the Recent Changes') annotations to highlight lines changed by the most recent commit -- a [status bar blame](#status-bar-blame- 'Jump to the Status Bar Blame') annotation showing author and date for the current line -- many rich Side Bar views - - a [_Repositories_ view](#repositories-view- 'Jump to the Repositories view') to visualize, navigate, and explore Git repositories - - a [_File History_ view](#file-history-view- 'Jump to the File History view') to visualize, navigate, and explore the revision history of the current file - - a [_Line History_ view](#line-history-view- 'Jump to the Line History view') to visualize, navigate, and explore the revision history of the selected lines of current file - - a [_Search Commits_ view](#search-commits-view- 'Jump to the Search Commits view') to search and explore commit histories by message, author, files, id, etc - - a [_Compare_ view](#compare-view- 'Jump to the Compare view') to visualize comparisons between branches, tags, commits, and more -- many [powerful commands](#navigate-and-explore- 'Jump to the Navigate and Explorer') for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc -- user-defined [modes](#modes- 'Jump to the Modes') for quickly toggling between sets of settings -- and so much [more](#and-more- 'Jump to More') +Here are just some of the **features** that GitLens provides, -GitLens is powerful, feature rich, and also [highly customizable](#gitlens-settings- 'Jump to the GitLens settings docs') 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](#configuration 'Jump to Configuration'), an interactive editor covering many of GitLens' powerful settings. While for more advanced customizations, refer to the [GitLens settings docs](#gitlens-settings- 'Jump to the GitLens settings docs') and edit your vscode [user settings](https://code.visualstudio.com/docs/getstarted/settings 'Open User settings'). +- an unobtrusive [**current line blame**](#current-line-blame- 'Jump to the Current Line Blame') annotation at the end of the line with detailed blame information accessible via [**hovers**](#hovers- 'Jump to Hovers') +- on-demand [**gutter blame**](#gutter-blame- 'Jump to the Gutter Blame') annotations, including a heatmap, for the whole file +- [**authorship code lens**](#code-lens- 'Jump to the Code Lens') showing the most recent commit and # of authors to the top of files and/or on code blocks +- on-demand [**gutter heatmap**](#gutter-heatmap- 'Jump to the Gutter Heatmap') annotations to show how recently lines were changed, relative to all the other changes in the file and to now (hot vs. cold) +- on-demand [**recent changes**](#recent-changes- 'Jump to the Recent Changes') annotations to highlight lines changed by the most recent commit +- a [**status bar blame**](#status-bar-blame- 'Jump to the Status Bar Blame') annotation showing author and date for the current line +- many rich Side Bar views + - a [**_Repositories_ view**](#repositories-view- 'Jump to the Repositories view') to visualize, navigate, and explore Git repositories + - a [**_File History_ view**](#file-history-view- 'Jump to the File History view') to visualize, navigate, and explore the revision history of the current file + - a [**_Line History_ view**](#line-history-view- 'Jump to the Line History view') to visualize, navigate, and explore the revision history of the selected lines of current file + - a [**_Search Commits_ view**](#search-commits-view- 'Jump to the Search Commits view') to search and explore commit histories by message, author, files, id, etc + - a [**_Compare_ view**](#compare-view- 'Jump to the Compare view') to visualize comparisons between branches, tags, commits, and more +- many [**powerful commands**](#navigate-and-explore- 'Jump to the Navigate and Explorer') for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc +- user-defined [**modes**](#modes- 'Jump to the Modes') for quickly toggling between sets of settings +- and so much [**more**](#and-more- 'Jump to More')


@@ -85,30 +93,13 @@ GitLens is powerful, feature rich, and also [highly customizable](#gitlens-setti

-# Support GitLens - -While GitLens is generously offered to everyone free of charge, if you find it useful please consider supporting it. - -I've been building GitLens in my spare time1 for over 2 years now. -From its very humble beginnings, GitLens has grown wildly beyond my expectations — in both its reach as well as its demands on my time and attention. - -To my incredible backers — thank you so much for your contributions. I am truly humbled by your generosity and support. - -### Show Your Support ❤ - -Please join in supporting GitLens by considering the following: - -- [Become a Sponsor](https://www.patreon.com/eamodio 'Become a sponsor on Patreon') — join the growing group of generous [backers](https://github.com/eamodio/vscode-gitlens/blob/master/BACKERS.md) -- [Donate via PayPal](https://www.paypal.me/eamodio 'Donate via PayPal') or [Donate via Cash App](https://cash.me/$eamodio 'Donate via Cash App') -- [Write a review](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#review-details 'Write a review'), [Star or Fork me on GitHub](https://github.com/eamodio/vscode-gitlens 'Star or fork me on GitHub'), and [Follow me on Twitter](https://twitter.com/eamodio 'Follow me on Twitter') - # Configuration

GitLens Interactive Settings

-GitLens has a built-in interactive settings editor which provides an easy-to-use interface to configure many of GitLens' powerful features. It can be accessed via the _Open Settings_ (`gitlens.showSettingsPage`) command from the [_Command Palette_](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette). +GitLens has a built-in **interactive settings editor** which provides an easy-to-use interface to configure many of GitLens' powerful features. It can be accessed via the _Open Settings_ (`gitlens.showSettingsPage`) command from the [_Command Palette_](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette). For more advanced customizations, refer to the [settings documentation](#gitlens-settings- 'Jump to the GitLens settings docs') below. diff --git a/src/ui/scss/main.scss b/src/ui/scss/main.scss index d119156..ee5259e 100644 --- a/src/ui/scss/main.scss +++ b/src/ui/scss/main.scss @@ -370,17 +370,29 @@ ul { } .button-group--support-gitlens-sidebar { - font-size: 0.8em; + margin-bottom: 1em; & .button { font-weight: 400; margin: 0.75em 0; + text-align: center; + width: 100%; + } +} + +.about { + font-size: 1em; + color: var(--color--75); + margin: 3em 1em; + + b { + color: var(--color--85); } } .changelog { border-radius: 1em; - margin: 2em 4em 2em 2em; + margin: 2em; .vscode-light & { background-color: var(--background-color--darken-05); @@ -401,6 +413,7 @@ ul { display: inline-block; font-size: 11px; font-weight: 600; + line-height: 1.7; margin-right: 1.25em; padding: 2px 5px; text-align: center; @@ -424,7 +437,7 @@ ul { } .changelog__date { - font-size: 0.8em; + font-size: 0.9em; font-variant: small-caps; font-weight: 600; margin-left: -7px; @@ -435,8 +448,9 @@ ul { .changelog__details { align-items: center; display: flex; + font-size: 0.9em; justify-content: center; - padding: 0 7em; + padding-left: 8em; position: relative; &:before { @@ -468,20 +482,19 @@ ul { } .changelog__image { - margin: 1em 0; + margin: 1em 0 0 0; max-width: 65%; } .changelog__list { flex: 100% 0 1; - font-size: 1.2em; + font-size: 1.1em; font-weight: 200; - line-height: 1.7; list-style-type: none; margin: 1em; & li { - margin-bottom: 0.5em; + margin-bottom: 1em; } & code { @@ -502,23 +515,9 @@ ul { } } -.changelog__scroller { - flex: 100% 0 0; - margin: 1.5em 0 0 0; - max-height: 400px; - overflow-y: auto; - - .vscode-dark & { - border-bottom: 1px solid rgba(255, 255, 255, 0.04); - } - - .vscode-light & { - border-bottom: 1px solid rgba(0, 0, 0, 0.05); - } -} - .changelog__title { flex: 100% 0 0; + font-size: 2em; text-align: center; } @@ -557,7 +556,7 @@ ul { display: flex; flex-wrap: wrap; justify-content: center; - margin-bottom: 3em; + margin: 3em 0; & p { margin-top: -1em; @@ -785,7 +784,7 @@ ul { display: flex; flex: 1 1 100%; justify-content: flex-end; - margin: 1.5em 208px 0 0; // 208px ~ the width of the sidebar + margin: 1.5em 174px 0 0; // 174px ~ the width of the sidebar white-space: nowrap; @media all and (max-width: 860px) { @@ -878,14 +877,15 @@ ul { .section-group__content { flex: auto 1 1; - margin-bottom: 100%; min-width: 0; } +.section-group__content--full-scroll { + margin-bottom: 100%; +} + .section-group__sidebar { align-self: flex-start; - margin: -6.4em 0 0 3em; - max-width: 179px; position: sticky; top: 0; z-index: 2; @@ -896,13 +896,17 @@ ul { } .section-group__sidebar--settings { + flex: 145px 0 0; + margin: -4em 0 0 3em; + @media all and (max-width: 860px) { display: none; } } .section-group__sidebar--welcome { - margin-right: 3em; + flex: 196px 0 0; + margin: 1em 0 0 0.5em; @media all and (max-width: 560px) { display: none; @@ -914,7 +918,7 @@ ul { font-weight: 200; p { - margin: 1em 0.25em; + margin: 0.5em 0.25em 1em 0.25em; } } @@ -999,6 +1003,21 @@ ul { } } +.settings-group__setting--small { + color: var(--color--75); + font-size: 0.8em; + margin-top: -0.75em; + + input[type='checkbox'] { + flex: 12px 0 0; + height: 12px; + margin: 0 0.75em 0 0; + position: relative; + top: 3px; + width: 12px; + } +} + .setting__hint { color: var(--color--50); font-size: 0.9em; @@ -1013,6 +1032,12 @@ ul { margin-top: 1em; } +.sidebar-group__message { + font-weight: 400; + opacity: 0.5; + text-align: center; +} + .sponsors { font-size: 0.8em; } diff --git a/src/ui/settings/index.html b/src/ui/settings/index.html index 79afd1d..1c58899 100644 --- a/src/ui/settings/index.html +++ b/src/ui/settings/index.html @@ -53,7 +53,7 @@ GitLens settings docsGitLens docs and edit your
-
+

@@ -2781,53 +2781,6 @@

-