wlxsp
/
test1
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Adds sticky style to top content in commit details

main
Keith Daulton 2 years ago
parent
926961cd9a
commit
26cf19cbf3
2 changed files with 54 additions and 138 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +37
    -41
      src/webviews/apps/commitDetails/commitDetails.html
  2. +17
    -97
      src/webviews/apps/commitDetails/commitDetails.scss

+ 37
- 41
src/webviews/apps/commitDetails/commitDetails.html View File

@ -6,8 +6,6 @@
<body class="preload"> <body class="preload">
<div class="commit-detail-panel"> <div class="commit-detail-panel">
<!-- commitDetails:header -->
<!-- commitDetails:choices -->
<div class="commit-detail-panel__none" id="empty" aria-hidden="true"> <div class="commit-detail-panel__none" id="empty" aria-hidden="true">
<!-- <p><code-icon icon="warning"></code-icon> <span>No commit selected</span></p> --> <!-- <p><code-icon icon="warning"></code-icon> <span>No commit selected</span></p> -->
<p>Open a file with commit history or pick a specific commit to see commit details.</p> <p>Open a file with commit history or pick a specific commit to see commit details.</p>
@ -28,47 +26,45 @@
</p> --> </p> -->
</div> </div>
<main class="commit-details commit-detail-panel__main" id="main" tabindex="-1"> <main class="commit-details commit-detail-panel__main" id="main" tabindex="-1">
<div class="commit-details__commit">
<div class="commit-details__top">
<ul class="commit-details__authors" aria-label="Authors">
<li class="commit-details__author" data-region="author">
<skeleton-loader></skeleton-loader>
</li>
</ul>
<a
class="commit-details__commit-action"
href="#"
data-action="commit-actions-pin"
aria-label="Pin Commit to View"
title="Pin Commit to View"
><code-icon icon="pin" data-region="commit-pin"></code-icon
></a>
<a
class="commit-details__commit-action"
href="#"
data-action="commit-actions-sha"
aria-label="Copy SHA
<div class="commit-details__top">
<ul class="commit-details__authors" aria-label="Authors">
<li class="commit-details__author" data-region="author">
<skeleton-loader></skeleton-loader>
</li>
</ul>
<a
class="commit-details__commit-action"
href="#"
data-action="commit-actions-pin"
aria-label="Pin Commit to View"
title="Pin Commit to View"
><code-icon icon="pin" data-region="commit-pin"></code-icon
></a>
<a
class="commit-details__commit-action"
href="#"
data-action="commit-actions-sha"
aria-label="Copy SHA
[⌥] Pick Commit..." [⌥] Pick Commit..."
title="Copy SHA
title="Copy SHA
[⌥] Pick Commit..." [⌥] Pick Commit..."
>
<code-icon icon="git-commit"></code-icon>
<span class="commit-details__sha" data-region="shortsha"></span
></a>
<a
class="commit-details__commit-action"
href="#"
data-action="commit-actions-more"
aria-label="Show Commit Actions"
title="Show Commit Actions"
><code-icon icon="kebab-vertical"></code-icon
></a>
</div>
<div class="commit-details__message">
<p class="commit-details__message-text" data-region="message">
<skeleton-loader></skeleton-loader>
</p>
</div>
>
<code-icon icon="git-commit"></code-icon>
<span class="commit-details__sha" data-region="shortsha"></span
></a>
<a
class="commit-details__commit-action"
href="#"
data-action="commit-actions-more"
aria-label="Show Commit Actions"
title="Show Commit Actions"
><code-icon icon="kebab-vertical"></code-icon
></a>
</div>
<div class="commit-details__message">
<p class="commit-details__message-text" data-region="message">
<skeleton-loader></skeleton-loader>
</p>
</div> </div>
<webview-pane collapsable expanded data-region="rich-pane"> <webview-pane collapsable expanded data-region="rich-pane">

+ 17
- 97
src/webviews/apps/commitDetails/commitDetails.scss View File

@ -1,16 +1,10 @@
// @import '../shared/base';
// @import '../shared/buttons';
// @import '../shared/icons';
:root { :root {
--gitlens-gutter-width: 20px; --gitlens-gutter-width: 20px;
--gitlens-scrollbar-gutter-width: 10px; --gitlens-scrollbar-gutter-width: 10px;
--gitlens-view-background-color: #fafafa;
} }
// generic resets // generic resets
html { html {
// height: 100%;
font-size: 62.5%; font-size: 62.5%;
box-sizing: border-box; box-sizing: border-box;
font-family: var(--font-family); font-family: var(--font-family);
@ -25,7 +19,6 @@ html {
} }
body { body {
// height: 100%;
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-size); font-size: var(--font-size);
color: var(--color-foreground); color: var(--color-foreground);
@ -152,26 +145,21 @@ ul {
} }
.commit-details { .commit-details {
&__commit {
padding: {
// 1.5rem
left: var(--gitlens-gutter-width);
right: var(--gitlens-scrollbar-gutter-width);
}
// background-color: var(--color-background--lighten-05);
margin-bottom: 1.75rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
&__top { &__top {
position: sticky;
top: 0;
z-index: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
// gap: 0.5rem;
padding: {
top: 1rem;
left: var(--gitlens-gutter-width);
right: var(--gitlens-scrollbar-gutter-width);
bottom: 0.5rem;
}
background-color: var(--vscode-sideBar-background);
} }
&__message { &__message {
@ -179,6 +167,12 @@ ul {
border: 1px solid var(--vscode-input-border); border: 1px solid var(--vscode-input-border);
background: var(--vscode-input-background); background: var(--vscode-input-background);
padding: 0.5rem; padding: 0.5rem;
margin: {
top: 1rem;
left: var(--gitlens-gutter-width);
right: var(--gitlens-scrollbar-gutter-width);
bottom: 1.75rem;
}
} }
&__message-text { &__message-text {
@ -190,13 +184,6 @@ ul {
overflow-x: hidden; overflow-x: hidden;
max-height: 9rem; max-height: 9rem;
// @supports (-webkit-line-clamp: 6) {
// display: -webkit-box;
// -webkit-line-clamp: 6;
// -webkit-box-orient: vertical;
// overflow: hidden;
// }
strong { strong {
font-weight: 600; font-weight: 600;
font-size: 1.4rem; font-size: 1.4rem;
@ -207,7 +194,6 @@ ul {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// width: 20px;
height: 21px; height: 21px;
border-radius: 0.25em; border-radius: 0.25em;
color: inherit; color: inherit;
@ -226,7 +212,6 @@ ul {
} }
&__sha { &__sha {
// padding-top: 0.2rem;
margin: 0 0.5rem 0 0.25rem; margin: 0 0.5rem 0 0.25rem;
} }
@ -258,12 +243,6 @@ ul {
} }
} }
// &__files {
// border-top: 1px solid var(--color-background--lighten-075);
// padding: {
// top: 1.75rem;
// }
// }
&__file { &__file {
padding: { padding: {
left: var(--gitlens-gutter-width); left: var(--gitlens-gutter-width);
@ -302,67 +281,8 @@ ul {
} }
} }
&__header {
margin: {
top: 1rem;
bottom: 1.5rem;
}
}
&__title {
font-size: 2.4rem;
// FIXME: specificity hack
&-icon {
// color: var(--vscode-banner-iconForeground);
font-size: inherit !important;
}
}
&__nav {
border: 1px solid var(--color-button-secondary-background);
padding: 0.5rem;
margin: {
top: 1rem;
bottom: 1.5rem;
}
}
&__commit-count {
margin: {
top: 0;
bottom: 0.5rem;
}
}
&__commits {
}
&__commit {
& + & {
margin-top: 0.5rem;
}
}
&__commit-button {
appearance: none;
text-decoration: none;
border: none;
color: var(--color-button-foreground);
background-color: var(--color-button-secondary-background);
padding: 0.5rem;
display: flex;
align-items: center;
width: 100%;
gap: 0.5rem;
> :last-child {
margin-left: auto;
}
&[aria-current='true'] {
background-color: var(--color-button-background);
}
}
&__main { &__main {
padding: {
top: 1rem;
bottom: 1rem;
}
padding-bottom: 1rem;
} }
} }

Write Preview
Loading…
Cancel
Save