Browse Source

Updates commit details to better match theming

main
Keith Daulton 2 years ago
parent
commit
58fc993c35
5 changed files with 43 additions and 20 deletions
  1. +2
    -4
      src/webviews/apps/commitDetails/commitDetails.html
  2. +0
    -4
      src/webviews/apps/commitDetails/commitDetails.scss
  3. +11
    -3
      src/webviews/apps/shared/components/commit/commit-stats.ts
  4. +1
    -1
      src/webviews/apps/shared/components/commit/file-change-item.ts
  5. +29
    -8
      src/webviews/apps/shared/components/webview-pane.ts

+ 2
- 4
src/webviews/apps/commitDetails/commitDetails.html View File

@ -65,10 +65,8 @@
</webview-pane>
<webview-pane class="commit-details__files" collapsable expanded>
<span slot="title"
>Files changed
<span class="commit-details__stats" data-region="stats"></span>
</span>
<span slot="title">Files changed </span>
<span slot="subtitle" data-region="stats"></span>
<ul class="change-list" data-region="files">
<li class="change-list__item commit-details__item-skeleton">
<skeleton-loader></skeleton-loader>

+ 0
- 4
src/webviews/apps/commitDetails/commitDetails.scss View File

@ -235,10 +235,6 @@ ul {
}
}
&__stats {
margin-left: 0.5rem;
}
// &__files {
// border-top: 1px solid var(--color-background--lighten-075);
// padding: {

+ 11
- 3
src/webviews/apps/shared/components/commit/commit-stats.ts View File

@ -8,7 +8,15 @@ export class CommitStats extends LitElement {
:host {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
vertical-align: middle;
}
.stat {
display: inline-flex;
flex-direction: row;
align-items: center;
}
.added {
@ -34,9 +42,9 @@ export class CommitStats extends LitElement {
override render() {
return html`
<span class="added"><code-icon icon="diff-added"></code-icon> ${this.added}</span>
<span class="modified"><code-icon icon="diff-modified"></code-icon> ${this.modified}</span>
<span class="deleted"><code-icon icon="diff-removed"></code-icon> ${this.removed}</span>
<span class="stat added"><code-icon icon="diff-added"></code-icon> ${this.added}</span>
<span class="stat modified"><code-icon icon="diff-modified"></code-icon> ${this.modified}</span>
<span class="stat deleted"><code-icon icon="diff-removed"></code-icon> ${this.removed}</span>
`;
}
}

+ 1
- 1
src/webviews/apps/shared/components/commit/file-change-item.ts View File

@ -96,7 +96,7 @@ export class FileChangeItem extends LitElement {
}
.change-list__path {
color: var(--color-background--lighten-50);
color: var(--vscode-descriptionForeground);
}
.change-list__actions {

+ 29
- 8
src/webviews/apps/shared/components/webview-pane.ts View File

@ -9,7 +9,6 @@ export class WebviewPane extends LitElement {
display: flex;
flex-direction: column;
background-color: var(--color-view-background);
color: var(--color-view-foreground);
}
* {
@ -20,7 +19,7 @@ export class WebviewPane extends LitElement {
flex: none;
display: flex;
background-color: var(--color-view-background);
color: var(--color-viewspan>class="o">-header-foreground);
color: var(--vscode-foreground);
border-top: 1px solid var(--vscode-panel-border);
}
@ -29,18 +28,34 @@ export class WebviewPane extends LitElement {
outline-offset: -1px;
}
.title {
.label {
appearance: none;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding: 0;
border: none;
text-align: left;
font-family: var(--font-family);
font-size: 1.1rem;
line-height: 2.2rem;
font-weight: bold;
height: 2.2rem;
background: transparent;
color: inherit;
cursor: pointer;
outline: none;
text-overflow: ellipsis;
}
.title {
font-weight: bold;
text-transform: uppercase;
}
.subtitle {
margin-left: 0.5rem;
color: var(--vscode-descriptionForeground);
}
.icon {
@ -50,8 +65,10 @@ export class WebviewPane extends LitElement {
.content {
overflow: auto;
/* scrollbar-gutter: stable; */
/*
scrollbar-gutter: stable;
box-shadow: #000000 0 0.6rem 0.6rem -0.6rem inset;
*/
padding-top: 0.6rem;
}
@ -68,17 +85,21 @@ export class WebviewPane extends LitElement {
renderTitle() {
if (!this.collapsable) {
return html`<div class="title">${this.title}</div>`;
return html`<div class="label">
<span class="title"><slot name="title">Section</slot></span>
<span class="subtitle"><slot name="subtitle"></slot></span>
</div>`;
}
return html`<button
type="button"
class="title"
class="label"
aria-controls="content"
aria-expanded=${this.expanded}
@click="${this.toggleExpanded}"
>
<code-icon class="icon" icon=${this.expanded ? 'chevron-down' : 'chevron-right'}></code-icon
><slot name="title">Section</slot>
><span class="title"><slot name="title">Section</slot></span>
<span class="subtitle"><slot name="subtitle"></slot></span>
</button>`;
}

Loading…
Cancel
Save