From 1d1a189b9175924da4b2d6f37af3168f45b6344a Mon Sep 17 00:00:00 2001 From: Keith Daulton Date: Tue, 12 Sep 2023 12:14:37 -0400 Subject: [PATCH] Updates pin snooze action styles --- .../apps/plus/focus/components/common.css.ts | 123 ++++++++++++++++ .../apps/plus/focus/components/gk-issue-row.ts | 118 +++------------ .../plus/focus/components/gk-pull-request-row.ts | 158 ++++----------------- src/webviews/apps/plus/focus/focus.scss | 1 + 4 files changed, 171 insertions(+), 229 deletions(-) create mode 100644 src/webviews/apps/plus/focus/components/common.css.ts diff --git a/src/webviews/apps/plus/focus/components/common.css.ts b/src/webviews/apps/plus/focus/components/common.css.ts new file mode 100644 index 0000000..9e08582 --- /dev/null +++ b/src/webviews/apps/plus/focus/components/common.css.ts @@ -0,0 +1,123 @@ +import { css } from 'lit'; + +export const rowBaseStyles = css` + :host { + display: block; + } + + p { + margin: 0; + } + + a { + color: var(--vscode-textLink-foreground); + text-decoration: none; + } + a:hover { + text-decoration: underline; + } + a:focus { + outline: 1px solid var(--vscode-focusBorder); + outline-offset: -1px; + } + + .actions gk-tooltip { + display: inline-block; + } + + .actions a { + box-sizing: border-box; + display: inline-flex; + justify-content: center; + align-items: center; + width: 3.2rem; + height: 3.2rem; + border-radius: 0.5rem; + color: inherit; + padding: 0.2rem; + vertical-align: text-bottom; + text-decoration: none; + cursor: pointer; + } + .actions a:hover { + background-color: var(--vscode-toolbar-hoverBackground); + } + .actions a:active { + background-color: var(--vscode-toolbar-activeBackground); + } + .actions a[tabindex='-1'] { + opacity: 0.5; + cursor: default; + } + + .actions a code-icon { + font-size: 1.6rem; + } + + .indicator-info { + color: var(--vscode-problemsInfoIcon-foreground); + } + .indicator-warning { + color: var(--vscode-problemsWarningIcon-foreground); + } + .indicator-error { + color: var(--vscode-problemsErrorIcon-foreground); + } + .indicator-neutral { + color: var(--color-alert-neutralBorder); + } + + .row-type { + --gk-badge-outline-padding: 0.3rem 0.8rem; + --gk-badge-font-size: 1.1rem; + opacity: 0.4; + vertical-align: middle; + } + + .title { + font-size: 1.4rem; + } + + .add-delete { + margin-left: 0.4rem; + margin-right: 0.2rem; + } + + .key { + z-index: 1; + position: relative; + } + + .date { + display: inline-block; + min-width: 1.6rem; + } + + .icon { + box-sizing: border-box; + display: inline-flex; + justify-content: center; + align-items: center; + width: 2.4rem; + height: 2.4rem; + } + + .pin { + color: inherit; + text-decoration: none; + cursor: pointer; + opacity: 0.4; + } + .pin:hover { + opacity: 0.64; + text-decoration: none; + } + + gk-focus-row:not(:hover):not(:focus-within) .pin:not(.is-active) { + opacity: 0; + } + + .pin.is-active { + opacity: 1; + } +`; diff --git a/src/webviews/apps/plus/focus/components/gk-issue-row.ts b/src/webviews/apps/plus/focus/components/gk-issue-row.ts index 30ab7ab..e451f84 100644 --- a/src/webviews/apps/plus/focus/components/gk-issue-row.ts +++ b/src/webviews/apps/plus/focus/components/gk-issue-row.ts @@ -15,98 +15,14 @@ import { when } from 'lit/directives/when.js'; import type { IssueMember, IssueShape } from '../../../../../git/models/issue'; import { elementBase } from '../../../shared/components/styles/lit/base.css'; import { repoBranchStyles } from './branch-tag.css'; +import { rowBaseStyles } from './common.css'; import { dateAgeStyles } from './date-styles.css'; import { themeProperties } from './gk-theme.css'; import { fromDateRange } from './helpers'; @customElement('gk-issue-row') export class GkIssueRow extends LitElement { - static override styles = [ - themeProperties, - elementBase, - dateAgeStyles, - repoBranchStyles, - css` - :host { - display: block; - } - - p { - margin: 0; - } - - a { - color: var(--vscode-textLink-foreground); - text-decoration: none; - } - a:hover { - text-decoration: underline; - } - a:focus { - outline: 1px solid var(--vscode-focusBorder); - outline-offset: -1px; - } - - .actions { - } - - .actions a { - box-sizing: border-box; - display: inline-flex; - justify-content: center; - align-items: center; - width: 3.2rem; - height: 3.2rem; - border-radius: 0.5rem; - color: inherit; - padding: 0.2rem; - vertical-align: text-bottom; - text-decoration: none; - cursor: pointer; - } - .actions a:hover { - background-color: var(--vscode-toolbar-hoverBackground); - } - .actions a:active { - background-color: var(--vscode-toolbar-activeBackground); - } - - .actions a code-icon { - font-size: 1.6rem; - } - - .row-type { - --gk-badge-outline-padding: 0.3rem 0.8rem; - --gk-badge-font-size: 1.1rem; - opacity: 0.5; - vertical-align: middle; - } - - .title { - font-size: 1.4rem; - } - - .date { - display: inline-block; - min-width: 1.6rem; - } - - .pin { - opacity: 0.4; - } - .pin:hover { - opacity: 0.64; - } - - gk-focus-row:not(:hover):not(:focus-within) .pin:not(.is-active) { - opacity: 0; - } - - .pin.is-active { - opacity: 1; - } - `, - ]; + static override styles = [themeProperties, elementBase, dateAgeStyles, repoBranchStyles, rowBaseStyles, css``]; @property({ type: Number }) public rank?: number; @@ -155,24 +71,29 @@ export class GkIssueRow extends LitElement { - + > Pin - + > Mark for Later + + +

@@ -221,9 +142,6 @@ export class GkIssueRow extends LitElement { )} - - -

@@ -241,7 +159,8 @@ export class GkIssueRow extends LitElement { `; } - onSnoozeClick(_e: Event) { + onSnoozeClick(e: Event) { + e.preventDefault(); this.dispatchEvent( new CustomEvent('snooze-item', { detail: { item: this.issue!, snooze: this.snoozed }, @@ -249,7 +168,8 @@ export class GkIssueRow extends LitElement { ); } - onPinClick(_e: Event) { + onPinClick(e: Event) { + e.preventDefault(); this.dispatchEvent( new CustomEvent('pin-item', { detail: { item: this.issue!, pin: this.pinned }, diff --git a/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts b/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts index 2705e63..0580640 100644 --- a/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts +++ b/src/webviews/apps/plus/focus/components/gk-pull-request-row.ts @@ -16,126 +16,14 @@ import { when } from 'lit/directives/when.js'; import type { PullRequestMember, PullRequestShape } from '../../../../../git/models/pullRequest'; import { elementBase } from '../../../shared/components/styles/lit/base.css'; import { repoBranchStyles } from './branch-tag.css'; +import { rowBaseStyles } from './common.css'; import { dateAgeStyles } from './date-styles.css'; import { themeProperties } from './gk-theme.css'; import { fromDateRange } from './helpers'; @customElement('gk-pull-request-row') export class GkPullRequestRow extends LitElement { - static override styles = [ - themeProperties, - elementBase, - dateAgeStyles, - repoBranchStyles, - css` - :host { - display: block; - } - - p { - margin: 0; - } - - a { - color: var(--vscode-textLink-foreground); - text-decoration: none; - } - a:hover { - text-decoration: underline; - } - a:focus { - outline: 1px solid var(--vscode-focusBorder); - outline-offset: -1px; - } - - .actions gk-tooltip { - display: inline-block; - } - - .actions a { - box-sizing: border-box; - display: inline-flex; - justify-content: center; - align-items: center; - width: 3.2rem; - height: 3.2rem; - border-radius: 0.5rem; - color: inherit; - padding: 0.2rem; - vertical-align: text-bottom; - text-decoration: none; - cursor: pointer; - } - .actions a:hover { - background-color: var(--vscode-toolbar-hoverBackground); - } - .actions a:active { - background-color: var(--vscode-toolbar-activeBackground); - } - .actions a[tabindex='-1'] { - opacity: 0.5; - cursor: default; - } - - .actions a code-icon { - font-size: 1.6rem; - } - - .indicator-info { - color: var(--vscode-problemsInfoIcon-foreground); - } - .indicator-warning { - color: var(--vscode-problemsWarningIcon-foreground); - } - .indicator-error { - color: var(--vscode-problemsErrorIcon-foreground); - } - .indicator-neutral { - color: var(--color-alert-neutralBorder); - } - - .row-type { - --gk-badge-outline-padding: 0.3rem 0.8rem; - --gk-badge-font-size: 1.1rem; - opacity: 0.4; - vertical-align: middle; - } - - .title { - font-size: 1.4rem; - } - - .add-delete { - margin-left: 0.4rem; - margin-right: 0.2rem; - } - - .key { - z-index: 1; - position: relative; - } - - .date { - display: inline-block; - min-width: 1.6rem; - } - - .pin { - opacity: 0.4; - } - .pin:hover { - opacity: 0.64; - } - - gk-focus-row:not(:hover):not(:focus-within) .pin:not(.is-active) { - opacity: 0; - } - - .pin.is-active { - opacity: 1; - } - `, - ]; + static override styles = [themeProperties, elementBase, dateAgeStyles, repoBranchStyles, rowBaseStyles, css``]; @property({ type: Number }) public rank?: number; @@ -219,30 +107,37 @@ export class GkPullRequestRow extends LitElement { - + > ${this.pinned ? 'Unpinned' : 'Pin'} - + > ${this.snoozed ? 'Watch' : 'Mark for Later'} + + + ${when( this.indicator === 'changes', () => html` - + changes requested `, )} @@ -250,7 +145,9 @@ export class GkPullRequestRow extends LitElement { this.indicator === 'ready', () => html` - + approved and ready to merge `, )} @@ -258,7 +155,9 @@ export class GkPullRequestRow extends LitElement { this.indicator === 'conflicting', () => html` - + cannot be merged due to merge conflicts `, )} @@ -312,9 +211,6 @@ export class GkPullRequestRow extends LitElement { )} - - -
@@ -389,7 +285,8 @@ export class GkPullRequestRow extends LitElement { this.dispatchEvent(new CustomEvent('switch-branch', { detail: this.pullRequest! })); } - onSnoozeClick(_e: Event) { + onSnoozeClick(e: Event) { + e.preventDefault(); this.dispatchEvent( new CustomEvent('snooze-item', { detail: { item: this.pullRequest!, snooze: this.snoozed }, @@ -397,7 +294,8 @@ export class GkPullRequestRow extends LitElement { ); } - onPinClick(_e: Event) { + onPinClick(e: Event) { + e.preventDefault(); this.dispatchEvent( new CustomEvent('pin-item', { detail: { item: this.pullRequest!, pin: this.pinned }, diff --git a/src/webviews/apps/plus/focus/focus.scss b/src/webviews/apps/plus/focus/focus.scss index c514771..d1df998 100644 --- a/src/webviews/apps/plus/focus/focus.scss +++ b/src/webviews/apps/plus/focus/focus.scss @@ -39,6 +39,7 @@ body { --gk-tooltip-padding: 0.4rem 0.8rem; --gk-focus-background-color-hover: var(--background-05); --gk-divider-color: var(--background-05); + --gk-focus-row-pin-min-width: 52px; } .vscode-high-contrast,